:root {
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-muted: #f1f5f9;
    --line: #e5eaf2;
    --line-strong: #d8e0ec;
    --ink: #0f172a;
    --text: #334155;
    --muted: #64748b;
    --faint: #94a3b8;
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --indigo: #4f46e5;
    --green: #10b981;
    --amber: #f59e0b;
    --red: #ef4444;
    --blue-soft: #eff6ff;
    --green-soft: #ecfdf5;
    --amber-soft: #fffbeb;
    --red-soft: #fef2f2;
    --radius: 16px;
    --radius-sm: 11px;
    --shadow: 0 16px 42px rgba(15, 23, 42, 0.06);
    --shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.04);
}

html[data-theme="dark"] {
    --bg: #0f172a;
    --surface: #172033;
    --surface-soft: #1e293b;
    --surface-muted: #263449;
    --line: #2f3d52;
    --line-strong: #40516a;
    --ink: #f8fafc;
    --text: #d9e2ee;
    --muted: #a9b6c8;
    --faint: #8190a5;
    --blue-soft: rgba(37, 99, 235, 0.16);
    --green-soft: rgba(16, 185, 129, 0.16);
    --amber-soft: rgba(245, 158, 11, 0.16);
    --red-soft: rgba(239, 68, 68, 0.16);
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
    --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.18);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    min-width: 320px;
    background: var(--bg);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    white-space: nowrap;
}

input,
select,
textarea {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    outline: none;
    padding: 0 12px;
}

input,
select {
    height: 38px;
}

textarea {
    min-height: 112px;
    padding: 10px 12px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(37, 99, 235, 0.58);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

code {
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    font-family: Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    padding: 3px 6px;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

h1,
h2,
p {
    margin: 0;
}

h1 {
    margin-top: 4px;
    color: var(--ink);
    font-size: 25px;
    line-height: 1.25;
}

h2 {
    color: var(--ink);
    font-size: 16px;
}

.ui-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.login-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.admin-login-page {
    min-height: 100vh;
    background: #f8fafc;
}

.login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(460px, 38vw, 620px);
    min-height: 100vh;
}

.login-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(96px, 18vh, 180px);
    overflow: hidden;
    background:
        radial-gradient(ellipse 62% 48% at 18% 18%, rgba(59, 130, 246, 0.42), transparent 68%),
        radial-gradient(ellipse 52% 42% at 78% 12%, rgba(14, 165, 233, 0.30), transparent 72%),
        radial-gradient(ellipse 70% 54% at 44% 86%, rgba(79, 70, 229, 0.34), transparent 70%),
        linear-gradient(145deg, #0f172a 0%, #16316c 48%, #1d4ed8 100%);
    color: #fff;
    padding: 52px;
}

.login-hero::after {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 86px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 86px);
    content: "";
    opacity: 0.58;
    pointer-events: none;
}

.login-hero > * {
    position: relative;
    z-index: 1;
}

.login-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.login-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: max-content;
}

.login-brand span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: #fff;
    color: var(--blue);
    font-weight: 900;
}

.login-brand strong {
    color: #fff;
    font-size: 18px;
}

.login-hero-copy {
    max-width: 620px;
}

.login-hero-copy p {
    color: rgba(191, 219, 254, 0.82);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}

.login-card-head p {
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}

.login-hero-copy h1 {
    margin: 14px 0 18px;
    color: #fff;
    font-size: 42px;
    line-height: 1.2;
}

.login-hero-copy span {
    display: block;
    max-width: 540px;
    color: rgba(226, 232, 240, 0.78);
    font-size: 15px;
    letter-spacing: 0.08em;
    line-height: 1.9;
}

.login-panel {
    display: grid;
    place-items: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.96)),
        #f8fafc;
    padding: clamp(56px, 9vh, 96px) clamp(32px, 3vw, 52px);
}

.login-form {
    display: grid;
    width: 100%;
    max-width: 444px;
    justify-self: center;
    gap: 20px;
}

.login-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.login-card-head > span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 16px;
    background: var(--blue-soft);
    color: var(--blue);
}

.login-card-head h2 {
    margin: 4px 0;
    color: var(--ink);
    font-size: 30px;
    font-weight: 900;
    line-height: 1.15;
}

.login-card-head small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.login-error {
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-radius: 14px;
    background: #fef2f2;
    color: #dc2626;
    padding: 11px 13px;
    font-size: 13px;
    font-weight: 800;
}

.login-notice {
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 14px;
    background: var(--blue-soft);
    color: #1e40af;
    padding: 11px 13px;
    font-size: 13px;
    font-weight: 800;
}

.login-field {
    display: grid;
    gap: 9px;
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
}

.login-input-wrap {
    position: relative;
    display: block;
}

.login-input-wrap .login-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 1;
    color: #94a3b8;
    pointer-events: none;
    transform: translateY(-50%);
    transition: color 0.30s ease;
}

.login-input-wrap input {
    width: 100%;
    height: 52px;
    border-color: #e2e8f0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    padding-left: 44px;
    transition: border-color 0.30s ease, box-shadow 0.30s ease, background 0.30s ease;
}

.login-input-wrap input:focus,
.login-input-wrap:focus-within input {
    border-color: var(--blue);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 4px rgba(37, 99, 235, 0.10);
}

.login-input-wrap:focus-within .login-icon {
    color: var(--blue);
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--muted);
    font-size: 12px;
}

.login-options label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    white-space: nowrap;
}

.login-options > span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
}

.login-options input {
    width: 14px;
    height: 14px;
    padding: 0;
}

.login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
    color: #fff;
    cursor: pointer;
    font-weight: 900;
    transition: box-shadow 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.login-submit:hover {
    box-shadow: 0 18px 32px rgba(37, 99, 235, 0.22);
    filter: saturate(1.06);
    transform: translateY(-1px);
}

.admin-shell {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    min-height: 100vh;
}

.premium-conference-shell,
.premium-conference-shell .admin-shell,
.premium-conference-shell .workspace,
.premium-conference-shell .content {
    background: var(--bg);
}

.premium-conference-shell .content {
    padding: 30px 34px 34px;
}

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    border-right: 1px solid var(--line);
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    padding: 18px 15px 0;
}

.brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding: 0 4px 16px;
}

.brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 11px;
}

.preinvite-manage-page {
    overflow-x: auto;
}

.payment-baseline-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.payment-baseline-hero,
.payment-baseline-panel,
.payment-baseline-card-grid article,
.payment-baseline-track article {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.payment-baseline-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
}

.payment-baseline-hero h2 {
    margin: 6px 0 8px;
    color: #0f172a;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
}

.payment-baseline-hero p,
.payment-baseline-card-grid small,
.payment-baseline-track small {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}

.payment-baseline-kicker {
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}

.payment-baseline-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.payment-baseline-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.payment-baseline-nav a.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.payment-baseline-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.payment-baseline-card-grid article {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
}

.payment-baseline-card-grid span,
.payment-baseline-panel-head span {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

.payment-baseline-card-grid strong {
    color: #0f172a;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
}

.payment-baseline-panel {
    padding: 22px 24px;
}

.payment-baseline-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.payment-baseline-panel-head strong {
    display: block;
    margin-top: 4px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 650;
}

.payment-baseline-list {
    display: grid;
    gap: 10px;
}

.payment-baseline-list div {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid #eef2f7;
}

.payment-baseline-list div:first-child {
    border-top: 0;
}

.payment-baseline-list b,
.payment-baseline-track span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}

.payment-baseline-list span {
    color: #334155;
    font-size: 14px;
    line-height: 1.75;
}

.payment-baseline-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.payment-baseline-track article {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding: 16px;
}

.payment-baseline-track strong {
    display: block;
    margin-bottom: 4px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 650;
}

html[data-theme="dark"] .payment-baseline-hero,
html[data-theme="dark"] .payment-baseline-panel,
html[data-theme="dark"] .payment-baseline-card-grid article,
html[data-theme="dark"] .payment-baseline-track article,
html[data-theme="dark"] .payment-baseline-nav a {
    background: #0f172a;
    border-color: #1e293b;
}

html[data-theme="dark"] .payment-baseline-hero h2,
html[data-theme="dark"] .payment-baseline-card-grid strong,
html[data-theme="dark"] .payment-baseline-panel-head strong,
html[data-theme="dark"] .payment-baseline-track strong {
    color: #f8fafc;
}

html[data-theme="dark"] .payment-baseline-hero p,
html[data-theme="dark"] .payment-baseline-card-grid span,
html[data-theme="dark"] .payment-baseline-card-grid small,
html[data-theme="dark"] .payment-baseline-panel-head span,
html[data-theme="dark"] .payment-baseline-list span,
html[data-theme="dark"] .payment-baseline-track small,
html[data-theme="dark"] .payment-baseline-nav a {
    color: #cbd5e1;
}

html[data-theme="dark"] .payment-baseline-nav a.is-active {
    border-color: #60a5fa;
    background: #172554;
    color: #bfdbfe;
}

html[data-theme="dark"] .payment-baseline-list div {
    border-top-color: #1e293b;
}

@media (max-width: 1180px) {
    .payment-baseline-card-grid,
    .payment-baseline-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .payment-baseline-hero {
        flex-direction: column;
        padding: 20px;
    }

    .payment-baseline-card-grid,
    .payment-baseline-track {
        grid-template-columns: 1fr;
    }
}

.preinvite-instance-editor {
    display: grid;
    grid-template-columns: 280px 390px minmax(390px, 1fr);
    gap: 14px;
    align-items: start;
    min-width: 1120px;
    max-width: 100%;
    width: 100%;
    margin: 16px 0 18px;
}

.preinvite-instance-editor > * {
    min-width: 0;
    max-width: 100%;
}

.preinvite-instance-shell-head {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    border: 1px solid rgba(226, 232, 240, .96);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .05);
    padding: 14px 16px;
}

.preinvite-instance-shell-title {
    display: grid;
    gap: 4px;
    min-width: 180px;
}

.preinvite-instance-shell-title span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.preinvite-instance-shell-title strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-shell-context {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.preinvite-instance-shell-context i {
    max-width: 100%;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    padding: 5px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-shell-title em {
    justify-self: start;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    padding: 6px 8px;
}

.preinvite-instance-editor.is-dirty .preinvite-instance-shell-title em {
    background: #fff7ed;
    color: #c2410c;
}

.preinvite-instance-editor.is-saving .preinvite-instance-shell-title em {
    background: #eff6ff;
    color: #1d4ed8;
}

.preinvite-instance-shell-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(72px, 1fr));
    gap: 8px;
    flex: 1 1 420px;
    max-width: 520px;
}

.preinvite-instance-shell-flow span {
    display: grid;
    gap: 3px;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    padding: 9px 10px;
}

.preinvite-instance-shell-flow b {
    color: #2563eb;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.preinvite-instance-shell-flow em {
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-shell-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.preinvite-instance-shell-actions .action-button,
.preinvite-instance-preview-actions .action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 0 12px;
    text-decoration: none;
}

.preinvite-instance-shell-actions .action-button.is-primary,
.preinvite-instance-preview-actions .action-button.is-primary {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.preinvite-instance-shell-actions .action-button.is-entry,
.preinvite-instance-preview-actions .action-button.is-entry {
    border-color: #dcfce7;
    background: #ecfdf5;
    color: #047857;
}

.preinvite-instance-command-board {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr) minmax(0, 1.14fr) minmax(0, .96fr);
    align-items: stretch;
    gap: 10px;
    min-width: 0;
}

.preinvite-instance-command-board > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    min-height: 74px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 12px 13px;
}

.preinvite-instance-command-board > div.is-object {
    border-color: #dbeafe;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.preinvite-instance-command-board > div.is-stage {
    border-color: #dbeafe;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.preinvite-instance-command-board > div.is-next {
    border-color: #fb923c;
    background: linear-gradient(180deg, #fff7ed 0%, #fff 82%);
    box-shadow: 0 14px 32px rgba(249, 115, 22, .14);
}

.preinvite-instance-command-board > div.is-verify {
    border-color: #d1fae5;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.preinvite-instance-command-board span {
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
}

.preinvite-instance-command-board strong,
.preinvite-instance-command-board em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-command-board strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 720;
}

.preinvite-instance-command-board > div.is-next span,
.preinvite-instance-command-board > div.is-next strong {
    color: #c2410c;
}

.preinvite-instance-command-board em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 560;
}

.preinvite-instance-workflow {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
}

.preinvite-instance-workflow button {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 9px;
    align-content: start;
    min-width: 0;
    min-height: 46px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
    font: inherit;
    padding: 8px 10px;
    text-align: left;
}

.preinvite-instance-workflow button::after {
    position: absolute;
    inset: auto 10px 6px 10px;
    height: 2px;
    border-radius: 999px;
    background: #e2e8f0;
    content: "";
}

.preinvite-instance-workflow button:hover,
.preinvite-instance-workflow button:focus-visible,
.preinvite-instance-workflow button.is-active {
    border-color: rgba(37, 99, 235, .42);
    background: #fff;
    outline: none;
}

.preinvite-instance-workflow button.is-ok::after {
    background: #22c55e;
}

.preinvite-instance-workflow button.is-warning::after {
    background: #f97316;
}

.preinvite-instance-workflow button.is-dirty::after {
    background: #f59e0b;
}

.preinvite-instance-workflow button.is-saving::after {
    background: #2563eb;
}

.preinvite-instance-workflow b {
    display: grid;
    grid-row: span 2;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
}

.preinvite-instance-workflow button.is-active b {
    background: #2563eb;
    color: #fff;
}

.preinvite-instance-workflow span,
.preinvite-instance-workflow strong,
.preinvite-instance-workflow em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preinvite-instance-workflow span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.preinvite-instance-workflow strong {
    color: #0f172a;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.preinvite-instance-workflow em {
    display: none;
}

.preinvite-instance-workflow button.is-warning strong {
    color: #c2410c;
}

.preinvite-instance-workflow button.is-dirty strong {
    color: #92400e;
}

.preinvite-instance-workflow button.is-saving strong {
    color: #1d4ed8;
}

.preinvite-instance-shell-steps {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(90px, 1fr)) minmax(190px, 1.35fr);
    gap: 8px;
    align-items: stretch;
    min-width: 0;
}

.preinvite-instance-shell-steps button,
.preinvite-instance-current {
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
}

.preinvite-instance-shell-steps button {
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    gap: 2px 8px;
    align-content: center;
    cursor: pointer;
    font: inherit;
    padding: 9px 10px;
    text-align: left;
}

.preinvite-instance-shell-steps button:hover,
.preinvite-instance-shell-steps button.is-active {
    border-color: rgba(37, 99, 235, .38);
    background: #eff6ff;
    color: #1d4ed8;
}

.preinvite-instance-shell-steps button b {
    display: grid;
    flex: 0 0 auto;
    grid-row: span 2;
    width: 23px;
    height: 23px;
    place-items: center;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.preinvite-instance-shell-steps button.is-active b {
    background: #2563eb;
    color: #fff;
}

.preinvite-instance-shell-steps button span {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-shell-steps button small {
    min-width: 0;
    overflow: hidden;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-shell-steps button:hover small,
.preinvite-instance-shell-steps button.is-active small {
    color: #3b82f6;
}

.preinvite-instance-current {
    display: grid;
    gap: 3px;
    padding: 9px 11px;
}

.preinvite-instance-current span {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.preinvite-instance-current strong,
.preinvite-instance-current em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-current strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
}

.preinvite-instance-current em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    line-height: 1.25;
}

.preinvite-instance-progress {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(240px, .95fr) minmax(300px, .82fr) minmax(420px, 1.15fr);
    gap: 8px;
    align-items: stretch;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 8px;
}

.preinvite-instance-progress-main {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.preinvite-instance-progress-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.preinvite-instance-progress-head div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.preinvite-instance-progress-head span,
.preinvite-instance-progress-metrics em,
.preinvite-instance-stage-board span,
.preinvite-instance-progress-todo-head span {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.preinvite-instance-progress-head strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-progress-head em {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    padding: 7px 9px;
}

.preinvite-instance-progress-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.preinvite-instance-priority {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
    padding: 10px 11px;
}

.preinvite-instance-priority div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.preinvite-instance-priority span {
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
}

.preinvite-instance-priority strong,
.preinvite-instance-priority em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-priority strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
}

.preinvite-instance-priority em {
    color: #475569;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.preinvite-instance-priority button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border: 1px solid #2563eb;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding: 0 12px;
    white-space: nowrap;
}

.preinvite-instance-priority button:hover,
.preinvite-instance-priority button:focus-visible {
    border-color: #1d4ed8;
    background: #1d4ed8;
    outline: none;
}

.preinvite-instance-priority button.is-secondary {
    border-color: #dcfce7;
    background: #ecfdf5;
    color: #047857;
}

.preinvite-instance-priority button.is-secondary:hover,
.preinvite-instance-priority button.is-secondary:focus-visible {
    border-color: #bbf7d0;
    background: #dcfce7;
    color: #047857;
}

.preinvite-instance-progress-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #06b6d4);
    transition: width .24s ease;
}

.preinvite-instance-progress-main p {
    margin: 0;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.preinvite-instance-progress-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.preinvite-instance-progress-metrics span {
    display: grid;
    gap: 3px;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 8px 9px;
}

.preinvite-instance-progress-metrics b {
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.preinvite-instance-scope-map {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
}

.preinvite-instance-scope-map button {
    display: grid;
    gap: 4px;
    min-width: 0;
    min-height: 82px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    font: inherit;
    padding: 9px 10px;
    text-align: left;
}

.preinvite-instance-scope-map button:hover,
.preinvite-instance-scope-map button:focus-visible,
.preinvite-instance-scope-map button.is-active {
    border-color: rgba(37, 99, 235, .42);
    background: #eff6ff;
    outline: none;
}

.preinvite-instance-scope-map span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.preinvite-instance-scope-map strong,
.preinvite-instance-scope-map em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preinvite-instance-scope-map strong {
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
}

.preinvite-instance-scope-map em {
    color: #64748b;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
}

.preinvite-instance-link-breakdown {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
}

.preinvite-instance-link-breakdown button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 8px;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    font: inherit;
    padding: 8px 10px;
    text-align: left;
}

.preinvite-instance-link-breakdown button:hover,
.preinvite-instance-link-breakdown button:focus-visible,
.preinvite-instance-link-breakdown button.is-active {
    border-color: rgba(37, 99, 235, .42);
    background: #eff6ff;
    outline: none;
}

.preinvite-instance-link-breakdown span,
.preinvite-instance-link-breakdown em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-link-breakdown span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.preinvite-instance-link-breakdown strong {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    display: grid;
    min-width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 999px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.preinvite-instance-link-breakdown em {
    color: #64748b;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.preinvite-instance-stage-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
}

.preinvite-instance-stage-board button {
    display: grid;
    gap: 3px;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    padding: 7px 8px;
    text-align: left;
}

.preinvite-instance-stage-board button:hover,
.preinvite-instance-stage-board button:focus-visible,
.preinvite-instance-stage-board button.is-active {
    border-color: rgba(37, 99, 235, .42);
    background: #eff6ff;
    outline: none;
}

.preinvite-instance-stage-board strong,
.preinvite-instance-stage-board em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-stage-board strong {
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
}

.preinvite-instance-stage-board em {
    justify-self: start;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    padding: 5px 7px;
}

.preinvite-instance-stage-board button.is-warning em {
    background: #fff7ed;
    color: #c2410c;
}

.preinvite-instance-stage-board button.is-muted em {
    background: #f1f5f9;
    color: #64748b;
}

.preinvite-instance-stage-board button.is-dirty em {
    background: #fef3c7;
    color: #92400e;
}

.preinvite-instance-stage-board button.is-saving em {
    background: #eff6ff;
    color: #1d4ed8;
}

.preinvite-instance-progress-todo {
    grid-column: 1 / -1;
    display: grid;
    gap: 7px;
    min-width: 0;
    border-top: 1px solid #e2e8f0;
    padding-top: 8px;
}

.preinvite-instance-progress-todo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.preinvite-instance-progress-todo-head strong {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-progress-todo-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
}

.preinvite-instance-progress-todo-list button {
    display: grid;
    gap: 3px;
    align-content: start;
    min-width: 0;
    min-height: 68px;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: #fff7ed;
    color: #9a3412;
    cursor: pointer;
    font: inherit;
    padding: 8px 9px;
    text-align: left;
}

.preinvite-instance-progress-todo-list button:hover,
.preinvite-instance-progress-todo-list button:focus-visible {
    border-color: rgba(37, 99, 235, .42);
    background: #eff6ff;
    color: #1d4ed8;
    outline: none;
}

.preinvite-instance-progress-todo-list button strong,
.preinvite-instance-progress-todo-list button span,
.preinvite-instance-progress-todo-list button em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-progress-todo-list button strong {
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
}

.preinvite-instance-progress-todo-list button span {
    font-size: 12px;
    font-weight: 800;
}

.preinvite-instance-progress-todo-list button em,
.preinvite-instance-progress-todo-empty {
    color: #64748b;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.preinvite-instance-progress-todo-list button.is-content {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.preinvite-instance-progress-todo-list button.is-asset {
    border-color: #bae6fd;
    background: #f0f9ff;
    color: #0369a1;
}

.preinvite-instance-progress-todo-list button.is-link {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.preinvite-instance-progress-todo-empty {
    display: block;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    padding: 10px 12px;
}

.preinvite-instance-tree,
.preinvite-instance-preview,
.preinvite-instance-inspector {
    position: sticky;
    top: 92px;
    align-self: start;
    scroll-margin-top: 96px;
    border: 1px solid rgba(226, 232, 240, .96);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .05);
}

.preinvite-instance-shell-head {
    scroll-margin-top: 96px;
}

.preinvite-instance-tree,
.preinvite-instance-inspector {
    max-height: calc(100vh - 112px);
    overflow: auto;
    padding: 16px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.preinvite-instance-tree::-webkit-scrollbar,
.preinvite-instance-inspector::-webkit-scrollbar {
    width: 8px;
}

.preinvite-instance-tree::-webkit-scrollbar-thumb,
.preinvite-instance-inspector::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd5e1;
}

.preinvite-instance-panel-head {
    display: grid;
    gap: 5px;
    margin-bottom: 12px;
}

.preinvite-instance-panel-head span {
    color: #475569;
    font-size: 12px;
    font-weight: 750;
}

.preinvite-instance-panel-head strong {
    color: #0f172a;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.preinvite-instance-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.preinvite-instance-stats span {
    border: 1px solid #edf2f7;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    font-size: 11px;
    font-weight: 560;
    line-height: 1;
    padding: 6px 8px;
}

.preinvite-instance-tree-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    padding: 8px 9px;
}

.preinvite-instance-tree-search span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.preinvite-instance-tree-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #0f172a;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    outline: none;
}

.preinvite-instance-tree-search input::placeholder {
    color: #94a3b8;
    font-weight: 600;
}

.preinvite-instance-tree-search:focus-within {
    border-color: rgba(37, 99, 235, .42);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

.preinvite-instance-tree-search button {
    border: 0;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 6px 8px;
}

.preinvite-instance-tree-search button:hover,
.preinvite-instance-tree-search button:focus-visible {
    background: #dbeafe;
    color: #1d4ed8;
    outline: none;
}

.preinvite-instance-tree-filter {
    display: flex;
    gap: 6px;
    margin: 0 0 8px;
    overflow-x: auto;
    padding: 0 0 4px;
    scrollbar-width: thin;
}

.preinvite-instance-tree-filter button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding: 0 9px 0 10px;
}

.preinvite-instance-tree-filter button:hover,
.preinvite-instance-tree-filter button:focus-visible,
.preinvite-instance-tree-filter button.is-active {
    border-color: rgba(37, 99, 235, .42);
    background: #eff6ff;
    color: #1d4ed8;
    outline: none;
}

.preinvite-instance-tree-filter button:disabled {
    cursor: not-allowed;
    opacity: .42;
}

.preinvite-instance-tree-filter button.is-empty-search {
    border-style: dashed;
    color: #94a3b8;
}

.preinvite-instance-tree-filter em {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    padding: 0 5px;
}

.preinvite-instance-tree-filter button.is-active em {
    background: #dbeafe;
    color: #1d4ed8;
}

.preinvite-instance-tree-filter-summary {
    margin: -1px 0 10px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.preinvite-instance-tree-list {
    display: grid;
    gap: 8px;
    max-height: 560px;
    overflow: auto;
    padding-right: 2px;
}

.preinvite-instance-tree-list [hidden] {
    display: none !important;
}

.preinvite-instance-tree-list button {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 2px 10px;
    align-items: center;
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #334155;
    text-align: left;
    cursor: pointer;
    padding: 10px 11px;
}

.preinvite-instance-tree-list button:hover,
.preinvite-instance-tree-list button.is-active {
    border-color: rgba(37, 99, 235, .38);
    background: #eff6ff;
    color: #1d4ed8;
}

.preinvite-instance-tree-list button.is-warning:not(.is-active) {
    border-color: rgba(249, 115, 22, .34);
    background: #fff7ed;
}

.preinvite-instance-tree-list button.is-ok:not(.is-active) {
    border-color: rgba(16, 185, 129, .22);
}

.preinvite-instance-tree-list button i {
    grid-row: span 4;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #eef2ff;
}

.preinvite-instance-tree-list button i::before {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 4px;
    content: "";
}

.preinvite-instance-tree-list button i.is-home::before {
    border-radius: 3px 3px 5px 5px;
    transform: rotate(45deg);
}

.preinvite-instance-tree-list button i.is-image_page::before {
    border-radius: 50%;
}

.preinvite-instance-tree-list button i.is-content_page::before {
    border-radius: 3px;
    border-top-width: 5px;
}

.preinvite-instance-tree-list button i.is-child_page::before {
    border-radius: 50% 50% 4px 4px;
}

.preinvite-instance-tree-list button i.is-external::before {
    border-radius: 50%;
    border-left-color: transparent;
}

.preinvite-instance-tree-list button i.is-disabled::before {
    border-radius: 50%;
    border-top-color: transparent;
    border-right-color: transparent;
    transform: rotate(45deg);
}

.preinvite-instance-tree-list button i.is-download::before {
    border-radius: 2px;
    border-top-color: transparent;
}

.preinvite-instance-tree-list button i.is-phone::before,
.preinvite-instance-tree-list button i.is-mail::before,
.preinvite-instance-tree-list button i.is-map::before {
    border-radius: 50%;
    border-right-color: transparent;
}

.preinvite-instance-tree-list button span,
.preinvite-instance-tree-list button em,
.preinvite-instance-tree-kind {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preinvite-instance-tree-list button span {
    color: inherit;
    font-size: 13px;
    font-weight: 700;
}

.preinvite-instance-tree-list button em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    white-space: nowrap;
}

.preinvite-instance-tree-kind {
    justify-self: start;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    padding: 5px 7px;
    white-space: nowrap;
}

.preinvite-instance-tree-kind.is-home,
.preinvite-instance-tree-kind.is-content_page,
.preinvite-instance-tree-kind.is-child_page {
    background: #eff6ff;
    color: #1d4ed8;
}

.preinvite-instance-tree-kind.is-image_page {
    background: #f5f3ff;
    color: #6d28d9;
}

.preinvite-instance-tree-kind.is-download {
    background: #ecfdf5;
    color: #047857;
}

.preinvite-instance-tree-kind.is-external,
.preinvite-instance-tree-kind.is-anchor {
    background: #fff7ed;
    color: #c2410c;
}

.preinvite-instance-tree-kind.is-disabled {
    background: #f1f5f9;
    color: #475569;
}

.preinvite-instance-tree-kind.is-phone,
.preinvite-instance-tree-kind.is-mail,
.preinvite-instance-tree-kind.is-map {
    background: #fef3c7;
    color: #92400e;
}

.preinvite-instance-tree-status {
    justify-self: start;
    min-width: 0;
    overflow: hidden;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 5px 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-tree-status.is-ok {
    background: #ecfdf5;
    color: #047857;
}

.preinvite-instance-tree-status.is-warning {
    background: #ffedd5;
    color: #c2410c;
}

.preinvite-instance-tree-status.is-muted {
    background: #f1f5f9;
    color: #64748b;
}

.preinvite-instance-tree-group {
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.preinvite-instance-tree-empty {
    display: block;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    padding: 12px;
}

.preinvite-instance-preview {
    display: grid;
    justify-items: center;
    padding: 16px;
}

.preinvite-instance-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: min(100%, 370px);
    margin-bottom: 12px;
}

.preinvite-instance-preview-head div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.preinvite-instance-preview-head span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
}

.preinvite-instance-preview-head strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-preview-head em {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    padding: 6px 8px;
}

.preinvite-instance-phone {
    width: min(100%, 370px);
    border: 1px solid #cbd5e1;
    border-radius: 28px;
    background: #0f172a;
    box-shadow: 0 22px 56px rgba(15, 23, 42, .18);
    overflow: hidden;
    padding: 10px;
}

.preinvite-instance-phone-bar {
    display: grid;
    place-items: center;
    height: 20px;
}

.preinvite-instance-phone-bar span {
    width: 74px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .32);
}

.preinvite-instance-phone iframe {
    display: block;
    width: 100%;
    height: 620px;
    border: 0;
    border-radius: 18px;
    background: #fff;
}

.preinvite-instance-preview-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.preinvite-instance-inspector > p {
    margin: 0 0 10px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
}

.preinvite-instance-context-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: -4px 0 12px;
}

.preinvite-instance-context-strip span {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 7px 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-context-strip.is-image-page span {
    border-color: #ddd6fe;
    background: #f5f3ff;
    color: #6d28d9;
}

.preinvite-instance-context-strip.is-content-page span,
.preinvite-instance-context-strip.is-child-page span {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.preinvite-instance-context-strip.is-download span {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.preinvite-instance-context-strip.is-external span,
.preinvite-instance-context-strip.is-phone span,
.preinvite-instance-context-strip.is-mail span,
.preinvite-instance-context-strip.is-map span {
    border-color: #fde68a;
    background: #fffbeb;
    color: #a16207;
}

.preinvite-instance-context-strip.is-disabled span {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #475569;
}

.preinvite-instance-properties {
    display: grid;
    gap: 8px;
}

.preinvite-instance-edit-panel {
    display: grid;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.preinvite-instance-edit-title {
    display: grid;
    gap: 3px;
}

.preinvite-instance-edit-title span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}

.preinvite-instance-edit-title strong {
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.preinvite-instance-editor-guide {
    display: grid;
    gap: 10px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
    padding: 12px;
}

.preinvite-instance-editor-guide-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.preinvite-instance-editor-guide-head > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.preinvite-instance-editor-guide-head span {
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
}

.preinvite-instance-editor-guide-head strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.preinvite-instance-editor-guide-head em {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    padding: 6px 8px;
}

.preinvite-instance-editor-guide-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
}

.preinvite-instance-editor-guide-list button {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .9);
    color: #0f172a;
    cursor: pointer;
    min-height: 74px;
    text-align: left;
    padding: 9px 10px;
}

.preinvite-instance-editor-guide-list button:hover,
.preinvite-instance-editor-guide-list button:focus-visible {
    border-color: #93c5fd;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
    outline: none;
}

.preinvite-instance-editor-guide-list button > b {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
}

.preinvite-instance-editor-guide-list button > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.preinvite-instance-editor-guide-list span,
.preinvite-instance-editor-guide-list strong,
.preinvite-instance-editor-guide-list em {
    min-width: 0;
    overflow-wrap: anywhere;
}

.preinvite-instance-editor-guide-list span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

.preinvite-instance-editor-guide-list strong {
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.preinvite-instance-editor-guide-list em {
    color: #64748b;
    font-size: 11px;
    font-style: normal;
    line-height: 1.35;
}

.preinvite-instance-editor-guide-list button.is-media > b {
    background: #f5f3ff;
    color: #7c3aed;
}

.preinvite-instance-editor-guide-list button.is-link > b {
    background: #ecfdf5;
    color: #059669;
}

.preinvite-instance-editor-guide-list button.is-page > b {
    background: #eef2ff;
    color: #4f46e5;
}

.preinvite-instance-editor-guide-list button.is-style > b,
.preinvite-instance-editor-guide-list button.is-other > b {
    background: #f1f5f9;
    color: #475569;
}

.preinvite-instance-editor-guide-list button.is-warning {
    border-color: #fed7aa;
    background: #fff7ed;
}

.preinvite-instance-editor-guide-list button.is-warning > b {
    background: #ffedd5;
    color: #c2410c;
}

.preinvite-instance-editor-guide-list button.is-warning span {
    color: #c2410c;
}

.preinvite-instance-object-status {
    display: grid;
    gap: 9px;
    border: 1px solid #c7d2fe;
    border-radius: 14px;
    background: linear-gradient(180deg, #eef2ff 0%, #fff 100%);
    padding: 11px;
}

.preinvite-instance-object-status.is-warning {
    border-color: #fed7aa;
    background: linear-gradient(180deg, #fff7ed 0%, #fff 100%);
}

.preinvite-instance-object-status.is-dirty {
    border-color: #fde68a;
    background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
}

.preinvite-instance-object-status.is-saving {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}

.preinvite-instance-object-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.preinvite-instance-object-head > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.preinvite-instance-object-head span,
.preinvite-instance-object-route span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}

.preinvite-instance-object-status.is-warning .preinvite-instance-object-head span,
.preinvite-instance-object-status.is-warning .preinvite-instance-object-route span {
    color: #c2410c;
}

.preinvite-instance-object-status.is-dirty .preinvite-instance-object-head span,
.preinvite-instance-object-status.is-dirty .preinvite-instance-object-route span {
    color: #a16207;
}

.preinvite-instance-object-head strong {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-object-head em {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    padding: 6px 8px;
}

.preinvite-instance-object-status.is-warning .preinvite-instance-object-head em {
    background: #ffedd5;
    color: #c2410c;
}

.preinvite-instance-object-status.is-dirty .preinvite-instance-object-head em {
    background: #fef3c7;
    color: #a16207;
}

.preinvite-instance-object-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.preinvite-instance-object-metrics span {
    display: grid;
    gap: 3px;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: rgba(255, 255, 255, .82);
    padding: 8px;
}

.preinvite-instance-object-metrics b {
    overflow: hidden;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-object-metrics small {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
}

.preinvite-instance-object-route {
    display: grid;
    gap: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
    padding: 9px 10px;
}

.preinvite-instance-object-route.is-warning {
    border-color: #fed7aa;
    background: #fff7ed;
}

.preinvite-instance-object-route.is-page {
    border-color: #c7d2fe;
    background: #eef2ff;
}

.preinvite-instance-object-route.is-muted {
    border-color: #e2e8f0;
    background: #f8fafc;
}

.preinvite-instance-route-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.preinvite-instance-route-head > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.preinvite-instance-object-route strong {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-route-head em {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    padding: 6px 8px;
}

.preinvite-instance-object-route.is-warning .preinvite-instance-route-head em {
    background: #ffedd5;
    color: #c2410c;
}

.preinvite-instance-object-route.is-page .preinvite-instance-route-head em {
    background: #e0e7ff;
    color: #4338ca;
}

.preinvite-instance-object-route.is-muted .preinvite-instance-route-head em {
    background: #e2e8f0;
    color: #475569;
}

.preinvite-instance-route-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.preinvite-instance-route-grid span {
    display: grid;
    gap: 3px;
    min-width: 0;
    border: 1px solid rgba(203, 213, 225, .72);
    border-radius: 10px;
    background: rgba(255, 255, 255, .72);
    padding: 8px;
}

.preinvite-instance-route-grid span.is-target,
.preinvite-instance-route-grid span.is-result {
    grid-column: 1 / -1;
}

.preinvite-instance-route-grid small {
    overflow: hidden;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-route-grid b {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
}

.preinvite-instance-route-grid span.is-target b,
.preinvite-instance-route-grid span.is-result b {
    max-height: 78px;
    overflow: auto;
    scrollbar-width: thin;
}

.preinvite-instance-object-route p {
    margin: 0;
    color: #475569;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.preinvite-instance-object-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.preinvite-instance-object-actions button {
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #fff;
    color: #1d4ed8;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 8px 10px;
}

.preinvite-instance-object-actions button:hover,
.preinvite-instance-object-actions button:focus-visible {
    border-color: #93c5fd;
    background: #eff6ff;
    outline: none;
}

.preinvite-instance-object-actions button.is-primary {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.preinvite-instance-object-actions button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.preinvite-instance-subpage-panel {
    display: grid;
    gap: 10px;
    border: 1px solid #c7d2fe;
    border-radius: 14px;
    background: linear-gradient(180deg, #eef2ff 0%, #fff 100%);
    padding: 12px;
}

.preinvite-instance-subpage-panel.is-warning {
    border-color: #fed7aa;
    background: linear-gradient(180deg, #fff7ed 0%, #fff 100%);
}

.preinvite-instance-subpage-panel.is-child {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}

.preinvite-instance-subpage-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.preinvite-instance-subpage-head > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.preinvite-instance-subpage-head span {
    color: #4f46e5;
    font-size: 12px;
    font-weight: 800;
}

.preinvite-instance-subpage-panel.is-warning .preinvite-instance-subpage-head span {
    color: #c2410c;
}

.preinvite-instance-subpage-head strong {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-subpage-head p {
    margin: 0;
    color: #475569;
    font-size: 12px;
    line-height: 1.45;
}

.preinvite-instance-subpage-head em {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #e0e7ff;
    color: #4338ca;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    padding: 6px 8px;
}

.preinvite-instance-subpage-panel.is-warning .preinvite-instance-subpage-head em {
    background: #ffedd5;
    color: #c2410c;
}

.preinvite-instance-subpage-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.preinvite-instance-subpage-metrics span {
    display: grid;
    gap: 3px;
    min-width: 0;
    border: 1px solid rgba(203, 213, 225, .74);
    border-radius: 10px;
    background: rgba(255, 255, 255, .76);
    padding: 8px;
}

.preinvite-instance-subpage-metrics small,
.preinvite-instance-subpage-list span {
    overflow: hidden;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-subpage-metrics b {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-subpage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.preinvite-instance-subpage-actions button {
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #fff;
    color: #1d4ed8;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding: 8px 10px;
}

.preinvite-instance-subpage-actions button:hover,
.preinvite-instance-subpage-actions button:focus-visible {
    border-color: #93c5fd;
    background: #eff6ff;
    outline: none;
}

.preinvite-instance-subpage-actions button.is-primary {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.preinvite-instance-subpage-list {
    display: grid;
    gap: 7px;
}

.preinvite-instance-subpage-list button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .82);
    color: #334155;
    cursor: pointer;
    font: inherit;
    padding: 9px 10px;
    text-align: left;
}

.preinvite-instance-subpage-list button:hover,
.preinvite-instance-subpage-list button:focus-visible {
    border-color: #93c5fd;
    background: #fff;
    outline: none;
}

.preinvite-instance-subpage-list button.is-warning {
    border-color: #fed7aa;
    background: #fff7ed;
}

.preinvite-instance-subpage-list button.is-page {
    border-color: #c7d2fe;
    background: #eef2ff;
}

.preinvite-instance-subpage-list button > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.preinvite-instance-subpage-list strong {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-subpage-list em {
    min-width: 0;
    overflow: hidden;
    color: #475569;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-subpage-list b {
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 6px 8px;
}

.preinvite-instance-subpage-list button.is-warning b {
    background: #ffedd5;
    color: #c2410c;
}

.preinvite-instance-subpage-list button.is-page b {
    background: #e0e7ff;
    color: #4338ca;
}

.preinvite-instance-subpage-list p {
    margin: 0;
    border: 1px dashed #cbd5e1;
    border-radius: 11px;
    background: rgba(255, 255, 255, .7);
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    padding: 9px 10px;
}

.preinvite-instance-editor-sections {
    display: grid;
    gap: 10px;
}

.preinvite-instance-editor-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.preinvite-instance-editor-tabs button {
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 7px 10px;
}

.preinvite-instance-editor-tabs button:hover,
.preinvite-instance-editor-tabs button:focus-visible {
    border-color: #93c5fd;
    background: #dbeafe;
    outline: none;
}

.preinvite-instance-editor-section {
    display: grid;
    gap: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #f8fafc;
    padding: 10px;
}

.preinvite-instance-editor-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
}

.preinvite-instance-editor-section-head > div:first-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.preinvite-instance-editor-section-head span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}

.preinvite-instance-editor-section-head strong {
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.preinvite-instance-editor-section-head > .preinvite-instance-editor-section-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.preinvite-instance-editor-section-head em {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    padding: 6px 8px;
}

.preinvite-instance-editor-section-tools button {
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #fff;
    color: #1d4ed8;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 8px;
}

.preinvite-instance-editor-section-tools button:hover,
.preinvite-instance-editor-section-tools button:focus-visible {
    border-color: #93c5fd;
    background: #eff6ff;
    outline: none;
}

.preinvite-instance-editor-section-body {
    display: grid;
    gap: 10px;
}

.preinvite-instance-editor-section.is-collapsed {
    gap: 0;
}

.preinvite-instance-editor-section.is-collapsed .preinvite-instance-editor-section-body {
    display: none;
}

.preinvite-instance-editor-section.is-media {
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.preinvite-instance-editor-section.is-link {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}

.preinvite-instance-editor-section.is-page {
    border-color: #c7d2fe;
    background: linear-gradient(180deg, #eef2ff 0%, #fff 100%);
}

.preinvite-instance-editor-section.is-style {
    background: #fff;
}

/* H5 管理工作台：降低辅助控件权重，只突出当前对象和当前编辑大类。 */
.preinvite-instance-tree .preinvite-instance-stats span {
    border-color: #edf2f7;
    background: #fff;
    color: #64748b;
    font-size: 11px;
    font-weight: 560;
    padding: 6px 8px;
}

.preinvite-instance-tree .preinvite-instance-tree-search {
    border-color: #e5e7eb;
}

.preinvite-instance-tree .preinvite-instance-tree-search span,
.preinvite-instance-tree .preinvite-instance-tree-filter button,
.preinvite-instance-tree .preinvite-instance-tree-filter-summary {
    color: #64748b;
    font-size: 11px;
    font-weight: 560;
}

.preinvite-instance-tree .preinvite-instance-tree-search input {
    font-weight: 560;
}

.preinvite-instance-tree .preinvite-instance-tree-filter {
    gap: 5px;
}

.preinvite-instance-tree .preinvite-instance-tree-filter button {
    min-height: 27px;
    border-color: #e5e7eb;
    background: #f8fafc;
}

.preinvite-instance-tree .preinvite-instance-tree-filter button:hover,
.preinvite-instance-tree .preinvite-instance-tree-filter button:focus-visible,
.preinvite-instance-tree .preinvite-instance-tree-filter button.is-active {
    background: #fff;
    color: #1d4ed8;
}

.preinvite-instance-tree .preinvite-instance-tree-filter em {
    background: #e2e8f0;
    color: #64748b;
}

.preinvite-instance-tree .preinvite-instance-tree-filter-summary {
    color: #94a3b8;
}

.preinvite-instance-tree .preinvite-instance-tree-list {
    gap: 6px;
}

.preinvite-instance-tree .preinvite-instance-tree-list button {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 2px 9px;
    border-color: #edf2f7;
    border-radius: 11px;
    padding: 9px 10px;
}

.preinvite-instance-tree .preinvite-instance-tree-list button:hover,
.preinvite-instance-tree .preinvite-instance-tree-list button.is-active {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .07);
}

.preinvite-instance-tree .preinvite-instance-tree-list button i {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #f1f5f9;
    color: #64748b;
}

.preinvite-instance-tree .preinvite-instance-tree-list button.is-active i {
    background: #2563eb;
    color: #fff;
}

.preinvite-instance-tree .preinvite-instance-tree-list button i::before {
    width: 12px;
    height: 12px;
}

.preinvite-instance-tree .preinvite-instance-tree-list button span {
    font-weight: 650;
}

.preinvite-instance-tree .preinvite-instance-tree-list button em {
    color: #94a3b8;
    font-size: 11px;
}

.preinvite-instance-tree .preinvite-instance-tree-group {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 650;
}

.preinvite-instance-tree .preinvite-instance-tree-kind,
.preinvite-instance-tree .preinvite-instance-tree-kind.is-home,
.preinvite-instance-tree .preinvite-instance-tree-kind.is-content_page,
.preinvite-instance-tree .preinvite-instance-tree-kind.is-child_page,
.preinvite-instance-tree .preinvite-instance-tree-kind.is-image_page,
.preinvite-instance-tree .preinvite-instance-tree-kind.is-download,
.preinvite-instance-tree .preinvite-instance-tree-kind.is-external,
.preinvite-instance-tree .preinvite-instance-tree-kind.is-anchor,
.preinvite-instance-tree .preinvite-instance-tree-kind.is-disabled,
.preinvite-instance-tree .preinvite-instance-tree-kind.is-phone,
.preinvite-instance-tree .preinvite-instance-tree-kind.is-mail,
.preinvite-instance-tree .preinvite-instance-tree-kind.is-map,
.preinvite-instance-tree .preinvite-instance-tree-status,
.preinvite-instance-tree .preinvite-instance-tree-status.is-ok,
.preinvite-instance-tree .preinvite-instance-tree-status.is-warning,
.preinvite-instance-tree .preinvite-instance-tree-status.is-muted {
    background: #f8fafc;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 560;
}

.preinvite-instance-preview .preinvite-instance-preview-head span {
    color: #475569;
    font-weight: 750;
}

.preinvite-instance-inspector .preinvite-instance-context-strip span,
.preinvite-instance-inspector .preinvite-instance-context-strip.is-image-page span,
.preinvite-instance-inspector .preinvite-instance-context-strip.is-content-page span,
.preinvite-instance-inspector .preinvite-instance-context-strip.is-child-page span,
.preinvite-instance-inspector .preinvite-instance-context-strip.is-download span,
.preinvite-instance-inspector .preinvite-instance-context-strip.is-external span,
.preinvite-instance-inspector .preinvite-instance-context-strip.is-phone span,
.preinvite-instance-inspector .preinvite-instance-context-strip.is-mail span,
.preinvite-instance-inspector .preinvite-instance-context-strip.is-map span,
.preinvite-instance-inspector .preinvite-instance-context-strip.is-disabled span {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-weight: 650;
}

.preinvite-instance-inspector .preinvite-instance-object-status {
    border-color: #e0e7ff;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.preinvite-instance-inspector .preinvite-instance-editor-section {
    border-color: #e5e7eb;
    background: #fff;
}

.preinvite-instance-inspector .preinvite-instance-editor-section.is-collapsed {
    background: #f8fafc;
}

.preinvite-instance-inspector .preinvite-instance-editor-section.is-open {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 42%);
    box-shadow: inset 3px 0 0 #2563eb;
}

.preinvite-instance-inspector .preinvite-instance-editor-section-head span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.preinvite-instance-inspector .preinvite-instance-editor-section.is-open .preinvite-instance-editor-section-head span {
    color: #1d4ed8;
}

.preinvite-instance-inspector .preinvite-instance-editor-section-head strong {
    color: #64748b;
    font-size: 11px;
    font-weight: 560;
}

.preinvite-instance-inspector .preinvite-instance-editor-section-head em {
    background: #f1f5f9;
    color: #64748b;
    font-weight: 650;
}

.preinvite-instance-inspector .preinvite-instance-editor-section-tools button {
    color: #475569;
}

.preinvite-instance-inspector .preinvite-instance-editor-section.is-open .preinvite-instance-editor-section-tools button {
    color: #1d4ed8;
}

/* H5 会务站点管理：Gemini 方案落地，强化操作路径与右侧大类导航。 */
.preinvite-manage-page .preinvite-instance-editor {
    grid-template-columns: 255px 390px minmax(390px, 1fr);
    gap: 14px;
    min-width: 1060px;
}

.preinvite-manage-page .preinvite-instance-shell-head {
    border-color: #e5e7eb;
    border-radius: 16px;
    padding: 14px 16px 16px;
}

.preinvite-manage-page .preinvite-instance-shell-actions .action-button.is-primary {
    min-height: 38px;
    border-color: #1d4ed8;
    background: #2563eb;
    box-shadow: 0 12px 26px rgba(37, 99, 235, .2);
    font-size: 13px;
    padding: 0 18px;
}

.preinvite-manage-page .preinvite-instance-command-board {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .96fr) minmax(0, 1.08fr) minmax(0, 1.06fr);
    gap: 8px;
}

.preinvite-manage-page .preinvite-instance-command-board > div {
    min-height: 68px;
    border-radius: 12px;
    padding: 11px 12px;
}

.preinvite-manage-page .preinvite-instance-command-board > div.is-next {
    border-color: #fed7aa;
    background: linear-gradient(180deg, #fff7ed 0%, #fff 90%);
    box-shadow: none;
}

.preinvite-manage-page .preinvite-instance-command-board > div.is-verify {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 84%);
    box-shadow: inset 3px 0 0 #2563eb;
}

.preinvite-manage-page .preinvite-instance-command-board > div.is-verify span,
.preinvite-manage-page .preinvite-instance-command-board > div.is-verify strong {
    color: #1d4ed8;
}

.preinvite-manage-page .preinvite-instance-workflow button {
    min-height: 42px;
    border-color: #e5e7eb;
    background: #fff;
}

.preinvite-manage-page .preinvite-instance-workflow button.is-active {
    border-color: #bfdbfe;
    box-shadow: inset 0 -2px 0 #2563eb;
}

.preinvite-manage-page .preinvite-instance-tree,
.preinvite-manage-page .preinvite-instance-inspector {
    padding: 15px;
}

.preinvite-manage-page .preinvite-instance-tree .preinvite-instance-panel-head,
.preinvite-manage-page .preinvite-instance-inspector .preinvite-instance-panel-head {
    margin-bottom: 10px;
}

.preinvite-manage-page .preinvite-instance-tree-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
    padding: 0;
}

.preinvite-manage-page .preinvite-instance-tree .preinvite-instance-tree-filter button {
    justify-content: space-between;
    min-height: 34px;
    border-radius: 10px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 650;
    padding: 0 9px;
}

.preinvite-manage-page .preinvite-instance-tree .preinvite-instance-tree-filter button.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.preinvite-manage-page .preinvite-instance-tree .preinvite-instance-tree-filter em {
    min-width: 20px;
    height: 20px;
    font-size: 10px;
}

.preinvite-manage-page .preinvite-instance-tree-filter-summary {
    margin: 3px 0 10px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 560;
}

.preinvite-manage-page .preinvite-instance-tree-list {
    gap: 7px;
    max-height: 590px;
}

.preinvite-manage-page .preinvite-instance-tree .preinvite-instance-tree-group {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 12px 0 2px;
    color: #334155;
    font-size: 12px;
    font-weight: 750;
}

.preinvite-manage-page .preinvite-instance-tree .preinvite-instance-tree-group:first-child {
    margin-top: 2px;
}

.preinvite-manage-page .preinvite-instance-tree .preinvite-instance-tree-group em {
    overflow: hidden;
    color: #94a3b8;
    font-size: 10px;
    font-style: normal;
    font-weight: 560;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-manage-page .preinvite-instance-tree .preinvite-instance-tree-list button {
    border-color: #e5e7eb;
    background: #fff;
    box-shadow: none;
}

.preinvite-manage-page .preinvite-instance-tree .preinvite-instance-tree-list button:hover,
.preinvite-manage-page .preinvite-instance-tree .preinvite-instance-tree-list button.is-active {
    border-color: #bfdbfe;
    background: #f8fbff;
    box-shadow: inset 3px 0 0 #2563eb;
}

.preinvite-manage-page .preinvite-instance-tree .preinvite-instance-tree-list button span {
    color: #0f172a;
    font-size: 13px;
    font-weight: 650;
}

.preinvite-manage-page .preinvite-instance-tree .preinvite-instance-tree-list button em {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 520;
}

.preinvite-manage-page .preinvite-instance-tree .preinvite-instance-tree-kind,
.preinvite-manage-page .preinvite-instance-tree .preinvite-instance-tree-status {
    font-size: 10px;
    font-weight: 560;
    padding: 4px 6px;
}

.preinvite-manage-page .preinvite-instance-editor-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.preinvite-manage-page .preinvite-instance-editor-tabs button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 8px;
    min-width: 0;
    min-height: 48px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    padding: 9px 10px;
    text-align: left;
}

.preinvite-manage-page .preinvite-instance-editor-tabs button:hover,
.preinvite-manage-page .preinvite-instance-editor-tabs button:focus-visible,
.preinvite-manage-page .preinvite-instance-editor-tabs button.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    outline: none;
}

.preinvite-manage-page .preinvite-instance-editor-tabs button span {
    overflow: hidden;
    color: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-manage-page .preinvite-instance-editor-tabs button em {
    overflow: hidden;
    color: #64748b;
    font-size: 11px;
    font-style: normal;
    font-weight: 560;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-manage-page .preinvite-instance-editor-tabs button strong {
    grid-row: 1 / span 2;
    align-self: center;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 7px;
    white-space: nowrap;
}

.preinvite-manage-page .preinvite-instance-editor-tabs button.is-active strong {
    background: #dbeafe;
    color: #1d4ed8;
}

.preinvite-manage-page .preinvite-instance-inspector .preinvite-instance-object-status {
    border-color: #e5e7eb;
    background: #fff;
}

.preinvite-manage-page .preinvite-instance-inspector .preinvite-instance-editor-section {
    border-radius: 12px;
}

.preinvite-manage-page .preinvite-instance-inspector .preinvite-instance-editor-section.is-open {
    border-color: #bfdbfe;
    background: #fff;
    box-shadow: inset 3px 0 0 #2563eb;
}

.preinvite-instance-inspector .preinvite-instance-control > span {
    color: #334155;
    font-size: 12px;
    font-weight: 650;
}

.preinvite-instance-control {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.preinvite-instance-control > span {
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.preinvite-instance-control-hint {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.preinvite-instance-media-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.preinvite-instance-media-head > span {
    min-width: 0;
    overflow: hidden;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-media-status {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    padding: 6px 8px;
}

.preinvite-instance-control.is-media[data-media-state="empty"] .preinvite-instance-media-status {
    background: #e2e8f0;
    color: #64748b;
}

.preinvite-instance-control.is-media[data-media-state="changed"] .preinvite-instance-media-status {
    background: #fef3c7;
    color: #a16207;
}

.preinvite-instance-control.is-media[data-media-state="uploading"] .preinvite-instance-media-status {
    background: #dbeafe;
    color: #1d4ed8;
}

.preinvite-instance-control.is-media[data-media-state="error"] .preinvite-instance-media-status {
    background: #fee2e2;
    color: #b91c1c;
}

.preinvite-instance-control input,
.preinvite-instance-control textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: 13px;
    line-height: 1.45;
    outline: none;
    padding: 9px 10px;
}

.preinvite-instance-control textarea {
    resize: vertical;
}

.preinvite-instance-control input:focus,
.preinvite-instance-control textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .11);
}

.preinvite-instance-control input:disabled,
.preinvite-instance-control textarea:disabled,
.preinvite-instance-control button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.preinvite-instance-control.is-color > div,
.preinvite-instance-control-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.preinvite-instance-file-input {
    display: none;
}

.preinvite-instance-upload-status {
    flex-basis: 100%;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    line-height: 1.5;
}

.preinvite-instance-upload-status:empty {
    display: none;
}

.preinvite-instance-media-state-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 8px;
    align-items: center;
    border: 1px solid #bbf7d0;
    border-radius: 11px;
    background: #f0fdf4;
    padding: 8px 9px;
}

.preinvite-instance-media-state-panel strong {
    color: #15803d;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.preinvite-instance-media-state-panel span {
    min-width: 0;
    color: #334155;
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.preinvite-instance-media-state-panel code {
    grid-column: 1 / -1;
    min-width: 0;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
    color: #64748b;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.35;
    padding: 5px 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-instance-media-state-panel[data-media-state="empty"] {
    border-color: #e2e8f0;
    background: #f8fafc;
}

.preinvite-instance-media-state-panel[data-media-state="empty"] strong {
    color: #64748b;
}

.preinvite-instance-media-state-panel[data-media-state="changed"] {
    border-color: #fde68a;
    background: #fffbeb;
}

.preinvite-instance-media-state-panel[data-media-state="changed"] strong {
    color: #a16207;
}

.preinvite-instance-media-state-panel[data-media-state="uploading"] {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.preinvite-instance-media-state-panel[data-media-state="uploading"] strong {
    color: #1d4ed8;
}

.preinvite-instance-media-state-panel[data-media-state="error"] {
    border-color: #fecaca;
    background: #fef2f2;
}

.preinvite-instance-media-state-panel[data-media-state="error"] strong {
    color: #b91c1c;
}

.preinvite-instance-control.is-color input[type="color"] {
    flex: 0 0 42px;
    height: 38px;
    padding: 4px;
}

.preinvite-instance-control.is-choice > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.preinvite-instance-control.is-choice button,
.preinvite-instance-control-tools button {
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 10px;
}

.preinvite-instance-control.is-choice button.is-active {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.preinvite-instance-media-preview {
    display: grid;
    place-items: center;
    position: relative;
    min-height: 112px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    overflow: hidden;
}

.preinvite-instance-media-preview::after {
    position: absolute;
    top: 8px;
    right: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #475569;
    content: attr(data-media-state-label);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 6px 8px;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
}

.preinvite-instance-media-preview.is-synced {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.preinvite-instance-media-preview.is-synced::after {
    color: #15803d;
}

.preinvite-instance-media-preview.is-changed {
    border-color: #facc15;
    background: #fffbeb;
    box-shadow: inset 0 0 0 2px rgba(250, 204, 21, .12);
}

.preinvite-instance-media-preview.is-changed::after {
    color: #a16207;
}

.preinvite-instance-media-preview.is-uploading {
    border-color: #93c5fd;
    background: #eff6ff;
}

.preinvite-instance-media-preview.is-uploading::after {
    color: #1d4ed8;
}

.preinvite-instance-media-preview.is-error {
    border-color: #fecaca;
    background: #fef2f2;
}

.preinvite-instance-media-preview.is-error::after {
    color: #b91c1c;
}

.preinvite-instance-media-preview:hover,
.preinvite-instance-media-preview:focus-visible {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    outline: none;
}

.preinvite-instance-media-preview img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.preinvite-instance-media-preview em {
    color: #94a3b8;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.preinvite-instance-media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.preinvite-instance-media-grid button {
    display: grid;
    gap: 4px;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
    padding: 5px;
}

.preinvite-instance-media-grid button.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
    color: #1d4ed8;
}

.preinvite-instance-media-grid img {
    width: 100%;
    aspect-ratio: 1 / .72;
    border-radius: 7px;
    object-fit: cover;
}

.preinvite-instance-media-grid span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .preinvite-manage-page .preinvite-instance-editor {
        grid-template-columns: 280px 390px minmax(390px, 1fr);
    }

    .preinvite-manage-page .preinvite-instance-shell-head {
        align-items: center;
        grid-template-columns: minmax(260px, 1fr) auto;
    }

    .preinvite-instance-workflow {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .preinvite-instance-shell-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .preinvite-instance-current {
        grid-column: 1 / -1;
    }

    .preinvite-instance-progress {
        grid-template-columns: 1fr;
    }

    .preinvite-instance-progress-metrics {
        grid-template-columns: repeat(4, minmax(72px, 1fr));
    }

    .preinvite-instance-subpage-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .preinvite-instance-scope-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .preinvite-instance-link-breakdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .preinvite-instance-stage-board {
        grid-template-columns: repeat(5, minmax(132px, 1fr));
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .preinvite-instance-progress-todo-list {
        grid-template-columns: 1fr;
    }

    .preinvite-instance-priority {
        grid-template-columns: 1fr;
    }

    .preinvite-instance-priority button {
        justify-self: start;
    }

    .preinvite-manage-page .preinvite-instance-shell-actions {
        justify-content: flex-start;
    }

    .preinvite-manage-page .preinvite-instance-tree,
    .preinvite-manage-page .preinvite-instance-preview,
    .preinvite-manage-page .preinvite-instance-inspector {
        position: sticky;
        top: 92px;
        max-height: calc(100vh - 112px);
    }

    .preinvite-manage-page .preinvite-instance-tree,
    .preinvite-manage-page .preinvite-instance-inspector {
        overflow: auto;
    }
}

.brand > span {
    min-width: 0;
}

.brand-mark {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--blue), var(--indigo));
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22);
    color: #fff;
    font-weight: 900;
}

.brand strong,
.brand small,
.user-chip strong,
.user-chip small,
.role-card span,
.role-card small {
    display: block;
}

.brand strong {
    overflow: hidden;
    background: linear-gradient(90deg, var(--blue), var(--indigo));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 15px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand small,
.user-chip small,
.conference-card span,
.subtext,
.panel-head p,
.toolbar span,
.metric-card span,
.metric-card small,
.template-card span,
.template-card small,
.detail-list dt,
.share-box span {
    color: var(--muted);
    font-size: 12px;
}

.icon-button {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--muted);
    cursor: pointer;
}

.icon-button:hover {
    border-color: rgba(37, 99, 235, 0.32);
    color: var(--blue);
}

.scope-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 16px 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
    padding: 4px;
}

.scope-switch button {
    min-height: 32px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
}

.scope-switch button.is-active {
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    color: var(--ink);
}

.conference-card,
.role-card,
.metric-card,
.panel,
.toolbar,
.notice,
.empty-state,
.site-card,
.template-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.conference-card {
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.current-conference-flat {
    width: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    padding-top: 14px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.conference-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin-bottom: 8px;
}

.conference-row-top .name {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 168px;
    overflow: hidden;
    margin: 0;
    padding-right: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conference-row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    line-height: normal;
}

.conference-row-bottom .time {
    flex: 0 0 auto;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.conference-row-bottom .location {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 120px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.45);
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conference-card .conference-row-bottom .time,
.conference-card .conference-row-bottom .location {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
}

.status-tag {
    flex: 0 0 auto;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
    transform: scale(0.95);
    transform-origin: right center;
}

.conference-card .status-tag {
    font-size: 11px;
}

.status-tag.tag-preparing {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.status-tag.tag-running {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.status-tag.tag-ended {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.status-tag.tag-muted {
    background: rgba(156, 163, 175, 0.12);
    color: #9ca3af;
}

.side-nav {
    flex: 1 1 auto;
    min-height: 0;
    margin: 16px -6px 0;
    padding: 0 6px 18px;
    overflow-y: auto;
    scrollbar-width: none;
}

.side-nav::-webkit-scrollbar {
    display: none;
}

.sidebar-footer {
    flex: 0 0 auto;
    margin: auto -15px 0;
    border-top: 0;
    background: transparent;
    padding: 0 16px 24px;
}

.sidebar-section {
    display: grid;
    gap: 5px;
    padding: 5px 0 12px;
}

.sidebar-section + .sidebar-section {
    border-top: 1px solid color-mix(in srgb, var(--line) 54%, transparent);
    padding-top: 14px;
}

.sidebar-section-title {
    margin: 0 10px 6px;
    color: var(--faint);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
}

.sidebar-section-list {
    display: grid;
    gap: 4px;
}

.nav-label,
.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    border-radius: 13px;
    padding: 8px 11px;
}

.nav-label {
    color: var(--faint);
    font-size: 12px;
    font-weight: 900;
}

.nav-link {
    color: var(--muted);
    font-weight: 500;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.nav-link-primary {
    margin-bottom: 4px;
}

.nav-link:hover {
    background: color-mix(in srgb, var(--surface-muted) 80%, transparent);
    color: var(--ink);
}

.nav-link.is-active {
    background: var(--blue-soft);
    color: var(--blue);
    font-weight: 600;
}

.nav-link.is-active .nav-link-icon {
    background: #dbeafe;
    color: var(--blue);
}

.nav-link.is-logout {
    color: #64748b;
}

.nav-link.is-logout:hover {
    background: var(--red-soft);
    color: var(--red);
}

.nav-link-icon {
    display: inline-grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--surface-muted) 76%, transparent);
    color: var(--faint);
}

.nav-link-icon .ui-icon {
    width: 16px;
    height: 16px;
}

.nav-module {
    display: grid;
    gap: 3px;
    padding: 3px 0 5px;
}

.nav-module + .nav-module,
.nav-link-primary + .nav-module,
.nav-module + .nav-link-primary {
    margin-top: 2px;
}

.nav-module-title {
    width: 100%;
    border: 0;
    appearance: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    border-radius: 13px;
    padding: 8px 11px;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    text-align: left;
    transition: background 0.18s ease, color 0.18s ease;
}

.nav-module-title::after {
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    content: "";
    opacity: 0.72;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav-module.is-open .nav-module-title::after {
    opacity: 1;
    transform: rotate(225deg) translate(-1px, -1px);
}

.nav-module-title.is-active {
    background: var(--blue-soft);
    color: var(--blue);
    font-weight: 600;
}

.nav-module-title.is-active .nav-link-icon {
    background: #dbeafe;
    color: var(--blue);
}

.nav-sublist {
    display: none;
    gap: 3px;
    padding: 0 0 2px 46px;
}

.nav-module.is-open .nav-sublist {
    display: grid;
}

.nav-sublink {
    display: flex;
    align-items: center;
    min-height: 34px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    margin: 1px 0;
    padding: 7px 10px;
    transition: background 0.18s ease, color 0.18s ease;
}

.nav-sublink:hover {
    background: color-mix(in srgb, var(--surface-soft) 50%, transparent);
    color: var(--blue);
}

.nav-sublink.is-active {
    background: color-mix(in srgb, var(--blue-soft) 70%, transparent);
    color: var(--blue);
    font-weight: 600;
}

.nav-group {
    padding: 8px 0;
}

.nav-group h2 {
    margin: 4px 10px 7px;
    color: var(--faint);
    font-size: 11px;
    font-weight: 900;
}

.nav-group.is-open h2 {
    color: var(--muted);
}

.nav-children {
    display: grid;
    gap: 4px;
}

.nav-children a,
.nav-children .is-disabled,
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    border-radius: 12px;
    padding: 8px 11px;
    color: var(--muted);
    font-weight: 800;
}

.nav-item {
    margin: 4px 0;
}

.nav-children a:hover,
.nav-children a.is-active,
.nav-item:hover,
.nav-item.is-active {
    background: var(--blue-soft);
    color: var(--blue);
}

.nav-children-rich a,
.nav-children-rich .is-disabled {
    align-items: flex-start;
    min-height: 54px;
}

.nav-children-rich b,
.nav-children-rich small {
    display: block;
}

.nav-children-rich small {
    color: var(--faint);
    font-size: 11px;
    font-weight: 600;
}

.nav-children .is-disabled {
    color: var(--faint);
    cursor: not-allowed;
    opacity: 0.58;
}

.sidebar {
    border-right-color: rgba(148, 163, 184, 0.16);
    background: #0f172a;
}

.sidebar .brand-row {
    border-bottom-color: rgba(148, 163, 184, 0.16);
}

.sidebar .brand small,
.sidebar .sidebar-section-title,
.sidebar .nav-label,
.sidebar .nav-link,
.sidebar .nav-module-title,
.sidebar .nav-sublink,
.sidebar .nav-link.is-logout {
    color: #94a3b8;
}

.sidebar .nav-link-icon {
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.is-logout:hover,
.sidebar .nav-module-title:hover,
.sidebar .nav-sublink:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.sidebar .nav-link:hover .nav-link-icon,
.sidebar .nav-link.is-logout:hover .nav-link-icon,
.sidebar .nav-module-title:hover .nav-link-icon {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.sidebar .nav-sublist {
    padding-left: 0;
}

.sidebar .nav-sublink {
    padding-left: 49px;
}

.sidebar .nav-link.is-active,
.sidebar .nav-sublink.is-active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.sidebar .nav-module-title.is-active {
    background: transparent;
    color: #ffffff;
}

.sidebar .nav-sublink.is-active {
    position: relative;
}

.sidebar .nav-sublink.is-active::before {
    position: absolute;
    top: 50%;
    left: 11px;
    display: block;
    width: 4px;
    height: 16px;
    border-radius: 999px;
    background: #2563eb;
    content: "";
    transform: translateY(-50%);
}

.sidebar .nav-link.is-active .nav-link-icon,
.sidebar .nav-module-title.is-active .nav-link-icon {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
}

.sidebar .sidebar-footer {
    border-top-color: transparent;
    background: transparent;
}

.sidebar .conference-card {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding-top: 14px;
}

.sidebar .conference-row-top .name {
    color: rgba(255, 255, 255, 0.85);
}

.sidebar .conference-row-bottom,
.sidebar .conference-row-bottom .location {
    color: rgba(255, 255, 255, 0.45);
}

.role-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding: 14px;
}

.role-card span,
.role-card small {
    color: var(--faint);
    font-size: 11px;
}

.role-card strong {
    color: #e11d48;
    font-size: 13px;
}

.role-card i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    box-shadow: 0 0 0 6px rgba(244, 63, 94, 0.12);
}

.role-card i.is-admin {
    background: #f43f5e;
}

.role-card i.is-operations {
    background: var(--amber);
}

.role-card i.is-manager {
    background: var(--faint);
}

.workspace {
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 66px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px);
    padding: 12px 24px;
}

.topbar-page-title {
    display: flex;
    align-items: center;
    min-width: 0;
}

.topbar-title {
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 0;
}

.topbar-title strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border-radius: 999px;
    background: #2563eb;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 6px 16px;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.topbar-primary-action:hover {
    background: #1d4ed8;
    color: #fff;
}

.topbar-page-title .breadcrumbs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    height: 22px;
    min-width: 0;
    overflow: hidden;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
    line-height: 22px;
    user-select: none;
}

.topbar-page-title .breadcrumbs span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-page-title .breadcrumbs span:not(.is-current) {
    color: #64748b;
    font-weight: 500;
}

.topbar-page-title .breadcrumbs b {
    color: #64748b;
    font-weight: 400;
    margin: 0 6px;
}

.topbar-page-title .breadcrumbs .is-current {
    color: #1e293b;
    font-weight: 700;
}

html[data-theme="dark"] .topbar-page-title .breadcrumbs span:not(.is-current) {
    color: #8190a5;
}

html[data-theme="dark"] .topbar-page-title .breadcrumbs b {
    color: #40516a;
}

html[data-theme="dark"] .topbar-page-title .breadcrumbs .is-current {
    color: #f8fafc;
}

.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.topbar-search {
    position: relative;
    max-width: 520px;
}

.topbar-search .ui-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    color: var(--faint);
    transform: translateY(-50%);
}

.topbar-search input {
    width: 100%;
    height: 40px;
    border-radius: 999px;
    background: var(--surface-soft);
    padding-left: 40px;
}

.context-pickers {
    display: flex;
    align-items: center;
    gap: 10px;
}

.context-picker {
    position: relative;
}

.picker-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-width: 170px;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    padding: 7px 10px 7px 12px;
    text-align: left;
}

.topbar-picker-button {
    min-width: 172px;
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 42%, transparent);
    padding: 6px 12px 6px 15px;
}

.picker-button:hover,
.picker-button[aria-expanded="true"] {
    border-color: rgba(37, 99, 235, 0.36);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.topbar-picker-button:hover,
.topbar-picker-button[aria-expanded="true"] {
    border-color: transparent;
    background: var(--blue-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.10), 0 8px 18px rgba(37, 99, 235, 0.08);
}

.picker-button span,
.picker-option small {
    display: block;
    color: var(--faint);
    font-size: 11px;
}

.picker-button strong {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-picker-button strong {
    color: var(--text);
    font-weight: 500;
}

.picker-button .ui-icon {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--faint);
}

.picker-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    width: 306px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 8px;
}

.picker-menu-right {
    right: 0;
    left: auto;
}

.picker-search {
    position: relative;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
    padding: 0 0 8px;
}

.picker-search .ui-icon {
    position: absolute;
    top: 17px;
    left: 10px;
    width: 16px;
    height: 16px;
    color: var(--faint);
    transform: translateY(-50%);
}

.picker-search input {
    width: 100%;
    height: 34px;
    border-radius: 11px;
    background: var(--surface-soft);
    line-height: 34px;
    padding: 0 12px 0 34px;
}

.picker-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 13px;
    padding: 10px;
    color: var(--text);
}

.picker-option:hover,
.picker-option.is-selected {
    background: var(--blue-soft);
    color: var(--blue);
}

.picker-option b {
    display: block;
    font-size: 13px;
}

.picker-option .ui-icon {
    color: var(--blue);
}

.user-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    border-left: 1px solid var(--line);
    padding-left: 12px;
}

.user-chip-trigger {
    border: 0;
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0;
    min-height: 40px;
    cursor: pointer;
    width: 100%;
}

.user-chip-trigger .ui-icon {
    width: 16px;
    height: 16px;
    color: var(--faint);
}

.user-chip > span:last-child,
.user-chip-trigger > span:last-child {
    display: grid;
    gap: 2px;
}

.user-chip strong {
    color: #1e293b;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.15;
}

html[data-theme="dark"] .user-chip strong {
    color: #fff;
}

.user-chip small {
    color: var(--faint);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 2px;
}

.avatar {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--indigo));
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
}

.avatar img {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    object-fit: cover;
    object-position: center center;
}

.avatar.is-profile-avatar {
    font-size: 40px;
}

.user-menu {
    width: 168px;
    padding: 6px;
}

.user-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    border-radius: 10px;
    color: var(--text);
    min-height: 36px;
    padding: 8px 10px;
    font-size: 12px;
}

.user-menu-item .ui-icon {
    width: 14px;
    height: 14px;
    color: var(--muted);
}

.user-menu-item:hover {
    background: var(--blue-soft);
    color: var(--blue);
}

.user-menu-item:hover .ui-icon {
    color: var(--blue);
}

.user-menu-item.is-danger {
    color: var(--red);
}

.user-menu-item.is-danger .ui-icon {
    color: var(--red);
}

.user-menu-item.is-danger:hover {
    background: var(--red-soft);
    color: var(--red);
}

.avatar .ui-icon {
    width: 18px;
    height: 18px;
}

.topbar-role {
    min-height: 36px;
    padding: 6px 11px;
    white-space: nowrap;
}

.content {
    min-width: 0;
    padding: 24px 28px 32px;
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
}

.breadcrumbs b {
    color: var(--faint);
    font-weight: 400;
}

.permission-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.permission-strip span,
.badge,
.role-pill,
.chip-cell span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 25px;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 800;
}

.badge::before {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    content: "";
    animation: hydPulse 1.7s ease-in-out infinite;
}

@keyframes hydPulse {
    0%,
    100% {
        opacity: 0.42;
        transform: scale(0.86);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.permission-strip .on,
.badge.is-success {
    background: var(--green-soft);
    color: #059669;
}

.permission-strip .off,
.badge.is-muted {
    background: var(--surface-muted);
    color: var(--muted);
}

.badge.is-warning {
    background: var(--amber-soft);
    color: #b45309;
}

.badge.is-danger {
    background: var(--red-soft);
    color: #dc2626;
}

.badge.is-info,
.role-pill {
    background: var(--blue-soft);
    color: var(--blue);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 16px;
}

.metric-grid.compact {
    margin-top: 16px;
}

.metric-card {
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 112px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.metric-card span,
.metric-card small {
    color: #64748b;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.metric-card strong {
    color: #0f172a;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.split-grid,
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.panel,
.toolbar,
.notice {
    padding: 18px;
}

.panel {
    min-width: 0;
}

.panel-head,
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.panel-head {
    margin-bottom: 14px;
}

.toolbar {
    margin-bottom: 16px;
}

.toolbar > div:first-child {
    display: grid;
    gap: 3px;
}

.toolbar strong {
    color: var(--ink);
}

.toolbar-actions,
.card-actions,
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 8px;
}

.row-actions form,
.inline-reset-form {
    display: flex;
    align-items: center;
    gap: 7px;
}

.inline-reset-form input {
    width: 150px;
    height: 33px;
}

.btn,
.actions button,
.card-actions button,
.template-card button,
.row-actions button,
.inline-reset-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 33px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    padding: 0 11px;
    font-weight: 800;
    text-decoration: none;
}

.btn:hover,
.actions button:hover,
.card-actions button:hover,
.template-card button:hover,
.row-actions button:hover,
.inline-reset-form button:hover {
    border-color: rgba(37, 99, 235, 0.30);
    background: var(--blue-soft);
    color: var(--blue);
}

.btn-primary {
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
    color: #fff;
}

.btn-primary:hover {
    border-color: var(--blue-dark);
    background: var(--blue-dark);
    color: #fff;
}

.btn-quiet {
    background: var(--surface-soft);
}

button:disabled,
.btn:disabled,
.btn.is-disabled {
    border-color: var(--line) !important;
    background: var(--surface-muted) !important;
    box-shadow: none !important;
    color: var(--faint) !important;
    cursor: not-allowed !important;
    opacity: 0.72;
    pointer-events: none;
}

.actions .danger {
    border-color: rgba(239, 68, 68, 0.22);
    color: var(--red);
}

.asset-stack,
.bar-list,
.permission-grid,
.rule-grid {
    display: grid;
    gap: 10px;
}

.asset-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
    padding: 10px 12px;
}

.asset-row div {
    display: grid;
    min-width: 0;
}

.asset-row strong,
.asset-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-row {
    display: grid;
    gap: 7px;
}

.bar-row div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.bar-row i {
    display: block;
    width: 100%;
    height: 9px;
    border-radius: 999px;
    background: var(--surface-muted);
    overflow: hidden;
}

.bar-row i::before {
    display: block;
    width: var(--bar-width);
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--indigo));
    content: "";
}

.permission-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.permission-item {
    display: grid;
    gap: 4px;
    min-height: 66px;
    border-radius: 13px;
    padding: 11px;
}

.permission-item.is-enabled {
    background: var(--green-soft);
    color: #059669;
}

.permission-item.is-disabled {
    background: var(--surface-muted);
    color: var(--muted);
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.form-panel {
    display: grid;
    gap: 18px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-grid.single {
    grid-template-columns: 1fr;
}

.form-grid label {
    display: grid;
    gap: 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
}

.form-grid label > span {
    color: var(--muted);
}

.form-grid input,
.form-grid select,
.form-grid textarea {
    width: 100%;
}

.form-grid input,
.form-grid select {
    height: 42px;
}

.form-grid .is-wide {
    grid-column: 1 / -1;
}

.form-grid input[readonly],
.form-grid textarea[readonly],
.form-grid select:disabled {
    background: var(--surface-muted);
    color: var(--muted);
}

.filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) auto;
    gap: 12px;
    align-items: end;
}

.filter-grid label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.filter-grid input,
.filter-grid select {
    width: 100%;
    height: 40px;
}

.filter-actions,
.pagination,
.pagination > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pagination {
    justify-content: space-between;
    border-top: 1px solid var(--line);
    margin-top: 14px;
    padding-top: 14px;
    color: var(--muted);
}

.btn.is-disabled {
    border-color: var(--line);
    background: var(--surface-muted);
    color: var(--faint);
    cursor: not-allowed;
    pointer-events: none;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.profile-form-shell .conference-form-section:first-child {
    padding-top: 20px;
}

.profile-info-form {
    display: contents;
}

.profile-avatar-stage {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    min-height: 116px;
    background: transparent;
}

.profile-avatar-preview-wrap {
    position: relative;
    justify-self: center;
}

.profile-avatar-hero {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(148, 163, 184, 0.42);
    overflow: hidden;
}

.profile-avatar-hero .avatar.is-profile-avatar {
    width: 100%;
    height: 100%;
    box-shadow: none;
    font-size: 34px;
}

.profile-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
    object-fit: cover;
    object-position: center center;
}

.profile-avatar-check {
    position: absolute;
    right: 2px;
    bottom: 6px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 3px solid var(--surface);
    border-radius: 999px;
    background: #10b981;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.20);
}

.profile-avatar-check::before {
    width: 8px;
    height: 4px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    content: "";
    transform: rotate(-45deg) translate(1px, -1px);
}

.profile-avatar-panel {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.profile-avatar-copy {
    display: grid;
    gap: 3px;
}

.profile-avatar-copy strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
}

.profile-avatar-copy span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.profile-avatar-format {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
    min-height: 38px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-muted) 64%, var(--surface));
    color: color-mix(in srgb, var(--muted) 82%, var(--text));
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    padding: 8px 14px;
}

.profile-avatar-upload-form {
    display: inline-flex;
    align-items: center;
}

.profile-file-input {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.profile-avatar-actions-row {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 36px;
}

.profile-avatar-upload-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 0;
    border-radius: 12px;
    background: var(--blue);
    box-shadow: 0 9px 18px rgba(37, 99, 235, 0.16);
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    padding: 0 17px;
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.profile-avatar-upload-button:hover {
    background: var(--blue-dark);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.20);
}

.profile-reset-link {
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--muted) 86%, var(--text));
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    padding: 0;
    transition: color 0.16s ease;
}

.profile-reset-link:hover {
    color: var(--blue);
}

.profile-reset-link:disabled {
    color: var(--faint);
    cursor: not-allowed;
}

.profile-security-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 78px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 68%, transparent);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
    padding: 18px 20px;
}

.profile-security-panel div {
    display: grid;
    gap: 4px;
}

.profile-security-panel strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.profile-security-panel span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.profile-security-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue-soft) 70%, var(--surface));
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    padding: 0 16px;
    white-space: nowrap;
}

.profile-security-action:hover {
    border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
    color: var(--blue-dark);
}

.conference-form-shell {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    background: transparent;
    padding-bottom: 96px;
}

.conference-form-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 32px;
    border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    padding: 32px 0;
}

.conference-form-section:first-of-type {
    padding-top: 20px;
}

.conference-section-aside {
    padding-top: 1px;
}

.conference-section-aside h2 {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
}

.conference-section-aside p {
    max-width: 220px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.8;
}

.conference-section-body {
    min-width: 0;
}

.conference-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

.premium-field {
    display: block;
    min-width: 0;
}

.premium-field > span {
    display: block;
    margin-bottom: 6px;
    color: color-mix(in srgb, var(--text) 86%, var(--ink));
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
}

.premium-field.is-wide {
    grid-column: 1 / -1;
}

.premium-field input,
.premium-field select,
.premium-field textarea {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--line-strong) 86%, transparent);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.premium-field input,
.premium-field select {
    min-height: 39px;
    padding: 0 14px;
}

.premium-field textarea {
    min-height: 124px;
    padding: 12px 14px;
    line-height: 1.7;
    resize: none;
}

.premium-field input::placeholder,
.premium-field textarea::placeholder {
    color: var(--faint);
}

.premium-field input:focus,
.premium-field select:focus,
.premium-field textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-soft) 76%, transparent);
}

.premium-field.has-error input {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--red-soft) 78%, transparent);
}

.field-inline-error {
    display: block;
    margin-top: 7px;
    color: #dc2626;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.premium-field input[readonly],
.premium-field textarea[readonly],
.premium-field select:disabled {
    background: color-mix(in srgb, var(--surface-muted) 62%, var(--surface));
    color: var(--muted);
}

html[data-theme="dark"] .premium-field > span,
html[data-theme="dark"] .settings-field-label-row > span {
    color: color-mix(in srgb, var(--text) 76%, var(--ink));
}

html[data-theme="dark"] .premium-field input,
html[data-theme="dark"] .premium-field select,
html[data-theme="dark"] .premium-field textarea {
    border-color: color-mix(in srgb, var(--line-strong) 82%, transparent);
    background: var(--surface);
    color: var(--ink);
}

.premium-field input[type="date"] {
    color-scheme: light;
}

html[data-theme="dark"] .premium-field input[type="date"] {
    color-scheme: dark;
}

.premium-field input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.48;
}

.premium-select-wrap {
    position: relative;
}

.premium-select-wrap select {
    appearance: none;
    padding-right: 36px;
}

.premium-select-wrap::after {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--faint);
    border-bottom: 1.5px solid var(--faint);
    content: "";
    pointer-events: none;
    transform: translateY(-65%) rotate(45deg);
}

.conference-status-auto {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 39px;
}

.conference-status-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 68%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-muted) 56%, var(--surface));
    color: var(--faint);
    cursor: default;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 0 12px;
    user-select: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.conference-status-choice.is-warning {
    border-color: color-mix(in srgb, var(--line-strong) 68%, transparent);
    color: var(--faint);
}

.conference-status-choice.is-success {
    border-color: color-mix(in srgb, var(--line-strong) 68%, transparent);
    color: var(--faint);
}

.conference-status-choice.is-danger {
    border-color: color-mix(in srgb, var(--line-strong) 68%, transparent);
    color: var(--faint);
}

.conference-status-choice.is-active.is-warning {
    background: color-mix(in srgb, var(--amber-soft) 64%, var(--surface));
    border-color: color-mix(in srgb, var(--amber) 56%, var(--line));
    box-shadow: none;
    color: color-mix(in srgb, var(--amber) 86%, var(--ink));
    font-weight: 600;
}

.conference-status-choice.is-active.is-success {
    background: color-mix(in srgb, var(--green-soft) 64%, var(--surface));
    border-color: color-mix(in srgb, var(--green) 56%, var(--line));
    box-shadow: none;
    color: color-mix(in srgb, var(--green) 86%, var(--ink));
    font-weight: 600;
}

.conference-status-choice.is-active.is-danger {
    background: color-mix(in srgb, var(--red-soft) 64%, var(--surface));
    border-color: color-mix(in srgb, var(--red) 56%, var(--line));
    box-shadow: none;
    color: color-mix(in srgb, var(--red) 86%, var(--ink));
    font-weight: 600;
}

.conference-status-choice.is-active::before {
    width: 5.5px;
    height: 5.5px;
    flex: 0 0 5.5px;
    border-radius: 999px;
    background: currentColor;
    content: "";
    margin-right: 6px;
    animation: hydPulse 1.7s ease-in-out infinite;
}

.user-conference-scope {
    display: grid;
    gap: 10px;
}

.user-conference-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
    cursor: pointer;
    padding: 11px 12px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.user-conference-option:hover {
    border-color: color-mix(in srgb, var(--blue) 26%, var(--line));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-soft) 54%, transparent);
}

.user-conference-check,
.user-conference-default input {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
}

.user-conference-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.user-conference-copy strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-conference-copy small {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-conference-default {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.user-conference-option:has(.user-conference-check:checked) {
    border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 42%, var(--surface));
}

.user-conference-option:has([data-user-conference-default]:checked) .user-conference-default {
    color: var(--blue);
}

.user-conference-empty {
    padding: 22px 0;
}

.conference-cycle-field {
    overflow: visible;
}

.date-range-hub.conference-date-range {
    display: flex;
    width: calc((100% - 20px) / 2);
    min-width: 0;
}

.conference-date-range .date-range-trigger {
    min-height: 39px;
    border-color: color-mix(in srgb, var(--line-strong) 86%, transparent);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
    font-size: 12px;
    padding: 0 14px;
}

.date-range-hub.conference-date-range.has-leading-icon .date-range-trigger {
    grid-template-columns: 15px auto minmax(0, 1fr) auto;
    column-gap: 7px;
    padding-left: 13px;
}

.conference-date-range .filter-control-icon.is-calendar {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
    color: color-mix(in srgb, var(--faint) 88%, var(--muted));
}

.conference-date-range .date-range-title,
.conference-date-range .date-range-trigger strong {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.conference-form-shell .date-range-title,
.conference-form-shell .date-picker-head span,
.conference-form-shell .date-range-fields span,
.conference-form-shell .date-picker-weekdays {
    font-size: 12px;
}

.conference-form-shell .date-range-trigger strong,
.conference-form-shell .date-picker-head strong,
.conference-form-shell .date-range-fields input,
.conference-form-shell .date-picker-month-title,
.conference-form-shell .date-picker-day {
    font-size: 12px;
}

.conference-date-range .date-range-trigger:disabled {
    background: color-mix(in srgb, var(--surface-muted) 62%, var(--surface));
    color: var(--muted);
    cursor: default;
}

.conference-date-range .date-range-panel {
    width: min(620px, calc(100vw - 40px));
}

.premium-cover-field {
    position: relative;
    align-self: end;
}

.cover-file-input {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.cover-preview-row {
    display: flex;
    align-items: center;
    min-height: 72px;
    border: 1px dashed color-mix(in srgb, var(--line-strong) 82%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-muted) 60%, var(--surface));
    padding: 14px;
}

.cover-thumb-frame {
    position: relative;
    width: 64px;
    height: 40px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--faint) 34%, var(--surface-muted));
    color: color-mix(in srgb, var(--text) 72%, var(--ink));
    overflow: hidden;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.cover-thumb {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    background: transparent;
    object-fit: cover;
}

.cover-preview-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
    margin-left: 14px;
}

.cover-preview-copy strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
}

.cover-preview-copy small {
    max-width: 360px;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cover-tools {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    padding-left: 16px;
}

.cover-tools button {
    border: 0;
    background: transparent;
    color: var(--blue);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    padding: 0;
    transition: color 0.16s ease;
}

.cover-tools button:hover {
    color: var(--blue-dark);
}

.cover-tools button[data-cover-remove] {
    color: #dc2626;
}

.cover-tools button[data-cover-remove]:hover {
    color: #b91c1c;
}

.cover-tools i {
    width: 1px;
    height: 13px;
    background: color-mix(in srgb, var(--line-strong) 70%, transparent);
}

.cover-dropzone,
.cover-empty-note {
    display: grid;
    place-items: center;
    min-height: 54px;
    border: 1px dashed color-mix(in srgb, var(--line-strong) 78%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-soft) 74%, transparent);
    color: var(--faint);
    text-align: center;
}

.cover-dropzone {
    cursor: pointer;
    gap: 2px;
    padding: 10px 12px;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.cover-dropzone strong,
.cover-empty-note {
    font-size: 11px;
    font-weight: 600;
}

.cover-dropzone small {
    font-size: 10px;
    font-weight: 500;
}

.cover-dropzone:hover,
.cover-dropzone.is-dragging {
    border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 46%, var(--surface));
    color: var(--blue);
}

.conference-form-actions {
    position: fixed;
    right: calc(34px + max(0px, (100vw - 268px - 68px - 1180px) / 2));
    bottom: 22px;
    left: auto;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: auto;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(18px);
    padding: 10px 12px;
    pointer-events: auto;
}

html[data-theme="dark"] .conference-form-actions {
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.form-return-link {
    color: var(--faint);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 16px;
    transition: color 0.16s ease;
}

.form-return-link:hover {
    color: var(--muted);
}

.form-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 0;
    border-radius: 12px;
    background: var(--blue);
    box-shadow: 0 9px 18px rgba(37, 99, 235, 0.16);
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 0 20px;
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.form-submit-button:hover {
    background: var(--blue-dark);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.20);
}

.form-submit-button:disabled {
    background: color-mix(in srgb, var(--faint) 60%, var(--surface-muted));
    box-shadow: none;
    color: var(--surface);
    cursor: not-allowed;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.settings-premium-page {
    max-width: 1180px;
    margin: 0 auto;
}

.settings-toolline {
    align-items: center;
    margin-bottom: 18px;
}

.settings-page-heading {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.settings-page-heading span,
.settings-panel-head span,
.settings-category-tab span,
.settings-extension-strip span {
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-page-heading strong {
    color: var(--ink);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
}

.settings-page-heading small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.settings-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.settings-category-rail {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 8px;
}

.settings-category-tab,
.settings-category-panel,
.settings-safe-note,
.settings-extension-strip {
    border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.035);
}

.settings-category-tab {
    display: grid;
    gap: 5px;
    border-radius: 14px;
    padding: 13px 14px;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.settings-category-tab:hover,
.settings-category-tab.is-active {
    border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 60%, var(--surface));
    color: var(--blue);
    transform: translateY(-1px);
}

.settings-category-tab strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.settings-category-tab small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
}

.settings-pending-note {
    display: block;
    color: #dc2626;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.65;
}

.settings-panel-pending-note {
    margin-top: 2px;
}

.settings-field-pending-note {
    margin-top: 7px;
}

html[data-theme="dark"] .settings-pending-note {
    color: #f87171;
}

.settings-category-panel {
    display: grid;
    gap: 18px;
    min-width: 0;
    border-radius: 18px;
    padding: 20px;
}

.settings-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 64%, transparent);
    padding-bottom: 16px;
}

.settings-panel-head > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.settings-panel-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    font-weight: 900;
}

.settings-panel-head p {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

.settings-section-stack {
    display: grid;
    gap: 22px;
}

.settings-form-section {
    display: grid;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 56%, transparent);
}

.settings-form-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.settings-form-section-head {
    display: grid;
    gap: 4px;
}

.settings-form-section-head span {
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
}

.settings-form-section-head small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
}

.settings-field-label-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    min-width: 0;
}

.settings-field-label-row > span {
    flex: 0 0 auto;
    min-width: max-content;
    color: color-mix(in srgb, var(--text) 86%, var(--ink));
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.settings-field-label-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.settings-field-help-note {
    display: block;
    max-width: min(100%, 520px);
    color: var(--faint);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
    text-align: right;
}

.settings-directory-usage {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: min(100%, 280px);
    min-height: 22px;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue-soft) 58%, var(--surface));
    color: color-mix(in srgb, var(--blue) 86%, var(--ink));
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    overflow: hidden;
    padding: 0 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-directory-usage.is-missing {
    border-color: color-mix(in srgb, var(--line-strong) 70%, transparent);
    background: color-mix(in srgb, var(--surface-muted) 70%, var(--surface));
    color: var(--muted);
}

.settings-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.settings-inline-check input {
    width: 14px;
    height: 14px;
    accent-color: var(--blue);
}

.settings-safe-note {
    border-color: color-mix(in srgb, var(--amber) 28%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--amber-soft) 72%, var(--surface));
    color: color-mix(in srgb, var(--amber) 76%, var(--text));
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
    padding: 11px 13px;
}

.settings-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 39px;
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
}

.settings-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.settings-toggle i {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-muted) 86%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 78%, transparent);
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.settings-toggle i::before {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.16);
    content: "";
    transition: transform 0.16s ease;
}

.settings-toggle input:checked + i {
    background: var(--blue);
    box-shadow: inset 0 0 0 1px var(--blue);
}

.settings-toggle input:checked + i::before {
    transform: translateX(18px);
}

.settings-choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 39px;
}

.settings-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 74%, transparent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    padding: 0 13px;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.settings-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.settings-choice:hover {
    border-color: color-mix(in srgb, var(--line-strong) 88%, transparent);
    background: var(--surface-soft);
    color: var(--ink);
}

.settings-choice.is-active,
.settings-choice:has(input:checked) {
    border-color: color-mix(in srgb, var(--blue) 36%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 70%, var(--surface));
    color: var(--blue);
}

.settings-task-runner {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(0, min(500px, 58%));
    align-items: flex-start;
    width: min(100%, 850px);
    gap: 34px;
    border: 1px solid #eef2f5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    padding: 18px 24px;
}

.settings-task-runner > div:first-child {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.settings-task-runner span {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.settings-task-runner strong {
    color: #1e293b;
    font-size: 13px;
    font-weight: 600;
}

.settings-task-runner small {
    color: #64748b;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
}

.settings-task-runner-command {
    display: grid;
    gap: 7px;
    justify-items: end;
    min-width: 0;
    width: 100%;
}

.settings-task-runner-command span,
.settings-task-runner-command code {
    display: block;
    width: 100%;
    max-width: 100%;
    justify-self: end;
}

.settings-task-runner-command code {
    min-width: 0;
    border-radius: 6px;
    background: #1e293b;
    color: #e2e8f0;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    padding: 8px 12px;
    white-space: pre-wrap;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.settings-task-list {
    display: grid;
    justify-items: start;
    gap: 18px;
}

.settings-task-card {
    width: min(100%, 850px);
    overflow: hidden;
    border: 1px solid #eef2f5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    color: #1e293b;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.settings-task-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid #f0f4f8;
    padding: 24px 32px;
}

.settings-task-title-zone {
    min-width: 0;
}

.settings-task-title-zone h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: #1e293b;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.settings-task-badge {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    border-radius: 4px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    padding: 2px 8px;
    white-space: nowrap;
}

.settings-task-title-zone p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.settings-task-switch-container {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 13px;
}

.settings-task-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.settings-task-switch input {
    width: 0;
    height: 0;
    opacity: 0;
}

.settings-task-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    border-radius: 24px;
    background: #cbd5e1;
    transition: background-color 0.3s ease;
}

.settings-task-slider::before {
    position: absolute;
    bottom: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    content: "";
    transition: transform 0.3s ease;
}

.settings-task-switch input:checked + .settings-task-slider {
    background: #3b82f6;
}

.settings-task-switch input:checked + .settings-task-slider::before {
    transform: translateX(20px);
}

.settings-task-card-body {
    padding: 28px 32px;
}

.settings-task-form-row {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.settings-task-form-row:last-child,
.settings-task-form-row-plan {
    margin-bottom: 0;
}

.settings-task-form-label {
    flex: 0 0 100px;
    width: 100px;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
}

.settings-task-form-content {
    flex: 1 1 auto;
    min-width: 0;
}

.settings-task-segmented-control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    background: #f1f5f9;
    padding: 4px;
    vertical-align: middle;
}

.settings-task-segment-btn {
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
    padding: 6px 16px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.settings-task-segment-btn.is-active {
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    color: #1e293b;
    font-weight: 500;
}

.settings-task-sub-tips {
    margin-left: 12px;
    color: #94a3b8;
    font-size: 12px;
}

.settings-task-chips-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-task-chips-group[hidden],
.settings-task-calendar-panel[hidden],
.settings-task-mini-field[hidden] {
    display: none !important;
}

.settings-task-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
    padding: 6px 14px;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.settings-task-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.settings-task-chip:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.settings-task-chip.is-active,
.settings-task-chip:has(input:checked) {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 500;
}

.settings-task-calendar-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.settings-task-mini-field {
    display: grid;
    gap: 6px;
    min-width: 136px;
}

.settings-task-mini-field span {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

.settings-task-mini-field input {
    width: 136px;
    min-height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    color: #1e293b;
    font-size: 13px;
    line-height: 1.4;
    padding: 0 10px;
}

.settings-task-mini-field input[type="time"] {
    font-variant-numeric: tabular-nums;
}

.settings-task-mini-field input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.62;
}

.settings-task-mini-field input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
    outline: 0;
}

.settings-task-select-wrap {
    position: relative;
    width: 136px;
}

.settings-task-select-wrap.form-select-touch .filter-select-trigger {
    width: 136px;
    height: 34px;
    min-height: 34px;
    border-radius: 6px;
    color: #1e293b;
    font-size: 13px;
    font-weight: 400;
    padding: 0 10px;
}

.settings-task-select-wrap.form-select-touch .filter-select-menu {
    width: 136px;
}

.settings-task-plan-banner {
    border-left: 4px solid #3b82f6;
    border-radius: 0 6px 6px 0;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
    padding: 10px 16px;
}

.settings-task-plan-banner strong {
    color: #2563eb;
    font-weight: 600;
}

.settings-task-card-footer {
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 20px 32px;
}

.settings-task-status-timeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-bottom: 16px;
    color: #475569;
    font-size: 13px;
}

.settings-task-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    background: #dcfce7;
    color: #15803d;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    padding: 4px 10px;
}

.settings-task-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.settings-task-status-badge.is-warning {
    background: #fef3c7;
    color: #b45309;
}

.settings-task-status-badge.is-danger {
    background: #fee2e2;
    color: #b91c1c;
}

.settings-task-status-badge.is-muted {
    background: #e2e8f0;
    color: #64748b;
}

.settings-task-time-item {
    min-width: 0;
}

.settings-task-time-item strong {
    color: #1e293b;
    font-weight: 400;
}

.settings-task-cli-zone {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-task-cli-label {
    flex: 0 0 100px;
    width: 100px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.settings-task-cli-wrapper {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    overflow: hidden;
    border-radius: 6px;
    background: #1e293b;
    padding-right: 4px;
}

.settings-task-cli-code {
    display: block;
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #e2e8f0;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    line-height: 1.35;
    padding: 8px 12px;
    text-overflow: clip;
    white-space: nowrap;
}

.settings-task-btn-action {
    flex: 0 0 auto;
    border: 0;
    border-radius: 4px;
    background: #334155;
    color: #f8fafc;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.35;
    margin-left: 4px;
    padding: 6px 12px;
    transition: background-color 0.2s ease;
}

.settings-task-btn-action:hover {
    background: #475569;
}

.settings-task-btn-run {
    background: #2563eb;
}

.settings-task-btn-run:hover {
    background: #1d4ed8;
}

.settings-extension-strip {
    display: grid;
    gap: 5px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
    padding: 13px 14px;
}

.settings-extension-strip strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.settings-sms-check-panel,
.settings-sms-test-panel {
    grid-column: 2;
}

.settings-sms-result {
    display: grid;
    gap: 4px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 68%, transparent);
    border-radius: 14px;
    padding: 12px 14px;
}

.settings-sms-result strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 850;
}

.settings-sms-result span,
.settings-sms-result small {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

.settings-sms-result.is-success {
    border-color: color-mix(in srgb, #16a34a 28%, var(--line));
    background: color-mix(in srgb, #16a34a 9%, var(--surface));
    color: #15803d;
}

.settings-sms-result.is-danger {
    border-color: color-mix(in srgb, #dc2626 28%, var(--line));
    background: color-mix(in srgb, #dc2626 8%, var(--surface));
    color: #b91c1c;
}

.sms-toolbox-page {
    display: grid;
    min-width: 0;
    gap: 16px;
}

.sms-template-table-wrap {
    overflow-x: auto;
}

.sms-template-table th,
.sms-template-table td {
    padding-top: 12px;
    padding-bottom: 12px;
    white-space: nowrap;
}

.sms-template-table td:first-child,
.sms-template-content-cell {
    white-space: normal;
}

.sms-template-content-cell {
    min-width: 0;
    max-width: none;
    color: var(--text);
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sms-template-table .action-chain {
    min-width: 0;
}

.sms-template-table .action-button {
    white-space: nowrap;
}

.sms-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    min-width: 0;
}

.sms-page-head-main {
    display: flex;
    align-items: center;
    flex: 1 1 460px;
    gap: 12px;
    min-width: 0;
}

.sms-page-head-aside {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 auto;
    gap: 12px;
    min-width: 0;
}

.sms-tool-actions {
    flex: 0 0 auto;
    min-width: 0;
}

.sms-tool-actions form {
    margin: 0;
}

.sms-section-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    width: fit-content;
    border: 1px solid color-mix(in srgb, var(--line-strong) 64%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-muted) 42%, var(--surface));
    padding: 4px;
}

.sms-section-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    padding: 0 12px;
    transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.sms-section-tabs a:hover {
    color: var(--ink);
}

.sms-section-tabs a.is-active {
    background: var(--surface);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--shadow) 12%, transparent);
    color: var(--blue);
}

.sms-section-tabs strong {
    min-width: 18px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-soft) 80%, var(--surface));
    color: inherit;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

.sms-section-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.sms-section-note span {
    color: var(--faint);
}

.sms-section-note strong {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
}

.sms-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.sms-detail-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.sms-detail-copy span,
.sms-detail-copy small {
    color: var(--faint);
    font-size: 12px;
    font-weight: 600;
}

.sms-detail-copy strong {
    color: var(--ink);
    font-size: 18px;
    font-weight: 850;
    letter-spacing: 0;
}

.sms-detail-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sms-detail-stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.sms-detail-stat-row > div {
    display: grid;
    align-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 112px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.sms-detail-stat-row span {
    color: #64748b;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.sms-detail-stat-row strong {
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.sms-detail-stat-row > div:last-child strong {
    font-size: 18px;
    line-height: 1.25;
}

.sms-record-message-cell {
    min-width: 260px;
    max-width: 520px;
    white-space: normal !important;
}

.sms-record-content-cell {
    color: #334155;
    line-height: 1.55;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

.sms-compose-shell .conference-form-section:first-of-type {
    padding-top: 0;
}

.sms-mode-panel.is-wide,
.sms-inline-empty {
    grid-column: 1 / -1;
}

.sms-inline-empty {
    border: 1px dashed color-mix(in srgb, var(--line-strong) 78%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-muted) 48%, var(--surface));
    color: var(--faint);
    font-size: 12px;
    font-weight: 600;
    padding: 12px;
}

.sms-mode-panel {
    display: grid;
    gap: 16px;
}

.sms-send-mode-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    justify-content: space-between;
}

.sms-send-mode-row .settings-choice-group {
    align-items: center;
    flex: 1 1 250px;
}

.sms-excel-tools {
    align-items: center;
    display: inline-flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.sms-excel-tools[hidden] {
    display: none !important;
}

.sms-excel-action {
    align-items: center;
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--line-strong) 64%, transparent);
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: 6px;
    min-height: 32px;
    padding: 0 13px;
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.sms-excel-action:hover,
.sms-excel-action:focus-visible {
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.045);
    transform: none;
}

.sms-excel-action span {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.sms-excel-action.is-download {
    background: color-mix(in srgb, #16a34a 7%, var(--surface));
    border-color: color-mix(in srgb, #16a34a 16%, var(--line));
    color: #15803d;
}

.sms-excel-action.is-download:hover,
.sms-excel-action.is-download:focus-visible {
    background: color-mix(in srgb, #16a34a 11%, var(--surface));
    border-color: color-mix(in srgb, #16a34a 24%, var(--line));
}

.sms-excel-action.is-upload {
    background: color-mix(in srgb, var(--blue) 7%, var(--surface));
    border-color: color-mix(in srgb, var(--blue) 16%, var(--line));
    color: var(--blue);
}

.sms-excel-action.is-upload:hover,
.sms-excel-action.is-upload:focus-visible {
    background: color-mix(in srgb, var(--blue) 11%, var(--surface));
    border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
    color: var(--blue-dark);
}

.sms-batch-field-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.sms-batch-field textarea {
    padding-bottom: 38px;
}

.sms-batch-editor-wrap {
    position: relative;
    display: block;
}

.sms-batch-corner-stats {
    position: absolute;
    right: 12px;
    bottom: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    max-width: calc(100% - 24px);
    overflow: hidden;
    padding: 7px 10px;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sms-batch-import-status {
    border-radius: 999px;
    color: var(--muted);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    justify-self: start;
    line-height: 1.3;
    padding: 7px 10px;
}

.sms-batch-import-status.is-success {
    background: color-mix(in srgb, #16a34a 10%, transparent);
    color: #15803d;
}

.sms-batch-import-status.is-danger {
    background: color-mix(in srgb, #dc2626 10%, transparent);
    color: #dc2626;
}

.sms-param-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.sms-param-grid.is-wide {
    grid-column: 1 / -1;
}

.sms-recipient-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 50px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-muted) 42%, var(--surface));
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    padding: 9px 12px;
}

.sms-recipient-counts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.sms-recipient-counts strong,
.sms-recipient-counts span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.sms-recipient-summary b {
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
}

.sms-recipient-summary.has-valid {
    border-color: color-mix(in srgb, var(--green) 24%, var(--line));
    background: color-mix(in srgb, var(--green-soft) 52%, var(--surface));
}

.sms-recipient-summary.has-valid [data-sms-send-valid],
.sms-recipient-summary.has-valid strong b {
    color: var(--green);
}

.sms-recipient-summary.has-invalid {
    border-color: color-mix(in srgb, var(--red) 24%, var(--line));
    background: color-mix(in srgb, var(--red-soft) 50%, var(--surface));
}

.sms-recipient-summary.has-invalid [data-sms-send-invalid] {
    color: var(--red);
}

.sms-validation-list {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 32px;
    max-height: 38px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 7px 0 7px 12px;
    text-align: right;
}

.sms-validation-list[hidden] {
    display: none !important;
}

.sms-validation-list span {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sms-validation-list.is-idle span {
    color: var(--faint);
}

.sms-validation-list.is-ok {
    background: transparent;
}

.sms-validation-list.is-ok span {
    color: var(--green);
}

.sms-validation-list.has-issues {
    background: transparent;
}

.sms-validation-list.has-issues span {
    color: color-mix(in srgb, var(--red) 82%, var(--ink));
}

.premium-field input.is-invalid,
.premium-field textarea.is-invalid {
    border-color: color-mix(in srgb, var(--red) 58%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-soft) 62%, transparent);
}

.sms-preview-empty-inline {
    padding-top: 28px;
    padding-bottom: 28px;
}

.sms-preview-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sms-preview-meta div {
    display: grid;
    gap: 4px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 64%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-muted) 32%, var(--surface));
    padding: 12px;
}

.sms-preview-meta span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.sms-preview-meta strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sms-preview-stack {
    display: grid;
    gap: 14px;
}

.sms-preview-list {
    display: grid;
    gap: 10px;
    max-width: 560px;
}

.sms-phone-preview {
    display: grid;
    gap: 14px;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--shadow) 14%, transparent);
    padding: 16px 18px 18px;
}

.sms-phone-preview.is-single-preview {
    border-color: color-mix(in srgb, var(--blue) 20%, var(--line));
}

.sms-phone-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent);
    padding-bottom: 12px;
}

.sms-phone-preview-head span {
    color: var(--faint);
    font-size: 12px;
    font-weight: 800;
}

.sms-phone-preview-head strong {
    color: var(--blue);
    font-size: 13px;
    font-weight: 900;
}

.sms-message-bubble {
    display: grid;
    gap: 0;
    max-width: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.sms-message-bubble p {
    color: var(--ink);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.85;
}

.sms-recipient-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.sms-recipient-preview span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    padding: 0 9px;
}

.sms-preview-more {
    max-width: 560px;
    border: 1px dashed color-mix(in srgb, var(--line-strong) 70%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface-muted) 42%, var(--surface));
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    padding: 11px 12px;
}

.sms-send-result {
    margin-top: 2px;
}

.sms-confirm-form {
    display: flex;
    justify-content: flex-end;
}

.secret-note {
    border: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: 12px;
    background: var(--amber-soft);
    color: #b45309;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 800;
}

.event-list {
    display: grid;
    gap: 10px;
}

.event-item,
.empty-inline {
    display: grid;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
    padding: 11px 12px;
}

.event-item strong {
    color: var(--ink);
}

.event-item span,
.empty-inline {
    color: var(--muted);
    font-size: 12px;
}

.data-table {
    width: 100%;
    min-width: 960px;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table th,
.data-table td {
    border-bottom: 1px solid var(--line);
    padding: 14px 12px;
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.data-table td {
    color: var(--text);
}

.data-table tr:hover td {
    background: color-mix(in srgb, var(--surface-soft) 68%, transparent);
}

.data-table td > strong,
.data-table td > .subtext {
    display: block;
}

.data-table td > strong {
    color: var(--ink);
}

.conference-premium-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    min-width: 0;
}

.conference-premium-page .notice {
    margin: 0;
}

.conference-toolline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.capsule-filter-hub {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 12px;
    min-width: 0;
}

.list-filter-hub {
    margin: 2px 0 22px;
}

.module-create-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border-radius: 999px;
    background: var(--blue);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    color: #fff;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 7px 16px;
    white-space: nowrap;
}

.module-create-action:hover {
    background: var(--blue-dark);
    color: #fff;
}

.filter-keyword {
    width: 256px;
    height: 32px;
    border-color: color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.035);
    color: var(--text);
    font-size: 12px;
    padding: 0 16px;
}

.filter-icon-field {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 256px;
}

.filter-icon-field .filter-keyword {
    width: 100%;
    padding-left: 34px;
}

.filter-control-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: var(--faint);
}

svg.filter-control-icon {
    display: block;
}

.filter-icon-field > .filter-control-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

.filter-icon-field.is-search .filter-control-icon::before {
    content: none;
}

.filter-icon-field.is-search .filter-control-icon::after {
    background: currentColor;
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}

.filter-keyword::placeholder {
    color: var(--faint);
}

.filter-select-touch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 116px;
}

.filter-select-touch.wide-select-touch {
    width: 220px;
}

.filter-select-touch.form-select-touch {
    display: flex;
    width: 100%;
}

.filter-select-trigger {
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-color: color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.035);
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    padding: 0 12px 0 14px;
    text-align: left;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.filter-select-touch.has-leading-icon {
    width: 142px;
}

.filter-select-touch.wide-select-touch.has-leading-icon {
    width: 220px;
}

.filter-select-touch.has-leading-icon .filter-select-trigger {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding-left: 12px;
}

.capsule-filter-hub .filter-select-trigger,
.capsule-filter-hub .date-range-trigger {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.capsule-filter-hub .filter-select-touch.has-leading-icon .filter-select-trigger {
    column-gap: 7px;
}

.filter-select-touch.has-leading-icon .filter-select-trigger [data-filter-select-label] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-select-touch.is-filter .filter-control-icon.is-funnel {
    width: 14px;
    height: 12px;
    flex-basis: 14px;
    color: color-mix(in srgb, var(--faint) 88%, var(--muted));
}

.capsule-filter-hub .filter-select-touch.is-filter .filter-control-icon.is-funnel {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
}

.filter-select-touch.is-filter .filter-control-icon.is-funnel::before {
    content: none;
}

.filter-select-touch.is-filter .filter-control-icon.is-funnel::after {
    content: none;
}

.filter-select-trigger:hover,
.filter-select-trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-soft) 72%, transparent);
    color: var(--text);
}

.filter-select-trigger span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-select-arrow,
.date-range-arrow {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    color: var(--faint);
    line-height: 1;
}

.filter-select-arrow::before,
.date-range-arrow::before {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: translateY(-2px) rotate(45deg);
}

.filter-select-menu {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    z-index: 50;
    display: grid;
    width: 144px;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    padding: 5px;
}

.wide-select-touch .filter-select-menu {
    width: 240px;
}

.form-select-touch .filter-select-menu {
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
}

.filter-select-menu button {
    display: flex;
    align-items: center;
    min-height: 28px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    padding: 0 10px;
    text-align: left;
}

.filter-select-menu button:hover {
    background: var(--surface-soft);
    color: var(--blue);
}

.filter-select-menu button.is-selected {
    background: var(--blue);
    color: #fff;
}

.system-log-action-select {
    width: 188px;
}

.system-log-action-select .filter-select-menu {
    width: 232px;
    max-height: 360px;
    overflow-y: auto;
}

.system-log-action-select .filter-select-menu button {
    display: grid;
    align-items: center;
    min-height: 42px;
    gap: 2px;
    padding: 6px 10px;
}

.system-log-action-select .filter-select-menu strong,
.system-log-action-select .filter-select-menu small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-log-action-select .filter-select-menu strong {
    font-size: 12px;
    font-weight: 600;
}

.system-log-action-select .filter-select-menu small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
}

.system-log-action-select .filter-select-menu button.is-selected small {
    color: rgba(255, 255, 255, 0.78);
}

.premium-field .form-select-touch .filter-select-trigger {
    height: 39px;
    min-height: 39px;
    border-color: color-mix(in srgb, var(--line-strong) 86%, transparent);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    padding: 0 14px;
}

.premium-field .form-select-touch .filter-select-trigger:hover,
.premium-field .form-select-touch .filter-select-trigger[aria-expanded="true"] {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-soft) 76%, transparent);
    color: var(--ink);
}

.premium-field .form-select-touch .filter-select-menu button {
    min-height: 32px;
    font-size: 13px;
}

.premium-field .form-select-touch .filter-select-trigger:disabled {
    background: color-mix(in srgb, var(--surface-muted) 62%, var(--surface)) !important;
    color: var(--muted) !important;
    cursor: not-allowed !important;
}

.date-range-hub {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 332px;
    min-width: 332px;
}

.date-range-trigger {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.035);
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    min-height: 34px;
    padding: 0 12px;
    text-align: left;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.date-range-hub.has-leading-icon .date-range-trigger {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 8px;
    padding-left: 12px;
}

.capsule-filter-hub .date-range-hub.is-filter .date-range-trigger {
    grid-template-columns: 15px auto minmax(0, 1fr) auto;
    column-gap: 7px;
    height: 32px;
    min-height: 32px;
    border-radius: 12px;
}

.date-range-hub.is-filter .filter-control-icon.is-calendar {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
    color: color-mix(in srgb, var(--faint) 88%, var(--muted));
}

.capsule-filter-hub .date-range-hub.is-filter .filter-control-icon.is-calendar {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
}

.capsule-filter-hub .date-range-hub.is-filter .date-range-title,
.capsule-filter-hub .date-range-hub.is-filter .date-range-trigger strong {
    color: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.date-range-trigger:hover,
.date-range-trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-soft) 72%, transparent);
}

.date-range-title {
    color: var(--faint);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.date-range-trigger strong {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.date-range-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 45;
    width: 520px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 14px;
}

.date-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.date-picker-head strong,
.date-picker-head span {
    display: block;
}

.date-picker-head strong {
    color: var(--ink);
    font-size: 13px;
}

.date-picker-head span {
    color: var(--faint);
    font-size: 11px;
}

.date-picker-nav,
.date-picker-actions {
    display: inline-flex;
    align-items: center;
}

.date-picker-nav {
    gap: 6px;
}

.date-picker-nav button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--muted);
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
}

.date-picker-nav button:hover {
    border-color: color-mix(in srgb, var(--blue) 26%, var(--line));
    color: var(--blue);
}

.date-picker-actions button {
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 0;
}

.date-picker-actions button:hover {
    color: var(--blue);
}

.date-range-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.date-range-fields label {
    display: grid;
    gap: 6px;
}

.date-range-fields span {
    color: var(--faint);
    font-size: 11px;
    font-weight: 600;
}

.date-range-fields input {
    width: 100%;
    height: 32px;
    border-color: color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 11px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 12px;
    padding: 0 10px;
}

.date-range-fields input.is-invalid {
    border-color: color-mix(in srgb, var(--red) 46%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-soft) 76%, transparent);
}

.date-picker-months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.date-picker-month {
    min-width: 0;
}

.date-picker-month-title {
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
}

.date-picker-weekdays,
.date-picker-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.date-picker-weekdays {
    color: var(--faint);
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 5px;
    text-align: center;
}

.date-picker-day {
    display: grid;
    place-items: center;
    width: 100%;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    padding: 0;
}

.date-picker-day:hover {
    background: var(--surface-soft);
    color: var(--blue);
}

.date-picker-day.is-muted {
    color: color-mix(in srgb, var(--faint) 48%, transparent);
}

.date-picker-day.is-today {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 42%, transparent);
}

.date-picker-day.is-in-range {
    background: var(--blue-soft);
    color: var(--blue);
}

.date-picker-day.is-start,
.date-picker-day.is-end {
    background: var(--blue);
    color: #fff;
}

.date-picker-actions {
    justify-content: flex-start;
    gap: 16px;
    border-top: 1px solid var(--line);
    margin-top: 14px;
    padding-top: 12px;
}

.premium-table-wrap {
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.035);
}

.conference-premium-table {
    min-width: 1140px;
}

.conference-premium-table th,
.conference-premium-table td {
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    padding: 16px;
}

.conference-premium-table th {
    border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 88%, transparent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--surface-muted) 74%, var(--surface)),
        color-mix(in srgb, var(--surface-soft) 88%, var(--surface))
    );
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.conference-premium-table thead th:first-child {
    border-top-left-radius: 15px;
}

.conference-premium-table thead th:last-child {
    border-top-right-radius: 15px;
}

.conference-premium-table th.action-column-head {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.055em;
    padding-right: 16px;
    text-align: right;
}

.conference-premium-table th.status-column-head {
    text-align: center;
}

.conference-premium-table td {
    color: var(--text);
    font-size: 13px;
}

.conference-premium-table td.status-column-cell {
    text-align: center;
}

.conference-premium-table td.action-column-cell {
    padding-right: 16px;
    text-align: right;
}

.conference-premium-table tr:hover td {
    background: color-mix(in srgb, var(--surface-soft) 70%, transparent);
}

html[data-theme="dark"] .premium-table-wrap {
    border-color: color-mix(in srgb, var(--line-strong) 72%, transparent);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

html[data-theme="dark"] .conference-premium-table th {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--surface-muted) 76%, var(--surface)),
        color-mix(in srgb, var(--surface-soft) 86%, var(--surface))
    );
    color: var(--muted);
}

.conference-premium-table tr.is-active-conference td,
.conference-premium-table tr.is-active-conference:hover td {
    background: color-mix(in srgb, var(--blue-soft) 42%, transparent);
}

.conference-premium-table td > strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

.conference-premium-table .subtext {
    margin-top: 4px;
    color: var(--faint);
    font-size: 12px;
    font-weight: 500;
}

.conference-premium-table .location-line {
    margin-top: 7px;
}

.conference-list-table,
.user-list-table,
.system-log-table,
.analytics-events-table,
.registration-table,
.sms-template-list-table,
.sms-record-list-table,
.sms-record-detail-table,
.payment-auth-table {
    table-layout: fixed;
}

.conference-list-table {
    min-width: 1360px;
}

.conference-list-table th:nth-child(1) {
    width: 300px;
}

.conference-list-table th:nth-child(2) {
    width: 220px;
}

.conference-list-table th:nth-child(3) {
    width: 220px;
}

.conference-list-table th:nth-child(4) {
    width: 180px;
}

.conference-list-table th:nth-child(5) {
    width: 120px;
}

.conference-list-table th:nth-child(6) {
    width: 320px;
}

.conference-list-table td:nth-child(2),
.conference-list-table td:nth-child(5) {
    white-space: nowrap;
}

.conference-list-table td:nth-child(1),
.conference-list-table td:nth-child(3),
.conference-list-table td:nth-child(4) {
    overflow-wrap: anywhere;
}

.user-list-table {
    min-width: 1440px;
}

.user-list-table th:nth-child(1) {
    width: 300px;
}

.user-list-table th:nth-child(2) {
    width: 140px;
}

.user-list-table th:nth-child(3) {
    width: 260px;
}

.user-list-table th:nth-child(4) {
    width: 120px;
}

.user-list-table th:nth-child(5) {
    width: 110px;
}

.user-list-table th:nth-child(6) {
    width: 190px;
}

.user-list-table th:nth-child(7) {
    width: 320px;
}

.user-list-table td:nth-child(1),
.user-list-table td:nth-child(3) {
    overflow-wrap: anywhere;
}

.user-list-table td:nth-child(2),
.user-list-table td:nth-child(4),
.user-list-table td:nth-child(5),
.user-list-table td:nth-child(6) {
    white-space: nowrap;
}

.system-log-table {
    min-width: 1420px;
}

.system-log-table th:nth-child(1) {
    width: 140px;
}

.system-log-table th:nth-child(2) {
    width: 190px;
}

.system-log-table th:nth-child(3) {
    width: 180px;
}

.system-log-table th:nth-child(4) {
    width: 300px;
}

.system-log-table th:nth-child(5) {
    width: 460px;
}

.system-log-table th:nth-child(6) {
    width: 150px;
}

.system-log-table td:nth-child(1),
.system-log-table td:nth-child(3),
.system-log-table td:nth-child(6) {
    white-space: nowrap;
}

.system-log-table td:nth-child(4),
.system-log-table td:nth-child(5),
.analytics-events-table td:nth-child(1),
.analytics-events-table td:nth-child(3),
.analytics-events-table td:nth-child(4),
.analytics-events-table td:nth-child(6),
.registration-table td,
.sms-template-list-table td,
.sms-record-list-table td,
.sms-record-detail-table td,
.payment-auth-table td:last-child {
    overflow-wrap: anywhere;
}

.analytics-events-table {
    min-width: 1360px;
}

.analytics-events-table th:nth-child(1) {
    width: 230px;
}

.analytics-events-table th:nth-child(2) {
    width: 150px;
}

.analytics-events-table th:nth-child(3) {
    width: 300px;
}

.analytics-events-table th:nth-child(4) {
    width: 170px;
}

.analytics-events-table th:nth-child(5) {
    width: 140px;
}

.analytics-events-table th:nth-child(6) {
    width: 200px;
}

.analytics-events-table th:nth-child(7) {
    width: 170px;
}

.analytics-events-table td:nth-child(2),
.analytics-events-table td:nth-child(5),
.analytics-events-table td:nth-child(7) {
    white-space: nowrap;
}

.registration-table {
    min-width: 1120px;
}

.registration-table th:first-child {
    width: 142px;
}

.registration-table th:last-child {
    width: 140px;
}

.registration-table td:first-child,
.registration-table td:last-child {
    white-space: nowrap;
}

.sms-template-list-table {
    min-width: 920px;
}

.sms-template-list-table th:nth-child(1) {
    width: 220px;
}

.sms-template-list-table th:nth-child(2) {
    width: 110px;
}

.sms-template-list-table th:nth-child(3) {
    width: 100px;
}

.sms-template-list-table th:nth-child(4) {
    width: auto;
}

.sms-template-list-table th:nth-child(5) {
    width: 150px;
}

.sms-template-list-table th:nth-child(6) {
    width: 112px;
}

.sms-template-list-table td:nth-child(1),
.sms-template-list-table td:nth-child(4) {
    overflow-wrap: anywhere;
    white-space: normal;
}

.sms-template-list-table td:nth-child(2),
.sms-template-list-table td:nth-child(3),
.sms-template-list-table td:nth-child(5),
.sms-template-list-table td:nth-child(6) {
    white-space: nowrap;
}

.sms-record-list-table {
    min-width: 1200px;
}

.sms-record-list-table th:nth-child(1) {
    width: 220px;
}

.sms-record-list-table th:nth-child(2) {
    width: 260px;
}

.sms-record-list-table th:nth-child(3) {
    width: 90px;
}

.sms-record-list-table th:nth-child(4) {
    width: 150px;
}

.sms-record-list-table th:nth-child(5) {
    width: 170px;
}

.sms-record-list-table th:nth-child(6) {
    width: 160px;
}

.sms-record-list-table th:nth-child(7) {
    width: 150px;
}

.sms-record-detail-table {
    min-width: 1470px;
}

.sms-record-detail-table th:nth-child(1) {
    width: 150px;
}

.sms-record-detail-table th:nth-child(2) {
    width: 360px;
}

.sms-record-detail-table th:nth-child(3) {
    width: 100px;
}

.sms-record-detail-table th:nth-child(4) {
    width: 160px;
}

.sms-record-detail-table th:nth-child(5) {
    width: 430px;
}

.sms-record-detail-table th:nth-child(6) {
    width: 240px;
}

.payment-auth-table {
    min-width: 1080px;
}

.payment-auth-table th:nth-child(1) {
    width: 170px;
}

.payment-auth-table th:nth-child(2) {
    width: 120px;
}

.payment-auth-table th:nth-child(3) {
    width: 110px;
}

.payment-auth-table th:nth-child(4) {
    width: 90px;
}

.payment-auth-table th:nth-child(5) {
    width: 100px;
}

.payment-auth-table th:nth-child(6) {
    width: 490px;
}

.muted-placeholder {
    color: var(--faint);
    font-weight: 500;
}

.conference-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
}

.conference-status.is-info {
    background: color-mix(in srgb, var(--faint) 22%, transparent);
    color: var(--muted);
}

.conference-status.is-success {
    background: color-mix(in srgb, var(--green-soft) 78%, transparent);
    color: color-mix(in srgb, var(--green) 62%, var(--text));
}

.conference-status.is-warning {
    background: color-mix(in srgb, var(--amber-soft) 78%, transparent);
    color: color-mix(in srgb, var(--amber) 62%, var(--text));
}

.conference-status.is-danger {
    background: color-mix(in srgb, var(--red-soft) 78%, transparent);
    color: color-mix(in srgb, var(--red) 62%, var(--text));
}

.conference-status.is-muted {
    background: color-mix(in srgb, var(--surface-muted) 78%, transparent);
    color: var(--muted);
}

.system-log-action-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 24px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue-soft) 74%, transparent);
    color: color-mix(in srgb, var(--blue) 76%, var(--text));
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    white-space: nowrap;
}

.system-log-page .conference-premium-table td:nth-child(2) .subtext {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.current-conference-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border: 1px solid color-mix(in srgb, var(--blue) 14%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue-soft) 78%, transparent);
    color: var(--blue);
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
    padding: 3px 9px;
    vertical-align: middle;
}

.action-chain {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
    min-width: 280px;
    text-align: right;
    white-space: nowrap;
}

.action-chain .action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 60%, transparent);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.035);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    padding: 4px 10px;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.action-chain .action-button:hover {
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.045);
}

.action-chain .action-button.is-current {
    background: var(--surface-muted);
    color: var(--muted);
    cursor: default;
    border-color: color-mix(in srgb, var(--line-strong) 50%, transparent);
    user-select: none;
}

.action-chain .action-button.is-current:hover {
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.035);
}

.action-chain .action-button.is-entry,
.action-chain .action-button.is-venue {
    border-color: color-mix(in srgb, var(--blue) 18%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 52%, var(--surface));
    color: var(--blue);
}

.action-chain .action-button.is-entry:hover,
.action-chain .action-button.is-venue:hover {
    border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 78%, var(--surface));
    color: var(--blue-dark);
}

.action-chain .action-button.is-info {
    background: var(--surface);
    color: var(--text);
}

.action-chain .action-button.is-info:hover {
    background: var(--surface-soft);
    border-color: color-mix(in srgb, var(--line-strong) 82%, transparent);
    color: var(--ink);
}

.action-chain form {
    display: inline-flex;
    margin: 0;
}

.action-chain .action-button.is-danger {
    border-color: color-mix(in srgb, var(--red) 18%, var(--line));
    background: color-mix(in srgb, var(--red-soft) 58%, var(--surface));
    color: color-mix(in srgb, var(--red) 72%, var(--text));
}

.action-chain .action-button.is-danger:hover {
    border-color: color-mix(in srgb, var(--red) 32%, var(--line));
    background: color-mix(in srgb, var(--red-soft) 86%, var(--surface));
    color: var(--red);
}

.conference-empty-state {
    display: grid;
    gap: 6px;
    padding: 42px 4px;
}

.conference-empty-state strong {
    color: var(--ink);
    font-size: 15px;
}

.conference-empty-state span {
    color: var(--faint);
    font-size: 12px;
}

.premium-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--faint);
    font-size: 12px;
    padding: 2px 4px 0;
}

.premium-pagination > div {
    display: inline-flex;
    gap: 18px;
    font-weight: 500;
}

.premium-pagination a {
    color: var(--blue);
}

.premium-pagination span span,
.premium-pagination > div span {
    color: var(--faint);
}

.compact-table {
    min-width: 560px;
}

.analytics-premium-page {
    gap: 24px;
}

.analytics-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
}

.analytics-summary-card {
    position: relative;
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 112px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
    gap: 7px;
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.analytics-summary-card::after {
    content: none;
}

.analytics-summary-card:hover {
    border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07);
    transform: translateY(-2px);
}

.analytics-summary-card span {
    color: #64748b;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.analytics-summary-card strong {
    color: #0f172a;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.analytics-summary-card div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.analytics-summary-card small {
    color: #64748b;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.analytics-summary-card em {
    align-self: end;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.35;
}

.analytics-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.analytics-panel {
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.035);
}

.analytics-panel .panel-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
}

.analytics-panel .panel-head p {
    margin: 4px 0 0;
    color: var(--faint);
    font-size: 12px;
}

.analytics-trend-chart {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
    gap: 12px;
    min-height: 230px;
}

.trend-day {
    display: grid;
    min-width: 0;
    gap: 8px;
    text-align: center;
}

.trend-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    height: 144px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
    padding: 10px 8px;
}

.trend-bars i {
    display: block;
    width: 14px;
    height: var(--bar-height);
    min-height: 4px;
    border-radius: 999px 999px 6px 6px;
}

.trend-bars .is-pv {
    background: linear-gradient(180deg, var(--blue), color-mix(in srgb, var(--blue) 72%, #06b6d4));
}

.trend-bars .is-uv {
    background: linear-gradient(180deg, color-mix(in srgb, var(--green) 86%, #22c55e), var(--green));
}

.trend-day strong {
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
}

.trend-day span {
    color: var(--faint);
    font-size: 11px;
    font-weight: 600;
}

.site-today-list {
    display: grid;
    gap: 10px;
}

.site-today-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 66px;
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    border-radius: 14px;
    background: var(--surface-soft);
    padding: 12px;
}

.site-today-row strong,
.site-today-row span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-today-row strong {
    color: var(--ink);
    font-size: 13px;
}

.site-today-row span {
    color: var(--faint);
    font-size: 12px;
    margin-top: 4px;
}

.site-today-row dl {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 2px 12px;
    margin: 0;
    text-align: right;
}

.site-today-row dt {
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
}

.site-today-row dd {
    grid-row: 2;
    color: var(--faint);
    font-size: 11px;
    margin: 0;
}

.analytics-card-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    color: var(--faint);
    font-size: 12px;
    font-weight: 500;
    margin-top: 12px;
    padding-top: 12px;
}

.analytics-card-pagination > div {
    display: inline-flex;
    gap: 14px;
    white-space: nowrap;
}

.analytics-card-pagination a {
    color: var(--blue);
}

.analytics-card-pagination > div span {
    color: var(--faint);
}

.analytics-bars-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.analytics-bars-split .bar-row i,
.analytics-panel .bar-row i {
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-muted) 72%, transparent);
    overflow: hidden;
}

.analytics-bars-split .bar-row i::before,
.analytics-panel .bar-row i::before {
    display: block;
    width: var(--bar-width);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--green) 74%, #06b6d4));
    content: "";
}

.analytics-list-section {
    display: grid;
    gap: 18px;
}

.analytics-filter-hub {
    flex-wrap: wrap;
}

.analytics-filter-hub .filter-keyword {
    width: 220px;
}

.analytics-filter-hub .filter-icon-field {
    width: 220px;
}

.analytics-date-range {
    width: 300px;
    min-width: 300px;
}

.analytics-events-table {
    min-width: 1360px;
}

.site-card-grid,
.template-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.site-card {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.site-card-head {
    display: grid;
    gap: 7px;
}

.site-card-head strong,
.template-card strong {
    color: var(--ink);
    font-size: 16px;
}

.detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
}

.detail-list div,
.share-box,
.rule-grid span {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
    padding: 10px;
}

.detail-list dd {
    margin: 2px 0 0;
    color: var(--ink);
    font-weight: 800;
}

.share-box {
    display: grid;
    gap: 5px;
}

.share-box p {
    color: var(--muted);
    font-size: 13px;
}

.rule-panel {
    margin-top: 16px;
}

.rule-panel h2 {
    margin-bottom: 12px;
}

.rule-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.template-section {
    margin-bottom: 16px;
}

.template-card {
    display: grid;
    gap: 9px;
    min-height: 176px;
    padding: 16px;
}

.template-card button {
    align-self: end;
}

.chip-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 260px;
}

.chip-cell span {
    background: var(--blue-soft);
    color: var(--blue);
    font-weight: 700;
}

.notice {
    margin: 16px 0;
}

.notice.is-warning {
    border-color: rgba(245, 158, 11, 0.28);
    background: var(--amber-soft);
    color: #b45309;
}

.notice.is-success {
    border-color: rgba(16, 185, 129, 0.24);
    background: var(--green-soft);
    color: #059669;
}

.notice.is-info {
    border-color: rgba(37, 99, 235, 0.22);
    background: var(--blue-soft);
    color: var(--blue);
}

.notice.is-danger {
    border-color: rgba(239, 68, 68, 0.24);
    background: var(--red-soft);
    color: #dc2626;
}

.filter-panel {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) repeat(2, minmax(150px, 0.8fr)) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
}

.filter-panel label,
.wide-field {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.filter-panel input,
.filter-panel select,
.wide-field input,
.wide-field textarea,
.form-grid textarea {
    width: 100%;
}

.filter-actions {
    display: flex;
    gap: 8px;
}

.preinvite-table {
    min-width: 1180px;
}

.preinvite-table .actions {
    min-width: 340px;
}

.actions form {
    display: inline-flex;
    margin: 0;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.pagination a {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
}

.pagination a.is-active {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
}

.create-mode-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.create-mode-panel a {
    display: grid;
    gap: 6px;
    min-height: 104px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
    color: var(--text);
    padding: 16px;
    text-decoration: none;
}

.create-mode-panel a.is-active {
    border-color: rgba(37, 99, 235, 0.28);
    background: var(--blue-soft);
}

.manage-layout,
.code-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
}

.asset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.asset-card {
    display: grid;
    gap: 10px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
    padding: 14px;
}

.asset-card img,
.asset-empty {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    object-fit: cover;
}

.asset-empty {
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.asset-card code {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-card input[type="file"] {
    width: 100%;
}

.manage-nav,
.code-files {
    position: sticky;
    top: 92px;
    align-self: start;
    display: grid;
    gap: 8px;
}

.manage-nav a,
.code-files a {
    display: grid;
    gap: 3px;
    border-radius: 10px;
    color: var(--text);
    padding: 10px 11px;
    text-decoration: none;
    font-weight: 800;
}

.manage-nav a:hover,
.code-files a:hover,
.code-files a.is-active {
    background: var(--blue-soft);
    color: var(--blue);
}

.manage-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.export-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
    padding: 14px;
}

.code-files strong {
    margin-bottom: 6px;
}

.code-files small {
    color: var(--muted);
    font-size: 12px;
}

.code-editor-panel {
    min-width: 0;
}

.code-editor,
.CodeMirror {
    width: 100%;
    min-height: 620px;
    border: 1px solid var(--line);
    border-radius: 14px;
    font-family: "Cascadia Code", "JetBrains Mono", Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
}

.code-editor {
    padding: 14px;
    resize: vertical;
}

.registration-table {
    min-width: 1080px;
}

.thumb {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 6px;
}

.preinvite-site-summary {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.preinvite-site-summary strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-site-summary span,
.preinvite-table-summary span,
.preinvite-template-card small,
.preinvite-code-head span {
    color: var(--faint);
    font-size: 12px;
    font-weight: 500;
}

.preinvite-site-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    min-width: 0;
}

.preinvite-site-chips span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 68%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, var(--surface-soft));
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 0 9px;
}

.preinvite-site-chips b {
    color: var(--faint);
    font-size: 11px;
    font-weight: 700;
}

.preinvite-site-chips .is-status {
    border-color: color-mix(in srgb, var(--green) 28%, var(--line));
    background: color-mix(in srgb, var(--green) 9%, var(--surface));
    color: color-mix(in srgb, var(--green) 78%, var(--ink));
}

.preinvite-site-chips .is-closed {
    border-color: color-mix(in srgb, var(--red) 28%, var(--line));
    background: color-mix(in srgb, var(--red) 8%, var(--surface));
    color: color-mix(in srgb, var(--red) 76%, var(--ink));
}

.preinvite-site-chips .is-draft {
    border-color: color-mix(in srgb, var(--amber) 36%, var(--line));
    background: color-mix(in srgb, var(--amber) 11%, var(--surface));
    color: color-mix(in srgb, var(--amber) 82%, var(--ink));
}

.preinvite-table-summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 0 4px;
}

.preinvite-table-summary strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.preinvite-table-summary code {
    color: var(--muted);
    font-size: 12px;
}

.preinvite-premium-table {
    width: 100%;
    min-width: 1420px;
    table-layout: fixed;
}

.preinvite-premium-table .preinvite-col-site {
    width: 19%;
}

.preinvite-premium-table .preinvite-col-access {
    width: 18%;
}

.preinvite-premium-table .preinvite-col-template {
    width: 14%;
}

.preinvite-premium-table .preinvite-col-metrics {
    width: 128px;
}

.preinvite-premium-table .preinvite-col-status {
    width: 96px;
}

.preinvite-premium-table .preinvite-col-updated {
    width: 118px;
}

.preinvite-premium-table .preinvite-col-actions {
    width: 292px;
}

.preinvite-premium-table td {
    vertical-align: middle;
}

.preinvite-premium-table td:first-child > strong,
.preinvite-premium-table td:nth-child(3) > strong,
.preinvite-access-url {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.preinvite-premium-table td:first-child > .subtext,
.preinvite-premium-table td:nth-child(3) > .subtext {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-premium-table td:nth-child(4),
.preinvite-premium-table td:nth-child(6) {
    white-space: nowrap;
}

.preinvite-premium-table td:nth-child(4) > strong,
.preinvite-premium-table td:nth-child(6) > strong {
    display: block;
    white-space: nowrap;
}

.preinvite-premium-table td:nth-child(4) > .subtext,
.preinvite-premium-table td:nth-child(6) > .subtext {
    display: block;
    white-space: nowrap;
}

.preinvite-premium-table .conference-status {
    min-width: 64px;
    white-space: nowrap;
}

.preinvite-premium-page .premium-table-wrap:has(.preinvite-qr-popover:hover),
.preinvite-premium-page .premium-table-wrap:has(.preinvite-qr-popover:focus-within) {
    overflow: visible;
}

.registration-table {
    min-width: 1120px;
}

.table-link {
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
}

.table-link:hover {
    color: var(--blue-dark);
}

.preinvite-access-cell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 430px;
}

.preinvite-access-copy {
    min-width: 0;
}

.preinvite-access-url {
    display: block;
    max-width: 100%;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.preinvite-qr-popover {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    outline: 0;
}

.preinvite-qr-popover:hover,
.preinvite-qr-popover:focus-visible,
.preinvite-qr-popover:focus-within {
    border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-soft) 72%, transparent);
}

.preinvite-qr-thumb {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.preinvite-qr-flyout {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    display: none;
    width: 244px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 78%, transparent);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.18);
    padding: 14px;
    text-align: center;
}

.preinvite-qr-popover:hover .preinvite-qr-flyout,
.preinvite-qr-popover:focus-within .preinvite-qr-flyout {
    display: grid;
    gap: 9px;
}

.preinvite-qr-flyout::before {
    content: "";
    position: absolute;
    top: -11px;
    right: 12px;
    width: 100%;
    height: 12px;
}

.preinvite-qr-flyout img {
    display: block;
    width: 162px;
    height: 162px;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 8px;
}

.preinvite-qr-flyout strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.preinvite-qr-flyout span {
    display: block;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.preinvite-qr-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.preinvite-qr-actions button {
    min-height: 30px;
    border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue-soft) 68%, var(--surface));
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.preinvite-qr-actions button:hover,
.preinvite-qr-actions button:focus-visible {
    border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 90%, var(--surface));
    outline: 0;
}

.preinvite-qr-actions button.is-copied {
    border-color: color-mix(in srgb, var(--green) 36%, var(--line));
    background: color-mix(in srgb, var(--green-soft) 80%, var(--surface));
    color: var(--green);
}

.preinvite-manage-qr-field {
    min-height: 63px;
}

.preinvite-manage-qr-field .preinvite-qr-popover {
    width: 42px;
    height: 42px;
}

.preinvite-manage-qr-field .preinvite-qr-thumb {
    width: 31px;
    height: 31px;
}

.preinvite-manage-url-link {
    display: inline-flex;
    width: fit-content;
    margin-top: 8px;
}

.preinvite-action-chain {
    min-width: 0;
}

.preinvite-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.preinvite-mode-card {
    display: grid;
    gap: 6px;
    min-height: 112px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
    color: var(--text);
    padding: 16px;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.preinvite-mode-card:hover {
    border-color: color-mix(in srgb, var(--blue) 26%, var(--line));
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.preinvite-mode-card.is-active {
    border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 62%, var(--surface));
    box-shadow: 0 10px 26px rgba(37, 99, 235, 0.10);
}

.preinvite-mode-card > span {
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.preinvite-mode-card strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
}

.preinvite-mode-card small,
.preinvite-template-card p {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.7;
}

.preinvite-create-type-grid {
    gap: 24px;
}

.preinvite-create-type-card {
    position: relative;
    place-items: center;
    align-content: center;
    justify-content: center;
    gap: 5px;
    min-height: 92px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
    padding: 12px 18px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-align: center;
    text-decoration: none;
}

.preinvite-create-type-card:hover,
.preinvite-create-type-card:focus-visible {
    border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055);
    outline: 0;
    transform: translateY(-2px);
}

.preinvite-create-type-card.is-active {
    border-color: color-mix(in srgb, var(--blue) 52%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 52%, #ffffff);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.07);
}

.preinvite-create-type-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
    color: var(--blue);
}

.preinvite-create-type-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.preinvite-template-option span {
    position: relative;
    z-index: 1;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.preinvite-create-type-card strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

.preinvite-create-type-card small {
    color: #64748b;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
}

.preinvite-template-picker-field {
    gap: 10px;
}

.preinvite-template-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    min-width: 0;
}

.preinvite-template-card-picker {
    align-items: stretch;
}

.preinvite-template-select.form-select-touch .filter-select-menu {
    max-height: 330px;
}

.preinvite-template-select.form-select-touch .filter-select-menu button {
    display: grid;
    align-items: start;
    min-height: 50px;
    gap: 2px;
    padding: 9px 10px;
}

.preinvite-template-select.form-select-touch .filter-select-menu button strong,
.preinvite-template-select.form-select-touch .filter-select-menu button small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-select.form-select-touch .filter-select-menu button strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 650;
}

.preinvite-template-select.form-select-touch .filter-select-menu button small {
    color: var(--faint);
    font-size: 12px;
    font-weight: 600;
}

.preinvite-template-select.form-select-touch .filter-select-menu button.is-selected strong,
.preinvite-template-select.form-select-touch .filter-select-menu button.is-selected small {
    color: rgba(255, 255, 255, 0.86);
}

.preinvite-template-option {
    position: relative;
    display: grid;
    align-content: start;
    gap: 5px;
    min-height: 84px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line-strong) 50%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    box-shadow: none;
    cursor: pointer;
    padding: 12px 14px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.preinvite-template-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.preinvite-template-option:hover,
.preinvite-template-option:focus-within {
    border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.055);
    transform: translateY(-1px);
}

.preinvite-template-option.is-active {
    border-color: color-mix(in srgb, var(--blue) 46%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 30%, var(--surface));
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.08);
}

.preinvite-template-option.is-active::before {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--blue);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 13%, transparent);
    content: "";
}

.preinvite-template-option.is-editor-template {
    border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
}

.preinvite-template-option em {
    position: relative;
    z-index: 1;
    width: max-content;
    border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue-soft) 52%, var(--surface));
    color: var(--blue);
    font-size: 11px;
    font-style: normal;
    font-weight: 760;
    line-height: 1;
    padding: 5px 8px;
}

.preinvite-template-option strong {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink);
    font-size: 14px;
    font-weight: 760;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.preinvite-template-option small {
    position: relative;
    z-index: 1;
    color: var(--faint);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.preinvite-template-picker-empty {
    min-height: 58px;
    border: 1px dashed color-mix(in srgb, var(--line-strong) 70%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-soft) 68%, var(--surface));
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
    padding: 18px;
}

.preinvite-form-note {
    grid-column: 1 / -1;
    border: 1px solid color-mix(in srgb, var(--amber) 24%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--amber-soft) 60%, var(--surface));
    color: color-mix(in srgb, var(--amber) 72%, var(--text));
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
    padding: 10px 12px;
}

.preinvite-manage-layout {
    grid-template-columns: 180px minmax(0, 1fr) 340px;
    gap: 22px;
}

.preinvite-advanced-config {
    display: block;
    margin-top: 16px;
}

.preinvite-advanced-config.is-source-only {
    display: none;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none;
    visibility: hidden;
    white-space: nowrap;
}

.preinvite-advanced-config.is-source-only .preinvite-advanced-config-summary {
    display: none;
}

.preinvite-advanced-config-summary {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, .7fr) minmax(260px, 1fr);
    align-items: center;
    gap: 14px;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 92%, var(--surface-soft));
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.035);
    cursor: pointer;
    list-style: none;
    padding: 14px 46px 14px 16px;
}

.preinvite-advanced-config-summary::-webkit-details-marker {
    display: none;
}

.preinvite-advanced-config-summary::after {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    content: "";
    transform: translateY(-66%) rotate(45deg);
    transition: transform .16s ease;
}

.preinvite-advanced-config[open] .preinvite-advanced-config-summary::after {
    transform: translateY(-34%) rotate(225deg);
}

.preinvite-advanced-config-summary:hover,
.preinvite-advanced-config-summary:focus-visible {
    border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 24%, var(--surface));
    outline: none;
}

.preinvite-advanced-config-summary div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.preinvite-advanced-config-summary span {
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
}

.preinvite-advanced-config-summary strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-advanced-config-summary em {
    justify-self: start;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line-strong) 50%, var(--surface-soft));
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    padding: 6px 8px;
}

.preinvite-advanced-config[open] .preinvite-advanced-config-summary em {
    background: color-mix(in srgb, var(--blue-soft) 72%, var(--surface));
    color: var(--blue);
}

.preinvite-advanced-config-summary p {
    margin: 0;
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
}

.preinvite-advanced-config .preinvite-manage-layout {
    margin-top: 14px;
}

@media (max-width: 760px) {
    .preinvite-advanced-config-summary {
        grid-template-columns: 1fr;
        padding-right: 42px;
    }
}

.preinvite-editor-map {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--line-strong) 52%, transparent);
    padding-top: 14px;
}

.preinvite-editor-map-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.preinvite-editor-map-search {
    display: grid;
    gap: 5px;
}

.preinvite-editor-map-search span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.preinvite-editor-map-search input {
    width: 100%;
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 52%, transparent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    outline: none;
    padding: 0 12px;
}

.preinvite-editor-map-search input:focus {
    border-color: color-mix(in srgb, var(--blue) 46%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-soft) 78%, transparent);
}

.preinvite-editor-map-head strong,
.preinvite-map-group > div > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.preinvite-editor-map-head small,
.preinvite-map-group > div > em {
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.preinvite-editor-map button {
    display: grid;
    gap: 2px;
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--line-strong) 45%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-soft) 68%, var(--surface));
    cursor: pointer;
    padding: 10px;
    text-align: left;
    text-decoration: none;
}

.preinvite-editor-map button:hover,
.preinvite-editor-map button.is-active {
    border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 58%, var(--surface));
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}

.preinvite-editor-map span {
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.preinvite-editor-map button.is-active span {
    color: var(--blue);
}

.preinvite-editor-map em {
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1.45;
}

.preinvite-map-group {
    display: grid;
    gap: 7px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 38%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-soft) 42%, var(--surface));
    padding: 9px;
}

.preinvite-map-group > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.preinvite-map-children {
    display: grid;
    gap: 6px;
}

.preinvite-map-children button {
    border-radius: 10px;
    background: var(--surface);
    padding: 8px 9px;
}

.preinvite-map-children small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
    padding: 4px 2px;
}

.preinvite-map-empty {
    border: 1px dashed color-mix(in srgb, var(--line-strong) 64%, transparent);
    border-radius: 12px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    padding: 10px;
    text-align: center;
}

.conference-form-section,
.preinvite-module-row,
.preinvite-content-row,
.preinvite-form-field-row {
    scroll-margin-top: 112px;
}

.conference-form-section.is-editor-selected,
.preinvite-module-row.is-editor-selected,
.preinvite-content-row.is-editor-selected,
.preinvite-form-field-row.is-editor-selected {
    border-color: color-mix(in srgb, var(--blue) 42%, var(--line)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-soft) 72%, transparent), 0 16px 36px rgba(37, 99, 235, 0.10);
}

.preinvite-live-preview-panel {
    --phone-radius: 18px;
    --phone-button-radius: 999px;
    --phone-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
    --phone-font-size: 12px;
    position: sticky;
    top: 92px;
    align-self: start;
    display: grid;
    gap: 12px;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055);
    padding: 14px;
}

.preinvite-live-preview-panel[data-corner="square"] {
    --phone-radius: 8px;
}

.preinvite-live-preview-panel[data-corner="round"] {
    --phone-radius: 28px;
}

.preinvite-live-preview-panel[data-shadow="none"] {
    --phone-shadow: none;
}

.preinvite-live-preview-panel[data-shadow="deep"] {
    --phone-shadow: 0 24px 58px rgba(15, 23, 42, 0.16);
}

.preinvite-live-preview-panel[data-font="compact"] {
    --phone-font-size: 11px;
}

.preinvite-live-preview-panel[data-font="large"] {
    --phone-font-size: 13px;
}

.preinvite-live-preview-panel[data-button="square"] {
    --phone-button-radius: 8px;
}

.preinvite-live-preview-panel[data-button="rounded"] {
    --phone-button-radius: 14px;
}

.preinvite-live-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.preinvite-live-preview-head div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.preinvite-live-preview-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.preinvite-live-preview-head strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-live-preview-head a {
    flex: 0 0 auto;
    min-height: 30px;
    border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue-soft) 56%, var(--surface));
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    line-height: 30px;
    padding: 0 11px;
    text-decoration: none;
}

.preinvite-phone-frame {
    display: grid;
    justify-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ink) 12%, var(--line));
    border-radius: 30px;
    background: linear-gradient(180deg, #111827, #020617);
    box-shadow: 0 26px 56px rgba(15, 23, 42, 0.2);
    padding: 10px;
}

.preinvite-phone-speaker {
    width: 74px;
    height: 5px;
    margin: 2px 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
}

.preinvite-phone-screen {
    display: grid;
    gap: 10px;
    width: 100%;
    max-height: 660px;
    overflow: auto;
    border-radius: 22px;
    background: var(--editor-bg);
    color: #0f172a;
    padding: 12px;
    scrollbar-width: thin;
}

.preinvite-live-preview-panel[data-tone="clean"] .preinvite-phone-screen {
    background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--editor-bg) 54%, #fff));
}

.preinvite-live-preview-panel[data-tone="soft"] .preinvite-phone-screen {
    background:
        radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--editor-color) 12%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--editor-bg) 82%, #fff), var(--editor-bg));
}

.preinvite-live-preview-panel[data-tone="gradient"] .preinvite-phone-screen {
    background:
        radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--editor-color) 22%, transparent), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(6, 182, 212, 0.18), transparent 30%),
        linear-gradient(155deg, color-mix(in srgb, var(--editor-bg) 74%, #fff), var(--editor-bg));
}

@media (min-width: 1201px) and (max-width: 1440px) {
    .preinvite-manage-layout {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .preinvite-live-preview-panel {
        grid-column: 2;
        position: static;
    }
}

.preinvite-phone-hero,
.preinvite-phone-menu button,
.preinvite-phone-content article,
.preinvite-phone-fields {
    border-radius: var(--phone-radius);
    box-shadow: var(--phone-shadow);
}

.preinvite-phone-hero {
    display: grid;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--editor-color) 18%, transparent);
    background: color-mix(in srgb, #fff 88%, var(--editor-bg));
    padding: 14px;
}

.preinvite-phone-hero span {
    width: fit-content;
    border-radius: 999px;
    background: color-mix(in srgb, var(--editor-color) 12%, #fff);
    color: var(--editor-color);
    font-size: 11px;
    font-weight: 900;
    padding: 4px 8px;
}

.preinvite-phone-hero h3 {
    margin: 0;
    color: #0f172a;
    font-size: calc(var(--phone-font-size) + 6px);
    font-weight: 900;
    line-height: 1.3;
}

.preinvite-phone-hero p {
    margin: 0;
    color: #475569;
    font-size: var(--phone-font-size);
    font-weight: 600;
    line-height: 1.65;
}

.preinvite-phone-hero button {
    justify-self: start;
    min-height: 32px;
    border: 0;
    border-radius: var(--phone-button-radius);
    background: var(--editor-color);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    padding: 0 14px;
}

.preinvite-phone-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.preinvite-live-preview-panel[data-menu="grid2"] .preinvite-phone-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preinvite-live-preview-panel[data-menu="grid4"] .preinvite-phone-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.preinvite-live-preview-panel[data-menu="list"] .preinvite-phone-menu {
    grid-template-columns: 1fr;
}

.preinvite-phone-menu button {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-height: 86px;
    --module-accent: var(--editor-color);
    border: 1px solid color-mix(in srgb, var(--module-accent) 14%, transparent);
    background: color-mix(in srgb, #fff 84%, var(--editor-bg));
    color: #0f172a;
    padding: 9px 5px;
}

.preinvite-live-preview-panel[data-menu="list"] .preinvite-phone-menu button {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    min-height: 58px;
    text-align: left;
    padding-inline: 10px;
}

.preinvite-live-preview-panel[data-menu="list"] .preinvite-phone-menu button:not(:has(i)):not(:has(img)) {
    grid-template-columns: 1fr;
}

.preinvite-phone-menu button.is-solid {
    background: var(--module-accent);
    color: #fff;
}

.preinvite-phone-menu button.is-outline {
    background: rgba(255, 255, 255, 0.52);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--module-accent) 28%, transparent);
    color: var(--module-accent);
}

.preinvite-phone-menu button.is-shape-square {
    border-radius: 8px;
}

.preinvite-phone-menu button.is-shape-rounded {
    border-radius: 14px;
}

.preinvite-phone-menu button.is-shape-pill {
    border-radius: 999px;
}

.preinvite-phone-menu button.is-size-compact {
    min-height: 64px;
    gap: 5px;
    padding: 7px 4px;
    font-size: 11px;
}

.preinvite-phone-menu button.is-size-normal {
    min-height: 82px;
    padding: 10px 6px;
}

.preinvite-phone-menu button.is-size-large {
    min-height: 102px;
    gap: 8px;
    padding: 13px 8px;
    font-size: 13px;
}

.preinvite-phone-menu button.is-icon-left,
.preinvite-phone-menu button.is-icon-right {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    text-align: left;
}

.preinvite-phone-menu button.is-icon-right {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: end;
    text-align: right;
}

.preinvite-phone-menu button.is-icon-right i,
.preinvite-phone-menu button.is-icon-right img {
    order: 2;
}

.preinvite-phone-menu button.is-icon-left:not(:has(i)):not(:has(img)),
.preinvite-phone-menu button.is-icon-right:not(:has(i)):not(:has(img)) {
    grid-template-columns: 1fr;
}

.preinvite-phone-menu button.is-icon-tone-soft i,
.preinvite-phone-menu button.is-icon-tone-soft img {
    border-color: color-mix(in srgb, var(--module-accent) 38%, transparent);
    background: color-mix(in srgb, var(--module-accent) 12%, #fff);
    box-shadow: 0 7px 16px color-mix(in srgb, var(--module-accent) 14%, transparent);
}

.preinvite-phone-menu button.is-icon-tone-solid i {
    border-color: var(--module-accent);
    background: var(--module-accent);
    color: #fff;
}

.preinvite-phone-menu button.is-icon-tone-solid img {
    border: 1px solid var(--module-accent);
    background: var(--module-accent);
    padding: 2px;
}

.preinvite-phone-menu button.is-icon-tone-plain i,
.preinvite-phone-menu button.is-icon-tone-plain img {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.preinvite-phone-menu button.is-text-single span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-phone-menu button.is-text-multiline span {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.preinvite-phone-menu i {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid color-mix(in srgb, var(--module-accent) 40%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--module-accent) 12%, #fff);
    color: var(--module-accent);
}

.preinvite-live-preview-panel[data-icon-size="small"] .preinvite-phone-menu i,
.preinvite-live-preview-panel[data-icon-size="small"] .preinvite-phone-menu img {
    width: 24px;
    height: 24px;
}

.preinvite-live-preview-panel[data-icon-size="large"] .preinvite-phone-menu i,
.preinvite-live-preview-panel[data-icon-size="large"] .preinvite-phone-menu img {
    width: 38px;
    height: 38px;
}

.preinvite-live-preview-panel[data-icon-shape="rounded"] .preinvite-phone-menu i,
.preinvite-live-preview-panel[data-icon-shape="rounded"] .preinvite-phone-menu img {
    border-radius: 12px;
}

.preinvite-live-preview-panel[data-icon-shape="square"] .preinvite-phone-menu i,
.preinvite-live-preview-panel[data-icon-shape="square"] .preinvite-phone-menu img {
    border-radius: 6px;
}

.preinvite-live-preview-panel[data-icon-shape="original"] .preinvite-phone-menu img {
    border-radius: 0;
    object-fit: contain;
}

.preinvite-live-preview-panel[data-icon-shape="original"] .preinvite-phone-menu i {
    border-radius: 8px;
}

.preinvite-phone-menu img {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.12);
}

.preinvite-live-preview-panel[data-icon-size="small"] .preinvite-phone-menu img {
    width: 24px;
    height: 24px;
}

.preinvite-live-preview-panel[data-icon-size="large"] .preinvite-phone-menu img {
    width: 38px;
    height: 38px;
}

.preinvite-live-preview-panel[data-icon-shape="rounded"] .preinvite-phone-menu img {
    border-radius: 12px;
}

.preinvite-live-preview-panel[data-icon-shape="square"] .preinvite-phone-menu img {
    border-radius: 6px;
}

.preinvite-live-preview-panel[data-icon-shape="original"] .preinvite-phone-menu img {
    border-radius: 0;
    object-fit: contain;
}

.preinvite-phone-menu button.is-solid i {
    border-color: rgba(255, 255, 255, 0.58);
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.preinvite-phone-menu i::before {
    position: absolute;
    inset: 9px;
    border: 2px solid currentColor;
    border-radius: 5px;
    content: "";
    opacity: 0.72;
}

.preinvite-live-preview-panel[data-icon-size="small"] .preinvite-phone-menu i::before {
    inset: 7px;
}

.preinvite-live-preview-panel[data-icon-size="large"] .preinvite-phone-menu i::before {
    inset: 12px;
}

.preinvite-phone-menu i.is-agenda::before {
    border-radius: 2px;
}

.preinvite-phone-menu i.is-register::before {
    border-radius: 50% 50% 7px 7px;
}

.preinvite-phone-menu i.is-traffic::before {
    transform: rotate(45deg);
}

.preinvite-phone-menu i.is-live::before,
.preinvite-phone-menu i.is-gallery::before {
    border-radius: 50%;
}

.preinvite-phone-menu i.is-doc::before {
    border-radius: 2px 7px 2px 2px;
}

.preinvite-phone-menu i.is-hotel::before {
    border-radius: 7px 7px 2px 2px;
}

.preinvite-phone-menu i.is-contact::before {
    inset: 10px 7px;
    border-radius: 50%;
}

.preinvite-phone-menu span {
    display: -webkit-box;
    overflow: hidden;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.preinvite-live-preview-panel[data-menu-text-size="small"] .preinvite-phone-menu span {
    font-size: 10px;
}

.preinvite-live-preview-panel[data-menu-text-size="large"] .preinvite-phone-menu span {
    font-size: 13px;
}

.preinvite-phone-content {
    display: grid;
    gap: 8px;
}

.preinvite-phone-content article {
    display: grid;
    gap: 7px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.82);
    padding: 10px;
}

.preinvite-phone-content article.is-media-right {
    grid-template-columns: minmax(0, 1fr) 72px;
}

.preinvite-phone-content article.is-media-right img {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.preinvite-phone-content img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--phone-radius) - 6px);
    object-fit: cover;
}

.preinvite-phone-content strong {
    color: #0f172a;
    font-size: 12px;
    font-weight: 900;
}

.preinvite-phone-content p {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.55;
}

.preinvite-phone-fields {
    display: grid;
    gap: 7px;
    border: 1px dashed color-mix(in srgb, var(--editor-color) 28%, transparent);
    background: rgba(255, 255, 255, 0.78);
    padding: 10px;
}

.preinvite-phone-fields[hidden] {
    display: none !important;
}

.preinvite-phone-fields > strong {
    color: #0f172a;
    font-size: 12px;
    font-weight: 900;
}

.preinvite-phone-fields label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 30px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    background: #fff;
    padding: 0 9px;
}

.preinvite-phone-fields span {
    overflow: hidden;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-phone-fields em {
    flex: 0 0 auto;
    color: var(--editor-color);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.preinvite-manage-nav,
.preinvite-code-files {
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.035);
    padding: 10px;
}

.preinvite-manage-nav a,
.preinvite-code-files a {
    font-size: 12px;
    font-weight: 600;
}

.preinvite-manage-nav a:hover,
.preinvite-manage-nav a:focus {
    background: color-mix(in srgb, var(--blue-soft) 74%, transparent);
    color: var(--blue);
}

.preinvite-manage-form {
    max-width: none;
    margin: 0;
    padding-bottom: 24px;
}

.preinvite-manage-form .conference-form-actions {
    position: static;
    width: fit-content;
    max-width: 100%;
    margin: 18px 0 0 auto;
}

.preinvite-manage-form .conference-form-section:first-of-type,
.preinvite-asset-section,
.preinvite-export-section {
    padding-top: 0;
}

.preinvite-link-editor {
    display: grid;
    gap: 10px;
}

.preinvite-link-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr);
    gap: 12px;
    align-items: end;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 14px;
    background: var(--surface);
    padding: 12px;
}

.preinvite-link-row .premium-field {
    min-width: 0;
}

.preinvite-asset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 14px;
}

.preinvite-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    align-items: stretch;
    justify-content: start;
    gap: 20px;
}

.preinvite-asset-card,
.preinvite-template-card,
.preinvite-code-editor-panel {
    display: grid;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.035);
}

.preinvite-asset-card {
    gap: 10px;
    padding: 14px;
}

.preinvite-asset-card strong,
.preinvite-code-files > strong,
.preinvite-code-head strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.preinvite-asset-card img,
.preinvite-asset-card .asset-empty {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
    object-fit: cover;
}

.preinvite-asset-card code {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-asset-card input[type="file"] {
    width: 100%;
    min-height: 36px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 12px;
    padding: 7px 10px;
}

.preinvite-asset-card .action-button,
.export-summary .action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 60%, transparent);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
}

.preinvite-asset-card .action-button.is-info,
.export-summary .action-button.is-info {
    background: var(--surface);
    color: var(--text);
}

.preinvite-asset-card .action-button.is-entry,
.export-summary .action-button.is-entry {
    border-color: color-mix(in srgb, var(--blue) 18%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 52%, var(--surface));
    color: var(--blue);
}

.export-summary {
    align-items: center;
}

.export-summary div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.export-summary span {
    color: var(--muted);
    font-size: 12px;
}

.preinvite-editor-toolbar {
    align-items: center;
}

.preinvite-status-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    padding: 0 12px;
}

.preinvite-status-badge::before {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    content: "";
    margin-right: 7px;
}

.preinvite-status-badge.is-running {
    border-color: color-mix(in srgb, var(--green) 42%, var(--line));
    background: color-mix(in srgb, var(--green-soft) 74%, var(--surface));
    color: color-mix(in srgb, var(--green) 86%, var(--ink));
}

.preinvite-status-badge.is-closed {
    border-color: color-mix(in srgb, var(--red) 38%, var(--line));
    background: color-mix(in srgb, var(--red-soft) 72%, var(--surface));
    color: color-mix(in srgb, var(--red) 88%, var(--ink));
}

.preinvite-status-badge.is-draft {
    border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
    background: color-mix(in srgb, var(--amber-soft) 72%, var(--surface));
    color: color-mix(in srgb, var(--amber) 82%, var(--ink));
}

.preinvite-latest-export {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 14px 0 0;
    border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--blue-soft) 38%, var(--surface));
    padding: 14px 16px;
}

.preinvite-latest-export div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.preinvite-latest-export span,
.preinvite-latest-export small {
    color: var(--muted);
    font-size: 12px;
}

.preinvite-latest-export strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-selected-inspector {
    display: grid;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
    border-radius: 16px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--surface) 84%, var(--brand-soft)), var(--surface));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
    padding: 12px;
}

.preinvite-selected-inspector.is-warning {
    border-color: color-mix(in srgb, #f59e0b 42%, var(--line));
    background:
        linear-gradient(135deg, color-mix(in srgb, #fef3c7 36%, var(--surface)), var(--surface));
}

.preinvite-selected-inspector.is-page {
    border-color: color-mix(in srgb, var(--green, #16a34a) 32%, var(--line));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--green-soft, #dcfce7) 30%, var(--surface)), var(--surface));
}

.preinvite-selected-inspector-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.preinvite-selected-inspector-head > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.preinvite-selected-inspector-head span {
    color: var(--brand);
    font-size: 11px;
    font-weight: 850;
}

.preinvite-selected-inspector-head strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-selected-inspector-head em {
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 58%, var(--surface));
    color: var(--brand);
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
    padding: 5px 8px;
    white-space: nowrap;
}

.preinvite-selected-inspector.is-warning .preinvite-selected-inspector-head em {
    background: color-mix(in srgb, #fef3c7 78%, var(--surface));
    color: #b45309;
}

.preinvite-selected-inspector.is-page .preinvite-selected-inspector-head em {
    background: color-mix(in srgb, var(--green-soft, #dcfce7) 78%, var(--surface));
    color: var(--green, #15803d);
}

.preinvite-selected-inspector p {
    margin: 0;
    color: var(--muted-strong);
    font-size: 12px;
    line-height: 1.55;
}

.preinvite-selected-properties {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.preinvite-selected-properties[hidden] {
    display: none;
}

.preinvite-selected-quick {
    display: grid;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--brand-soft) 28%, var(--surface));
    padding: 10px;
}

.preinvite-selected-quick[hidden] {
    display: none;
}

.preinvite-selected-quick-group {
    display: grid;
    gap: 8px;
}

.preinvite-selected-quick-group > div:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.preinvite-selected-quick-group strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.preinvite-selected-quick-group span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.45;
}

.preinvite-selected-quick-items {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.preinvite-selected-quick-items button {
    display: grid;
    min-width: 118px;
    max-width: 176px;
    min-height: 46px;
    gap: 2px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    padding: 7px 10px;
    text-align: left;
}

.preinvite-selected-quick-items button:hover,
.preinvite-selected-quick-items button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 36%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 42%, var(--surface));
    outline: 0;
}

.preinvite-selected-quick-items button.is-warning {
    border-color: color-mix(in srgb, #f59e0b 42%, var(--line));
    background: color-mix(in srgb, #fef3c7 30%, var(--surface));
}

.preinvite-selected-quick-items button.is-page {
    border-color: color-mix(in srgb, var(--green, #16a34a) 30%, var(--line));
    background: color-mix(in srgb, var(--green-soft, #dcfce7) 30%, var(--surface));
}

.preinvite-selected-quick-items button.is-muted {
    opacity: .72;
}

.preinvite-selected-quick-items b,
.preinvite-selected-quick-items span {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-selected-quick-items b {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.preinvite-selected-quick-items span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.3;
}

.preinvite-selected-flow {
    display: grid;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 50%, transparent);
    border-radius: 15px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 30%, transparent), transparent 56%),
        color-mix(in srgb, var(--surface) 94%, var(--surface-soft));
    padding: 10px;
}

.preinvite-selected-flow[hidden] {
    display: none;
}

.preinvite-selected-flow-group {
    display: grid;
    gap: 8px;
}

.preinvite-selected-flow-group > div:first-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.preinvite-selected-flow-group strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.preinvite-selected-flow-group span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.45;
}

.preinvite-selected-flow-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 7px;
}

.preinvite-selected-flow-items button {
    position: relative;
    display: grid;
    min-height: 58px;
    gap: 3px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 50%, transparent);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    overflow: hidden;
    padding: 9px 10px 9px 34px;
    text-align: left;
}

.preinvite-selected-flow-items button::before {
    position: absolute;
    top: 12px;
    left: 11px;
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--brand) 76%, var(--muted));
    border-radius: 5px;
    content: "";
}

.preinvite-selected-flow-items button.is-color::before {
    border-color: color-mix(in srgb, var(--property-color, var(--brand)) 80%, #fff);
    background: var(--property-color, var(--brand));
}

.preinvite-selected-flow-items button.is-icon::before,
.preinvite-selected-flow-items button.is-button::before {
    border-radius: 999px;
}

.preinvite-selected-flow-items button.is-link::before {
    width: 16px;
    height: 8px;
    border-left: 0;
    border-radius: 0 999px 999px 0;
}

.preinvite-selected-flow-items button.is-page::before,
.preinvite-selected-flow-items button.is-content::before {
    height: 18px;
    border-radius: 3px;
}

.preinvite-selected-flow-items button:hover,
.preinvite-selected-flow-items button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 36%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 34%, var(--surface));
    outline: 0;
}

.preinvite-selected-flow-items button.is-warning {
    border-color: color-mix(in srgb, #f59e0b 40%, var(--line));
    background: color-mix(in srgb, #fef3c7 30%, var(--surface));
}

.preinvite-selected-flow-items button.is-page {
    border-color: color-mix(in srgb, var(--green, #16a34a) 28%, var(--line));
    background: color-mix(in srgb, var(--green-soft, #dcfce7) 28%, var(--surface));
}

.preinvite-selected-flow-items button.is-muted {
    opacity: .74;
}

.preinvite-selected-flow-items b,
.preinvite-selected-flow-items span {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-selected-flow-items b {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.preinvite-selected-flow-items span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.preinvite-selected-property-card {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 62px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 55%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface) 92%, var(--brand-soft));
    color: var(--text);
    cursor: pointer;
    padding: 8px;
    text-align: left;
}

.preinvite-selected-property-card:hover,
.preinvite-selected-property-card:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 36%, var(--surface));
    outline: 0;
}

.preinvite-selected-property-card:disabled {
    cursor: not-allowed;
    opacity: .62;
}

.preinvite-selected-property-card.is-warning {
    border-color: color-mix(in srgb, #f59e0b 38%, var(--line));
    background: color-mix(in srgb, #fef3c7 34%, var(--surface));
}

.preinvite-selected-property-card.is-page {
    border-color: color-mix(in srgb, var(--green, #16a34a) 28%, var(--line));
    background: color-mix(in srgb, var(--green-soft, #dcfce7) 34%, var(--surface));
}

.preinvite-selected-property-card.is-muted {
    background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
}

.preinvite-selected-property-visual {
    position: relative;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-soft) 62%, var(--surface));
}

.preinvite-selected-property-visual::before,
.preinvite-selected-property-visual::after {
    position: absolute;
    content: "";
}

.preinvite-selected-property-card.is-color .preinvite-selected-property-visual {
    border: 1px solid color-mix(in srgb, var(--line-strong) 52%, transparent);
    background:
        linear-gradient(135deg, var(--property-color, var(--brand)) 0 50%, color-mix(in srgb, var(--property-color, var(--brand)) 24%, #fff) 50% 100%);
}

.preinvite-selected-property-card.is-style .preinvite-selected-property-visual::before,
.preinvite-selected-property-card.is-button .preinvite-selected-property-visual::before {
    width: 18px;
    height: 10px;
    border-radius: 999px;
    background: var(--brand, var(--blue));
}

.preinvite-selected-property-card.is-layout .preinvite-selected-property-visual::before {
    width: 18px;
    height: 18px;
    border: 2px solid var(--brand, var(--blue));
    border-radius: 6px;
    box-shadow: inset 8px 0 0 color-mix(in srgb, var(--brand) 20%, transparent);
}

.preinvite-selected-property-card.is-icon .preinvite-selected-property-visual::before {
    width: 16px;
    height: 16px;
    border: 2px solid var(--brand, var(--blue));
    border-radius: 50%;
}

.preinvite-selected-property-card.is-link .preinvite-selected-property-visual::before {
    width: 15px;
    height: 8px;
    border: 2px solid var(--brand, var(--blue));
    border-left-width: 0;
    border-radius: 0 999px 999px 0;
}

.preinvite-selected-property-card.is-page .preinvite-selected-property-visual::before,
.preinvite-selected-property-card.is-content .preinvite-selected-property-visual::before {
    width: 16px;
    height: 20px;
    border: 2px solid var(--brand, var(--blue));
    border-radius: 4px;
}

.preinvite-selected-property-card.is-asset .preinvite-selected-property-visual::before {
    width: 18px;
    height: 14px;
    border: 2px solid var(--brand, var(--blue));
    border-radius: 4px;
}

.preinvite-selected-property-card.is-field .preinvite-selected-property-visual::before,
.preinvite-selected-property-card.is-list .preinvite-selected-property-visual::before {
    width: 18px;
    height: 14px;
    border: 2px solid var(--brand, var(--blue));
    border-radius: 5px;
    box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--brand) 18%, transparent);
}

.preinvite-selected-property-card > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.preinvite-selected-property-card b {
    color: var(--brand);
    font-size: 10px;
    font-weight: 850;
}

.preinvite-selected-property-card strong,
.preinvite-selected-property-card span {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-selected-property-card strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
}

.preinvite-selected-property-card span {
    color: var(--muted);
    font-size: 11px;
}

.preinvite-selected-property-card em {
    align-self: start;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-soft) 78%, var(--surface));
    color: var(--muted-strong);
    font-size: 10px;
    font-style: normal;
    font-weight: 850;
    padding: 4px 7px;
    white-space: nowrap;
}

.preinvite-selected-property-card.is-warning em {
    background: color-mix(in srgb, #fef3c7 78%, var(--surface));
    color: #b45309;
}

.preinvite-selected-property-card.is-page em {
    background: color-mix(in srgb, var(--green-soft, #dcfce7) 78%, var(--surface));
    color: var(--green, #15803d);
}

.preinvite-selected-inspector-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.preinvite-selected-inspector-actions button {
    min-height: 30px;
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 42%, var(--surface));
    color: var(--brand);
    cursor: pointer;
    font-size: 11px;
    font-weight: 850;
    padding: 0 11px;
}

.preinvite-selected-inspector-actions button:hover,
.preinvite-selected-inspector-actions button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 62%, var(--surface));
    outline: 0;
}

.preinvite-selected-inspector-actions button:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.preinvite-editable-board {
    display: grid;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 16px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--brand-soft)), var(--surface));
    padding: 12px;
}

.preinvite-editable-board-head,
.preinvite-editable-board-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
}

.preinvite-editable-board-head {
    grid-template-columns: minmax(0, 1fr) auto;
}

.preinvite-editable-board-head > div,
.preinvite-editable-board-item > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.preinvite-editable-board-head strong,
.preinvite-editable-board-item strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-editable-board-head span,
.preinvite-editable-board-head em,
.preinvite-editable-board-item span,
.preinvite-editable-board-item b,
.preinvite-editable-board-item em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.42;
}

.preinvite-editable-board-head em,
.preinvite-editable-board-item em {
    width: fit-content;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 56%, var(--surface));
    color: var(--brand);
    padding: 5px 8px;
    white-space: nowrap;
}

.preinvite-editable-board-list {
    display: grid;
    max-height: 360px;
    gap: 7px;
    overflow: auto;
    padding-right: 2px;
}

.preinvite-editable-board-item {
    border: 1px solid color-mix(in srgb, var(--line-strong) 52%, transparent);
    border-radius: 13px;
    background: var(--surface);
    padding: 9px;
}

.preinvite-editable-board-item b {
    color: color-mix(in srgb, var(--brand) 72%, var(--muted));
}

.preinvite-editable-board-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-editable-board-item button {
    min-height: 29px;
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 42%, var(--surface));
    color: var(--brand);
    cursor: pointer;
    font-size: 11px;
    font-weight: 850;
    padding: 0 10px;
}

.preinvite-editable-board-item button:hover,
.preinvite-editable-board-item button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 62%, var(--surface));
    outline: 0;
}

.preinvite-editable-board-item.is-warning {
    border-color: color-mix(in srgb, #f59e0b 42%, var(--line));
    background: color-mix(in srgb, #fef3c7 34%, var(--surface));
}

.preinvite-editable-board-item.is-warning em {
    background: color-mix(in srgb, #fef3c7 78%, var(--surface));
    color: #b45309;
}

.preinvite-editable-board-item.is-page em {
    background: color-mix(in srgb, var(--green-soft, #dcfce7) 78%, var(--surface));
    color: var(--green, #15803d);
}

.preinvite-editable-board-item.is-muted {
    opacity: .72;
}

.preinvite-editable-board-item.is-muted em {
    background: color-mix(in srgb, var(--surface-soft) 84%, var(--surface));
    color: var(--muted);
}

.preinvite-maintenance-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.preinvite-maintenance-board {
    display: grid;
    min-width: 0;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 56%, transparent);
    border-radius: 16px;
    background: var(--surface);
    padding: 12px;
}

.preinvite-maintenance-board.is-visual {
    grid-column: 1 / -1;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 34%, transparent), transparent 44%),
        var(--surface);
}

.preinvite-maintenance-board-head,
.preinvite-maintenance-board-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.preinvite-maintenance-board-head > div,
.preinvite-maintenance-board-item > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.preinvite-maintenance-board-head strong,
.preinvite-maintenance-board-item strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-maintenance-board-head span,
.preinvite-maintenance-board-head em,
.preinvite-maintenance-board-item span,
.preinvite-maintenance-board-item b,
.preinvite-maintenance-board-item em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.45;
}

.preinvite-maintenance-board-head em,
.preinvite-maintenance-board-item em {
    justify-self: end;
    width: fit-content;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 52%, var(--surface));
    color: var(--brand);
    padding: 5px 8px;
    white-space: nowrap;
}

.preinvite-maintenance-board-list {
    display: grid;
    max-height: 320px;
    gap: 7px;
    overflow: auto;
    padding-right: 2px;
}

.preinvite-maintenance-board.is-visual .preinvite-maintenance-board-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-height: 360px;
}

.preinvite-maintenance-board-item {
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 50%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface-soft) 34%, var(--surface));
    padding: 9px;
}

.preinvite-maintenance-board-item > i {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface));
    color: var(--brand);
}

.preinvite-maintenance-board-item > i::before {
    position: absolute;
    inset: 8px;
    border: 2px solid currentColor;
    border-radius: 4px;
    content: "";
}

.preinvite-maintenance-board-item > i.is-asset::before,
.preinvite-maintenance-board-item > i.is-upload::before,
.preinvite-maintenance-board-item > i.is-button::before {
    border-radius: 50%;
}

.preinvite-maintenance-board-item > i.is-page::before,
.preinvite-maintenance-board-item > i.is-child::before {
    border-radius: 2px 8px 8px 2px;
}

.preinvite-maintenance-board-item > i.is-style::before {
    inset: 10px 5px;
    border-radius: 999px;
    background: currentColor;
}

.preinvite-maintenance-board-item > i.is-link::before {
    inset: 8px 13px 8px 6px;
    border-radius: 999px;
    background: currentColor;
}

.preinvite-maintenance-board-item > i.is-link::after {
    top: 9px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    transform: rotate(45deg);
}

.preinvite-maintenance-board-item > i.is-warning {
    background: color-mix(in srgb, #fef3c7 72%, var(--surface));
    color: #b45309;
}

.preinvite-maintenance-board-item > i.is-muted {
    background: color-mix(in srgb, var(--surface-soft) 86%, var(--surface));
    color: var(--muted);
}

.preinvite-maintenance-board-item b {
    color: color-mix(in srgb, var(--brand) 72%, var(--muted));
}

.preinvite-maintenance-board-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-maintenance-board-item button {
    min-height: 29px;
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 42%, var(--surface));
    color: var(--brand);
    cursor: pointer;
    font-size: 11px;
    font-weight: 850;
    padding: 0 10px;
}

.preinvite-maintenance-board-item button:hover,
.preinvite-maintenance-board-item button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 62%, var(--surface));
    outline: 0;
}

.preinvite-maintenance-board-item.is-warning {
    border-color: color-mix(in srgb, #f59e0b 42%, var(--line));
    background: color-mix(in srgb, #fef3c7 32%, var(--surface));
}

.preinvite-maintenance-board-item.is-warning em {
    background: color-mix(in srgb, #fef3c7 78%, var(--surface));
    color: #b45309;
}

.preinvite-maintenance-board-item.is-page em {
    background: color-mix(in srgb, var(--green-soft, #dcfce7) 78%, var(--surface));
    color: var(--green, #15803d);
}

.preinvite-maintenance-board-item.is-muted {
    opacity: .74;
}

.preinvite-maintenance-board-item.is-muted em {
    background: color-mix(in srgb, var(--surface-soft) 84%, var(--surface));
    color: var(--muted);
}

.preinvite-copy-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}

.preinvite-copy-field .action-button,
.preinvite-latest-export .action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 62%, transparent);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 0 12px;
    text-decoration: none;
}

.preinvite-copy-field .action-button.is-entry,
.preinvite-latest-export .action-button.is-entry {
    border-color: color-mix(in srgb, var(--blue) 20%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 60%, var(--surface));
    color: var(--blue);
}

.preinvite-style-editor,
.preinvite-share-editor {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.95fr);
    gap: 16px;
    align-items: stretch;
}

.preinvite-style-editor {
    --preview-radius: 18px;
    --preview-button-radius: 999px;
    --preview-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
    --preview-font-size: 13px;
    --preview-menu-icon: 22px;
    --preview-menu-text-size: 10px;
}

.preinvite-style-editor[data-corner="square"] {
    --preview-radius: 8px;
}

.preinvite-style-editor[data-corner="round"] {
    --preview-radius: 28px;
}

.preinvite-style-editor[data-shadow="none"] {
    --preview-shadow: none;
}

.preinvite-style-editor[data-shadow="deep"] {
    --preview-shadow: 0 26px 72px rgba(15, 23, 42, 0.16);
}

.preinvite-style-editor[data-font="compact"] {
    --preview-font-size: 12px;
}

.preinvite-style-editor[data-font="large"] {
    --preview-font-size: 15px;
}

.preinvite-style-editor[data-button="square"] {
    --preview-button-radius: 8px;
}

.preinvite-style-editor[data-button="rounded"] {
    --preview-button-radius: 14px;
}

.preinvite-style-editor[data-icon-size="small"] {
    --preview-menu-icon: 18px;
}

.preinvite-style-editor[data-icon-size="large"] {
    --preview-menu-icon: 28px;
}

.preinvite-style-editor[data-menu-text-size="small"] {
    --preview-menu-text-size: 9px;
}

.preinvite-style-editor[data-menu-text-size="large"] {
    --preview-menu-text-size: 12px;
}

.preinvite-style-controls {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.preinvite-global-style-board {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--brand-soft) 30%, var(--surface));
    padding: 12px;
}

.preinvite-global-style-board-head,
.preinvite-global-style-board-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.preinvite-global-style-board-head > div {
    display: grid;
    gap: 3px;
}

.preinvite-global-style-board-head strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
}

.preinvite-global-style-board-head span,
.preinvite-global-style-board-head em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.preinvite-global-style-board-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.preinvite-global-style-board-item {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 76px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    padding: 10px;
    text-align: left;
}

.preinvite-global-style-board-item:hover,
.preinvite-global-style-board-item:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 26%, var(--surface));
}

.preinvite-global-style-board-item i {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-soft) 62%, var(--surface));
}

.preinvite-global-style-board-item i::before {
    position: absolute;
    inset: 8px;
    border: 2px solid var(--brand);
    border-radius: 4px;
    content: "";
}

.preinvite-global-style-board-item.is-color i {
    background: var(--editor-color, var(--brand));
}

.preinvite-global-style-board-item.is-background i {
    background: var(--editor-bg, var(--surface-soft));
}

.preinvite-global-style-board-item.is-shadow i::before {
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.2);
}

.preinvite-global-style-board-item.is-button i::before {
    inset: 10px 6px;
    border-radius: 999px;
}

.preinvite-global-style-board-item.is-icon i::before {
    inset: 7px;
    border-radius: 999px;
}

.preinvite-global-style-board-item > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.preinvite-global-style-board-item b,
.preinvite-global-style-board-item span,
.preinvite-global-style-board-item em {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-global-style-board-item strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-universal-editor {
    display: grid;
    gap: 14px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    border-radius: 18px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 42%, transparent), transparent 62%),
        var(--surface);
    box-shadow: var(--shadow-soft);
    padding: 16px;
}

.preinvite-universal-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.preinvite-universal-editor-head > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.preinvite-universal-editor-head span,
.preinvite-universal-editor-head em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.preinvite-universal-editor-head strong {
    color: var(--ink);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.35;
}

.preinvite-universal-editor-head em {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
    border-radius: 999px;
    background: var(--surface);
    color: var(--brand);
    padding: 0 10px;
    white-space: nowrap;
}

.preinvite-universal-steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.preinvite-universal-steps button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 42px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface) 88%, var(--brand-soft));
    color: var(--text);
    cursor: pointer;
    padding: 8px 10px;
    text-align: left;
}

.preinvite-universal-steps button:hover,
.preinvite-universal-steps button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
    color: var(--brand);
    outline: 0;
}

.preinvite-universal-steps b {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

.preinvite-universal-steps span {
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-universal-list {
    display: grid;
    gap: 10px;
}

.preinvite-universal-item {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(320px, 1.8fr) auto auto;
    align-items: center;
    gap: 12px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 94%, var(--surface-soft));
    padding: 12px;
}

.preinvite-universal-item.is-warning {
    border-color: rgba(245, 158, 11, 0.30);
    background: color-mix(in srgb, var(--amber-soft) 44%, var(--surface));
}

.preinvite-universal-item.is-page {
    border-color: rgba(37, 99, 235, 0.22);
    background: color-mix(in srgb, var(--brand-soft) 44%, var(--surface));
}

.preinvite-universal-item-title {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.preinvite-universal-item-title b,
.preinvite-universal-item-title span,
.preinvite-universal-item > em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.35;
}

.preinvite-universal-item-title strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-universal-item-title span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.preinvite-universal-stages {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.preinvite-universal-stages button {
    display: grid;
    min-width: 0;
    min-height: 46px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    padding: 7px 9px;
    text-align: left;
}

.preinvite-universal-stages button:hover,
.preinvite-universal-stages button:focus-visible,
.preinvite-universal-actions button:hover,
.preinvite-universal-actions button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
    color: var(--brand);
    outline: 0;
}

.preinvite-universal-stages button:disabled,
.preinvite-universal-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.preinvite-universal-stages button.is-warning {
    border-color: rgba(245, 158, 11, 0.34);
    background: var(--amber-soft);
}

.preinvite-universal-stages button.is-page {
    border-color: rgba(37, 99, 235, 0.24);
    background: var(--brand-soft);
}

.preinvite-universal-stages button.is-muted {
    background: var(--surface-soft);
    color: var(--muted);
}

.preinvite-universal-stages b,
.preinvite-universal-stages span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-universal-stages b {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.preinvite-universal-stages span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.preinvite-universal-actions {
    display: flex;
    min-width: 168px;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.preinvite-universal-actions button {
    min-height: 28px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    padding: 0 10px;
}

.preinvite-universal-item > em {
    justify-self: end;
    min-width: 72px;
    text-align: right;
}

.preinvite-button-designer {
    display: grid;
    gap: 12px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    border-radius: 18px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 38%, transparent), transparent 48%),
        var(--surface);
    box-shadow: var(--shadow-soft);
    padding: 16px;
}

.preinvite-button-designer-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.preinvite-button-designer-head > div,
.preinvite-button-designer-text {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.preinvite-button-designer-head span,
.preinvite-button-designer-head em,
.preinvite-button-designer-text b,
.preinvite-button-designer-text span,
.preinvite-button-designer-state {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
}

.preinvite-button-designer-head strong {
    color: var(--ink);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.35;
}

.preinvite-button-designer-head em,
.preinvite-button-designer-state {
    justify-self: end;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 64%, var(--surface));
    color: var(--brand);
    padding: 5px 10px;
    white-space: nowrap;
}

.preinvite-button-designer-list {
    display: grid;
    gap: 10px;
}

.preinvite-button-designer-item {
    display: grid;
    grid-template-columns: 150px minmax(150px, 1fr) minmax(360px, 2fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface) 94%, var(--surface-soft));
    padding: 12px;
}

.preinvite-button-designer-item.is-warning {
    border-color: rgba(245, 158, 11, 0.32);
    background: color-mix(in srgb, var(--amber-soft) 42%, var(--surface));
}

.preinvite-button-designer-item.is-page {
    border-color: rgba(37, 99, 235, 0.24);
    background: color-mix(in srgb, var(--brand-soft) 44%, var(--surface));
}

.preinvite-button-designer-item.is-muted {
    opacity: .82;
}

.preinvite-button-designer-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    border: 1px solid color-mix(in srgb, var(--module-accent, var(--brand)) 28%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--module-accent, var(--brand)) 10%, var(--surface));
    color: var(--ink);
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
    padding: 8px 10px;
}

.preinvite-button-designer-preview.is-solid {
    border-color: transparent;
    background: var(--module-accent, var(--brand));
    color: #fff;
}

.preinvite-button-designer-preview.is-outline {
    background: var(--surface);
    color: var(--module-accent, var(--brand));
}

.preinvite-button-designer-preview.is-shape-square {
    border-radius: 8px;
}

.preinvite-button-designer-preview.is-shape-rounded,
.preinvite-button-designer-preview.is-shape-inherit {
    border-radius: 14px;
}

.preinvite-button-designer-preview.is-shape-pill {
    border-radius: 999px;
}

.preinvite-button-designer-preview.is-size-large {
    min-height: 48px;
}

.preinvite-button-designer-preview img,
.preinvite-button-designer-preview i {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.preinvite-button-designer-preview img {
    border-radius: 6px;
    object-fit: cover;
}

.preinvite-button-designer-preview i {
    position: relative;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.preinvite-button-designer-preview i::before,
.preinvite-button-designer-preview i::after {
    position: absolute;
    display: block;
    content: "";
}

.preinvite-button-designer-preview i::before {
    inset: 5px;
    border-radius: 4px;
    background: currentColor;
    opacity: .72;
}

.preinvite-button-designer-preview i.is-agenda::before,
.preinvite-button-designer-preview i.is-doc::before,
.preinvite-button-designer-preview i.is-file::before {
    inset: 4px 6px;
    border-radius: 3px;
}

.preinvite-button-designer-preview i.is-register::before {
    inset: 5px 4px 8px;
    border-radius: 999px;
}

.preinvite-button-designer-preview i.is-register::after {
    right: 4px;
    bottom: 4px;
    left: 4px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    opacity: .72;
}

.preinvite-button-designer-preview i.is-traffic::before,
.preinvite-button-designer-preview i.is-map::before {
    inset: 4px 6px 6px;
    border-radius: 999px 999px 999px 2px;
    transform: rotate(-45deg);
}

.preinvite-button-designer-preview i.is-arrow::before {
    inset: 7px 6px;
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 0;
    background: transparent;
    transform: rotate(45deg);
}

.preinvite-button-designer-preview i.is-arrow::after {
    right: 5px;
    left: 5px;
    top: 9px;
    height: 2px;
    border-radius: 999px;
}

.preinvite-button-designer-preview i.is-download::before {
    inset: 4px 8px 8px;
    width: 4px;
    border-radius: 999px;
}

.preinvite-button-designer-preview i.is-download::after {
    left: 5px;
    right: 5px;
    bottom: 4px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    border-radius: 0 0 3px 3px;
    background: transparent;
}

.preinvite-button-designer-preview i.is-phone::before {
    inset: 4px 7px;
    border-radius: 8px 8px 8px 2px;
    transform: rotate(-28deg);
}

.preinvite-button-designer-preview i.is-mail::before {
    inset: 5px 4px;
    border-radius: 3px;
    background: transparent;
    border: 2px solid currentColor;
}

.preinvite-button-designer-preview i.is-mail::after {
    left: 5px;
    right: 5px;
    top: 8px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    background: transparent;
}

.preinvite-button-designer-preview span,
.preinvite-button-designer-text strong,
.preinvite-button-designer-text span,
.preinvite-button-designer-actions span,
.preinvite-button-designer-actions b,
.preinvite-button-designer-actions em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-button-designer-text strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
}

.preinvite-button-designer-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.preinvite-button-designer-actions button {
    display: grid;
    min-width: 0;
    min-height: 54px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    padding: 8px;
    text-align: left;
}

.preinvite-button-designer-actions button:hover,
.preinvite-button-designer-actions button:focus-visible,
.preinvite-button-designer-preview:hover,
.preinvite-button-designer-preview:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-soft) 62%, transparent);
    outline: 0;
}

.preinvite-button-designer-actions button.is-warning {
    border-color: rgba(245, 158, 11, 0.34);
    background: var(--amber-soft);
}

.preinvite-button-designer-actions button.is-page {
    border-color: rgba(37, 99, 235, 0.24);
    background: var(--brand-soft);
}

.preinvite-button-designer-actions button.is-muted {
    background: var(--surface-soft);
    color: var(--muted);
}

.preinvite-button-designer-actions b {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.preinvite-button-designer-actions span,
.preinvite-button-designer-actions em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

@media (max-width: 1220px) {
    .preinvite-universal-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .preinvite-universal-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .preinvite-universal-actions {
        justify-content: flex-start;
    }

    .preinvite-universal-item > em {
        justify-self: start;
        text-align: left;
    }

    .preinvite-button-designer-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .preinvite-button-designer-state {
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .preinvite-universal-editor-head,
    .preinvite-button-designer-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .preinvite-universal-steps,
    .preinvite-universal-stages,
    .preinvite-button-designer-actions {
        grid-template-columns: 1fr;
    }

    .preinvite-universal-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .preinvite-universal-actions button {
        width: 100%;
    }
}

.preinvite-style-coverage {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    border-radius: 16px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 32%, transparent), transparent 48%),
        var(--surface);
    padding: 12px;
}

.preinvite-style-coverage-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.preinvite-style-coverage-head > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.preinvite-style-coverage-head strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
}

.preinvite-style-coverage-head span,
.preinvite-style-coverage-head em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.45;
}

.preinvite-style-coverage-head em {
    justify-self: end;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 58%, var(--surface));
    color: var(--brand, var(--blue));
    padding: 5px 8px;
    white-space: nowrap;
}

.preinvite-style-coverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(218px, 1fr));
    gap: 8px;
}

.preinvite-style-coverage-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 72px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 94%, var(--brand-soft));
    color: var(--text);
    cursor: pointer;
    padding: 9px;
    text-align: left;
}

.preinvite-style-coverage-item:hover,
.preinvite-style-coverage-item:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 42%, var(--surface));
    outline: 0;
}

.preinvite-style-coverage-item:disabled {
    cursor: not-allowed;
    opacity: .62;
}

.preinvite-style-coverage-item > i {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--brand-soft) 66%, var(--surface));
    color: var(--brand, var(--blue));
}

.preinvite-style-coverage-item > i::before,
.preinvite-style-coverage-item > i::after {
    position: absolute;
    content: "";
}

.preinvite-style-coverage-item > i::before {
    inset: 8px;
    border: 2px solid currentColor;
    border-radius: 5px;
}

.preinvite-style-coverage-item > i.is-layout::before,
.preinvite-style-coverage-item > i.is-content::before {
    box-shadow: inset 8px 0 0 color-mix(in srgb, currentColor 18%, transparent);
}

.preinvite-style-coverage-item > i.is-button::before,
.preinvite-style-coverage-item > i.is-asset::before,
.preinvite-style-coverage-item > i.is-field::before {
    border-radius: 999px;
}

.preinvite-style-coverage-item > i.is-page::before,
.preinvite-style-coverage-item > i.is-child::before {
    top: 6px;
    bottom: 6px;
    border-radius: 3px 8px 8px 3px;
}

.preinvite-style-coverage-item > i.is-child::after {
    right: 7px;
    bottom: 7px;
    left: 9px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
}

.preinvite-style-coverage-item > i.is-warning {
    background: color-mix(in srgb, #fef3c7 76%, var(--surface));
    color: #b45309;
}

.preinvite-style-coverage-item > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.preinvite-style-coverage-item b,
.preinvite-style-coverage-item span {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-style-coverage-item b {
    color: color-mix(in srgb, var(--brand) 72%, var(--muted));
}

.preinvite-style-coverage-item strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-style-coverage-item em {
    justify-self: end;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 58%, var(--surface));
    color: var(--brand, var(--blue));
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    padding: 5px 7px;
    white-space: nowrap;
}

.preinvite-style-coverage-item.is-warning {
    border-color: color-mix(in srgb, #f59e0b 42%, var(--line));
    background: color-mix(in srgb, #fef3c7 34%, var(--surface));
}

.preinvite-style-coverage-item.is-warning em {
    background: color-mix(in srgb, #fef3c7 78%, var(--surface));
    color: #b45309;
}

.preinvite-style-coverage-item.is-page em {
    background: color-mix(in srgb, var(--green-soft, #dcfce7) 78%, var(--surface));
    color: var(--green, #15803d);
}

.preinvite-style-coverage-item.is-muted {
    opacity: .78;
}

.preinvite-style-coverage-item.is-muted em {
    background: color-mix(in srgb, var(--surface-soft) 84%, var(--surface));
    color: var(--muted);
}

.preinvite-style-preset-panel {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 50%, transparent);
    border-radius: 16px;
    background: var(--surface);
    padding: 12px;
}

.preinvite-style-preset-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.preinvite-style-preset-head strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
}

.preinvite-style-preset-head span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
}

.preinvite-style-preset-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.preinvite-style-preset-grid button {
    display: grid;
    min-width: 0;
    gap: 6px;
    min-height: 112px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent);
    border-radius: 14px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--preset-primary) 15%, transparent), transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, var(--preset-bg) 72%, #fff), var(--preset-bg));
    color: var(--ink);
    cursor: pointer;
    padding: 11px;
    text-align: left;
}

.preinvite-style-preset-grid button:hover,
.preinvite-style-preset-grid button:focus-visible {
    border-color: color-mix(in srgb, var(--preset-primary) 44%, var(--line));
    box-shadow: 0 12px 26px color-mix(in srgb, var(--preset-primary) 14%, transparent);
}

.preinvite-style-preset-grid i {
    display: block;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--preset-primary);
    box-shadow: 18px 0 0 color-mix(in srgb, var(--preset-primary) 20%, #fff);
}

.preinvite-style-preset-grid strong,
.preinvite-style-preset-grid span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.preinvite-style-preset-grid strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.preinvite-style-preset-grid span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.55;
    -webkit-line-clamp: 2;
}

.preinvite-style-color-grid,
.preinvite-style-media-grid,
.preinvite-style-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.preinvite-color-panel,
.preinvite-color-preview,
.preinvite-style-live-preview,
.preinvite-share-card {
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.035);
    padding: 14px;
}

.preinvite-color-panel {
    display: grid;
    gap: 14px;
}

.preinvite-color-control {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.preinvite-color-native {
    width: 46px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
    padding: 3px !important;
}

.preinvite-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.preinvite-color-swatches button {
    width: 30px;
    height: 30px;
    border: 2px solid var(--surface);
    border-radius: 999px;
    background: var(--swatch);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--line-strong) 72%, transparent);
    cursor: pointer;
}

.preinvite-color-swatches button.is-active {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--editor-color) 24%, transparent), 0 0 0 1px var(--editor-color);
}

.preinvite-color-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    align-content: center;
    gap: 12px;
    min-height: 142px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--editor-color) 18%, transparent), transparent 36%),
        var(--surface);
}

.preinvite-color-preview div {
    display: grid;
    gap: 8px;
}

.preinvite-color-preview span,
.preinvite-color-preview small {
    color: var(--muted);
    font-size: 12px;
}

.preinvite-color-preview strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 36px;
    border-radius: 999px;
    background: var(--editor-color);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    padding: 0 16px;
}

.preinvite-color-preview i {
    align-self: center;
    justify-self: end;
    display: block;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--editor-color), color-mix(in srgb, var(--editor-color) 50%, #06b6d4));
    box-shadow: 0 16px 30px color-mix(in srgb, var(--editor-color) 24%, transparent);
}

.preinvite-style-live-preview {
    display: grid;
    align-items: center;
    min-height: 100%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--editor-bg) 76%, #fff), var(--editor-bg));
}

.preinvite-style-editor[data-tone="clean"] .preinvite-style-live-preview {
    background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--editor-bg) 50%, #fff));
}

.preinvite-style-editor[data-tone="gradient"] .preinvite-style-live-preview {
    background:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--editor-color) 18%, transparent), transparent 35%),
        radial-gradient(circle at 92% 20%, color-mix(in srgb, #06b6d4 22%, transparent), transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--editor-bg) 72%, #fff), var(--editor-bg));
}

.preinvite-style-preview-card {
    position: relative;
    display: grid;
    gap: 9px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--editor-color) 16%, var(--line));
    border-radius: var(--preview-radius);
    background: color-mix(in srgb, var(--surface) 88%, var(--editor-bg));
    box-shadow: var(--preview-shadow);
    padding: 18px;
}

.preinvite-style-preview-card span {
    color: var(--editor-color);
    font-size: 12px;
    font-weight: 900;
}

.preinvite-style-preview-card strong {
    color: var(--ink);
    font-size: calc(var(--preview-font-size) + 4px);
    font-weight: 900;
    line-height: 1.3;
}

.preinvite-style-preview-card p {
    max-width: 260px;
    margin: 0;
    color: var(--muted);
    font-size: var(--preview-font-size);
    font-weight: 600;
    line-height: 1.65;
}

.preinvite-style-menu-sample {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 2px 0 4px;
}

.preinvite-style-editor[data-menu="grid2"] .preinvite-style-menu-sample {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preinvite-style-editor[data-menu="grid4"] .preinvite-style-menu-sample {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.preinvite-style-editor[data-menu="list"] .preinvite-style-menu-sample {
    grid-template-columns: 1fr;
}

.preinvite-style-menu-sample span {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--editor-color) 18%, var(--line));
    border-radius: var(--preview-button-radius);
    background: color-mix(in srgb, #fff 84%, var(--editor-bg));
    color: color-mix(in srgb, var(--ink) 78%, var(--editor-color));
    font-size: var(--preview-menu-text-size);
    font-weight: 900;
    line-height: 1.25;
    padding: 7px 5px;
    text-align: center;
}

.preinvite-style-editor[data-menu="list"] .preinvite-style-menu-sample span {
    grid-template-columns: var(--preview-menu-icon) minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    text-align: left;
}

.preinvite-style-menu-sample i {
    width: var(--preview-menu-icon, 22px);
    height: var(--preview-menu-icon, 22px);
    border-radius: 999px;
    background: color-mix(in srgb, var(--editor-color) 18%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--editor-color) 40%, transparent);
}

.preinvite-style-editor[data-icon-shape="rounded"] .preinvite-style-menu-sample i {
    border-radius: 9px;
}

.preinvite-style-editor[data-icon-shape="square"] .preinvite-style-menu-sample i {
    border-radius: 4px;
}

.preinvite-style-editor[data-icon-shape="original"] .preinvite-style-menu-sample i {
    border-radius: 2px;
}

.preinvite-style-preview-card button {
    justify-self: start;
    min-height: 34px;
    border: 0;
    border-radius: var(--preview-button-radius);
    background: var(--editor-color);
    color: #fff;
    cursor: default;
    font-size: 12px;
    font-weight: 900;
    padding: 0 16px;
}

.preinvite-style-preview-card i {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    border-radius: calc(var(--preview-radius) - 4px);
    background: linear-gradient(135deg, var(--editor-color), color-mix(in srgb, var(--editor-color) 52%, #06b6d4));
    opacity: 0.72;
}

.preinvite-hero-field {
    margin-top: 16px;
}

.preinvite-share-card {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 118px;
}

.preinvite-share-thumb {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.preinvite-share-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preinvite-share-card div:last-child {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.preinvite-share-card strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-share-card span,
.preinvite-share-card small {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-module-editor {
    display: grid;
    gap: 12px;
}

.preinvite-module-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.preinvite-module-head span {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.preinvite-module-head .action-button {
    min-height: 30px;
}

.preinvite-preset-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
}

.preinvite-preset-strip button,
.preinvite-preset-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 55%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    padding: 9px 10px;
}

.preinvite-preset-strip button {
    cursor: pointer;
    text-align: left;
}

.preinvite-preset-strip button:hover,
.preinvite-preset-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line-strong));
    background: color-mix(in srgb, var(--brand-soft) 62%, var(--surface));
    color: var(--brand);
}

.preinvite-preset-strip i,
.preinvite-preset-option i {
    position: relative;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: color-mix(in srgb, currentColor 10%, #fff);
}

.preinvite-preset-strip i::before,
.preinvite-preset-option i::before {
    position: absolute;
    inset: 8px;
    border: 2px solid currentColor;
    border-radius: 4px;
    content: "";
    opacity: .6;
}

.preinvite-preset-strip i.is-agenda::before,
.preinvite-preset-option i.is-agenda::before,
.preinvite-preset-strip i.is-doc::before,
.preinvite-preset-option i.is-doc::before {
    border-radius: 2px;
}

.preinvite-preset-strip i.is-speaker::before,
.preinvite-preset-option i.is-speaker::before,
.preinvite-preset-strip i.is-register::before,
.preinvite-preset-option i.is-register::before {
    border-radius: 50% 50% 7px 7px;
}

.preinvite-preset-strip i.is-traffic::before,
.preinvite-preset-option i.is-traffic::before {
    transform: rotate(45deg);
}

.preinvite-preset-strip i.is-live::before,
.preinvite-preset-option i.is-live::before,
.preinvite-preset-strip i.is-gallery::before,
.preinvite-preset-option i.is-gallery::before {
    border-radius: 50%;
}

.preinvite-preset-strip span,
.preinvite-preset-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
    gap: 8px;
}

.preinvite-preset-option {
    cursor: pointer;
}

.preinvite-preset-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.preinvite-module-list {
    display: grid;
    gap: 10px;
}

.preinvite-content-editor,
.preinvite-content-list {
    display: grid;
    gap: 12px;
}

.preinvite-content-row {
    display: grid;
    gap: 12px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 14px;
    background: var(--surface);
    padding: 14px;
}

.preinvite-content-row.is-hidden-block {
    background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
}

.preinvite-content-row-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
}

.preinvite-content-preview {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.preinvite-content-preview strong,
.preinvite-content-preview span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-content-preview strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.preinvite-content-preview span {
    color: var(--muted);
    font-size: 12px;
}

.preinvite-content-preview b,
.preinvite-content-preview em {
    font: inherit;
}

.preinvite-content-preview b {
    color: var(--brand);
    font-weight: 800;
}

.preinvite-content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.preinvite-content-inspector,
.preinvite-module-inspector,
.preinvite-field-inspector {
    display: grid;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
    border-radius: 14px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 42%, var(--surface)), var(--surface));
    padding: 10px;
}

.preinvite-content-inspector-summary,
.preinvite-module-inspector-summary,
.preinvite-field-inspector-summary {
    display: grid;
    gap: 3px;
}

.preinvite-content-inspector-summary span,
.preinvite-content-inspector-summary em,
.preinvite-module-inspector-summary span,
.preinvite-module-inspector-summary em,
.preinvite-field-inspector-summary span,
.preinvite-field-inspector-summary em,
.preinvite-content-live small,
.preinvite-module-inspector-live span,
.preinvite-field-live small,
.preinvite-field-live p {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1.45;
}

.preinvite-content-inspector-summary strong,
.preinvite-module-inspector-summary strong,
.preinvite-field-inspector-summary strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.preinvite-content-panel-tabs,
.preinvite-module-panel-tabs,
.preinvite-field-panel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.preinvite-content-panel-tabs button,
.preinvite-module-panel-tabs button,
.preinvite-field-panel-tabs button {
    min-height: 30px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    padding: 0 11px;
}

.preinvite-content-panel-tabs button.is-active,
.preinvite-module-panel-tabs button.is-active,
.preinvite-field-panel-tabs button.is-active {
    border-color: color-mix(in srgb, var(--brand) 38%, var(--line));
    background: var(--brand, var(--blue));
    color: #fff;
}

.preinvite-module-workflow {
    display: grid;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 72%, var(--brand-soft));
    padding: 10px;
}

.preinvite-module-workflow-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.preinvite-module-workflow-head > div {
    display: grid;
    gap: 2px;
}

.preinvite-module-workflow-head strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
}

.preinvite-module-workflow-head span,
.preinvite-module-workflow-head em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.preinvite-module-workflow-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}

.preinvite-module-workflow-list button {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    min-width: 0;
    min-height: 74px;
    gap: 8px;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    padding: 8px;
    text-align: left;
}

.preinvite-module-workflow-list button:hover,
.preinvite-module-workflow-list button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 30%, var(--surface));
}

.preinvite-module-workflow-list b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 58%, var(--surface));
    color: var(--brand);
    font-size: 11px;
    font-weight: 900;
}

.preinvite-module-workflow-list div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.preinvite-module-workflow-list small,
.preinvite-module-workflow-list span,
.preinvite-module-workflow-list em {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-module-workflow-list strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-module-workflow-list em {
    grid-column: 1 / -1;
    justify-self: start;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-soft) 78%, var(--surface));
    padding: 3px 8px;
}

.preinvite-module-workflow-list button.is-warning {
    border-color: color-mix(in srgb, var(--amber) 32%, var(--line));
    background: color-mix(in srgb, var(--amber-soft) 46%, var(--surface));
}

.preinvite-module-workflow-list button.is-warning b,
.preinvite-module-workflow-list button.is-warning em {
    background: color-mix(in srgb, var(--amber-soft) 78%, var(--surface));
    color: color-mix(in srgb, var(--amber) 86%, var(--ink));
}

.preinvite-module-workflow-list button.is-page b,
.preinvite-module-workflow-list button.is-page em {
    background: color-mix(in srgb, var(--brand-soft) 70%, var(--surface));
    color: var(--brand);
}

.preinvite-module-workflow-list button.is-muted {
    opacity: .76;
}

.preinvite-content-style-recipes,
.preinvite-module-style-recipes,
.preinvite-field-style-recipes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}

.preinvite-content-style-recipes button,
.preinvite-module-style-recipes button,
.preinvite-field-style-recipes button {
    display: grid;
    gap: 3px;
    min-height: 52px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    padding: 8px;
    text-align: left;
}

.preinvite-module-style-recipes button {
    grid-template-columns: 30px minmax(0, 1fr);
}

.preinvite-module-style-recipes button strong,
.preinvite-module-style-recipes button span {
    grid-column: 2;
}

.preinvite-content-style-recipes button strong,
.preinvite-content-style-recipes button span,
.preinvite-module-style-recipes button strong,
.preinvite-module-style-recipes button span,
.preinvite-field-style-recipes button strong,
.preinvite-field-style-recipes button span {
    min-width: 0;
}

.preinvite-module-recipe-thumb {
    position: relative;
    grid-row: span 2;
    align-self: center;
    width: 28px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--brand-soft) 54%, var(--surface));
}

.preinvite-module-recipe-thumb i,
.preinvite-module-recipe-thumb b {
    position: absolute;
    display: block;
    content: "";
}

.preinvite-module-recipe-thumb i {
    top: 7px;
    left: 8px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--brand, var(--blue));
}

.preinvite-module-recipe-thumb b {
    right: 6px;
    bottom: 7px;
    left: 6px;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 34%, var(--line-strong));
}

.preinvite-module-recipe-thumb.is-primary {
    background: var(--brand, var(--blue));
}

.preinvite-module-recipe-thumb.is-primary i,
.preinvite-module-recipe-thumb.is-primary b {
    background: #fff;
}

.preinvite-module-recipe-thumb.is-compact {
    height: 24px;
    border-radius: 9px;
    background: var(--surface);
}

.preinvite-module-recipe-thumb.is-compact i {
    top: 6px;
    left: 5px;
    width: 10px;
    height: 10px;
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--brand, var(--blue));
}

.preinvite-module-recipe-thumb.is-compact b {
    right: 5px;
    bottom: 9px;
    left: 17px;
    height: 4px;
}

.preinvite-module-recipe-thumb.is-external {
    background: var(--surface);
}

.preinvite-module-recipe-thumb.is-external i {
    border-radius: 5px;
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--brand, var(--blue));
    transform: rotate(45deg);
}

.preinvite-module-recipe-thumb.is-subpage {
    background: color-mix(in srgb, var(--brand) 14%, var(--surface));
}

.preinvite-module-recipe-thumb.is-subpage::after {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 9px;
    height: 12px;
    border: 1px solid color-mix(in srgb, var(--brand) 52%, var(--line));
    border-radius: 4px;
    background: var(--surface);
    content: "";
}

.preinvite-content-style-recipes button:hover,
.preinvite-module-style-recipes button:hover,
.preinvite-field-style-recipes button:hover {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 30%, var(--surface));
}

.preinvite-content-style-recipes button:disabled,
.preinvite-module-style-recipes button:disabled,
.preinvite-field-style-recipes button:disabled,
.preinvite-module-subpage-wizard button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.preinvite-content-style-recipes strong,
.preinvite-module-style-recipes strong,
.preinvite-field-style-recipes strong,
.preinvite-content-live strong,
.preinvite-module-inspector-live strong,
.preinvite-field-live strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.preinvite-content-style-recipes span,
.preinvite-module-style-recipes span,
.preinvite-field-style-recipes span {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
}

.preinvite-content-live,
.preinvite-module-inspector-live,
.preinvite-field-live {
    display: grid;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface) 74%, var(--brand-soft));
    padding: 10px;
}

.preinvite-content-live > div,
.preinvite-module-inspector-live > div {
    display: grid;
    gap: 6px;
}

.preinvite-content-live p {
    margin: 0;
    color: var(--muted-strong);
    font-size: 12px;
    line-height: 1.55;
}

.preinvite-content-live [data-content-live-items] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.preinvite-content-live [data-content-live-items][hidden] {
    display: none;
}

.preinvite-content-live [data-content-live-items] span {
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue-soft) 64%, var(--surface));
    color: var(--blue);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
}

.preinvite-field-live {
    grid-template-columns: minmax(130px, .56fr) minmax(0, 1fr);
    align-items: start;
}

.preinvite-field-live p {
    margin: 0;
}

.preinvite-field-live-control {
    display: grid;
    min-height: 40px;
    align-content: center;
    gap: 7px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 62%, transparent);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 700;
    padding: 9px 11px;
}

.preinvite-field-live-control.is-textarea {
    min-height: 74px;
    align-content: start;
}

.preinvite-field-live-control.is-textarea em {
    display: block;
    width: 72%;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line-strong) 52%, transparent);
}

.preinvite-field-live-control.is-file,
.preinvite-field-live-control.is-image {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 26%, var(--surface));
    color: var(--brand, var(--blue));
    text-align: center;
}

.preinvite-field-live-control.is-invoice {
    grid-template-columns: 1fr;
}

.preinvite-field-live-control.is-invoice span {
    min-height: 28px;
    border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 50%, transparent);
}

.preinvite-module-subpage-wizard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px dashed color-mix(in srgb, var(--brand) 30%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--brand-soft) 28%, var(--surface));
    padding: 10px 12px;
}

.preinvite-module-subpage-wizard[data-link-type="page"] {
    border-style: solid;
    background: color-mix(in srgb, var(--green-soft, #dcfce7) 34%, var(--surface));
}

.preinvite-module-subpage-wizard > div:first-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.preinvite-module-subpage-wizard strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
}

.preinvite-module-subpage-wizard span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.preinvite-module-subpage-wizard > div:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.preinvite-module-subpage-wizard button {
    min-height: 30px;
    border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line));
    border-radius: 999px;
    background: var(--surface);
    color: var(--brand, var(--blue));
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    padding: 0 11px;
}

.preinvite-module-subpage-wizard button:hover,
.preinvite-module-subpage-wizard button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 52%, var(--surface));
    outline: 0;
}

.preinvite-module-link-board {
    display: grid;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 60%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface) 82%, var(--brand-soft));
    padding: 10px;
}

.preinvite-module-link-board-head,
.preinvite-module-link-board-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
}

.preinvite-module-link-board-head > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.preinvite-module-link-board-head strong,
.preinvite-module-link-board-item strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
}

.preinvite-module-link-board-head span,
.preinvite-module-link-board-item span,
.preinvite-module-link-board-item b {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.preinvite-module-link-board-head em,
.preinvite-module-link-board-item em {
    width: fit-content;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue-soft) 62%, var(--surface));
    color: var(--blue);
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
    padding: 5px 8px;
    white-space: nowrap;
}

.preinvite-module-link-board-list {
    display: grid;
    max-height: 310px;
    gap: 7px;
    overflow: auto;
    padding-right: 2px;
}

.preinvite-module-link-board-item {
    border: 1px solid color-mix(in srgb, var(--line-strong) 52%, transparent);
    border-radius: 12px;
    background: var(--surface);
    padding: 8px;
}

.preinvite-module-link-board-item > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.preinvite-module-link-board-item strong,
.preinvite-module-link-board-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-module-link-board-item b {
    color: color-mix(in srgb, var(--brand) 70%, var(--muted));
    font-weight: 850;
}

.preinvite-module-link-board-item button {
    min-height: 28px;
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 42%, var(--surface));
    color: var(--brand, var(--blue));
    cursor: pointer;
    font-size: 11px;
    font-weight: 850;
    padding: 0 10px;
    white-space: nowrap;
}

.preinvite-module-link-board-item button:hover,
.preinvite-module-link-board-item button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 62%, var(--surface));
    outline: 0;
}

.preinvite-module-link-board-item.is-warning {
    border-color: color-mix(in srgb, #f59e0b 42%, var(--line));
    background: color-mix(in srgb, #fef3c7 36%, var(--surface));
}

.preinvite-module-link-board-item.is-warning em {
    background: color-mix(in srgb, #fef3c7 78%, var(--surface));
    color: #b45309;
}

.preinvite-module-link-board-item.is-page em {
    background: color-mix(in srgb, var(--green-soft, #dcfce7) 78%, var(--surface));
    color: var(--green, #15803d);
}

.preinvite-module-link-board-item.is-muted {
    opacity: .76;
}

.preinvite-module-link-board-item.is-muted em {
    background: color-mix(in srgb, var(--surface-soft) 84%, var(--surface));
    color: var(--muted);
}

.preinvite-module-style-board {
    display: grid;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    border-radius: 13px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, var(--brand-soft)), var(--surface));
    padding: 10px;
}

.preinvite-module-style-board-head,
.preinvite-module-style-board-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
}

.preinvite-module-style-board-head {
    grid-template-columns: minmax(0, 1fr) auto;
}

.preinvite-module-style-board-head > div,
.preinvite-module-style-board-item > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.preinvite-module-style-board-head strong,
.preinvite-module-style-board-item strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-module-style-board-head span,
.preinvite-module-style-board-item span,
.preinvite-module-style-board-item b {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.preinvite-module-style-board-item b {
    color: color-mix(in srgb, var(--brand) 72%, var(--muted));
    font-weight: 850;
}

.preinvite-module-style-board-head em,
.preinvite-module-style-board-item em {
    width: fit-content;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 56%, var(--surface));
    color: var(--brand, var(--blue));
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
    padding: 5px 8px;
    white-space: nowrap;
}

.preinvite-module-style-board-list {
    display: grid;
    gap: 7px;
}

.preinvite-module-style-board-item {
    border: 1px solid color-mix(in srgb, var(--line-strong) 52%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 94%, var(--brand-soft));
    padding: 8px;
}

.preinvite-module-style-board-item > div span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-module-style-board-visual {
    position: relative;
    width: 28px;
    height: 28px;
    border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-soft) 48%, var(--surface));
}

.preinvite-module-style-board-visual::before,
.preinvite-module-style-board-visual::after {
    position: absolute;
    content: "";
}

.preinvite-module-style-board-visual::before {
    inset: 8px;
    border: 2px solid var(--brand, var(--blue));
    border-radius: 5px;
}

.preinvite-module-style-board-visual.is-button::before {
    inset: 10px 5px;
    border-radius: 999px;
    background: var(--brand, var(--blue));
}

.preinvite-module-style-board-visual.is-color {
    border-color: color-mix(in srgb, var(--style-board-color) 44%, var(--line));
    background:
        radial-gradient(circle at 50% 50%, var(--style-board-color), var(--style-board-color) 42%, transparent 44%),
        color-mix(in srgb, var(--style-board-color) 14%, var(--surface));
}

.preinvite-module-style-board-visual.is-color::before {
    display: none;
}

.preinvite-module-style-board-visual.is-layout::before {
    inset: 6px 15px 6px 5px;
    border-radius: 999px;
    background: var(--brand, var(--blue));
}

.preinvite-module-style-board-visual.is-layout::after {
    top: 9px;
    right: 5px;
    width: 8px;
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 52%, var(--line-strong));
    box-shadow: 0 6px 0 color-mix(in srgb, var(--brand) 38%, var(--line-strong));
}

.preinvite-module-style-board-visual.is-text::before {
    inset: 8px 5px auto;
    height: 3px;
    border: 0;
    border-radius: 999px;
    background: var(--brand, var(--blue));
    box-shadow: 0 6px 0 color-mix(in srgb, var(--brand) 40%, var(--line-strong));
}

.preinvite-module-style-board-item button {
    min-height: 28px;
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 40%, var(--surface));
    color: var(--brand, var(--blue));
    cursor: pointer;
    font-size: 11px;
    font-weight: 850;
    padding: 0 10px;
    white-space: nowrap;
}

.preinvite-module-style-board-item button:hover,
.preinvite-module-style-board-item button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 62%, var(--surface));
    outline: 0;
}

.preinvite-module-style-board-item.is-warning {
    border-color: color-mix(in srgb, #f59e0b 42%, var(--line));
    background: color-mix(in srgb, #fef3c7 34%, var(--surface));
}

.preinvite-module-style-board-item.is-warning em {
    background: color-mix(in srgb, #fef3c7 78%, var(--surface));
    color: #b45309;
}

.is-guide-focus {
    outline: 2px solid color-mix(in srgb, var(--brand) 58%, transparent);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-soft) 46%, transparent);
}

.preinvite-field-live-options {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 6px;
}

.preinvite-field-live-options[hidden] {
    display: none;
}

.preinvite-field-live-options span {
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 56%, var(--surface));
    color: var(--brand, var(--blue));
    font-size: 11px;
    font-weight: 800;
    padding: 5px 9px;
}

.preinvite-module-inspector-live {
    grid-template-columns: minmax(150px, .7fr) minmax(0, 1fr);
    align-items: center;
}

.preinvite-module-inspector-button {
    display: inline-grid;
    min-height: 68px;
    align-content: center;
    justify-items: center;
    gap: 6px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--module-accent, var(--brand)) 12%, var(--surface));
    color: var(--module-accent, var(--brand));
    font-size: 12px;
    font-weight: 800;
    padding: 10px 12px;
}

.preinvite-module-inspector-button.is-solid {
    background: var(--module-accent, var(--brand));
    color: #fff;
}

.preinvite-module-inspector-button.is-outline {
    border: 1px solid color-mix(in srgb, var(--module-accent, var(--brand)) 48%, var(--line));
    background: var(--surface);
}

.preinvite-module-inspector-button.is-shape-square {
    border-radius: 8px;
}

.preinvite-module-inspector-button.is-shape-rounded {
    border-radius: 14px;
}

.preinvite-module-inspector-button.is-shape-pill {
    border-radius: 999px;
}

.preinvite-module-inspector-button.is-size-compact {
    min-height: 48px;
}

.preinvite-module-inspector-button.is-size-large {
    min-height: 82px;
    font-size: 13px;
}

.preinvite-module-inspector-button.is-icon-left,
.preinvite-module-inspector-button.is-icon-right {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    text-align: left;
}

.preinvite-module-inspector-button.is-icon-right {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: end;
    text-align: right;
}

.preinvite-module-inspector-button.is-icon-right i,
.preinvite-module-inspector-button.is-icon-right img {
    order: 2;
}

.preinvite-module-inspector-button i {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 9px;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.preinvite-module-inspector-button i::before {
    position: absolute;
    inset: 7px;
    border: 2px solid currentColor;
    border-radius: 4px;
    content: "";
}

.preinvite-module-inspector-button img {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    object-fit: cover;
}

.preinvite-block-detail-editor {
    display: grid;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 45%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
    padding: 12px;
}

.preinvite-block-detail-list {
    display: grid;
    gap: 8px;
}

.preinvite-block-detail-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    border: 1px solid color-mix(in srgb, var(--line-strong) 45%, transparent);
    border-radius: 12px;
    background: var(--surface);
    padding: 10px;
}

.preinvite-block-detail-row[data-detail-type="download"] {
    border-color: color-mix(in srgb, #0f766e 24%, var(--line));
}

.preinvite-block-detail-row[data-detail-type="nav"] {
    border-color: color-mix(in srgb, #0891b2 24%, var(--line));
}

.preinvite-block-detail-row[data-detail-type="contact"] {
    border-color: color-mix(in srgb, #7c3aed 24%, var(--line));
}

.preinvite-block-detail-row .premium-field {
    min-width: 0;
}

.preinvite-module-detail-editor {
    grid-column: 1 / -1;
}

.preinvite-detail-choice {
    display: grid;
    grid-column: 1 / -1;
    gap: 7px;
}

.preinvite-detail-choice > span {
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 700;
}

.preinvite-detail-choice > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.preinvite-detail-choice button,
.preinvite-detail-row-tools button {
    min-height: 30px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
    color: var(--muted-strong);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 0 10px;
}

.preinvite-detail-choice button.is-active {
    border-color: color-mix(in srgb, var(--blue) 38%, transparent);
    background: color-mix(in srgb, var(--blue-soft) 70%, var(--surface));
    color: var(--blue);
}

.preinvite-detail-action-field {
    display: grid;
    grid-column: 1 / -1;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 76%, var(--blue-soft));
    padding: 10px;
}

.preinvite-detail-action-field .premium-field {
    margin: 0;
}

.preinvite-detail-action-field .preinvite-action-text-presets {
    gap: 5px;
}

.preinvite-detail-action-field .preinvite-action-text-presets button {
    min-height: 26px;
    font-size: 11px;
    padding: 0 8px;
}

.preinvite-subpage-block-editor {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
    border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 30%, var(--surface)), var(--surface));
    padding: 12px;
}

.preinvite-subpage-block-list {
    display: grid;
    gap: 10px;
}

.preinvite-page-block-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.preinvite-page-block-presets button {
    display: grid;
    gap: 4px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent);
    border-radius: 12px;
    background: var(--surface);
    padding: 10px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.preinvite-page-block-presets button:hover {
    border-color: color-mix(in srgb, var(--brand) 36%, var(--line));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 10%, transparent);
    transform: translateY(-1px);
}

.preinvite-page-block-presets strong {
    font-size: 12px;
    font-weight: 700;
}

.preinvite-page-block-presets span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.preinvite-page-block-outline {
    display: grid;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 52%, transparent);
    border-radius: 14px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--surface-soft) 72%, var(--surface)), var(--surface));
    padding: 10px;
}

.preinvite-page-block-outline > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.preinvite-page-block-outline strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.preinvite-page-block-outline span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.preinvite-page-block-outline-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.preinvite-page-block-outline-list button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 4px 7px;
    align-items: center;
    min-height: 44px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    padding: 8px 9px;
    text-align: left;
}

.preinvite-page-block-outline-list button:hover,
.preinvite-page-block-outline-list button.is-active {
    border-color: color-mix(in srgb, var(--brand) 38%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 36%, var(--surface));
}

.preinvite-page-block-outline-list b {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--blue-soft) 64%, var(--surface));
    color: var(--blue);
    font-size: 11px;
}

.preinvite-page-block-outline-list button > span,
.preinvite-page-block-outline-list em {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-page-block-outline-list button > strong {
    overflow: hidden;
    grid-column: 2 / 4;
    color: var(--ink);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-page-block-inspector {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
    border-radius: 14px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 50%, var(--surface)), var(--surface));
    padding: 10px;
}

.preinvite-page-block-inspector-summary {
    display: grid;
    gap: 3px;
}

.preinvite-page-block-inspector-summary span,
.preinvite-page-block-inspector-summary em,
.preinvite-page-block-child-nudge span {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1.45;
}

.preinvite-page-block-inspector-summary strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.preinvite-page-block-panel-tabs,
.preinvite-page-block-style-recipes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.preinvite-page-block-panel-tabs button,
.preinvite-page-block-style-recipes button,
.preinvite-page-block-child-nudge button {
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.preinvite-page-block-panel-tabs button {
    min-height: 30px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    padding: 0 11px;
}

.preinvite-page-block-panel-tabs button.is-active {
    border-color: color-mix(in srgb, var(--brand) 38%, var(--line));
    background: var(--brand, var(--blue));
    color: #fff;
}

.preinvite-page-block-style-recipes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.preinvite-page-block-style-recipes button {
    display: grid;
    gap: 3px;
    min-height: 52px;
    border-radius: 12px;
    padding: 8px;
    text-align: left;
}

.preinvite-page-block-style-recipes button:hover {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 30%, var(--surface));
}

.preinvite-page-block-style-recipes strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.preinvite-page-block-style-recipes span {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
}

.preinvite-page-block-button-recipes {
    display: grid;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface) 88%, var(--brand-soft));
    padding: 10px;
}

.preinvite-page-block-button-recipes-head {
    display: grid;
    gap: 3px;
}

.preinvite-page-block-button-recipes-head strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
}

.preinvite-page-block-button-recipes-head span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.preinvite-page-block-button-recipes-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.preinvite-page-block-button-recipes-list button {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 2px 8px;
    align-items: center;
    min-height: 54px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 56%, transparent);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    padding: 8px;
    text-align: left;
}

.preinvite-page-block-button-recipes-list button:hover,
.preinvite-page-block-button-recipes-list button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 34%, var(--surface));
    outline: 0;
}

.preinvite-page-block-button-recipes-list button:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.preinvite-page-block-button-recipes-list i {
    position: relative;
    display: grid;
    grid-row: span 2;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-soft) 64%, var(--surface));
}

.preinvite-page-block-button-recipes-list i::before,
.preinvite-page-block-button-recipes-list i::after {
    position: absolute;
    content: "";
}

.preinvite-page-block-button-recipes-list i::before {
    width: 12px;
    height: 12px;
    border: 2px solid var(--brand, var(--blue));
    border-radius: 999px;
}

.preinvite-page-block-button-recipes-list i.is-detail::after {
    right: 5px;
    bottom: 6px;
    width: 8px;
    height: 2px;
    border-radius: 999px;
    background: var(--brand, var(--blue));
    transform: rotate(45deg);
}

.preinvite-page-block-button-recipes-list i.is-register::before,
.preinvite-page-block-button-recipes-list i.is-download::before,
.preinvite-page-block-button-recipes-list i.is-phone::before,
.preinvite-page-block-button-recipes-list i.is-map::before {
    width: 14px;
    height: 8px;
    border-radius: 999px;
    background: var(--brand, var(--blue));
}

.preinvite-page-block-button-recipes-list i.is-download::after {
    top: 7px;
    left: 12px;
    width: 4px;
    height: 11px;
    border-radius: 999px;
    background: var(--surface);
}

.preinvite-page-block-button-recipes-list i.is-phone::after {
    width: 12px;
    height: 12px;
    border: 2px solid var(--brand, var(--blue));
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 4px;
    transform: rotate(35deg);
}

.preinvite-page-block-button-recipes-list i.is-map::after {
    top: 6px;
    left: 11px;
    width: 6px;
    height: 12px;
    border-radius: 999px 999px 999px 0;
    background: var(--brand, var(--blue));
    transform: rotate(-45deg);
}

.preinvite-page-block-button-recipes-list i.is-none::before {
    width: 15px;
    height: 2px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 70%, var(--line-strong));
    transform: rotate(-35deg);
}

.preinvite-page-block-button-recipes-list strong,
.preinvite-page-block-button-recipes-list span {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-page-block-button-recipes-list strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
}

.preinvite-page-block-button-recipes-list span {
    color: var(--muted);
    font-size: 10px;
}

.preinvite-page-block-child-nudge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px dashed color-mix(in srgb, var(--brand) 24%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 76%, var(--brand-soft));
    padding: 8px 10px;
}

.preinvite-page-block-child-nudge[hidden] {
    display: none;
}

.preinvite-page-block-child-nudge button {
    min-height: 28px;
    flex: 0 0 auto;
    border-color: color-mix(in srgb, var(--brand) 36%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 48%, var(--surface));
    color: var(--brand, var(--blue));
    font-size: 11px;
    font-weight: 800;
    padding: 0 10px;
}

.preinvite-child-page-wizard {
    display: grid;
    gap: 9px;
    border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
    border-radius: 13px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 38%, transparent), transparent 52%),
        var(--surface);
    padding: 10px;
}

.preinvite-child-page-wizard-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.preinvite-child-page-wizard-head > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.preinvite-child-page-wizard-head strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.preinvite-child-page-wizard-head span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.45;
}

.preinvite-child-page-wizard-head em {
    justify-self: end;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 58%, var(--surface));
    color: var(--brand, var(--blue));
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    padding: 5px 8px;
    white-space: nowrap;
}

.preinvite-child-page-wizard-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.preinvite-child-page-wizard-steps button {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 7px;
    align-items: center;
    min-width: 0;
    min-height: 64px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 55%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 94%, var(--brand-soft));
    color: var(--text);
    cursor: pointer;
    padding: 8px;
    text-align: left;
}

.preinvite-child-page-wizard-steps button:hover,
.preinvite-child-page-wizard-steps button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 36%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 38%, var(--surface));
    outline: 0;
}

.preinvite-child-page-wizard-steps button:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.preinvite-child-page-wizard-steps b {
    display: grid;
    grid-row: 1 / span 2;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 70%, var(--surface));
    color: var(--brand, var(--blue));
    font-size: 11px;
    font-weight: 900;
}

.preinvite-child-page-wizard-steps strong,
.preinvite-child-page-wizard-steps span {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-child-page-wizard-steps strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.preinvite-child-page-wizard-steps span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
}

.preinvite-child-page-wizard-steps button.is-current {
    border-color: color-mix(in srgb, #f59e0b 42%, var(--line));
    background: color-mix(in srgb, #fef3c7 36%, var(--surface));
}

.preinvite-child-page-wizard-steps button.is-current b {
    background: color-mix(in srgb, #f59e0b 22%, var(--surface));
    color: #b45309;
}

.preinvite-child-page-wizard-steps button.is-done {
    border-color: color-mix(in srgb, var(--green, #16a34a) 28%, var(--line));
    background: color-mix(in srgb, var(--green-soft, #dcfce7) 28%, var(--surface));
}

.preinvite-child-page-wizard-steps button.is-done b {
    background: color-mix(in srgb, var(--green-soft, #dcfce7) 82%, var(--surface));
    color: var(--green, #15803d);
}

.preinvite-page-block-child-preview {
    display: grid;
    gap: 9px;
    border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
    border-radius: 13px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 86%, var(--brand-soft)), var(--surface));
    padding: 10px;
}

.preinvite-page-block-child-preview[data-link-type="page"] {
    border-color: color-mix(in srgb, var(--green, #16a34a) 28%, var(--line));
    background: linear-gradient(135deg, color-mix(in srgb, var(--green-soft, #dcfce7) 34%, var(--surface)), var(--surface));
}

.preinvite-page-block-child-preview[data-link-type="page"][data-has-body="0"] {
    border-color: color-mix(in srgb, #f59e0b 36%, var(--line));
    background: linear-gradient(135deg, color-mix(in srgb, #fef3c7 42%, var(--surface)), var(--surface));
}

.preinvite-page-block-child-preview-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.preinvite-page-block-child-preview-head > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.preinvite-page-block-child-preview-head span,
.preinvite-page-block-child-preview-card p {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.preinvite-page-block-child-preview-head strong,
.preinvite-page-block-child-preview-card strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-page-block-child-preview-head em {
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-soft) 78%, var(--surface));
    color: var(--muted-strong);
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
    padding: 5px 8px;
    white-space: nowrap;
}

.preinvite-page-block-child-preview[data-link-type="page"] .preinvite-page-block-child-preview-head em {
    background: color-mix(in srgb, var(--green-soft, #dcfce7) 78%, var(--surface));
    color: var(--green, #15803d);
}

.preinvite-page-block-child-preview[data-link-type="page"][data-has-body="0"] .preinvite-page-block-child-preview-head em {
    background: color-mix(in srgb, #fef3c7 78%, var(--surface));
    color: #b45309;
}

.preinvite-page-block-child-preview-card {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    border: 1px solid color-mix(in srgb, var(--line-strong) 52%, transparent);
    border-radius: 12px;
    background: var(--surface);
    padding: 8px;
}

.preinvite-page-block-child-preview-card i {
    display: grid;
    min-height: 72px;
    place-items: center;
    border: 1px dashed color-mix(in srgb, var(--brand) 28%, var(--line));
    border-radius: 10px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 58%, var(--surface-soft)), color-mix(in srgb, var(--surface) 88%, var(--brand-soft)));
    background-position: center;
    background-size: cover;
    color: var(--brand, var(--blue));
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
}

.preinvite-page-block-child-preview[data-has-cover="1"] .preinvite-page-block-child-preview-card i {
    border-style: solid;
    color: #fff;
    text-shadow: 0 1px 6px rgba(15, 23, 42, .36);
}

.preinvite-page-block-child-preview-card > div {
    display: grid;
    align-content: start;
    min-width: 0;
    gap: 5px;
}

.preinvite-page-block-child-preview-card p {
    margin: 0;
}

.preinvite-page-block-child-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.preinvite-page-block-child-preview-actions button {
    min-height: 28px;
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 42%, var(--surface));
    color: var(--brand, var(--blue));
    cursor: pointer;
    font-size: 11px;
    font-weight: 850;
    padding: 0 10px;
}

.preinvite-page-block-child-preview-actions button:hover,
.preinvite-page-block-child-preview-actions button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 62%, var(--surface));
    outline: 0;
}

.preinvite-page-block-child-preview-actions button:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.preinvite-page-block-button-board {
    display: grid;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface) 86%, var(--brand-soft));
    padding: 10px;
}

.preinvite-page-block-button-board-head,
.preinvite-page-block-button-board-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
}

.preinvite-page-block-button-board-head {
    grid-template-columns: minmax(0, 1fr) auto;
}

.preinvite-page-block-button-board-head > div,
.preinvite-page-block-button-board-item > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.preinvite-page-block-button-board-head strong,
.preinvite-page-block-button-board-item strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-page-block-button-board-head span,
.preinvite-page-block-button-board-item span,
.preinvite-page-block-button-board-item b {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-page-block-button-board-item b {
    color: color-mix(in srgb, var(--brand) 72%, var(--muted));
    font-weight: 850;
}

.preinvite-page-block-button-board-head em,
.preinvite-page-block-button-board-item em {
    width: fit-content;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 56%, var(--surface));
    color: var(--brand, var(--blue));
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
    padding: 5px 8px;
    white-space: nowrap;
}

.preinvite-page-block-button-board-list {
    display: grid;
    gap: 7px;
}

.preinvite-page-block-button-board-item {
    border: 1px solid color-mix(in srgb, var(--line-strong) 52%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 94%, var(--brand-soft));
    padding: 8px;
}

.preinvite-page-block-button-board-icon {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-soft) 48%, var(--surface));
}

.preinvite-page-block-button-board-icon::before,
.preinvite-page-block-button-board-icon::after {
    position: absolute;
    content: "";
}

.preinvite-page-block-button-board-icon::before {
    inset: 8px;
    border: 2px solid var(--brand, var(--blue));
    border-radius: 5px;
}

.preinvite-page-block-button-board-icon.is-style::before {
    inset: 10px 5px;
    border-radius: 999px;
    background: var(--brand, var(--blue));
}

.preinvite-page-block-button-board-icon.is-link::before {
    inset: 7px 12px 7px 6px;
    border-radius: 999px;
    background: var(--brand, var(--blue));
}

.preinvite-page-block-button-board-icon.is-link::after {
    top: 8px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--brand, var(--blue));
    border-right: 2px solid var(--brand, var(--blue));
    transform: rotate(45deg);
}

.preinvite-page-block-button-board-icon.is-child::before {
    inset: 6px 7px 10px;
    border-radius: 4px;
}

.preinvite-page-block-button-board-icon.is-child::after {
    right: 6px;
    bottom: 6px;
    left: 8px;
    height: 3px;
    border-radius: 999px;
    background: var(--brand, var(--blue));
}

.preinvite-page-block-button-board-item button {
    min-height: 28px;
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 40%, var(--surface));
    color: var(--brand, var(--blue));
    cursor: pointer;
    font-size: 11px;
    font-weight: 850;
    padding: 0 10px;
    white-space: nowrap;
}

.preinvite-page-block-button-board-item button:hover,
.preinvite-page-block-button-board-item button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 62%, var(--surface));
    outline: 0;
}

.preinvite-page-block-button-board-item.is-warning {
    border-color: color-mix(in srgb, #f59e0b 42%, var(--line));
    background: color-mix(in srgb, #fef3c7 34%, var(--surface));
}

.preinvite-page-block-button-board-item.is-warning em {
    background: color-mix(in srgb, #fef3c7 78%, var(--surface));
    color: #b45309;
}

.preinvite-page-block-button-board-item.is-page em {
    background: color-mix(in srgb, var(--green-soft) 78%, var(--surface));
    color: color-mix(in srgb, var(--green) 88%, var(--ink));
}

.preinvite-page-block-button-board-item.is-muted {
    opacity: 0.82;
}

.preinvite-page-block-button-board-item.is-muted em {
    background: color-mix(in srgb, var(--surface-soft) 84%, var(--surface));
    color: var(--muted);
}

.preinvite-page-block-icon-choice {
    grid-column: 1 / -1;
}

.preinvite-page-block-icon-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.preinvite-page-block-icon-picker button {
    display: grid;
    min-height: 58px;
    place-items: center;
    gap: 5px;
    border-radius: 12px;
    padding: 8px 6px;
}

.preinvite-page-block-icon-picker button span {
    font-size: 11px;
    line-height: 1;
}

.preinvite-page-block-icon {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    color: currentColor;
}

.preinvite-page-block-icon::before,
.preinvite-page-block-icon::after {
    position: absolute;
    content: "";
}

.preinvite-page-block-icon.is-auto::before,
.preinvite-page-block-icon.is-arrow::before {
    top: 8px;
    right: 2px;
    left: 2px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.preinvite-page-block-icon.is-auto::after,
.preinvite-page-block-icon.is-arrow::after {
    top: 4px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

.preinvite-page-block-icon.is-download::before {
    inset: 2px 7px 7px;
    background: currentColor;
}

.preinvite-page-block-icon.is-download::after {
    right: 3px;
    bottom: 2px;
    left: 3px;
    height: 7px;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 3px 3px;
}

.preinvite-page-block-icon.is-phone::before {
    inset: 3px;
    border: 2px solid currentColor;
    border-radius: 4px 4px 8px 8px;
    transform: rotate(-24deg);
}

.preinvite-page-block-icon.is-map::before {
    inset: 2px 4px 5px;
    border: 2px solid currentColor;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

.preinvite-page-block-icon.is-map::after {
    top: 6px;
    left: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.preinvite-page-block-icon.is-mail::before {
    inset: 4px 2px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.preinvite-page-block-icon.is-mail::after {
    top: 7px;
    right: 4px;
    left: 4px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.preinvite-page-block-icon.is-file::before {
    inset: 2px 4px 2px 5px;
    border: 2px solid currentColor;
    border-radius: 2px 6px 2px 2px;
}

.preinvite-page-block-icon.is-file::after {
    top: 3px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.preinvite-page-block-icon.is-none::before,
.preinvite-page-block-icon.is-none::after {
    top: 8px;
    right: 2px;
    left: 2px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(45deg);
}

.preinvite-page-block-icon.is-none::after {
    transform: rotate(-45deg);
}

.preinvite-page-block-live {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.1fr) minmax(180px, .9fr);
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--brand-soft) 26%, var(--surface));
    padding: 10px;
}

.preinvite-page-block-live-card {
    display: grid;
    gap: 7px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 12px;
    background: var(--surface);
    padding: 12px;
}

.preinvite-page-block-live-card small,
.preinvite-page-block-live-child span,
.preinvite-page-block-live-link {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.preinvite-page-block-live-card strong,
.preinvite-page-block-live-child strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.preinvite-page-block-live-card p {
    margin: 0;
    color: var(--muted-strong);
    font-size: 12px;
    line-height: 1.55;
}

.preinvite-page-block-live-card button {
    display: inline-flex;
    width: fit-content;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 0 12px;
}

.preinvite-page-block-live-card button:disabled {
    background: color-mix(in srgb, var(--muted) 18%, var(--surface-soft));
    color: var(--muted);
}

.preinvite-page-block-live-card button.is-soft {
    background: color-mix(in srgb, var(--blue-soft) 78%, var(--surface));
    color: var(--blue);
}

.preinvite-page-block-live-card button.is-outline {
    border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--line));
    background: var(--surface);
    color: var(--blue);
}

.preinvite-page-block-live-card button.is-size-compact {
    min-height: 28px;
    padding-inline: 10px;
}

.preinvite-page-block-live-card button.is-size-large {
    min-height: 38px;
    padding-inline: 16px;
}

.preinvite-page-block-live-card button.is-shape-square {
    border-radius: 7px;
}

.preinvite-page-block-live-card button.is-shape-rounded {
    border-radius: 12px;
}

.preinvite-page-block-live-card button.is-icon-right {
    flex-direction: row-reverse;
}

.preinvite-page-block-live-child {
    display: grid;
    align-content: start;
    gap: 6px;
    border: 1px dashed color-mix(in srgb, var(--brand) 28%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 70%, var(--brand-soft));
    padding: 12px;
}

.preinvite-page-block-live-child[hidden] {
    display: none;
}

.preinvite-page-block-live-child em {
    color: var(--muted-strong);
    font-size: 11px;
    font-style: normal;
    line-height: 1.55;
}

.preinvite-page-block-live-link {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
    padding: 0 10px;
}

.preinvite-subpage-block-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 48%, transparent);
    border-radius: 12px;
    background: var(--surface);
    padding: 10px;
}

.preinvite-subpage-block-row[data-page-block-type="image"] {
    border-color: color-mix(in srgb, #0891b2 24%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-type="gallery"] {
    border-color: color-mix(in srgb, #7c3aed 24%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-type="note"] {
    border-color: color-mix(in srgb, #d97706 24%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-type="cta"] {
    border-color: color-mix(in srgb, var(--blue) 26%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-type="file"] {
    border-color: color-mix(in srgb, #0f766e 24%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-type="contact"] {
    border-color: color-mix(in srgb, #4f46e5 24%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-type="map"] {
    border-color: color-mix(in srgb, #0891b2 28%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-layout="card"] {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 7%, transparent);
}

.preinvite-subpage-block-row[data-page-block-layout="media"] {
    border-style: dashed;
}

.preinvite-subpage-block-row[data-page-block-layout="compact"] {
    gap: 7px;
    padding: 8px;
}

.preinvite-subpage-block-row[data-page-block-align="center"] {
    background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blue-soft) 34%, transparent), transparent);
}

.preinvite-subpage-block-row[data-page-block-align="right"] {
    background-image: linear-gradient(270deg, color-mix(in srgb, var(--surface-soft) 68%, transparent), transparent);
}

.preinvite-subpage-block-row[data-page-block-tone="soft"] {
    background: color-mix(in srgb, var(--blue-soft) 36%, var(--surface));
}

.preinvite-subpage-block-row[data-page-block-tone="outline"] {
    border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-tone="highlight"] {
    border-color: color-mix(in srgb, var(--brand) 38%, var(--line));
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 52%, var(--surface)), var(--surface));
}

.preinvite-subpage-block-row[data-page-block-button-style="soft"] .preinvite-detail-action-field {
    border-color: color-mix(in srgb, var(--blue) 10%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 36%, var(--surface));
}

.preinvite-subpage-block-row[data-page-block-button-style="outline"] .preinvite-detail-action-field {
    border-style: dashed;
    background: var(--surface);
}

.preinvite-subpage-block-row[data-page-block-button-icon="none"] .preinvite-detail-action-field {
    border-color: color-mix(in srgb, var(--muted) 16%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-button-icon="download"] .preinvite-detail-action-field,
.preinvite-subpage-block-row[data-page-block-button-icon="file"] .preinvite-detail-action-field {
    border-color: color-mix(in srgb, #0f766e 22%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-button-icon="phone"] .preinvite-detail-action-field,
.preinvite-subpage-block-row[data-page-block-button-icon="mail"] .preinvite-detail-action-field {
    border-color: color-mix(in srgb, #7c3aed 20%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-button-icon="map"] .preinvite-detail-action-field {
    border-color: color-mix(in srgb, #0891b2 22%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-icon-position="right"] .preinvite-detail-action-field {
    background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-soft) 34%, transparent));
}

.preinvite-subpage-block-row[data-page-block-button-size="compact"] .preinvite-detail-action-field {
    gap: 6px;
    padding: 8px;
}

.preinvite-subpage-block-row[data-page-block-button-size="large"] .preinvite-detail-action-field {
    padding: 13px;
}

.preinvite-subpage-block-row[data-page-block-button-shape="square"] .preinvite-detail-action-field {
    border-radius: 8px;
}

.preinvite-subpage-block-row[data-page-block-button-shape="rounded"] .preinvite-detail-action-field {
    border-radius: 14px;
}

.preinvite-subpage-block-row[data-page-block-button-shape="pill"] .preinvite-detail-action-field {
    border-radius: 20px;
}

.preinvite-subpage-block-row[data-page-block-image-ratio="wide"] .preinvite-media-field {
    border-color: color-mix(in srgb, #0891b2 22%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-image-ratio="square"] .preinvite-media-field {
    border-color: color-mix(in srgb, #7c3aed 20%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-image-ratio="portrait"] .preinvite-media-field {
    border-color: color-mix(in srgb, #d97706 22%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-spacing="compact"] {
    row-gap: 7px;
}

.preinvite-subpage-block-row[data-page-block-spacing="relaxed"] {
    row-gap: 13px;
    padding: 12px;
}

.preinvite-subpage-block-row[data-page-block-title-size="compact"] [data-module-page-block-title] {
    font-size: 12px;
}

.preinvite-subpage-block-row[data-page-block-title-size="large"] [data-module-page-block-title] {
    font-size: 14px;
    font-weight: 700;
}

.preinvite-subpage-block-row[data-page-block-body-style="muted"] [data-module-page-block-body] {
    color: var(--muted);
}

.preinvite-subpage-block-row[data-page-block-body-style="emphasis"] [data-module-page-block-body] {
    border-color: color-mix(in srgb, var(--brand) 24%, var(--line-strong));
    background: color-mix(in srgb, var(--brand-soft) 38%, var(--surface));
    color: var(--ink);
    font-weight: 600;
}

.preinvite-subpage-block-row[data-page-block-link-type="none"] .preinvite-detail-action-field {
    opacity: .62;
}

.preinvite-subpage-block-row[data-page-block-link-type="page"] {
    border-color: color-mix(in srgb, var(--brand) 32%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-link-type="phone"],
.preinvite-subpage-block-row[data-page-block-link-type="mail"] {
    border-color: color-mix(in srgb, #7c3aed 24%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-link-type="map"] {
    border-color: color-mix(in srgb, #0891b2 28%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-link-page-layout="cover"] .preinvite-block-link-panel {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, transparent), transparent 42%);
}

.preinvite-subpage-block-row[data-page-block-link-page-layout="card"] .preinvite-block-link-panel {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent);
}

.preinvite-subpage-block-row[data-page-block-link-page-tone="brand"] .preinvite-block-link-panel {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
}

.preinvite-subpage-block-row[data-page-block-link-page-tone="dark"] .preinvite-block-link-panel {
    background: linear-gradient(135deg, #111827, color-mix(in srgb, var(--brand) 16%, #111827));
}

.preinvite-subpage-block-row[data-page-block-link-page-tone="dark"] .preinvite-block-link-panel .preinvite-detail-choice > span,
.preinvite-subpage-block-row[data-page-block-link-page-tone="dark"] .preinvite-block-link-panel .premium-field > span {
    color: #e5e7eb;
}

.preinvite-subpage-block-row[data-page-block-link-page-image-mode="hidden"] .preinvite-block-link-panel .preinvite-media-field {
    opacity: .58;
}

.preinvite-subpage-block-row[data-page-block-link-page-density="compact"] .preinvite-block-link-panel {
    gap: 7px;
    padding: 8px;
}

.preinvite-subpage-block-row[data-page-block-link-page-density="relaxed"] .preinvite-block-link-panel {
    gap: 13px;
    padding: 12px;
}

.preinvite-block-link-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    border-radius: 12px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 48%, var(--surface)), var(--surface));
    padding: 10px;
}

.preinvite-block-link-style {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border: 1px dashed color-mix(in srgb, var(--brand) 22%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 78%, var(--surface-soft));
    padding: 10px;
}

.preinvite-block-link-panel[hidden] {
    display: none;
}

.premium-field input.is-muted-input {
    background: color-mix(in srgb, var(--surface-soft) 78%, var(--surface));
    color: var(--muted);
}

.preinvite-subpage-block-row .preinvite-detail-choice,
.preinvite-subpage-block-row .is-wide,
.preinvite-subpage-block-row .preinvite-detail-row-tools {
    grid-column: 1 / -1;
}

.preinvite-detail-row-tools {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 6px;
    justify-content: flex-end;
}

.preinvite-detail-row-tools button:hover,
.preinvite-detail-choice button:hover {
    border-color: color-mix(in srgb, var(--blue) 36%, var(--line-strong));
    color: var(--blue);
}

.preinvite-detail-row-tools button.is-danger {
    border-color: color-mix(in srgb, var(--red) 28%, var(--line-strong));
    background: color-mix(in srgb, var(--red-soft) 62%, var(--surface));
    color: var(--red);
}

.preinvite-detail-remove {
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--red) 28%, var(--line-strong));
    border-radius: 999px;
    background: color-mix(in srgb, var(--red-soft) 62%, var(--surface));
    color: var(--red);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    padding: 0 12px;
}

.preinvite-media-field {
    display: grid;
    gap: 8px;
}

.preinvite-media-picker {
    position: relative;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    min-width: 0;
}

.preinvite-media-preview,
.preinvite-subpage-thumb {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-soft) 78%, var(--surface));
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.preinvite-media-preview {
    width: 92px;
    min-height: 92px;
}

.preinvite-media-preview img,
.preinvite-subpage-thumb img,
.preinvite-media-library img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preinvite-media-meta {
    display: grid;
    align-content: center;
    gap: 7px;
    min-width: 0;
}

.preinvite-media-meta strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.preinvite-media-meta span {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-media-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.preinvite-media-actions button,
.preinvite-media-library button {
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
}

.preinvite-media-actions button {
    min-height: 30px;
    border-radius: 999px;
    padding: 0 11px;
}

.preinvite-media-actions button:first-child {
    border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 58%, var(--surface));
    color: var(--blue);
}

.preinvite-media-library {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    gap: 8px;
    width: min(420px, calc(100vw - 48px));
    max-height: 320px;
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    padding: 10px;
}

.preinvite-media-library[hidden] {
    display: none !important;
}

.preinvite-media-library button {
    display: grid;
    gap: 6px;
    min-width: 0;
    border-radius: 12px;
    padding: 7px;
    text-align: left;
}

.preinvite-media-library button:hover {
    border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 38%, var(--surface));
}

.preinvite-media-library img {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background: var(--surface-soft);
}

.preinvite-media-library span,
.preinvite-media-library small {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.preinvite-subpage-preview {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border: 1px dashed color-mix(in srgb, var(--blue) 22%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--blue-soft) 24%, var(--surface));
    padding: 12px;
}

.preinvite-subpage-preview.is-wide {
    grid-column: 1 / -1;
}

.preinvite-subpage-thumb {
    width: 94px;
    min-height: 94px;
}

.preinvite-subpage-preview div:last-child {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.preinvite-subpage-preview strong,
.preinvite-subpage-preview p,
.preinvite-subpage-preview small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.preinvite-subpage-preview strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.preinvite-subpage-preview p {
    display: -webkit-box;
    margin: 0;
    color: var(--text);
    font-size: 12px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.preinvite-subpage-detail-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

.preinvite-subpage-detail-preview span {
    max-width: 100%;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 74%, var(--blue-soft));
    color: color-mix(in srgb, var(--text) 74%, var(--blue));
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    padding: 4px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-subpage-preview small {
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

.preinvite-form-meta-grid {
    margin-bottom: 16px;
}

.preinvite-hidden-json {
    display: none !important;
}

.preinvite-form-field-editor,
.preinvite-form-field-list {
    display: grid;
    gap: 12px;
}

.preinvite-field-preset-bar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 48%, transparent);
    border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--surface-soft) 72%, var(--surface)), var(--surface));
    padding: 10px;
}

.preinvite-field-preset-bar button {
    display: grid;
    min-height: 54px;
    align-content: center;
    gap: 4px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    padding: 8px;
    text-align: left;
}

.preinvite-field-preset-bar button:hover,
.preinvite-field-preset-bar button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 32%, var(--surface));
}

.preinvite-field-preset-bar strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-field-preset-bar span {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-form-field-row {
    display: grid;
    gap: 12px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 14px;
    background: var(--surface);
    padding: 14px;
}

.preinvite-row-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.preinvite-row-tools button,
.preinvite-field-option-row button {
    min-height: 32px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    padding: 0 11px;
}

.preinvite-row-tools button.is-danger,
.preinvite-field-option-row button {
    border-color: color-mix(in srgb, var(--red) 24%, var(--line));
    background: color-mix(in srgb, var(--red-soft) 58%, var(--surface));
    color: color-mix(in srgb, var(--red) 86%, var(--ink));
}

.preinvite-field-type-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.preinvite-field-type-option {
    position: relative;
    cursor: pointer;
}

.preinvite-field-type-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.preinvite-field-type-option span {
    display: grid;
    place-items: center;
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    padding: 0 8px;
    text-align: center;
}

.preinvite-field-type-option:has(input:checked) span {
    border-color: color-mix(in srgb, var(--blue) 36%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 64%, var(--surface));
    color: var(--blue);
}

.preinvite-field-options-panel {
    display: grid;
    gap: 10px;
    border: 1px dashed color-mix(in srgb, var(--blue) 18%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--blue-soft) 22%, var(--surface));
    padding: 12px;
}

.preinvite-field-options-panel[hidden] {
    display: none !important;
}

.preinvite-field-option-list {
    display: grid;
    gap: 8px;
}

.preinvite-field-option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.preinvite-field-option-row input {
    width: 100%;
    min-height: 36px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 76%, transparent);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    padding: 0 12px;
}

.preinvite-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    padding: 0 12px;
    cursor: pointer;
}

.preinvite-toggle input {
    width: 14px;
    height: 14px;
    accent-color: var(--blue);
}

.preinvite-module-row {
    display: grid;
    gap: 12px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 14px;
    background: var(--surface);
    padding: 14px;
}

.preinvite-module-row-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.preinvite-module-index {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.preinvite-module-preview {
    display: inline-grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    min-width: 0;
    max-width: 360px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
    padding: 8px 12px 8px 8px;
}

.preinvite-module-row[data-icon-mode="none"] .preinvite-module-preview,
.preinvite-module-row[data-icon-mode="none"] .preinvite-module-button-demo {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 12px;
}

.preinvite-module-preview i,
.preinvite-module-preview-image,
.preinvite-icon-option i {
    position: relative;
    display: block;
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--module-accent, var(--blue)) 36%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--module-accent, var(--blue)) 12%, var(--surface));
    color: var(--module-accent, var(--blue));
}

.preinvite-module-preview-image,
.preinvite-module-button-image {
    object-fit: cover;
}

.preinvite-module-preview-image {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--module-accent, var(--blue)) 16%, transparent);
}

.preinvite-module-preview i::before,
.preinvite-icon-option i::before {
    position: absolute;
    inset: 10px;
    border: 2px solid currentColor;
    border-radius: 5px;
    content: "";
    opacity: 0.72;
}

.preinvite-module-preview i.is-agenda::before,
.preinvite-icon-option i.is-agenda::before {
    border-radius: 2px;
}

.preinvite-module-preview i.is-register::before,
.preinvite-icon-option i.is-register::before {
    border-radius: 50% 50% 7px 7px;
}

.preinvite-module-preview i.is-traffic::before,
.preinvite-icon-option i.is-traffic::before {
    transform: rotate(45deg);
}

.preinvite-module-preview i.is-live::before,
.preinvite-module-preview i.is-gallery::before,
.preinvite-icon-option i.is-live::before,
.preinvite-icon-option i.is-gallery::before {
    border-radius: 50%;
}

.preinvite-module-preview i.is-doc::before,
.preinvite-icon-option i.is-doc::before {
    border-radius: 2px 7px 2px 2px;
}

.preinvite-module-preview i.is-hotel::before,
.preinvite-icon-option i.is-hotel::before {
    border-radius: 7px 7px 2px 2px;
}

.preinvite-module-preview i.is-contact::before,
.preinvite-icon-option i.is-contact::before {
    inset: 11px 8px;
    border-radius: 50%;
}

.preinvite-module-preview strong,
.preinvite-module-preview span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-module-preview strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.preinvite-module-preview span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.preinvite-module-row[data-button-style="solid"] .preinvite-module-preview {
    border-color: color-mix(in srgb, var(--module-accent, var(--blue)) 38%, var(--line));
    background: color-mix(in srgb, var(--module-accent, var(--blue)) 12%, var(--surface));
}

.preinvite-module-row[data-button-style="solid"] .preinvite-module-preview i {
    background: var(--module-accent, var(--blue));
    color: #fff;
}

.preinvite-module-row[data-button-style="outline"] .preinvite-module-preview {
    background: var(--surface);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--module-accent, var(--blue)) 22%, transparent);
}

.preinvite-module-row[data-button-shape="square"] .preinvite-module-preview,
.preinvite-module-row[data-button-shape="square"] .preinvite-module-button-demo {
    border-radius: 8px;
}

.preinvite-module-row[data-button-shape="rounded"] .preinvite-module-preview,
.preinvite-module-row[data-button-shape="rounded"] .preinvite-module-button-demo {
    border-radius: 16px;
}

.preinvite-module-row[data-button-shape="pill"] .preinvite-module-preview,
.preinvite-module-row[data-button-shape="pill"] .preinvite-module-button-demo {
    border-radius: 999px;
}

.preinvite-module-row[data-button-size="compact"] .preinvite-module-preview {
    grid-template-columns: 30px minmax(0, 1fr);
    padding-block: 6px;
}

.preinvite-module-row[data-button-size="large"] .preinvite-module-preview {
    grid-template-columns: 46px minmax(0, 1fr);
    padding-block: 10px;
}

.preinvite-module-row[data-button-size="compact"] .preinvite-module-preview i,
.preinvite-module-row[data-button-size="compact"] .preinvite-module-preview-image {
    width: 28px;
    height: 28px;
}

.preinvite-module-row[data-button-size="large"] .preinvite-module-preview i,
.preinvite-module-row[data-button-size="large"] .preinvite-module-preview-image {
    width: 38px;
    height: 38px;
}

.preinvite-module-row[data-icon-style="soft"] .preinvite-module-preview i,
.preinvite-module-row[data-icon-style="soft"] .preinvite-module-preview-image {
    background: color-mix(in srgb, var(--module-accent, var(--blue)) 14%, var(--surface));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--module-accent, var(--blue)) 16%, transparent);
}

.preinvite-module-row[data-icon-style="solid"] .preinvite-module-preview i {
    border-color: var(--module-accent, var(--blue));
    background: var(--module-accent, var(--blue));
    color: #fff;
}

.preinvite-module-row[data-icon-style="solid"] .preinvite-module-preview-image {
    border-color: var(--module-accent, var(--blue));
    background: var(--module-accent, var(--blue));
    padding: 3px;
}

.preinvite-module-row[data-icon-style="plain"] .preinvite-module-preview i,
.preinvite-module-row[data-icon-style="plain"] .preinvite-module-preview-image {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.preinvite-module-row[data-text-mode="single"] .preinvite-module-preview strong,
.preinvite-module-row[data-text-mode="single"] .preinvite-module-preview span {
    white-space: nowrap;
}

.preinvite-module-row[data-text-mode="multiline"] .preinvite-module-preview strong,
.preinvite-module-row[data-text-mode="multiline"] .preinvite-module-preview span {
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.preinvite-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.preinvite-module-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    border-top: 1px solid color-mix(in srgb, var(--line-strong) 44%, transparent);
    padding-top: 12px;
}

.preinvite-module-row-head + .preinvite-module-group-title,
.preinvite-subpage-panel .preinvite-module-group-title:first-child {
    border-top: 0;
    padding-top: 0;
}

.preinvite-module-group-title b {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
}

.preinvite-module-group-title span {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-module-group-title.is-subpage {
    grid-column: 1 / -1;
}

.preinvite-module-control {
    display: grid;
    gap: 8px;
}

.preinvite-module-control.is-wide {
    grid-column: 1 / -1;
}

.preinvite-module-appearance {
    display: grid;
    grid-template-columns: minmax(140px, 0.42fr) minmax(180px, 0.58fr);
    gap: 12px;
    align-items: end;
    border: 1px solid color-mix(in srgb, var(--line-strong) 52%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-soft) 56%, var(--surface));
    padding: 12px;
}

.preinvite-module-button-demo {
    display: inline-grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 42px;
    border: 1px solid color-mix(in srgb, var(--module-accent, var(--blue)) 22%, var(--line));
    border-radius: var(--button-radius, 999px);
    background: color-mix(in srgb, var(--module-accent, var(--blue)) 9%, var(--surface));
    color: var(--module-accent, var(--blue));
    font-size: 12px;
    font-weight: 900;
    padding: 6px 12px 6px 7px;
}

.preinvite-module-button-demo.is-solid {
    background: var(--module-accent, var(--blue));
    color: #fff;
}

.preinvite-module-button-demo.is-outline {
    background: var(--surface);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--module-accent, var(--blue)) 32%, transparent);
}

.preinvite-module-button-demo.is-shape-square {
    border-radius: 8px;
}

.preinvite-module-button-demo.is-shape-rounded {
    border-radius: 14px;
}

.preinvite-module-button-demo.is-shape-pill {
    border-radius: 999px;
}

.preinvite-module-button-demo.is-size-compact {
    grid-template-columns: 24px minmax(0, 1fr);
    min-height: 34px;
    gap: 6px;
    padding: 4px 10px 4px 5px;
    font-size: 11px;
}

.preinvite-module-button-demo.is-size-normal {
    min-height: 46px;
    padding: 7px 13px 7px 8px;
}

.preinvite-module-button-demo.is-size-large {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 56px;
    gap: 10px;
    padding: 9px 16px 9px 10px;
    font-size: 13px;
}

.preinvite-module-button-demo.is-icon-left,
.preinvite-module-button-demo.is-icon-right {
    justify-self: stretch;
}

.preinvite-module-button-demo.is-icon-right {
    grid-template-columns: minmax(0, 1fr) 30px;
    text-align: right;
}

.preinvite-module-button-demo.is-icon-right i,
.preinvite-module-button-demo.is-icon-right img {
    order: 2;
}

.preinvite-module-button-demo.is-icon-top {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    padding-inline: 12px;
}

.preinvite-module-button-demo.is-icon-top i,
.preinvite-module-button-demo.is-icon-top img {
    margin-bottom: 1px;
}

.preinvite-module-button-demo.is-size-compact i,
.preinvite-module-button-demo.is-size-compact img {
    width: 22px;
    height: 22px;
}

.preinvite-module-button-demo.is-size-large i,
.preinvite-module-button-demo.is-size-large img {
    width: 32px;
    height: 32px;
}

.preinvite-module-button-demo.is-icon-tone-soft i,
.preinvite-module-button-demo.is-icon-tone-soft img {
    border-color: color-mix(in srgb, var(--module-accent, var(--blue)) 36%, transparent);
    background: color-mix(in srgb, var(--module-accent, var(--blue)) 12%, var(--surface));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--module-accent, var(--blue)) 16%, transparent);
}

.preinvite-module-button-demo.is-icon-tone-solid i {
    border-color: var(--module-accent, var(--blue));
    background: var(--module-accent, var(--blue));
    color: #fff;
}

.preinvite-module-button-demo.is-icon-tone-solid img {
    border: 1px solid var(--module-accent, var(--blue));
    background: var(--module-accent, var(--blue));
    padding: 2px;
}

.preinvite-module-button-demo.is-icon-tone-plain i,
.preinvite-module-button-demo.is-icon-tone-plain img {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.preinvite-module-button-demo i {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    border: 1px solid currentColor;
    border-radius: 999px;
}

.preinvite-module-button-image {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 999px;
}

.preinvite-module-button-demo i::before {
    position: absolute;
    inset: 8px;
    border: 2px solid currentColor;
    border-radius: 5px;
    content: "";
    opacity: 0.72;
}

.preinvite-module-button-demo.is-size-compact i::before {
    inset: 6px;
}

.preinvite-module-button-demo.is-size-large i::before {
    inset: 10px;
}

.preinvite-module-button-demo i.is-agenda::before {
    border-radius: 2px;
}

.preinvite-module-button-demo i.is-register::before {
    border-radius: 50% 50% 7px 7px;
}

.preinvite-module-button-demo i.is-traffic::before {
    transform: rotate(45deg);
}

.preinvite-module-button-demo i.is-live::before,
.preinvite-module-button-demo i.is-gallery::before {
    border-radius: 50%;
}

.preinvite-module-button-demo i.is-doc::before {
    border-radius: 2px 7px 2px 2px;
}

.preinvite-module-button-demo i.is-hotel::before {
    border-radius: 7px 7px 2px 2px;
}

.preinvite-module-button-demo i.is-contact::before {
    inset: 9px 7px;
    border-radius: 50%;
}

.preinvite-module-button-demo span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-module-button-demo.is-text-multiline span {
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.preinvite-module-button-demo.is-text-auto span {
    white-space: normal;
}

.preinvite-module-color-control {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
}

.preinvite-module-color-control input[type="color"] {
    width: 42px;
    height: 36px;
    padding: 0;
}

.preinvite-module-color-swatches {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.preinvite-module-color-swatches button {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 62%, transparent);
    border-radius: 999px;
    background: var(--swatch, var(--surface));
    color: var(--blue);
    cursor: pointer;
    font-size: 10px;
    font-weight: 900;
}

.preinvite-module-color-swatches button.is-active {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-soft) 78%, transparent);
}

.preinvite-module-control > span {
    color: color-mix(in srgb, var(--text) 86%, var(--ink));
    font-size: 12px;
    font-weight: 800;
}

.preinvite-icon-picker {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.preinvite-icon-option,
.preinvite-segmented label {
    position: relative;
    cursor: pointer;
}

.preinvite-icon-option input,
.preinvite-segmented input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.preinvite-icon-option {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 12px;
    background: var(--surface);
    padding: 8px 6px;
}

.preinvite-icon-option span {
    color: var(--muted);
    font-size: 12px;
}

.preinvite-icon-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 58%, var(--surface));
}

.preinvite-icon-option:has(input:checked) span {
    color: var(--blue);
    font-weight: 800;
}

.preinvite-segmented {
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    max-width: 360px;
}

.preinvite-segmented.is-link-type {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 520px;
}

.preinvite-segmented.is-shape {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: none;
}

.preinvite-segmented.is-size {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: none;
}

.preinvite-segmented.is-icon-position {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 420px;
}

.preinvite-segmented.is-icon-style {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: none;
}

.preinvite-segmented.is-text-mode {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 360px;
}

.preinvite-segmented.is-menu-layout,
.preinvite-segmented.is-icon-shape {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: none;
}

.preinvite-segmented.is-icon-mode {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 420px;
}

.preinvite-icon-panel {
    display: grid;
    gap: 8px;
}

.preinvite-icon-panel[hidden] {
    display: none !important;
}

.preinvite-icon-panel.is-image {
    max-width: 520px;
}

.preinvite-icon-panel.is-image .preinvite-media-picker {
    grid-template-columns: 68px minmax(0, 1fr);
}

.preinvite-icon-panel.is-image .preinvite-media-preview {
    width: 68px;
    min-height: 68px;
    border-radius: 18px;
}

.preinvite-segmented label span {
    display: grid;
    place-items: center;
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    padding: 0 12px;
}

.preinvite-segmented label:has(input:checked) span {
    border-color: color-mix(in srgb, var(--blue) 36%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 64%, var(--surface));
    color: var(--blue);
}

.preinvite-link-panels {
    display: grid;
    gap: 10px;
}

.preinvite-link-note {
    border: 1px dashed color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
    padding: 10px 12px;
}

.preinvite-link-target-control {
    grid-column: 1 / -1;
}

.preinvite-action-text-control {
    border: 1px solid color-mix(in srgb, var(--line-strong) 48%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 72%, var(--blue-soft));
    padding: 12px;
}

.preinvite-action-text-row {
    display: grid;
    gap: 8px;
}

.preinvite-action-text-row input {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    outline: none;
    padding: 10px 12px;
}

.preinvite-action-text-row input:focus {
    border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-soft) 58%, transparent);
}

.preinvite-action-text-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.preinvite-action-text-presets button {
    min-height: 28px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 55%, transparent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    padding: 0 10px;
}

.preinvite-action-text-presets button:hover,
.preinvite-action-text-presets button:focus-visible {
    border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 56%, var(--surface));
    color: var(--blue);
}

.preinvite-subpage-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--blue-soft) 28%, var(--surface));
    padding: 12px;
}

.preinvite-module-row [data-link-panel][hidden] {
    display: none !important;
}

.preinvite-module-remove {
    min-height: 38px;
    border: 1px solid color-mix(in srgb, var(--red) 26%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--red-soft) 58%, var(--surface));
    color: color-mix(in srgb, var(--red) 86%, var(--ink));
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 0 12px;
}

.preinvite-asset-title {
    display: grid;
    gap: 4px;
}

.preinvite-asset-title span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.preinvite-file-input {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

.preinvite-upload-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.preinvite-upload-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--blue-soft) 56%, var(--surface));
    color: var(--blue);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 0 12px;
}

.preinvite-upload-actions span {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-section {
    display: grid;
    gap: 22px;
    scroll-margin-top: 96px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
    padding: 24px;
}

.preinvite-template-section .preinvite-table-summary {
    align-items: center;
    padding: 0;
}

.preinvite-template-section .preinvite-table-summary strong {
    font-size: 16px;
    font-weight: 650;
}

.preinvite-template-section .preinvite-table-summary span {
    color: var(--faint);
    font-size: 12px;
    font-weight: 500;
}

.preinvite-template-card {
    display: flex;
    flex-direction: column;
    min-height: 392px;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.preinvite-template-card:hover,
.preinvite-template-card:focus-within {
    border-color: color-mix(in srgb, var(--line-strong) 92%, var(--blue-soft));
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
    transform: translateY(-3px);
}

.preinvite-template-progress {
    display: grid;
    gap: 14px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 18px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, transparent), transparent 44%),
        var(--surface);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.055);
    padding: 18px;
}

.preinvite-template-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.preinvite-template-progress-head > div:first-child {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.preinvite-template-progress-head span,
.preinvite-template-progress-metrics span,
.preinvite-template-progress-steps span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.preinvite-template-progress-head strong {
    color: var(--ink);
    font-size: 18px;
    font-weight: 850;
    letter-spacing: 0;
}

.preinvite-template-progress-head small,
.preinvite-template-progress-metrics small,
.preinvite-template-progress-steps em {
    overflow: hidden;
    color: var(--faint);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-progress-score {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
    border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 84%, var(--blue) 8%);
    box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--blue) 8%, transparent);
}

.preinvite-template-progress-score b {
    color: var(--blue);
    font-size: 23px;
    font-weight: 900;
    line-height: 1;
}

.preinvite-template-progress-score em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.preinvite-template-roadmap {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.preinvite-template-roadmap a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 3px 9px;
    align-content: start;
    min-width: 0;
    min-height: 92px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 52%, transparent);
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    padding: 12px;
    text-decoration: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.preinvite-template-roadmap a:hover,
.preinvite-template-roadmap a:focus-visible,
.preinvite-template-roadmap a.is-active {
    border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 55%, var(--surface));
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
    outline: 0;
    transform: translateY(-1px);
}

.preinvite-template-roadmap b {
    display: grid;
    grid-row: span 3;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 11%, var(--surface));
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
}

.preinvite-template-roadmap span,
.preinvite-template-roadmap em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preinvite-template-roadmap span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.preinvite-template-roadmap strong {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-roadmap em {
    color: var(--faint);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.35;
}

.preinvite-template-progress-metrics,
.preinvite-template-progress-steps {
    display: grid;
    gap: 10px;
}

.preinvite-template-progress-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.preinvite-template-progress-metrics > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 50%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    padding: 12px;
}

.preinvite-template-progress-metrics strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 18px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-progress-steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.preinvite-template-progress-steps a {
    display: grid;
    gap: 5px;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 50%, transparent);
    border-radius: 14px;
    background: var(--surface);
    text-decoration: none;
    padding: 12px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.preinvite-template-progress-steps a:hover,
.preinvite-template-progress-steps a:focus-visible {
    border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
    outline: 0;
    transform: translateY(-1px);
}

.preinvite-template-progress-steps strong {
    color: var(--ink);
    font-size: 17px;
    font-weight: 850;
    line-height: 1.1;
}

.preinvite-template-workqueue {
    display: grid;
    grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
}

.preinvite-template-workqueue-current,
.preinvite-template-workqueue-list a {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.preinvite-template-workqueue-current {
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 13px 14px;
}

.preinvite-template-workqueue-current span,
.preinvite-template-workqueue-list b,
.preinvite-template-workqueue-list em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.preinvite-template-workqueue-current strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 14px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-workqueue-current small {
    overflow: hidden;
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-workqueue-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.preinvite-template-workqueue-list a {
    display: grid;
    gap: 4px;
    min-height: 74px;
    padding: 10px 11px;
    text-decoration: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.preinvite-template-workqueue-list a:hover,
.preinvite-template-workqueue-list a:focus-visible {
    border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    outline: 0;
    transform: translateY(-1px);
}

.preinvite-template-workqueue-list span {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-workqueue-list em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-workqueue-list .is-pending b {
    color: #b45309;
}

.preinvite-template-workqueue-list .is-ready {
    background: color-mix(in srgb, #dcfce7 34%, var(--surface));
}

.preinvite-template-workqueue-list .is-ready b {
    color: #15803d;
}

.preinvite-template-matrix {
    display: grid;
    gap: 12px;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    padding: 14px;
}

.preinvite-template-matrix-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.preinvite-template-matrix-head > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.preinvite-template-matrix-head span,
.preinvite-template-matrix-title span,
.preinvite-template-matrix-next span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.preinvite-template-matrix-head strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 850;
    letter-spacing: 0;
}

.preinvite-template-matrix-head small {
    color: var(--faint);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.preinvite-template-matrix-head a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 32px;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 8%, var(--surface));
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    padding: 0 13px;
    text-decoration: none;
}

.preinvite-template-matrix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
    min-width: 0;
}

.preinvite-template-matrix-card {
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 10px;
    min-width: 0;
    min-height: 286px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent);
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    padding: 13px;
    text-decoration: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.preinvite-template-matrix-card:hover,
.preinvite-template-matrix-card:focus-visible {
    border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
    outline: 0;
    transform: translateY(-1px);
}

.preinvite-template-matrix-card.is-ready {
    background: color-mix(in srgb, #dcfce7 20%, var(--surface));
}

.preinvite-template-matrix-title {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.preinvite-template-matrix-title span {
    width: max-content;
    max-width: 100%;
    border-radius: 999px;
    background: color-mix(in srgb, #fef3c7 54%, var(--surface));
    color: #92400e;
    padding: 4px 8px;
}

.preinvite-template-matrix-card.is-ready .preinvite-template-matrix-title span {
    background: color-mix(in srgb, #dcfce7 64%, var(--surface));
    color: #15803d;
}

.preinvite-template-matrix-title strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.preinvite-template-matrix-title small {
    overflow: hidden;
    color: var(--faint);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-matrix-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
}

.preinvite-template-matrix-progress span {
    display: block;
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line-strong) 54%, transparent);
}

.preinvite-template-matrix-progress b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #16a34a);
}

.preinvite-template-matrix-progress em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.preinvite-template-matrix-next {
    display: grid;
    gap: 4px;
    min-width: 0;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
    padding: 10px;
}

.preinvite-template-matrix-next strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-matrix-checks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 6px;
    min-width: 0;
}

.preinvite-template-matrix-checks span {
    display: grid;
    gap: 3px;
    min-width: 0;
    min-height: 48px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 45%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
    padding: 7px 8px;
}

.preinvite-template-matrix-checks span.is-pass {
    border-color: color-mix(in srgb, #16a34a 22%, var(--line));
    background: color-mix(in srgb, #dcfce7 36%, var(--surface));
}

.preinvite-template-matrix-checks span.is-warn {
    border-color: color-mix(in srgb, #f59e0b 25%, var(--line));
    background: color-mix(in srgb, #fef3c7 40%, var(--surface));
}

.preinvite-template-matrix-checks b,
.preinvite-template-matrix-checks em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-matrix-checks b {
    color: var(--ink);
    font-size: 11px;
    font-weight: 850;
}

.preinvite-template-matrix-checks em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.preinvite-template-matrix-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.preinvite-template-matrix-counts span {
    min-width: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 6px 8px;
}

.preinvite-template-capability {
    display: grid;
    gap: 12px;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    padding: 14px;
}

.preinvite-template-capability-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.preinvite-template-capability-head > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.preinvite-template-capability-head span,
.preinvite-template-capability-metrics em,
.preinvite-template-capability-row em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.preinvite-template-capability-head strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-capability-head small {
    overflow: hidden;
    color: var(--faint);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-capability-head a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 30px;
    border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 8%, var(--surface));
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    padding: 0 12px;
    text-decoration: none;
}

.preinvite-template-capability-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.preinvite-template-capability-metrics span {
    display: grid;
    gap: 4px;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 48%, transparent);
    border-radius: 13px;
    background: var(--surface);
    padding: 10px;
}

.preinvite-template-capability-metrics b {
    color: var(--ink);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.preinvite-template-capability-list {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.preinvite-template-capability-row {
    display: grid;
    grid-template-columns: minmax(190px, 1.35fr) minmax(320px, 1.5fr) minmax(160px, .8fr) minmax(150px, .8fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 62px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 48%, transparent);
    border-radius: 14px;
    background: var(--surface);
    padding: 11px 12px;
    text-decoration: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.preinvite-template-capability-row:hover,
.preinvite-template-capability-row:focus-visible {
    border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    outline: 0;
    transform: translateY(-1px);
}

.preinvite-template-capability-title {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.preinvite-template-capability-title strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-capability-title span {
    overflow: hidden;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-capability-counts,
.preinvite-template-capability-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.preinvite-template-capability-counts span,
.preinvite-template-capability-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 0 8px;
    white-space: nowrap;
}

.preinvite-template-capability-counts span {
    border: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent);
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
    color: var(--muted);
}

.preinvite-template-capability-tags span {
    border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
    background: color-mix(in srgb, var(--blue) 7%, var(--surface));
    color: var(--blue);
}

.preinvite-template-capability-row em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.preinvite-template-type-card {
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 112px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-decoration: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.preinvite-template-type-card:hover,
.preinvite-template-type-card:focus-visible {
    border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07);
    outline: 0;
    transform: translateY(-2px);
}

.preinvite-template-type-card span {
    color: #64748b;
    font-size: 12px;
    font-weight: 400;
}

.preinvite-template-type-card strong {
    display: inline-flex;
    align-items: baseline;
    color: #0f172a;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.preinvite-template-type-card strong b {
    color: #0f172a;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.preinvite-template-type-card strong span {
    margin-left: 4px;
    color: #334155;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
}

.preinvite-template-empty {
    display: grid;
    gap: 6px;
    min-height: 112px;
    border: 1px dashed color-mix(in srgb, var(--line-strong) 70%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-soft) 68%, var(--surface));
    padding: 20px;
}

.preinvite-template-empty strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
}

.preinvite-template-empty span {
    color: var(--muted);
    font-size: 13px;
}

.preinvite-template-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    padding: 17px 20px 18px;
}

.preinvite-template-card strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-card p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.preinvite-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
    min-width: 0;
    white-space: normal;
}

.preinvite-card-actions .action-button {
    justify-content: center;
    min-height: 36px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    padding: 0 12px;
}

.preinvite-card-actions .action-button:only-child {
    grid-column: 1 / -1;
}

.preinvite-template-card small {
    display: block;
    overflow: hidden;
    color: var(--faint);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-template-card-meter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
}

.preinvite-template-card-meter span {
    display: block;
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line-strong) 54%, transparent);
}

.preinvite-template-card-meter b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue), #22c55e);
}

.preinvite-template-card-meter em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.preinvite-template-audit-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 80px;
    overflow: hidden;
}

.preinvite-template-audit-list span {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 24px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 0 8px;
    white-space: nowrap;
}

.preinvite-template-audit-list span::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    content: "";
}

.preinvite-template-audit-list .is-pass::before {
    background: #22c55e;
}

.preinvite-template-audit-list .is-warn {
    color: #b45309;
}

.preinvite-template-audit-list .is-warn::before {
    background: #f59e0b;
}

.preinvite-template-preview {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 220px;
    min-width: 0;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 0;
    background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
    cursor: zoom-in;
    padding: 0;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.preinvite-template-preview:hover,
.preinvite-template-preview:focus-visible {
    box-shadow: none;
    transform: none;
    outline: 0;
}

.preinvite-template-preview::before,
.preinvite-template-preview::after {
    position: absolute;
    z-index: 2;
    opacity: 0;
    content: "";
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.preinvite-template-preview::before {
    right: 12px;
    bottom: 12px;
    width: 30px;
    height: 30px;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
    backdrop-filter: blur(12px);
    transform: scale(0.92);
}

.preinvite-template-preview::after {
    right: 20px;
    bottom: 20px;
    width: 14px;
    height: 14px;
    background: var(--blue);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27m21%2021-4.3-4.3M10.8%2018a7.2%207.2%200%201%201%200-14.4%207.2%207.2%200%200%201%200%2014.4Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27m21%2021-4.3-4.3M10.8%2018a7.2%207.2%200%201%201%200-14.4%207.2%207.2%200%200%201%200%2014.4Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E") center / contain no-repeat;
    transform: scale(0.92);
}

.preinvite-template-preview:hover::before,
.preinvite-template-preview:hover::after,
.preinvite-template-preview:focus-visible::before,
.preinvite-template-preview:focus-visible::after {
    opacity: 1;
    transform: scale(1);
}

.preinvite-template-preview img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: var(--surface);
    box-shadow: none;
    object-fit: cover;
    object-position: center top;
}

.preinvite-template-preview.is-phone-preview {
    background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
    padding: 0;
}

.preinvite-template-preview.is-phone-preview img {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    object-fit: cover;
    object-position: center top;
}

.template-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 28px;
    opacity: 1;
    cursor: default;
}

.template-preview-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: default;
}

.template-preview-close-x {
    position: fixed;
    top: 22px;
    right: 30px;
    z-index: 2;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 38px;
    font-weight: 200;
    line-height: 1;
    transition: color 0.18s ease, transform 0.18s ease;
}

.template-preview-close-x:hover,
.template-preview-close-x:focus-visible {
    color: var(--ink);
    outline: 0;
    transform: rotate(90deg);
}

.template-preview-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: min(360px, calc(100vw - 80px));
    max-height: calc(100vh - 88px);
    pointer-events: none;
    cursor: default;
}

.template-preview-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.template-preview-ghost {
    position: absolute;
    top: 50%;
    z-index: 0;
    width: min(300px, 34vw);
    height: min(540px, calc(100vh - 150px));
    border-radius: 22px;
    filter: blur(22px) saturate(1.04);
    opacity: 0.46;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
    transform: translateY(-50%);
}

.template-preview-ghost.is-left {
    right: calc(100% - 32px);
}

.template-preview-ghost.is-right {
    left: calc(100% - 32px);
}

.template-preview-stage {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(340px, calc(100vw - 88px));
    height: min(600px, calc(100vh - 88px));
    place-items: stretch;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(180deg, var(--blue), color-mix(in srgb, var(--blue) 82%, var(--indigo)));
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.34);
    transform: scale(1);
    transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.template-preview-stage img {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--surface);
    object-fit: cover;
    object-position: center top;
    cursor: default;
}

.template-preview-modal:not(.is-phone-preview) .template-preview-dialog {
    width: min(900px, calc(100vw - 80px));
}

.template-preview-modal:not(.is-phone-preview) .template-preview-stage {
    width: min(900px, calc(100vw - 88px));
    height: min(620px, calc(100vh - 104px));
    border-radius: 20px;
}

.template-preview-modal:not(.is-phone-preview) .template-preview-stage img {
    object-fit: contain;
}

body.has-template-preview {
    overflow: hidden;
}

html[data-theme="dark"] .template-preview-backdrop {
    background: rgba(2, 6, 23, 0.30);
}

html[data-theme="dark"] .template-preview-close-x {
    color: var(--ink);
}

.preinvite-code-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
}

.preinvite-code-files {
    align-content: start;
}

.preinvite-code-files > strong {
    margin: 2px 2px 8px;
}

.preinvite-code-files a {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.preinvite-code-files a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preinvite-code-editor-panel {
    gap: 14px;
    padding: 14px;
}

.preinvite-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.preinvite-code-head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.empty-state {
    display: grid;
    justify-items: start;
    gap: 12px;
    padding: 36px;
}

.empty-state > span {
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
}

.empty-state h2 {
    font-size: 24px;
}

.empty-state p {
    max-width: 720px;
    color: var(--muted);
}

@media (max-width: 1220px) {
    .topbar {
        grid-template-columns: 1fr;
    }

    .topbar-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .topbar-search {
        max-width: none;
    }

    .context-pickers,
    .user-chip {
        justify-self: start;
    }

    .metric-grid,
    .permission-grid,
    .rule-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-card-grid,
    .template-grid,
    .preinvite-template-grid,
    .settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .preinvite-template-progress-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .preinvite-template-roadmap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .preinvite-template-capability-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .preinvite-template-capability-row {
        grid-template-columns: minmax(220px, 1fr) minmax(0, 1.35fr);
    }

    .preinvite-template-capability-row em {
        grid-column: 1 / -1;
    }

    .preinvite-template-workqueue {
        grid-template-columns: 1fr;
    }

    .preinvite-template-workqueue-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-layout {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .filter-panel,
    .create-mode-panel,
    .preinvite-mode-grid,
    .preinvite-asset-grid,
    .preinvite-style-editor,
    .preinvite-maintenance-overview,
    .preinvite-global-style-board-list,
    .preinvite-style-color-grid,
    .preinvite-style-media-grid,
    .preinvite-style-option-grid,
    .preinvite-content-style-recipes,
    .preinvite-module-style-recipes,
    .preinvite-module-workflow-list,
    .preinvite-style-coverage-grid,
    .preinvite-page-block-style-recipes,
    .preinvite-child-page-wizard-steps,
    .preinvite-field-style-recipes,
    .preinvite-field-preset-bar,
    .preinvite-module-inspector-live,
    .preinvite-field-live,
    .preinvite-share-editor,
    .asset-grid,
    .manage-layout,
    .code-layout {
        grid-template-columns: 1fr;
    }

    .preinvite-style-preset-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .manage-nav,
    .code-files,
    .settings-category-rail {
        position: static;
    }

    .preinvite-live-preview-panel {
        position: static;
    }

    .conference-toolline,
    .capsule-filter-hub {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .preinvite-table-summary,
    .preinvite-code-head,
    .settings-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

}

@media (max-width: 900px) {
    .login-layout {
        grid-template-columns: 1fr;
    }

    .login-hero {
        min-height: 440px;
        padding: 28px;
    }

    .login-panel {
        padding: 28px;
    }

    .admin-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .side-nav {
        max-height: none;
    }

    .page-head,
    .toolbar,
    .panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .conference-form-section {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .date-range-hub.conference-date-range {
        width: 100%;
    }

    .conference-form-actions {
        right: 28px;
        left: auto;
        width: auto;
    }

    .conference-section-aside p {
        max-width: none;
    }

    .split-grid,
    .analytics-grid,
    .metric-grid,
    .site-card-grid,
    .template-grid,
    .preinvite-template-grid,
    .preinvite-template-overview,
    .settings-grid,
    .settings-layout,
    .settings-form-grid,
    .settings-task-runner,
    .sms-preview-meta,
    .sms-param-grid,
    .conference-field-grid,
    .form-grid,
    .filter-grid,
    .filter-panel,
    .create-mode-panel,
    .preinvite-mode-grid,
    .preinvite-asset-grid,
    .preinvite-style-editor,
    .preinvite-style-preset-grid,
    .preinvite-style-color-grid,
    .preinvite-style-media-grid,
    .preinvite-style-option-grid,
    .preinvite-share-editor,
    .preinvite-selected-properties,
    .asset-grid,
    .manage-layout,
    .code-layout,
    .permission-grid,
    .rule-grid {
        grid-template-columns: 1fr;
    }

    .preinvite-template-progress-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .preinvite-template-capability-head,
    .preinvite-template-matrix-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .preinvite-template-capability-head a,
    .preinvite-template-matrix-head a {
        width: 100%;
    }

    .preinvite-template-matrix-grid {
        grid-template-columns: 1fr;
    }

    .preinvite-template-capability-row {
        grid-template-columns: 1fr;
    }

    .preinvite-template-capability-title strong,
    .preinvite-template-capability-title span,
    .preinvite-template-capability-row em {
        white-space: normal;
    }

    .preinvite-template-progress-score {
        width: 100%;
        height: auto;
        min-height: 70px;
        border-radius: 16px;
    }

    .preinvite-template-roadmap {
        grid-template-columns: 1fr;
    }

    .preinvite-instance-scope-map {
        grid-template-columns: 1fr;
    }

    .preinvite-template-progress-steps {
        display: flex;
        overflow-x: auto;
        padding-bottom: 2px;
        scroll-snap-type: x proximity;
    }

    .preinvite-template-progress-steps a {
        flex: 0 0 170px;
        scroll-snap-align: start;
    }

    .preinvite-template-workqueue-list {
        grid-template-columns: 1fr;
    }

    .preinvite-copy-field,
    .preinvite-module-row,
    .preinvite-module-appearance,
    .preinvite-selected-inspector-head,
    .preinvite-editable-board-head,
    .preinvite-editable-board-item,
    .preinvite-maintenance-board-head,
    .preinvite-maintenance-board-item,
    .preinvite-global-style-board-list,
    .preinvite-module-workflow-list,
    .preinvite-page-block-button-recipes-list,
    .preinvite-page-block-button-board-list,
    .preinvite-field-preset-bar,
    .preinvite-page-block-outline-list {
        grid-template-columns: 1fr;
    }

    .preinvite-module-index {
        justify-self: start;
    }

    .preinvite-module-remove {
        justify-self: start;
    }

    .preinvite-module-row-head,
    .preinvite-content-row-head,
    .preinvite-module-subpage-wizard,
    .preinvite-style-coverage-head,
    .preinvite-style-coverage-item,
    .preinvite-child-page-wizard-head,
    .preinvite-selected-property-card,
    .preinvite-module-workflow-head,
    .preinvite-module-link-board-head,
    .preinvite-module-link-board-item,
    .preinvite-module-style-board-head,
    .preinvite-module-style-board-item,
    .preinvite-page-block-button-recipes-list button,
    .preinvite-page-block-child-preview-head,
    .preinvite-page-block-child-preview-card,
    .preinvite-page-block-button-board-head,
    .preinvite-page-block-button-board-item,
    .preinvite-content-grid,
    .preinvite-field-type-grid,
    .preinvite-field-option-row,
    .preinvite-field-live,
    .preinvite-module-grid,
    .preinvite-media-picker,
    .preinvite-block-detail-row,
    .preinvite-page-block-live,
    .preinvite-subpage-preview,
    .preinvite-subpage-panel {
        grid-template-columns: 1fr;
    }

    .preinvite-row-tools {
        flex-wrap: wrap;
        justify-self: start;
    }

    .preinvite-module-subpage-wizard > div:last-child {
        justify-content: flex-start;
    }

    .preinvite-module-link-board-head em,
    .preinvite-module-link-board-item em,
    .preinvite-module-link-board-item button,
    .preinvite-module-style-board-head em,
    .preinvite-module-style-board-item em,
    .preinvite-module-style-board-item button,
    .preinvite-page-block-button-board-head em,
    .preinvite-page-block-button-board-item em,
    .preinvite-page-block-button-board-item button,
    .preinvite-editable-board-head em,
    .preinvite-editable-board-item em,
    .preinvite-editable-board-item button,
    .preinvite-maintenance-board-head em,
    .preinvite-maintenance-board-item em,
    .preinvite-maintenance-board-item button,
    .preinvite-style-coverage-head em,
    .preinvite-style-coverage-item em,
    .preinvite-child-page-wizard-head em,
    .preinvite-selected-inspector-head em,
    .preinvite-selected-property-card em,
    .preinvite-global-style-board-head em,
    .preinvite-global-style-board-item em {
        justify-self: start;
    }

    .preinvite-icon-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .preinvite-segmented,
    .preinvite-segmented.is-link-type,
    .preinvite-segmented.is-shape {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    .context-pickers {
        flex-wrap: wrap;
    }

    .settings-task-runner {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .settings-task-runner-command {
        width: 100%;
        min-width: 0;
    }

    .settings-task-card {
        width: 100%;
    }

    .settings-task-card-header,
    .settings-task-form-row,
    .settings-task-cli-zone {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-task-form-label,
    .settings-task-cli-label {
        flex-basis: auto;
        width: auto;
    }

    .settings-task-form-content,
    .settings-task-cli-wrapper,
    .settings-task-mini-field,
    .settings-task-mini-field input,
    .settings-task-select-wrap,
    .settings-task-select-wrap.form-select-touch .filter-select-trigger,
    .settings-task-select-wrap.form-select-touch .filter-select-menu,
    .settings-sms-check-panel,
    .settings-sms-test-panel {
        grid-column: auto;
        justify-self: stretch;
        width: 100%;
    }

    .settings-task-sub-tips {
        display: block;
        margin: 8px 0 0;
    }

    .settings-task-segmented-control,
    .settings-task-chips-group,
    .settings-task-calendar-panel,
    .settings-task-status-timeline {
        width: 100%;
    }

    .settings-task-segmented-control {
        justify-content: stretch;
    }

    .settings-task-segment-btn {
        flex: 1 1 0;
        padding-right: 10px;
        padding-left: 10px;
    }

    .sms-recipient-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .sms-send-mode-row,
    .sms-excel-tools {
        align-items: stretch;
        width: 100%;
    }

    .sms-excel-tools {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sms-excel-action {
        justify-content: flex-start;
        min-width: 0;
    }

    .sms-validation-list {
        width: 100%;
        padding-left: 0;
        text-align: left;
    }

    .sms-section-tabs {
        flex-wrap: wrap;
        width: 100%;
    }

    .sms-page-head,
    .sms-page-head-main,
    .sms-page-head-aside,
    .sms-detail-head {
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
    }

    .sms-page-head-main,
    .sms-page-head-aside {
        flex-basis: auto;
    }

    .sms-section-note {
        white-space: normal;
    }

    .sms-detail-copy small {
        white-space: normal;
    }

    .sms-detail-stat-row {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .picker-menu,
    .picker-menu-right {
        right: auto;
        left: 0;
        width: min(306px, calc(100vw - 36px));
    }
}

@media (max-width: 580px) {
    .login-hero {
        min-height: 480px;
        padding: 22px 16px;
    }

    .preinvite-template-progress {
        padding: 14px;
    }

    .preinvite-template-progress-metrics {
        grid-template-columns: 1fr;
    }

    .preinvite-template-capability-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .preinvite-template-matrix {
        padding: 12px;
    }

    .preinvite-template-matrix-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .preinvite-template-matrix-card {
        min-height: 0;
    }

    .preinvite-instance-link-breakdown {
        grid-template-columns: 1fr;
    }

    .login-topline,
    .login-options {
        align-items: flex-start;
        flex-direction: column;
    }

    .login-hero-copy h1 {
        font-size: 30px;
    }

    .login-panel {
        padding: 18px 14px 24px;
    }

    .login-form {
        max-width: none;
    }

    .content,
    .premium-conference-shell .content {
        padding: 18px 14px 24px;
    }

    .brand-row,
    .topbar,
    .topbar-actions,
    .context-pickers,
    .user-chip {
        align-items: flex-start;
    }

    .topbar-actions {
        width: 100%;
    }

    .context-pickers,
    .picker-button,
    .topbar-actions .context-picker,
    .topbar-search,
    .topbar-search input {
        width: 100%;
    }

    .conference-toolline,
    .capsule-filter-hub,
    .date-range-hub,
    .premium-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .filter-keyword,
    .filter-icon-field,
    .filter-select-touch,
    .filter-select-trigger,
    .filter-select-menu,
    .system-log-action-select,
    .system-log-action-select .filter-select-menu,
    .date-range-hub,
    .date-range-trigger,
    .module-create-action,
    .preinvite-site-summary {
        min-width: 0;
        width: 100%;
    }

    .preinvite-action-chain,
    .preinvite-card-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .preinvite-card-actions {
        grid-template-columns: 1fr;
    }

    .preinvite-action-chain .action-button,
    .preinvite-card-actions .action-button,
    .preinvite-action-chain form .action-button,
    .preinvite-card-actions form .action-button,
    .preinvite-action-chain form,
    .preinvite-card-actions form {
        width: 100%;
    }

    .preinvite-template-card {
        grid-template-columns: 1fr;
        height: auto;
    }

    .preinvite-template-preview {
        height: 190px;
        min-height: 190px;
    }

    .template-preview-modal {
        padding: 14px;
    }

    .template-preview-dialog {
        width: calc(100vw - 28px);
        max-height: calc(100vh - 28px);
        border-radius: 16px;
    }

    .template-preview-stage {
        padding: 0;
    }

    .date-range-panel {
        width: min(520px, calc(100vw - 28px));
    }

    .date-range-fields,
    .date-picker-months {
        grid-template-columns: 1fr;
    }

    .user-chip {
        border-left: 0;
        padding-left: 0;
    }

    .inline-reset-form {
        align-items: flex-start;
        flex-direction: column;
    }

    .inline-reset-form input,
    .inline-reset-form button {
        width: 100%;
    }

    .permission-strip {
        justify-content: flex-start;
    }

    .conference-form-shell {
        gap: 28px;
        padding-bottom: 150px;
    }

    .conference-form-actions,
    .cover-preview-row,
    .profile-security-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-avatar-stage {
        grid-template-columns: 1fr;
        gap: 18px;
        text-align: center;
    }

    .profile-avatar-actions-row {
        justify-content: center;
        flex-wrap: wrap;
    }

    .conference-form-actions {
        right: 14px;
        bottom: 12px;
        left: 14px;
        width: auto;
        gap: 8px;
        padding: 12px;
    }

    .form-return-link,
    .form-submit-button {
        width: 100%;
    }

    .form-return-link {
        text-align: center;
    }

    .cover-preview-copy {
        margin-left: 0;
    }

    .cover-tools {
        justify-content: flex-start;
        margin-left: 0;
        padding-left: 0;
    }
}

/* User authorization search controls */
.wide-select-touch .filter-select-menu.is-searchable {
    width: 280px;
    max-height: 320px;
    overflow-y: auto;
}

.filter-select-search {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 2px 2px 6px;
    background: var(--surface);
}

.filter-select-search input {
    width: 100%;
    height: 30px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 76%, transparent);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    outline: none;
    padding: 0 10px;
}

.filter-select-search input:focus {
    border-color: var(--blue);
    background: var(--surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-soft) 76%, transparent);
}

.filter-select-empty {
    color: var(--faint);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 10px;
    text-align: center;
}

.user-conference-scope {
    max-height: 480px;
    overflow-y: auto;
    padding: 2px 6px 2px 2px;
}

.user-conference-searchbar {
    display: grid;
    gap: 7px;
    margin-bottom: 12px;
}

.user-conference-searchbar input {
    width: 100%;
    height: 39px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 86%, transparent);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    outline: none;
    padding: 0 14px;
}

.user-conference-searchbar input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-soft) 76%, transparent);
}

.user-conference-searchbar span,
.user-conference-empty-inline {
    color: var(--faint);
    font-size: 12px;
    font-weight: 500;
}

.user-conference-empty-inline {
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
    padding: 18px;
    text-align: center;
}

.user-credential-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

.role-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 0 10px;
    white-space: nowrap;
}

.role-status.is-danger {
    background: color-mix(in srgb, #dc2626 10%, #fff);
    color: #b91c1c;
}

.role-status.is-success {
    background: color-mix(in srgb, #16a34a 10%, #fff);
    color: #15803d;
}

.role-status.is-warning {
    background: color-mix(in srgb, #f59e0b 14%, #fff);
    color: #b45309;
}

.role-status.is-muted {
    background: var(--surface-soft);
    color: var(--muted);
}

.user-password-section {
    align-items: center;
    min-height: 0;
    padding-top: 18px;
    padding-bottom: 24px;
}

.user-password-shell {
    gap: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 96px !important;
}

.user-edit-form-shell {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.user-password-shell .conference-section-body {
    padding-top: 0 !important;
}

.user-password-shell .conference-form-section {
    margin-top: 0 !important;
}

.user-password-shell .user-password-section {
    min-height: auto !important;
    padding-top: 16px !important;
    padding-bottom: 22px !important;
}

.user-password-shell .conference-section-aside,
.user-password-shell .conference-section-body {
    padding-bottom: 0 !important;
}

.user-password-inline {
    display: grid;
    grid-template-columns: minmax(260px, 420px) auto;
    align-items: end;
    gap: 12px;
    max-width: 560px;
}

.user-password-field {
    margin: 0;
}

.user-password-submit {
    background: #dc2626;
    box-shadow: 0 10px 18px rgba(220, 38, 38, 0.18);
    height: 39px;
    min-width: 112px;
    padding-inline: 18px;
}

.user-password-submit:hover {
    background: #b91c1c;
    box-shadow: 0 12px 22px rgba(220, 38, 38, 0.24);
}

@media (max-width: 900px) {
    .analytics-summary-grid,
    .analytics-report-grid,
    .analytics-bars-split {
        grid-template-columns: 1fr;
    }

    .analytics-trend-chart {
        overflow-x: auto;
        grid-template-columns: repeat(7, minmax(76px, 1fr));
    }

    .site-today-row {
        grid-template-columns: 1fr;
    }

    .site-today-row dl {
        justify-content: start;
        text-align: left;
    }

    .analytics-card-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .analytics-date-range {
        width: 100%;
        min-width: 0;
    }

    .user-credential-row {
        grid-template-columns: 1fr;
    }

    .user-password-inline {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .user-password-submit {
        justify-self: flex-start;
    }
}

.module-create-action.is-ghost {
    border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 48%, var(--surface));
    color: var(--blue);
}

.module-create-action.is-ghost:hover {
    border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 78%, var(--surface));
    color: var(--blue-dark);
}

.payment-session-panel,
.payment-settings-section,
.payment-stat-card {
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.035);
}

.payment-session-panel {
    display: grid;
    gap: 18px;
    padding: 18px;
}

.payment-session-main,
.payment-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.payment-session-main h2 {
    margin: 4px 0 6px;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.25;
}

.payment-session-main p,
.payment-section-head span,
.payment-kicker {
    color: var(--faint);
    font-size: 12px;
    font-weight: 600;
}

.payment-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
}

.payment-session-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.payment-session-grid div {
    display: grid;
    gap: 5px;
    min-width: 0;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-soft) 80%, transparent);
    padding: 10px 12px;
}

.payment-session-grid span,
.payment-stat-card span {
    color: var(--faint);
    font-size: 11px;
    font-weight: 600;
}

.payment-session-grid strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.payment-stat-card {
    position: relative;
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 112px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.payment-stat-card span {
    color: #64748b;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.payment-stat-card::after {
    content: none;
}

.payment-stat-card strong {
    color: #0f172a;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.payment-stat-card small {
    color: #64748b;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.payment-settings-section {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 16px;
}

.payment-section-head strong {
    display: block;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.35;
}

.payment-section-head .action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
}

.payment-section-head .action-button:hover {
    background: var(--surface-soft);
    color: var(--ink);
}

.payment-table-wrap {
    box-shadow: none;
}

.payment-order-table {
    min-width: 680px;
    table-layout: fixed;
}

.payment-order-table th,
.payment-order-table td {
    padding: 12px;
}

.payment-order-table th:nth-child(1) {
    width: 23%;
}

.payment-order-table th:nth-child(2) {
    width: 13%;
}

.payment-order-table th:nth-child(3) {
    width: 17%;
}

.payment-order-table th:nth-child(4) {
    width: 13%;
}

.payment-order-table th:nth-child(5) {
    width: 10%;
}

.payment-order-table th:nth-child(6) {
    width: 24%;
}

.payment-order-table td > strong {
    overflow-wrap: anywhere;
}

.payment-order-table td:nth-child(4) strong {
    white-space: nowrap;
}

.payment-formal-page {
    gap: 22px;
}

.payment-filter-hub {
    flex-wrap: wrap;
}

.payment-filter-hub .filter-keyword {
    width: 300px;
}

.payment-filter-hub .filter-icon-field {
    width: 300px;
}

.payment-export-action {
    align-items: center;
    background: #eef6ff;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 999px;
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 500;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    white-space: nowrap;
}

.payment-export-action:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

.payment-date-range {
    width: 300px;
    min-width: 300px;
}

.payment-orders-table,
.payment-flows-table,
.payment-config-table,
.payment-sync-table {
    table-layout: fixed;
}

.payment-orders-table {
    min-width: 1500px;
}

.payment-orders-table th:nth-child(1) {
    width: 220px;
}

.payment-orders-table th:nth-child(2) {
    width: 130px;
}

.payment-orders-table th:nth-child(3) {
    width: 150px;
}

.payment-orders-table th:nth-child(4) {
    width: 120px;
}

.payment-orders-table th:nth-child(5) {
    width: 130px;
}

.payment-orders-table th:nth-child(6) {
    width: 130px;
}

.payment-orders-table th:nth-child(7) {
    width: 130px;
}

.payment-orders-table th:nth-child(8) {
    width: 300px;
}

.payment-orders-table th:nth-child(9) {
    width: 150px;
}

.payment-flows-table {
    min-width: 1720px;
}

.payment-flows-table th:nth-child(1) {
    width: 220px;
}

.payment-flows-table th:nth-child(2) {
    width: 240px;
}

.payment-flows-table th:nth-child(3) {
    width: 120px;
}

.payment-flows-table th:nth-child(4) {
    width: 150px;
}

.payment-flows-table th:nth-child(5) {
    width: 110px;
}

.payment-flows-table th:nth-child(6) {
    width: 130px;
}

.payment-flows-table th:nth-child(7) {
    width: 120px;
}

.payment-flows-table th:nth-child(8) {
    width: 260px;
}

.payment-flows-table th:nth-child(9) {
    width: 130px;
}

.payment-flows-table th:nth-child(10) {
    width: 240px;
}

.payment-orders-table td,
.payment-flows-table td,
.payment-config-table td,
.payment-sync-table td {
    overflow-wrap: anywhere;
}

.payment-orders-table td:nth-child(3),
.payment-orders-table td:nth-child(4),
.payment-orders-table td:nth-child(5),
.payment-orders-table td:nth-child(7),
.payment-orders-table td:nth-child(9),
.payment-flows-table td:nth-child(3),
.payment-flows-table td:nth-child(4),
.payment-flows-table td:nth-child(5),
.payment-flows-table td:nth-child(7),
.payment-flows-table td:nth-child(9) {
    white-space: nowrap;
}

.payment-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
    gap: 16px;
    align-items: start;
}

.payment-settings-hero .payment-session-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.payment-settings-command {
    margin-top: 4px;
}

.payment-auth-wizard {
    display: grid;
    gap: 14px;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--blue-soft) 34%, var(--surface));
    padding: 14px;
}

.payment-auth-wizard-head,
.payment-auth-wizard-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.payment-auth-wizard-head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.payment-auth-wizard-head strong {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
}

.payment-auth-step-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.payment-auth-step-grid div {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    padding: 10px;
}

.payment-auth-step-grid b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line-strong) 28%, transparent);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.payment-auth-step-grid span {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-auth-step-grid div.is-active {
    border-color: color-mix(in srgb, var(--blue) 36%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 56%, var(--surface));
}

.payment-auth-step-grid div.is-active b,
.payment-auth-step-grid div.is-done b {
    background: var(--blue);
    color: #fff;
}

.payment-auth-step-grid div.is-active span,
.payment-auth-step-grid div.is-done span {
    color: var(--ink);
}

.payment-auth-inline-fields {
    display: grid;
    grid-template-columns: minmax(220px, .56fr) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.payment-auth-inline-fields label,
.payment-auth-wizard-status,
.payment-auth-fingerprint-row div {
    display: grid;
    gap: 6px;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 50%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    padding: 9px 10px;
}

.payment-auth-inline-fields label span,
.payment-auth-wizard-status span,
.payment-auth-fingerprint-row span {
    color: var(--faint);
    font-size: 12px;
    font-weight: 700;
}

.payment-auth-inline-fields input {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
    padding: 9px 10px;
}

.payment-auth-inline-fields input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}

.payment-auth-wizard-status strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.payment-auth-wizard-status small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.payment-auth-wizard-status span.is-success {
    color: var(--green);
}

.payment-auth-wizard-status span.is-danger {
    color: var(--red);
}

.payment-auth-wizard-status span.is-info {
    color: var(--blue);
}

.payment-auth-wizard-status span.is-warning {
    color: var(--amber);
}

.payment-auth-wizard-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.payment-auth-wizard-actions form {
    margin: 0;
}

.payment-capture-guide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.payment-capture-guide div {
    display: grid;
    gap: 5px;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 48%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    padding: 10px 12px;
}

.payment-capture-guide b {
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
}

.payment-capture-guide span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.payment-auth-fingerprint-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 10px;
}

.payment-auth-fingerprint-row strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
}

.payment-auth-fallback {
    margin-top: 2px;
}

.payment-capture-assistant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--blue-soft) 38%, var(--surface));
    padding: 12px;
}

.payment-capture-assistant div:first-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.payment-capture-assistant strong,
.payment-capture-assistant small {
    display: block;
}

.payment-capture-assistant strong {
    color: var(--ink);
    font-size: 13px;
    line-height: 1.35;
}

.payment-capture-assistant small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.payment-capture-actions {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
}

.payment-capture-actions .action-button,
.payment-auth-wizard-actions .action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 60%, transparent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 0 12px;
}

.payment-capture-actions .action-button.is-entry,
.payment-auth-wizard-actions .action-button.is-entry {
    border-color: color-mix(in srgb, var(--blue) 20%, var(--line));
    background: var(--blue);
    color: #fff;
}

.payment-settings-auth-form {
    margin-top: 8px;
}

.payment-config-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.payment-config-form .premium-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.payment-config-form .premium-field span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.payment-config-form .premium-field input {
    width: 100%;
    height: 39px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 86%, transparent);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    padding: 0 13px;
}

.payment-config-form .premium-field input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-soft) 76%, transparent);
    outline: 0;
}

.payment-config-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    grid-column: 1 / -1;
    justify-content: flex-end;
}

.payment-config-actions .action-button,
.payment-fill-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 60%, transparent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 0 13px;
}

.payment-config-actions .action-button:hover,
.payment-fill-button:hover {
    border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
    background: color-mix(in srgb, var(--blue-soft) 54%, var(--surface));
    color: var(--blue);
}

.payment-config-table {
    min-width: 1180px;
}

.payment-config-table th:nth-child(1) {
    width: 140px;
}

.payment-config-table th:nth-child(2) {
    width: 250px;
}

.payment-config-table th:nth-child(3) {
    width: 170px;
}

.payment-config-table th:nth-child(4) {
    width: 250px;
}

.payment-config-table th:nth-child(5) {
    width: 110px;
}

.payment-config-table th:nth-child(6) {
    width: 220px;
}

.payment-mini-list {
    display: grid;
    gap: 9px;
}

.payment-mini-list div {
    display: grid;
    gap: 4px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-soft) 68%, transparent);
    padding: 9px 10px;
}

.payment-mini-list .payment-fill-button {
    justify-self: start;
    margin-top: 3px;
}

.payment-mini-list strong {
    color: var(--ink);
    font-size: 13px;
}

.payment-mini-list span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.payment-sync-table {
    min-width: 1480px;
}

.payment-sync-table th:nth-child(1) {
    width: 150px;
}

.payment-sync-table th:nth-child(2) {
    width: 130px;
}

.payment-sync-table th:nth-child(3) {
    width: 160px;
}

.payment-sync-table th:nth-child(4) {
    width: 140px;
}

.payment-sync-table th:nth-child(5) {
    width: 210px;
}

.payment-sync-table th:nth-child(6) {
    width: 110px;
}

.payment-sync-table th:nth-child(7) {
    width: 190px;
}

.payment-sync-table th:nth-child(8) {
    width: 470px;
}

.payment-task-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.payment-task-grid article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: start;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-soft) 68%, transparent);
    padding: 12px;
}

.payment-task-grid article > span {
    justify-self: end;
}

.payment-task-grid strong,
.payment-task-grid small,
.payment-task-grid em,
.payment-task-grid code {
    display: block;
}

.payment-task-grid span {
    color: var(--faint);
    font-size: 11px;
    font-weight: 700;
}

.payment-task-grid strong {
    margin-top: 3px;
    color: var(--ink);
    font-size: 13px;
}

.payment-task-grid small,
.payment-task-grid em {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.payment-task-grid em,
.payment-task-grid code {
    grid-column: 1 / -1;
}

.payment-task-grid em {
    font-style: normal;
}

.payment-task-grid code {
    overflow: hidden;
    border-radius: 9px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    color: var(--blue);
    font-size: 11px;
    padding: 8px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-cursor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.payment-cursor-grid article {
    display: grid;
    gap: 10px;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-soft) 68%, transparent);
    padding: 12px;
}

.payment-cursor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.payment-cursor-grid span {
    color: var(--faint);
    font-size: 11px;
    font-weight: 700;
}

.payment-cursor-grid strong {
    display: block;
    margin-top: 3px;
    color: var(--ink);
    font-size: 13px;
}

.payment-cursor-grid dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.payment-cursor-grid dl div {
    min-width: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    padding: 8px 10px;
}

.payment-cursor-grid dt,
.payment-cursor-grid dd {
    margin: 0;
}

.payment-cursor-grid dt {
    color: var(--faint);
    font-size: 11px;
    font-weight: 700;
}

.payment-cursor-grid dd,
.payment-cursor-grid small,
.payment-cursor-grid em {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.payment-cursor-grid dd {
    overflow-wrap: anywhere;
}

.payment-cursor-grid em {
    display: block;
    border-radius: 10px;
    background: color-mix(in srgb, #fef2f2 78%, transparent);
    color: #b91c1c;
    font-style: normal;
    padding: 8px 10px;
}

@media (max-width: 1180px) {
    .payment-settings-grid,
    .payment-settings-hero .payment-session-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .payment-filter-hub .filter-keyword,
    .payment-filter-hub .filter-icon-field,
    .payment-date-range {
        width: 100%;
        min-width: 0;
    }

    .payment-config-form {
        grid-template-columns: 1fr;
    }

    .payment-task-grid,
    .payment-cursor-grid,
    .payment-cursor-grid dl {
        grid-template-columns: 1fr;
    }

    .payment-capture-assistant,
    .payment-capture-actions,
    .payment-auth-wizard-head,
    .payment-auth-wizard-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-auth-step-grid,
    .payment-auth-inline-fields,
    .payment-capture-guide,
    .payment-auth-fingerprint-row {
        grid-template-columns: 1fr;
    }
}

html[data-theme="dark"] .payment-session-panel,
html[data-theme="dark"] .payment-settings-section {
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

@media (max-width: 1180px) {
    .payment-session-grid,
    .payment-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .payment-session-main,
    .payment-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-session-grid,
    .payment-stat-grid {
        grid-template-columns: 1fr;
    }
}

.payment-auth-page {
    display: grid;
    gap: 16px;
}

.payment-auth-page .conference-toolline form {
    margin: 0;
}

.payment-auth-hero,
.payment-auth-card {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .05);
}

.payment-auth-hero {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 22px;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, .10), rgba(20, 184, 166, .08)),
        #fff;
}

.payment-auth-hero h2 {
    margin: 4px 0 6px;
    color: #0f172a;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
}

.payment-auth-hero p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}

.payment-auth-hero-main {
    min-width: 0;
}

.payment-auth-hero-side {
    display: grid;
    gap: 9px;
    justify-items: end;
    min-width: 150px;
}

.payment-auth-hero-side strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
}

.payment-auth-command {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #eff6ff;
    padding: 14px 16px;
}

.payment-auth-command div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.payment-auth-command strong {
    color: #1e3a8a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}

.payment-auth-open-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 0 15px;
    text-decoration: none;
    white-space: nowrap;
}

.payment-auth-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.payment-auth-status-card {
    display: grid;
    gap: 7px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
    padding: 14px;
}

.payment-auth-status-card span,
.payment-auth-status-card small {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
}

.payment-auth-status-card strong {
    color: #0f172a;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0;
}

.payment-auth-status-card.is-danger {
    border-color: #fecaca;
    background: #fff7f7;
}

.payment-auth-status-card.is-danger strong {
    color: #b91c1c;
}

.payment-auth-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
    gap: 16px;
    align-items: start;
}

.payment-auth-card {
    padding: 16px;
}

.payment-auth-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.payment-auth-steps.is-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.payment-auth-steps div {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    padding: 11px;
}

.payment-auth-steps b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
}

.payment-auth-steps span {
    color: #334155;
    font-size: 12px;
    line-height: 1.6;
}

.payment-auth-endpoint {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    padding: 11px 12px;
}

.payment-auth-endpoint span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.payment-auth-endpoint code {
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: 12px;
}

.payment-auth-snippet {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.payment-auth-snippet span {
    color: #334155;
    font-size: 12px;
    font-weight: 600;
}

.payment-auth-snippet textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #0f172a;
    color: #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.55;
    outline: none;
    padding: 12px;
    resize: vertical;
}

.payment-auth-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.payment-auth-form label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.payment-auth-form label.is-wide,
.payment-auth-actions {
    grid-column: 1 / -1;
}

.payment-auth-form label span {
    color: #334155;
    font-size: 12px;
    font-weight: 600;
}

.payment-auth-form input,
.payment-auth-form textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
    padding: 10px 12px;
}

.payment-auth-form textarea {
    min-height: 118px;
    resize: vertical;
}

.payment-auth-advanced {
    display: grid;
    gap: 11px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    padding: 11px 12px;
}

.payment-auth-advanced summary {
    cursor: pointer;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.payment-auth-advanced label {
    margin-top: 10px;
}

.payment-auth-form input:focus,
.payment-auth-form textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.payment-auth-actions {
    display: flex;
    justify-content: flex-end;
}

.payment-auth-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.payment-auth-metrics div,
.payment-auth-fingerprints div {
    display: grid;
    gap: 5px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    padding: 11px 12px;
}

.payment-auth-metrics span,
.payment-auth-fingerprints span {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.payment-auth-metrics strong,
.payment-auth-fingerprints strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
}

.payment-auth-fingerprints {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.payment-auth-table td:last-child {
    max-width: 520px;
}

html[data-theme="dark"] .payment-auth-hero,
html[data-theme="dark"] .payment-auth-card {
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

html[data-theme="dark"] .payment-auth-command,
html[data-theme="dark"] .payment-auth-status-card,
html[data-theme="dark"] .payment-auth-endpoint,
html[data-theme="dark"] .payment-auth-advanced {
    border-color: color-mix(in srgb, var(--line-strong) 72%, transparent);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}

html[data-theme="dark"] .payment-auth-command strong,
html[data-theme="dark"] .payment-auth-hero-side strong,
html[data-theme="dark"] .payment-auth-status-card strong,
html[data-theme="dark"] .payment-auth-endpoint code {
    color: var(--ink);
}

@media (max-width: 980px) {
    .payment-auth-grid,
    .payment-auth-steps,
    .payment-auth-steps.is-six,
    .payment-auth-status-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .payment-auth-hero,
    .payment-auth-command {
        display: grid;
    }

    .payment-auth-hero-side {
        justify-items: start;
    }

    .payment-auth-form,
    .payment-auth-metrics {
        grid-template-columns: 1fr;
    }
}

/* H5 模板编辑器：Phase 2 只读 state 工作台。 */
.h5-editor-readonly {
    display: grid;
    gap: 14px;
    min-width: 1120px;
}

.h5-editor-readonly-topbar,
.h5-editor-readonly-panel,
.h5-editor-readonly-preview-panel,
.h5-editor-readonly-inspector {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

.h5-editor-readonly-topbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}

.h5-editor-readonly-title,
.h5-editor-readonly-panel-head {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.h5-editor-readonly-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.h5-editor-readonly-panel-head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.h5-editor-readonly-panel-head button {
    min-height: 28px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
}

.h5-editor-readonly-panel-head button:disabled {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.h5-editor-readonly-title span,
.h5-editor-readonly-panel-head span {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

.h5-editor-readonly-title strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 18px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-readonly-panel-head strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

.h5-editor-readonly-statuses,
.h5-editor-readonly-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.h5-editor-readonly-statuses span,
.h5-editor-readonly-actions a,
.h5-editor-readonly-actions button {
    min-height: 32px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 650;
    padding: 7px 11px;
    text-decoration: none;
}

.h5-editor-readonly-statuses span:first-child {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.h5-editor-readonly-actions a {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.h5-editor-readonly-actions button {
    color: #94a3b8;
    cursor: not-allowed;
}

.h5-editor-readonly-actions button:not(:disabled) {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    cursor: pointer;
}

.h5-editor-readonly-actions button.is-primary:not(:disabled),
.h5-editor-readonly-actions button.is-dirty:not(:disabled) {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.h5-editor-readonly-statuses span.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}

.h5-editor-readonly-workbench {
    display: grid;
    grid-template-columns: 280px minmax(420px, 1fr) 360px;
    gap: 14px;
    align-items: start;
}

.h5-editor-readonly-left {
    display: grid;
    gap: 14px;
}

.h5-editor-readonly-panel,
.h5-editor-readonly-preview-panel,
.h5-editor-readonly-inspector {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.h5-editor-readonly-page-list,
.h5-editor-readonly-component-tree {
    display: grid;
    gap: 8px;
}

.h5-editor-page-row > button,
.h5-editor-tree-row > button {
    display: grid;
    gap: 4px;
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    padding: 10px 11px;
    text-align: left;
}

.h5-editor-page-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.h5-editor-tree-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    margin-left: calc(var(--level, 0) * 14px);
}

.h5-editor-page-row.is-hidden-page,
.h5-editor-tree-row.is-hidden-node {
    opacity: .62;
}

.h5-editor-page-row > button:hover,
.h5-editor-page-row.is-active > button,
.h5-editor-tree-row > button:hover,
.h5-editor-tree-row.is-active > button {
    border-color: #bfdbfe;
    background: #eff6ff;
    box-shadow: inset 3px 0 0 #2563eb;
}

.h5-editor-page-row > button {
    border-radius: 10px 10px 0 0;
}

.h5-editor-page-row:not(.is-active) > button {
    border-bottom-color: #f1f5f9;
}

.h5-editor-page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.h5-editor-page-head strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 13px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-page-head b {
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 10px;
    font-weight: 750;
    padding: 3px 7px;
    white-space: nowrap;
}

.h5-editor-page-row span,
.h5-editor-tree-row span {
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-page-row small,
.h5-editor-tree-row small {
    overflow: hidden;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-page-row.is-active span,
.h5-editor-page-row.is-active small {
    color: #1d4ed8;
}

.h5-editor-page-row.is-active .h5-editor-page-head strong {
    color: #1d4ed8;
}

.h5-editor-tree-row span em {
    display: inline-flex;
    border-radius: 4px;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    margin-left: 6px;
    padding: 1px 4px;
    vertical-align: 1px;
}

.h5-editor-page-actions,
.h5-editor-tree-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.h5-editor-page-actions {
    justify-content: space-between;
    gap: 4px;
    border: 1px solid #e5e7eb;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: #fff;
    padding: 6px;
}

.h5-editor-page-row.is-active .h5-editor-page-actions {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.h5-editor-page-actions button,
.h5-editor-tree-actions button {
    width: 22px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 0;
}

.h5-editor-page-actions button {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    height: 26px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 10px;
    padding: 0 5px;
    white-space: nowrap;
}

.h5-editor-page-actions button:hover,
.h5-editor-tree-actions button:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.h5-editor-page-actions button.is-danger,
.h5-editor-tree-actions button.is-danger {
    color: #ef4444;
}

.h5-editor-page-actions button.is-danger:hover,
.h5-editor-tree-actions button.is-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

.h5-editor-page-actions button:disabled,
.h5-editor-page-actions button:disabled:hover {
    background: transparent;
    color: #cbd5e1;
    cursor: not-allowed;
}

.h5-editor-page-actions button.is-danger:disabled,
.h5-editor-page-actions button.is-danger:disabled:hover {
    background: #fff;
    color: #fecaca;
}

.h5-editor-page-row i {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 20px;
    font-style: normal;
}

.h5-editor-page-row em {
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    padding: 3px 6px;
}

.h5-editor-page-row em.is-success {
    background: #ecfdf5;
    color: #15803d;
}

.h5-editor-page-row em.is-muted {
    background: #f1f5f9;
    color: #94a3b8;
}

.h5-editor-readonly-preview-panel {
    min-height: 720px;
}

.h5-editor-readonly-phone {
    justify-self: center;
    width: 375px;
    min-height: 667px;
    overflow: hidden;
    border: 10px solid #111827;
    border-radius: 34px;
    background: #f8fafc;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
}

.h5-preview-block {
    position: relative;
    border: 2px solid transparent;
    background: #fff;
}

.h5-preview-block.is-selected,
.h5-preview-entry-grid.is-selected,
.h5-preview-download-list.is-selected,
.h5-preview-entry-grid button.is-selected,
.h5-preview-download-list button.is-selected {
    border-color: #2563eb;
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .14);
}

.h5-preview-hero-image {
    display: block;
    width: 100%;
    height: 148px;
    object-fit: cover;
}

.h5-preview-long-image {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    object-position: top center;
}

.h5-preview-block span {
    position: absolute;
    left: 10px;
    bottom: 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
}

.h5-preview-entry-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 10px;
    border: 2px solid transparent;
    background: #fff;
    padding: 22px 16px;
}

.h5-preview-entry-grid button {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    padding: 10px 6px;
}

.h5-preview-entry-icon {
    display: grid;
    place-items: center;
    border: 1.6px solid #145fc9;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.h5-preview-entry-icon img,
.h5-preview-entry-icon i {
    display: block;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    object-fit: contain;
}

.h5-preview-entry-icon i {
    border-radius: 999px;
    background: #e8f3f6;
}

.h5-preview-entry-grid strong,
.h5-preview-entry-grid small,
.h5-preview-entry-grid em {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-preview-entry-grid strong {
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
}

.h5-preview-entry-grid small,
.h5-preview-entry-grid em {
    color: #64748b;
    font-size: 9px;
    font-style: normal;
    font-weight: 500;
}

.h5-preview-download-list,
.h5-preview-config {
    display: grid;
    gap: 10px;
    border: 2px solid transparent;
    background: #fff;
    padding: 18px;
}

.h5-preview-download-list > strong,
.h5-preview-config strong {
    color: #0f172a;
    font-size: 15px;
    font-weight: 750;
}

.h5-preview-download-list button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #0f172a;
    cursor: pointer;
    padding: 10px;
    text-align: left;
}

.h5-preview-download-list.is-plain button {
    border-width: 0 0 1px;
    border-radius: 0;
    background: #fff;
    padding: 9px 2px;
}

.h5-preview-download-list span {
    overflow: hidden;
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-preview-download-list em {
    color: #1d4ed8;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.h5-preview-config span {
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

.h5-editor-readonly-inspector {
    max-height: 780px;
    overflow: auto;
}

.h5-editor-readonly-object {
    display: grid;
    gap: 4px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
    padding: 12px;
}

.h5-editor-readonly-object strong {
    color: #1e3a8a;
    font-size: 16px;
    font-weight: 750;
}

.h5-editor-readonly-object span {
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 650;
}

.h5-editor-page-panel {
    display: grid;
    gap: 12px;
}

.h5-editor-page-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
    padding: 12px;
}

.h5-editor-page-panel-head div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.h5-editor-page-panel-head span {
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
}

.h5-editor-page-panel-head strong {
    overflow: hidden;
    color: #1e3a8a;
    font-size: 16px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-page-panel-head em,
.h5-editor-page-status-list em {
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    padding: 4px 8px;
    white-space: nowrap;
}

.h5-editor-page-panel-head em.is-success,
.h5-editor-page-status-list em.is-success {
    background: #ecfdf5;
    color: #15803d;
}

.h5-editor-page-panel-head em.is-warning,
.h5-editor-page-status-list em.is-warning {
    background: #fffbeb;
    color: #b45309;
}

.h5-editor-page-card,
.h5-editor-page-advanced {
    display: grid;
    gap: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: 12px;
}

.h5-editor-page-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.h5-editor-page-card-title strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 750;
}

.h5-editor-page-card-title span {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}

.h5-editor-page-field {
    display: grid;
    gap: 7px;
}

.h5-editor-page-field > span,
.h5-editor-page-custom-select > span {
    color: #334155;
    font-size: 12px;
    font-weight: 650;
}

.h5-editor-page-field input,
.h5-editor-page-route-box input {
    width: 100%;
    min-height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font-size: 12px;
    font-weight: 500;
    padding: 0 10px;
}

.h5-editor-page-field input[readonly],
.h5-editor-page-route-box input[readonly] {
    background: #f8fafc;
    color: #64748b;
}

.h5-editor-page-field input:focus,
.h5-editor-page-route-box input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    outline: 0;
}

.h5-editor-page-switch-row {
    display: grid;
    gap: 7px;
}

.h5-editor-page-switch-row em {
    color: #94a3b8;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.45;
}

.h5-editor-page-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    border-radius: 8px;
    background: #f1f5f9;
    padding: 4px;
}

.h5-editor-page-toggle button {
    min-height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.h5-editor-page-toggle button.is-active {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

.h5-editor-page-toggle button.is-active.is-warning {
    background: #f59e0b;
}

.h5-editor-page-toggle button:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.h5-editor-page-route-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 34px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.h5-editor-page-route-box b,
.h5-editor-page-route-box i {
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-style: normal;
    font-weight: 650;
    white-space: nowrap;
}

.h5-editor-page-route-box b {
    overflow: hidden;
    max-width: 136px;
    padding-left: 10px;
    text-overflow: ellipsis;
}

.h5-editor-page-route-box i {
    padding-right: 10px;
}

.h5-editor-page-route-box input {
    min-height: 32px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    padding: 0 4px;
}

.h5-editor-page-route-box input:focus {
    box-shadow: none;
}

.h5-editor-page-card p {
    margin: 0;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}

.h5-editor-page-status-list {
    display: grid;
    gap: 8px;
}

.h5-editor-page-status-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    background: #f8fafc;
    padding: 8px;
}

.h5-editor-page-status-list span {
    color: #475569;
    font-size: 12px;
    font-weight: 650;
}

.h5-editor-page-advanced {
    padding: 0;
    overflow: hidden;
}

.h5-editor-page-advanced summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    padding: 11px 12px;
}

.h5-editor-page-advanced summary::-webkit-details-marker {
    display: none;
}

.h5-editor-page-advanced summary span {
    color: #334155;
    font-size: 13px;
    font-weight: 750;
}

.h5-editor-page-advanced summary i {
    color: #94a3b8;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
}

.h5-editor-page-advanced-body {
    display: grid;
    gap: 12px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    padding: 12px;
}

.h5-editor-page-custom-select {
    display: grid;
    gap: 7px;
}

.h5-editor-page-custom-select button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    padding: 0 10px;
}

.h5-editor-page-custom-select strong {
    font-size: 12px;
    font-weight: 700;
}

.h5-editor-page-custom-select em {
    color: #94a3b8;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.h5-editor-page-overview {
    display: grid;
    gap: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: 12px;
}

.h5-editor-page-overview-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.h5-editor-page-overview-head div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.h5-editor-page-overview-head span {
    color: #64748b;
    font-size: 11px;
    font-weight: 650;
}

.h5-editor-page-overview-head strong {
    overflow: hidden;
    color: #111827;
    font-size: 14px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-page-overview-head em {
    border-radius: 999px;
    background: #ecfdf5;
    color: #15803d;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    padding: 4px 8px;
}

.h5-editor-page-status-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    padding: 8px;
}

.h5-editor-page-status-strip span {
    overflow: hidden;
    color: #64748b;
    font-size: 11px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-page-status-strip span.is-warning {
    color: #b45309;
}

.h5-editor-page-status-strip button {
    min-height: 26px;
    border: 1px solid #2563eb;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 0 9px;
}

.h5-editor-page-status-strip button:disabled {
    border-color: #e5e7eb;
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

.h5-editor-page-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.h5-editor-page-meta-grid span {
    display: grid;
    min-width: 0;
    gap: 2px;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    background: #f8fafc;
    padding: 8px;
}

.h5-editor-page-meta-grid b {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
}

.h5-editor-page-meta-grid em {
    overflow: hidden;
    color: #334155;
    font-size: 11px;
    font-style: normal;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-page-notices {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h5-editor-page-notices li {
    display: grid;
    gap: 2px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
    padding: 8px 9px;
}

.h5-editor-page-notices li.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.h5-editor-page-notices li.is-danger {
    border-color: #fecaca;
    background: #fef2f2;
}

.h5-editor-page-notices strong {
    color: #334155;
    font-size: 12px;
    font-weight: 750;
}

.h5-editor-page-notices li.is-warning strong {
    color: #b45309;
}

.h5-editor-page-notices li.is-danger strong {
    color: #dc2626;
}

.h5-editor-page-notices span {
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}

.h5-editor-property-tabs {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    gap: 0;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.h5-editor-property-tabs button {
    min-width: 0;
    flex: 1 1 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
    padding: 10px 4px 9px;
}

.h5-editor-property-tabs button.is-active {
    border-bottom-color: #2563eb;
    color: #2563eb;
}

.h5-editor-readonly-tab {
    display: none;
    gap: 10px;
    margin-top: 10px;
    border: 0;
    border-radius: 0;
    background: #fff;
    padding: 14px 0 4px;
}

.h5-editor-readonly-tab.is-active {
    display: grid;
}

.h5-editor-readonly-tab > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.h5-editor-readonly-tab strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 750;
}

.h5-editor-readonly-tab em,
.h5-editor-readonly-tab p {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
}

.h5-editor-readonly-tab label {
    display: grid;
    gap: 6px;
}

.h5-editor-readonly-tab label span {
    color: #334155;
    font-size: 12px;
    font-weight: 650;
}

.h5-editor-readonly-tab input,
.h5-editor-readonly-tab textarea {
    width: 100%;
    min-height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 12px;
    font-weight: 500;
    padding: 0 10px;
}

.h5-editor-readonly-tab textarea {
    min-height: 72px;
    padding: 9px 10px;
    resize: vertical;
}

.h5-editor-readonly-tab input:not([readonly]),
.h5-editor-readonly-tab textarea:not([readonly]) {
    background: #fff;
}

.h5-editor-readonly-tab input:not([readonly]):focus,
.h5-editor-readonly-tab textarea:not([readonly]):focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    outline: 0;
}

.h5-editor-route-field small {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
}

.h5-editor-route-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-height: 34px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
}

.h5-editor-route-control b {
    overflow: hidden;
    max-width: 136px;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    padding-left: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-readonly-tab .h5-editor-route-control input {
    min-height: 32px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    padding-left: 4px;
}

.h5-editor-readonly-tab .h5-editor-route-control input:focus {
    box-shadow: none;
}

.h5-editor-field {
    display: grid;
    gap: 7px;
}

.h5-editor-field > span {
    color: #334155;
    font-size: 12px;
    font-weight: 650;
}

.h5-editor-layout-group {
    display: grid;
    gap: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    padding: 13px;
}

.h5-editor-layout-group-title {
    display: grid;
    gap: 3px;
}

.h5-editor-layout-group-title strong {
    color: #334155;
    font-size: 13px;
    font-weight: 650;
}

.h5-editor-layout-group-title span {
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.45;
}

.h5-editor-layout-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
}

.h5-editor-layout-field.is-wide {
    grid-column: 1 / -1;
}

.h5-editor-layout-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.h5-editor-layout-field-head span {
    color: #334155;
    font-size: 12px;
    font-weight: 650;
}

.h5-editor-layout-field-head em {
    color: #94a3b8;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.h5-editor-segmented-control {
    display: flex;
    width: 100%;
    border-radius: 6px;
    background: #f1f5f9;
    padding: 2px;
}

.h5-editor-segmented-control button {
    min-width: 0;
    flex: 1 1 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    padding: 7px 4px;
    white-space: nowrap;
}

.h5-editor-segmented-control button.is-active {
    background: #fff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .1);
}

.h5-editor-segmented-control button:disabled {
    cursor: not-allowed;
    opacity: .62;
}

.h5-editor-slider-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px;
    align-items: center;
    gap: 10px;
}

.h5-editor-slider-control input[type="range"] {
    width: 100%;
    min-height: auto;
    accent-color: #2563eb;
    cursor: pointer;
    padding: 0;
}

.h5-editor-slider-control input[type="number"],
.h5-editor-mini-number input {
    min-height: 32px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
    font-size: 12px;
    font-weight: 500;
    padding: 0 8px;
}

.h5-editor-slider-control input[type="number"] {
    text-align: center;
}

.h5-editor-mini-number {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    padding: 0 7px;
}

.h5-editor-mini-number em,
.h5-editor-mini-number b {
    color: #94a3b8;
    font-size: 11px;
    font-style: normal;
    font-weight: 650;
}

.h5-editor-mini-number input {
    border: 0;
    border-radius: 0;
    padding: 0;
}

.h5-editor-slider-control input[type="number"]:focus,
.h5-editor-mini-number:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    outline: 0;
}

.h5-editor-choice-row,
.h5-editor-choice-grid,
.h5-editor-asset-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.h5-editor-choice-row button,
.h5-editor-choice-grid button,
.h5-editor-asset-grid button {
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
    padding: 7px 10px;
}

.h5-editor-choice-row button.is-active,
.h5-editor-choice-grid button.is-active,
.h5-editor-asset-grid button.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.h5-editor-choice-row button:disabled,
.h5-editor-choice-grid button:disabled,
.h5-editor-asset-grid button:disabled {
    cursor: not-allowed;
    opacity: .62;
}

.h5-editor-asset-grid {
    max-height: 188px;
    overflow: auto;
}

.h5-editor-asset-grid button {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    border-radius: 9px;
    text-align: left;
}

.h5-editor-asset-grid img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
}

.h5-editor-asset-grid span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-upload-row {
    display: grid;
    gap: 6px;
}

.h5-editor-upload-row label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-height: 30px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 0 12px;
}

.h5-editor-upload-row label.is-disabled {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.h5-editor-upload-row input {
    display: none;
}

.h5-editor-upload-row small {
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.5;
}

.h5-editor-image-current {
    display: grid;
    gap: 8px;
    border: 1px dashed #d9d9d9;
    border-radius: 8px;
    background: #fafafa;
    padding: 10px;
}

.h5-editor-image-current strong {
    color: #334155;
    font-size: 12px;
    font-weight: 650;
}

.h5-editor-image-current img {
    display: block;
    width: 100%;
    max-height: 118px;
    border-radius: 4px;
    object-fit: contain;
    background: #f1f5f9;
}

.h5-editor-image-current code {
    max-height: 42px;
    overflow: auto;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #f5f5f5;
    color: #64748b;
    font-size: 11px;
    line-height: 1.4;
    padding: 6px 8px;
    word-break: break-all;
}

.h5-editor-image-current em {
    color: #94a3b8;
    font-size: 12px;
    font-style: normal;
}

.h5-editor-file-picker {
    display: grid;
    gap: 10px;
}

.h5-editor-file-current {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    padding: 10px;
}

.h5-editor-file-current.is-empty {
    border-style: dashed;
    grid-template-columns: 38px minmax(0, 1fr);
}

.h5-editor-file-current b,
.h5-editor-file-list b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 26px;
    border-radius: 5px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 9px;
    font-weight: 800;
}

.h5-editor-file-current div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.h5-editor-file-current strong,
.h5-editor-file-current em,
.h5-editor-file-list span,
.h5-editor-file-list em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-file-current strong {
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
}

.h5-editor-file-current em,
.h5-editor-file-list em {
    color: #94a3b8;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
}

.h5-editor-file-current button {
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #fff;
    color: #dc2626;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 8px;
}

.h5-editor-file-upload {
    display: grid;
    gap: 6px;
}

.h5-editor-file-upload label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1d4ed8;
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
}

.h5-editor-file-upload input {
    display: none;
}

.h5-editor-file-upload small {
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.45;
}

.h5-editor-file-upload.is-disabled label {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.h5-editor-file-picker.is-compact {
    gap: 8px;
}

.h5-editor-file-resource-drawer {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.h5-editor-file-resource-drawer summary {
    cursor: pointer;
    list-style: none;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 10px;
}

.h5-editor-file-resource-drawer summary::-webkit-details-marker {
    display: none;
}

.h5-editor-file-resource-drawer summary::after {
    content: "";
    float: right;
    width: 6px;
    height: 6px;
    margin-top: 3px;
    border-right: 1px solid #94a3b8;
    border-bottom: 1px solid #94a3b8;
    transform: rotate(45deg);
}

.h5-editor-file-resource-drawer[open] summary {
    border-bottom: 1px solid #f1f5f9;
}

.h5-editor-file-resource-drawer[open] summary::after {
    margin-top: 6px;
    transform: rotate(225deg);
}

.h5-editor-file-resource-drawer .h5-editor-file-list,
.h5-editor-file-resource-drawer .h5-editor-file-link {
    margin: 10px;
}

.h5-editor-file-list {
    display: grid;
    gap: 5px;
    max-height: 168px;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    padding: 6px;
}

.h5-editor-file-list p {
    margin: 0;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.5;
}

.h5-editor-file-list button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    padding: 8px;
    text-align: left;
}

.h5-editor-file-list button.is-active {
    border-color: #2563eb;
    background: #eff6ff;
}

.h5-editor-file-list span {
    color: #334155;
    font-size: 12px;
    font-weight: 650;
}

.h5-editor-file-link {
    display: grid;
    gap: 6px;
}

.h5-editor-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .42);
    color: #1f2937;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.h5-editor-modal {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .18);
}

.h5-editor-modal.is-new-page {
    width: 560px;
}

.h5-editor-modal.is-component-library {
    display: flex;
    flex-direction: column;
    width: 680px;
    max-height: 540px;
}

.h5-editor-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1f5f9;
    padding: 14px 18px;
}

.h5-editor-modal-head strong {
    color: #111827;
    font-size: 15px;
    font-weight: 700;
}

.h5-editor-modal-title {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.h5-editor-modal-title span {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

.h5-editor-modal-head button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.h5-editor-modal-head button:hover {
    background: #f8fafc;
    color: #475569;
}

.h5-editor-modal-form {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 22px 24px 18px;
}

.h5-editor-modal-field {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.h5-editor-modal-field > label {
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    line-height: 34px;
    text-align: right;
}

.h5-editor-modal-field label em {
    color: #ef4444;
    font-style: normal;
    margin-right: 4px;
}

.h5-editor-modal-field input[type="text"],
.h5-editor-modal-field input:not([type]) {
    width: 100%;
    min-height: 34px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff;
    color: #0f172a;
    font-size: 13px;
    padding: 0 10px;
}

.h5-editor-modal-field input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    outline: 0;
}

.h5-editor-radio-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.h5-editor-radio-grid label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.h5-editor-modal-note {
    display: grid;
    gap: 3px;
    margin-top: 8px;
    border-radius: 4px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 10px;
}

.h5-editor-modal-field small,
.h5-editor-modal-field p {
    display: block;
    margin: 5px 0 0;
    color: #94a3b8;
    font-size: 12px;
}

.h5-editor-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid #f1f5f9;
    padding: 12px 18px;
}

.h5-editor-modal-foot button {
    min-height: 32px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-size: 13px;
    font-weight: 650;
    padding: 0 15px;
}

.h5-editor-modal-foot button.is-primary {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.h5-editor-library-tip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    line-height: 1.5;
    padding: 12px 18px;
}

.h5-editor-library-tip div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.h5-editor-library-tip b {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
}

.h5-editor-library-tip strong {
    overflow: hidden;
    color: #334155;
    font-size: 13px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-library-tip strong em {
    color: #cbd5e1;
    font-style: normal;
    padding: 0 6px;
}

.h5-editor-library-tip span,
.h5-editor-library-tip p {
    margin: 0;
    color: #64748b;
    font-size: 11px;
}

.h5-editor-library-tip p {
    border-radius: 6px;
    background: #fff;
    padding: 6px 8px;
}

.h5-editor-library-body {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    min-height: 360px;
    overflow: hidden;
}

.h5-editor-library-cats {
    border-right: 1px solid #f1f5f9;
    background: #fafafa;
    padding: 8px 0;
}

.h5-editor-library-cats button {
    width: 100%;
    border: 0;
    border-right: 2px solid transparent;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 16px;
    text-align: left;
}

.h5-editor-library-cats button.is-active {
    border-right-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.h5-editor-library-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 8px;
    overflow: auto;
    padding: 14px 16px;
}

.h5-editor-library-grid article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    padding: 12px 14px;
}

.h5-editor-library-grid article:hover {
    border-color: #cbd5e1;
    background: #fafbfc;
}

.h5-editor-library-grid article.is-disabled {
    border-color: #f1f5f9;
    background: #f8fafc;
}

.h5-editor-library-card-main {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.h5-editor-library-grid strong {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
}

.h5-editor-library-grid strong em {
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 10px;
    font-style: normal;
    font-weight: 750;
    padding: 2px 6px;
}

.h5-editor-library-grid p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.h5-editor-library-grid small {
    color: #94a3b8;
    font-size: 11px;
}

.h5-editor-library-grid mark {
    justify-self: start;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
}

.h5-editor-library-grid article.is-disabled strong,
.h5-editor-library-grid article.is-disabled p,
.h5-editor-library-grid article.is-disabled small,
.h5-editor-library-grid article.is-disabled strong em {
    color: #94a3b8;
}

.h5-editor-library-grid article.is-disabled strong em {
    background: #f1f5f9;
}

.h5-editor-library-grid button {
    min-width: 76px;
    min-height: 30px;
    border: 0;
    border-radius: 6px;
    background: #eff6ff;
    color: #2563eb;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 0 12px;
}

.h5-editor-library-grid button:hover {
    background: #dbeafe;
}

.h5-editor-library-grid button:disabled {
    border: 1px solid #d9d9d9;
    background: #f1f5f9;
    color: #cbd5e1;
    cursor: not-allowed;
}

@media (max-width: 1280px) {
    .h5-editor-readonly-workbench {
        grid-template-columns: 260px minmax(390px, 1fr) 330px;
    }
}

/* H5 模板编辑器：沿用 plt-editor-review-v10 的全屏工作台视觉，只覆盖外观不改功能。 */
.h5-editor-readonly {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 1320px;
    height: calc(100vh - 116px);
    min-height: 760px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    color: #1e293b;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.h5-editor-fullscreen-page {
    overflow: hidden;
    background: #f8fafc;
}

.h5-editor-fullscreen-page .admin-shell {
    display: block;
    min-height: 100vh;
}

.h5-editor-fullscreen-page .sidebar,
.h5-editor-fullscreen-page .topbar {
    display: none;
}

.h5-editor-fullscreen-page .workspace,
.h5-editor-fullscreen-page .content {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    background: #f8fafc;
}

.h5-editor-fullscreen-page .content {
    height: 100vh;
    overflow: hidden;
    padding: 0;
}

.h5-editor-fullscreen-page .h5-editor-readonly {
    width: 100vw;
    height: 100vh;
    min-height: 0;
    border: 0;
    border-radius: 0;
}

.h5-template-editor-native-page {
    overflow: hidden;
}

.h5-template-editor-native-page .admin-shell {
    min-height: 0;
    height: 100vh;
}

.h5-template-editor-native-page .admin-shell > .workspace {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100vh;
    overflow: hidden;
}

.h5-template-editor-native-page .admin-shell > .workspace > .topbar {
    flex: 0 0 auto;
}

.h5-template-editor-native-page .admin-shell > .workspace > .content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #f1f5f9;
}

.h5-editor-readonly-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    flex: 0 0 56px;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    padding: 0 24px;
}

.h5-editor-readonly-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.h5-editor-readonly-title::before {
    content: "会";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #2563eb;
    box-shadow: 0 10px 20px rgba(37, 99, 235, .18);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
}

.h5-editor-readonly-title span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.h5-editor-readonly-title strong {
    max-width: 360px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

.h5-editor-readonly-statuses {
    margin-left: auto;
}

.h5-editor-readonly-statuses span,
.h5-editor-readonly-actions a,
.h5-editor-readonly-actions button {
    min-height: 28px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 650;
    padding: 5px 10px;
}

.h5-editor-readonly-statuses span {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #64748b;
}

.h5-editor-readonly-statuses span:first-child {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.h5-editor-readonly-actions {
    gap: 10px;
}

.h5-editor-readonly-actions button:not(:disabled) {
    border-color: #e2e8f0;
    background: #fff;
    color: #334155;
}

.h5-editor-readonly-actions button:not(:disabled):hover,
.h5-editor-readonly-actions a:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.h5-editor-readonly-actions button:nth-of-type(2):not(:disabled) {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .12);
}

.h5-editor-readonly-actions a {
    border-color: #e2e8f0;
    background: #fff;
    color: #334155;
}

.h5-editor-readonly-workbench {
    display: grid;
    grid-template-columns: 320px minmax(520px, 1fr) 360px;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
    align-items: stretch;
}

.h5-editor-readonly-left {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 0;
    gap: 0;
    border-right: 1px solid #e2e8f0;
    background: #fff;
}

.h5-editor-readonly-left .h5-editor-readonly-panel:first-child {
    border-bottom: 1px solid #f1f5f9;
}

.h5-editor-readonly-panel,
.h5-editor-readonly-preview-panel,
.h5-editor-readonly-inspector {
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.h5-editor-readonly-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    padding: 0;
}

.h5-editor-readonly-panel-head {
    min-height: 56px;
    flex: 0 0 auto;
    padding: 0 16px;
}

.h5-editor-readonly-panel-head > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.h5-editor-readonly-panel-head strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

.h5-editor-readonly-panel-head span {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
}

.h5-editor-readonly-panel-head button {
    min-height: 26px;
    border-color: #dbeafe;
    border-radius: 6px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
}

.h5-editor-readonly-page-list,
.h5-editor-readonly-component-tree {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    gap: 4px;
    padding: 0 8px 16px;
}

.h5-editor-page-row > button,
.h5-editor-tree-row > button {
    border-color: transparent;
    border-radius: 8px;
    background: transparent;
    padding: 9px 10px;
}

.h5-editor-page-row > button:hover,
.h5-editor-page-row.is-active > button,
.h5-editor-tree-row > button:hover,
.h5-editor-tree-row.is-active > button {
    border-color: #dbeafe;
    background: #eff6ff;
    box-shadow: none;
}

.h5-editor-page-row > button {
    border-radius: 8px;
}

.h5-editor-page-actions {
    display: none;
    margin: -3px 8px 6px;
    border: 0;
    border-radius: 8px;
    background: #f8fafc;
    padding: 4px;
}

.h5-editor-page-row.is-active .h5-editor-page-actions,
.h5-editor-page-row:hover .h5-editor-page-actions {
    display: flex;
}

.h5-editor-tree-actions {
    align-self: center;
    opacity: .35;
    transition: opacity .15s ease;
}

.h5-editor-tree-row:hover .h5-editor-tree-actions,
.h5-editor-tree-row.is-active .h5-editor-tree-actions {
    opacity: 1;
}

.h5-editor-readonly-preview-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-right: 1px solid #e2e8f0;
    background: #f1f5f9;
    padding: 0;
}

.h5-editor-readonly-preview-panel > .h5-editor-readonly-panel-head {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(8px);
}

.h5-editor-readonly-phone {
    align-self: center;
    justify-self: center;
    width: 360px;
    min-height: 720px;
    max-height: calc(100vh - 210px);
    border: 10px solid #0f172a;
    border-radius: 40px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .26);
}

.h5-editor-readonly-inspector {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: none;
    overflow: hidden;
    background: #fff;
    padding: 0;
}

.h5-editor-readonly-inspector > .h5-editor-readonly-panel-head {
    display: grid;
    min-height: auto;
    gap: 3px;
    border-bottom: 1px solid #f1f5f9;
    padding: 14px 16px;
}

.h5-editor-readonly-inspector > .h5-editor-readonly-panel-head strong {
    font-size: 16px;
}

.h5-editor-readonly-inspector > .h5-editor-readonly-panel-head span {
    color: #64748b;
    font-size: 12px;
}

.h5-editor-readonly-inspector [data-h5-property-panel] {
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 18px;
}

.h5-editor-inspector-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -2px 0 2px;
}

.h5-editor-inspector-steps span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    padding: 0 9px;
}

.h5-editor-inspector-steps span.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.h5-editor-section-tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: -14px -16px 10px;
}

.h5-editor-section-pane {
    display: none;
    gap: 10px;
}

.h5-editor-section-pane.is-active {
    display: grid;
}

.h5-editor-tabbed-panel > .is-pane-common,
.h5-editor-tabbed-panel > .is-pane-appearance,
.h5-editor-tabbed-panel > .is-pane-action,
.h5-editor-tabbed-panel > .is-pane-layout,
.h5-editor-tabbed-panel > .h5-editor-grid-advanced,
.h5-editor-tabbed-panel > .is-pane-advanced,
.h5-editor-tabbed-panel > .h5-editor-grid-notices,
.h5-editor-tabbed-panel > .h5-editor-entry-notices,
.h5-editor-tabbed-panel > .h5-editor-image-notices,
.h5-editor-tabbed-panel > .h5-editor-download-notices,
.h5-editor-tabbed-panel > .h5-editor-page-notices {
    display: none;
}

.h5-editor-tabbed-panel.is-tab-0 > .is-pane-common,
.h5-editor-tabbed-panel.is-tab-1 > .is-pane-appearance,
.h5-editor-tabbed-panel.is-tab-2 > .is-pane-action {
    display: grid;
}

.h5-editor-tabbed-panel.is-tab-3 > .is-pane-layout {
    display: block;
}

.h5-editor-tabbed-panel.is-tab-3 > div.is-pane-layout {
    display: grid;
    gap: 10px;
}

.h5-editor-tabbed-panel.is-tab-4 > .h5-editor-grid-advanced {
    display: block;
}

.h5-editor-tabbed-panel.is-tab-4 > .is-pane-advanced {
    display: block;
}

.h5-editor-tabbed-panel.is-tab-4 > .h5-editor-grid-notices,
.h5-editor-tabbed-panel.is-tab-4 > .h5-editor-entry-notices,
.h5-editor-tabbed-panel.is-tab-4 > .h5-editor-image-notices,
.h5-editor-tabbed-panel.is-tab-4 > .h5-editor-download-notices,
.h5-editor-tabbed-panel.is-tab-4 > .h5-editor-page-notices {
    display: grid;
}

.h5-editor-section-muted {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
}

.h5-editor-readonly [data-h5-property-panel] .h5-editor-entry-panel,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-image-panel,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-grid-panel,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-download-panel {
    gap: 10px;
}

.h5-editor-readonly [data-h5-property-panel] .h5-editor-entry-head,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-image-head,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-grid-head,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-download-head,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-page-panel-head {
    border-color: #e0ecff;
    background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
    padding: 11px 12px;
}

.h5-editor-readonly [data-h5-property-panel] .h5-editor-entry-card,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-image-card,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-grid-card,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-download-card,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-page-card {
    border-color: #edf2f7;
    background: #fbfdff;
    padding: 11px 12px;
}

.h5-editor-readonly [data-h5-property-panel] .h5-editor-entry-card:first-of-type,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-image-card:first-of-type,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-grid-card:first-of-type,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-download-card:first-of-type,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-page-card:first-of-type {
    border-color: #dbeafe;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}

.h5-editor-readonly [data-h5-property-panel] .h5-editor-entry-card-title strong,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-image-card-title strong,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-grid-card-title strong,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-download-card-title strong,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-page-card-title strong {
    font-size: 12px;
    font-weight: 700;
}

.h5-editor-readonly [data-h5-property-panel] .h5-editor-entry-card-title span,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-image-card-title span,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-grid-card-title span,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-download-card-title span,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-page-card-title span {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
}

.h5-editor-readonly [data-h5-property-panel] .h5-editor-entry-advanced,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-image-advanced,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-grid-advanced,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-download-advanced,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-page-advanced {
    border-color: #edf2f7;
    background: #f8fafc;
}

.h5-editor-property-tabs {
    margin: 0 -16px 12px;
    border-bottom-color: #f1f5f9;
    background: #f8fafc;
    padding: 0 8px;
}

.h5-editor-property-tabs button {
    padding: 10px 4px;
    font-size: 12px;
    font-weight: 650;
}

.h5-editor-readonly-tab {
    padding-top: 4px;
}

.h5-editor-readonly-object,
.h5-editor-page-panel-head {
    border-color: #dbeafe;
    background: #eff6ff;
}

.h5-editor-page-card,
.h5-editor-page-advanced,
.h5-editor-entry-card,
.h5-editor-entry-advanced,
.h5-editor-layout-group,
.h5-editor-image-current,
.h5-editor-file-current,
.h5-editor-file-upload,
.h5-editor-file-list button {
    border-color: #e2e8f0;
    border-radius: 10px;
}

.h5-editor-modal {
    border-color: #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 22px 70px rgba(15, 23, 42, .18);
}

.h5-editor-entry-panel {
    display: grid;
    gap: 12px;
}

.h5-editor-entry-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #eff6ff;
    padding: 12px;
}

.h5-editor-entry-head div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.h5-editor-entry-head span {
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
}

.h5-editor-entry-head strong {
    overflow: hidden;
    color: #1e3a8a;
    font-size: 16px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-entry-head em {
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    padding: 4px 8px;
    white-space: nowrap;
}

.h5-editor-entry-head em.is-success {
    background: #ecfdf5;
    color: #15803d;
}

.h5-editor-entry-head em.is-warning {
    background: #fffbeb;
    color: #b45309;
}

.h5-editor-entry-card,
.h5-editor-entry-advanced {
    display: grid;
    gap: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 12px;
}

.h5-editor-entry-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.h5-editor-entry-card-title strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 750;
}

.h5-editor-entry-card-title span {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}

.h5-editor-entry-field {
    display: grid;
    gap: 7px;
}

.h5-editor-entry-field > span,
.h5-editor-entry-visibility > span,
.h5-editor-entry-sort > span {
    color: #334155;
    font-size: 12px;
    font-weight: 650;
}

.h5-editor-entry-field input {
    width: 100%;
    min-height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font-size: 12px;
    font-weight: 500;
    padding: 0 10px;
}

.h5-editor-entry-field input[readonly] {
    background: #f8fafc;
    color: #64748b;
}

.h5-editor-entry-field input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    outline: 0;
}

.h5-editor-entry-icon-current {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    padding: 9px;
}

.h5-editor-entry-icon-current img,
.h5-editor-entry-icon-current b {
    width: 42px;
    height: 42px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
}

.h5-editor-entry-icon-current b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 750;
}

.h5-editor-entry-icon-current div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.h5-editor-entry-icon-current strong,
.h5-editor-entry-icon-current span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-entry-icon-current strong {
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
}

.h5-editor-entry-icon-current span {
    color: #64748b;
    font-size: 11px;
}

.h5-editor-entry-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-height: 190px;
    overflow-y: auto;
}

.h5-editor-entry-icon-grid button {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-size: 10px;
    font-weight: 650;
    padding: 8px 5px;
}

.h5-editor-entry-icon-grid button.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.h5-editor-entry-icon-grid button:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.h5-editor-entry-icon-grid img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.h5-editor-entry-icon-grid span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-entry-action-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    border-radius: 8px;
    background: #f1f5f9;
    padding: 4px;
}

.h5-editor-entry-action-tabs button {
    min-height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 0 4px;
}

.h5-editor-entry-action-tabs button.is-active {
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

.h5-editor-entry-action-tabs button.is-warning.is-active {
    color: #b45309;
}

.h5-editor-entry-action-tabs button:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.h5-editor-entry-page-options {
    display: grid;
    gap: 7px;
}

.h5-editor-entry-page-options button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
    padding: 0 10px;
}

.h5-editor-entry-page-options button.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.h5-editor-entry-page-options button.is-hidden-target {
    border-color: #fde68a;
    background: #fffbeb;
}

.h5-editor-entry-page-options em {
    color: #94a3b8;
    font-size: 10px;
    font-style: normal;
}

.h5-editor-entry-advanced {
    padding: 0;
    overflow: hidden;
}

.h5-editor-entry-advanced summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    padding: 11px 12px;
}

.h5-editor-entry-advanced summary::-webkit-details-marker {
    display: none;
}

.h5-editor-entry-advanced summary span {
    color: #334155;
    font-size: 13px;
    font-weight: 750;
}

.h5-editor-entry-advanced summary i {
    color: #94a3b8;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
}

.h5-editor-entry-advanced-body {
    display: grid;
    gap: 12px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    padding: 12px;
}

.h5-editor-entry-visibility,
.h5-editor-entry-sort {
    display: grid;
    gap: 7px;
}

.h5-editor-entry-visibility .h5-editor-entry-action-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.h5-editor-entry-sort div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.h5-editor-entry-sort button {
    min-height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.h5-editor-entry-sort button:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.h5-editor-entry-notices {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h5-editor-entry-notices li {
    display: grid;
    gap: 3px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
    padding: 9px 10px;
}

.h5-editor-entry-notices li.is-info {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.h5-editor-entry-notices li.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.h5-editor-entry-notices li.is-danger {
    border-color: #fecaca;
    background: #fef2f2;
}

.h5-editor-entry-notices li.is-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.h5-editor-entry-notices strong {
    color: #334155;
    font-size: 12px;
    font-weight: 750;
}

.h5-editor-entry-notices span {
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}

.h5-editor-image-panel {
    display: grid;
    gap: 12px;
}

.h5-editor-image-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #eff6ff;
    padding: 12px;
}

.h5-editor-image-head div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.h5-editor-image-head span {
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
}

.h5-editor-image-head strong {
    overflow: hidden;
    color: #1e3a8a;
    font-size: 16px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-image-head em {
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    padding: 4px 8px;
    white-space: nowrap;
}

.h5-editor-image-head em.is-success {
    background: #ecfdf5;
    color: #15803d;
}

.h5-editor-image-head em.is-warning {
    background: #fffbeb;
    color: #b45309;
}

.h5-editor-image-card,
.h5-editor-image-advanced {
    display: grid;
    gap: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    padding: 12px;
}

.h5-editor-image-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.h5-editor-image-card-title strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 750;
}

.h5-editor-image-card-title span {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}

.h5-editor-image-resource {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    overflow: hidden;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    padding: 9px;
}

.h5-editor-image-resource img,
.h5-editor-image-resource b {
    width: 76px;
    height: 54px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    object-fit: cover;
}

.h5-editor-image-resource b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
    font-size: 11px;
    font-weight: 750;
}

.h5-editor-image-resource div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.h5-editor-image-resource strong,
.h5-editor-image-resource span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-image-resource strong {
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
}

.h5-editor-image-resource span {
    color: #64748b;
    font-size: 11px;
}

.h5-editor-image-asset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.h5-editor-image-asset-grid button {
    display: grid;
    gap: 6px;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-size: 10px;
    font-weight: 650;
    padding: 7px;
    text-align: left;
}

.h5-editor-image-asset-grid button.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.h5-editor-image-asset-grid button:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.h5-editor-image-asset-grid img {
    width: 100%;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
}

.h5-editor-image-asset-grid span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-image-tip {
    display: grid;
    gap: 4px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    padding: 10px 12px;
}

.h5-editor-image-tip strong {
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 750;
}

.h5-editor-image-tip span {
    color: #475569;
    font-size: 11px;
    line-height: 1.45;
}

.h5-editor-image-fit-options,
.h5-editor-image-action-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    border-radius: 8px;
    background: #f1f5f9;
    padding: 4px;
}

.h5-editor-image-action-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.h5-editor-image-fit-options button,
.h5-editor-image-action-tabs button {
    min-height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 0 4px;
}

.h5-editor-image-fit-options button.is-active,
.h5-editor-image-action-tabs button.is-active {
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

.h5-editor-image-action-tabs button.is-warning.is-active {
    color: #b45309;
}

.h5-editor-image-fit-options button:disabled,
.h5-editor-image-action-tabs button:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.h5-editor-image-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.h5-editor-image-field {
    display: grid;
    gap: 7px;
}

.h5-editor-image-field.is-wide {
    grid-column: 1 / -1;
}

.h5-editor-image-field > span,
.h5-editor-image-field-head span,
.h5-editor-image-visibility > span {
    color: #334155;
    font-size: 12px;
    font-weight: 650;
}

.h5-editor-image-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.h5-editor-image-field-head em {
    color: #94a3b8;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.h5-editor-image-field input,
.h5-editor-image-slider input[type="number"] {
    width: 100%;
    min-height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font-size: 12px;
    font-weight: 500;
    padding: 0 10px;
}

.h5-editor-image-field input[readonly],
.h5-editor-image-slider input[readonly] {
    background: #f8fafc;
    color: #64748b;
}

.h5-editor-image-field input:focus,
.h5-editor-image-slider input[type="number"]:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    outline: 0;
}

.h5-editor-image-slider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    align-items: center;
    gap: 8px;
}

.h5-editor-image-slider input[type="range"] {
    accent-color: #2563eb;
}

.h5-editor-image-number {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.h5-editor-image-number input {
    min-height: 32px;
    border: 0;
    border-radius: 0;
}

.h5-editor-image-number b {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 650;
    padding-right: 10px;
}

.h5-editor-image-advanced {
    padding: 0;
    overflow: hidden;
}

.h5-editor-image-advanced summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    padding: 11px 12px;
}

.h5-editor-image-advanced summary::-webkit-details-marker {
    display: none;
}

.h5-editor-image-advanced summary span {
    color: #334155;
    font-size: 13px;
    font-weight: 750;
}

.h5-editor-image-advanced summary i {
    color: #94a3b8;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
}

.h5-editor-image-advanced-body {
    display: grid;
    gap: 12px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    padding: 12px;
}

.h5-editor-image-visibility {
    display: grid;
    gap: 7px;
}

.h5-editor-image-visibility .h5-editor-image-action-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.h5-editor-image-page-options {
    display: grid;
    gap: 7px;
}

.h5-editor-image-page-options button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
    padding: 0 10px;
}

.h5-editor-image-page-options button.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.h5-editor-image-page-options button.is-hidden-target {
    border-color: #fde68a;
    background: #fffbeb;
}

.h5-editor-image-page-options em {
    color: #94a3b8;
    font-size: 10px;
    font-style: normal;
}

.h5-editor-image-notices {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h5-editor-image-notices li {
    display: grid;
    gap: 3px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
    padding: 9px 10px;
}

.h5-editor-image-notices li.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.h5-editor-image-notices li.is-danger {
    border-color: #fecaca;
    background: #fef2f2;
}

.h5-editor-image-notices li.is-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.h5-editor-image-notices strong {
    color: #334155;
    font-size: 12px;
    font-weight: 750;
}

.h5-editor-image-notices span {
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}

@media (max-width: 1280px) {
    .h5-editor-readonly {
        min-width: 1180px;
    }

    .h5-editor-readonly-workbench {
        grid-template-columns: 300px minmax(470px, 1fr) 340px;
    }
}

/* Official direct payment management */
.payment-manage-panel {
    gap: 18px;
}

.payment-manage-head .payment-manage-new {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.payment-manage-grid {
    display: grid;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.payment-subject-list,
.payment-config-editor {
    display: grid;
    gap: 14px;
}

.payment-empty-card,
.payment-subject-card {
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.payment-empty-card {
    display: grid;
    gap: 5px;
    color: #64748b;
    font-size: 12px;
}

.payment-empty-card strong {
    color: #0f172a;
    font-size: 14px;
}

.payment-subject-card {
    display: grid;
    gap: 13px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .03);
}

.payment-subject-card.is-active {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .12), 0 8px 20px rgba(37, 99, 235, .08);
}

.payment-subject-card h3 {
    margin: 8px 0 4px;
    color: #0f172a;
    font-size: 15px;
    line-height: 1.35;
}

.payment-subject-card p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}

.payment-subject-status,
.payment-subject-card dd {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 20px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.payment-subject-status.is-success,
.payment-subject-card dd.is-success {
    background: #ecfdf3;
    color: #15803d;
}

.payment-subject-status.is-muted,
.payment-subject-card dd.is-muted {
    background: #f1f5f9;
    color: #64748b;
}

.payment-subject-card dd.is-warning {
    background: #fffbeb;
    color: #b45309;
}

.payment-subject-card dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.payment-subject-card dl div {
    display: grid;
    gap: 4px;
}

.payment-subject-card dt {
    color: #64748b;
    font-size: 12px;
}

.payment-subject-card dd {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-subject-actions {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    gap: 4px;
    align-items: center;
}

.payment-subject-actions form {
    margin: 0;
}

.payment-mini-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.payment-mini-button.is-danger {
    border-color: #fecaca;
    background: #fff7f7;
    color: #dc2626;
}

.payment-manage-field em {
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    line-height: 1.45;
}

.payment-upload-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.payment-upload-control {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.payment-upload-display {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 39px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 86%, transparent);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.payment-upload-display:hover,
.payment-upload-field:focus-within .payment-upload-display {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-soft) 76%, transparent);
}

.payment-upload-display span {
    min-width: 0;
    overflow: hidden;
    color: var(--faint);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-upload-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 64px;
    min-height: 39px;
    padding: 0 14px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.payment-radio-field {
    align-items: stretch;
}

.payment-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.payment-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.payment-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-radio.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.payment-config-submit {
    position: sticky;
    bottom: 18px;
    display: flex;
    justify-content: flex-end;
    padding: 12px;
    border: 1px solid rgba(226, 232, 240, .86);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
    backdrop-filter: blur(14px);
}

html[data-theme="dark"] .payment-empty-card,
html[data-theme="dark"] .payment-subject-card,
html[data-theme="dark"] .payment-mini-button,
html[data-theme="dark"] .payment-radio,
html[data-theme="dark"] .payment-config-submit {
    border-color: rgba(148, 163, 184, .22);
    background: #111827;
}

html[data-theme="dark"] .payment-empty-card strong,
html[data-theme="dark"] .payment-subject-card h3 {
    color: #e5e7eb;
}

html[data-theme="dark"] .payment-subject-card p,
html[data-theme="dark"] .payment-subject-card dt,
html[data-theme="dark"] .payment-manage-field em {
    color: #94a3b8;
}

html[data-theme="dark"] .payment-radio.is-active {
    border-color: #60a5fa;
    background: rgba(37, 99, 235, .18);
    color: #bfdbfe;
}

@media (max-width: 1180px) {
    .payment-manage-grid {
        grid-template-columns: 1fr;
    }
}

.payment-manage-new {
    min-width: 88px;
    color: #fff;
}

.payment-manage-new svg,
.payment-icon-button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.payment-subject-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.payment-subject-card {
    min-height: 184px;
    border-radius: 12px;
    padding: 16px;
}

.payment-subject-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.payment-subject-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

.payment-subject-card-top h3 {
    min-width: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.payment-subject-actions .payment-icon-button {
    width: 26px;
    height: 26px;
}

.payment-icon-button:hover,
.payment-icon-button:focus-visible {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

.payment-icon-button.is-danger:hover,
.payment-icon-button.is-danger:focus-visible {
    border-color: #fecaca;
    background: #fff1f2;
    color: #dc2626;
}

.payment-channel-summary {
    display: grid;
    gap: 10px;
}

.payment-channel-summary > div {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #edf2f7;
    border-radius: 10px;
    background: #f8fafc;
}

.payment-channel-summary span {
    color: #334155;
    font-size: 12px;
    font-weight: 650;
}

.payment-channel-summary strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.payment-channel-summary strong.is-success {
    background: #ecfdf3;
    color: #15803d;
}

.payment-channel-summary strong.is-warning {
    background: #fffbeb;
    color: #b45309;
}

.payment-channel-summary strong.is-danger {
    background: #fef2f2;
    color: #dc2626;
}

.payment-channel-summary strong.is-muted {
    background: #e2e8f0;
    color: #64748b;
}

.payment-channel-summary small {
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-config-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 28px;
}

.payment-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(8px);
}

.payment-modal-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(1120px, calc(100vw - 56px));
    max-height: calc(100vh - 56px);
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .22);
}

.payment-modal-head,
.payment-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
}

.payment-modal-head {
    border-bottom: 1px solid #e2e8f0;
}

.payment-modal-head span,
.payment-modal-section-head span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
}

.payment-modal-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 700;
}

.payment-modal-scroll {
    display: grid;
    gap: 14px;
    min-height: 0;
    overflow: auto;
    padding: 18px 20px 22px;
}

.payment-modal-section {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.payment-modal-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.payment-modal-section-head small {
    color: #94a3b8;
    font-size: 12px;
}

.payment-channel-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.payment-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.payment-channel-form-grid {
    grid-template-columns: 1fr;
}

.payment-form-grid .payment-manage-field.is-wide {
    grid-column: 1 / -1;
}

.payment-modal-actions {
    justify-content: flex-end;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.payment-modal-actions .form-cancel-button,
.payment-modal-actions .payment-check-button,
.payment-modal-actions .form-submit-button {
    min-height: 36px;
    padding: 0 16px;
    font-size: 12px;
}

.payment-modal-actions .form-cancel-button,
.payment-modal-actions .payment-check-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-weight: 500;
    text-decoration: none;
}

.payment-modal-actions .payment-check-button {
    cursor: pointer;
}

.payment-check-result {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
}

.payment-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.payment-check-card {
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #fff;
}

.payment-check-card strong,
.payment-check-card span {
    display: block;
}

.payment-check-card strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
}

.payment-check-card span {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.payment-check-card ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.payment-check-card li {
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.payment-check-card li::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 7px 1px 0;
    border-radius: 999px;
    background: currentColor;
}

.payment-check-card.is-success {
    border-color: #bbf7d0;
}

.payment-check-card.is-warning {
    border-color: #fde68a;
}

.payment-check-card.is-danger {
    border-color: #fecaca;
}

.payment-check-card.is-muted {
    border-color: #e2e8f0;
}

.payment-check-card li.is-success {
    color: #15803d;
}

.payment-check-card li.is-warning {
    color: #b45309;
}

.payment-check-card li.is-danger {
    color: #dc2626;
}

.payment-check-card li.is-muted {
    color: #64748b;
}

html[data-theme="dark"] .payment-icon-button,
html[data-theme="dark"] .payment-modal-card,
html[data-theme="dark"] .payment-modal-section,
html[data-theme="dark"] .payment-check-card {
    border-color: rgba(148, 163, 184, .22);
    background: #111827;
}

html[data-theme="dark"] .payment-channel-summary > div,
html[data-theme="dark"] .payment-modal-actions,
html[data-theme="dark"] .payment-check-result {
    border-color: rgba(148, 163, 184, .18);
    background: #0f172a;
}

html[data-theme="dark"] .payment-modal-head {
    border-color: rgba(148, 163, 184, .22);
}

html[data-theme="dark"] .payment-modal-head h3,
html[data-theme="dark"] .payment-channel-summary span,
html[data-theme="dark"] .payment-check-card strong {
    color: #e5e7eb;
}

html[data-theme="dark"] .payment-channel-summary small,
html[data-theme="dark"] .payment-modal-section-head small,
html[data-theme="dark"] .payment-check-card span {
    color: #94a3b8;
}

@media (max-width: 1280px) {
    .payment-channel-editor-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .payment-config-modal {
        padding: 14px;
    }

    .payment-modal-card {
        width: calc(100vw - 28px);
        max-height: calc(100vh - 28px);
    }

    .payment-form-grid,
    .payment-subject-card-grid,
    .payment-channel-summary > div,
    .payment-check-grid {
        grid-template-columns: 1fr;
    }

    .payment-modal-section-head,
    .payment-modal-head,
    .payment-modal-actions {
        align-items: flex-start;
    }
}

/* H5 编辑器右侧属性 Tab 最终显隐规则：避免后续卡片样式覆盖导致高级页混入全部内容。 */
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel > .is-pane-common,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel > .is-pane-appearance,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel > .is-pane-action,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel > .is-pane-layout,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel > .h5-editor-grid-advanced,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel > .is-pane-advanced,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel > .h5-editor-grid-notices,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel > .h5-editor-entry-notices,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel > .h5-editor-image-notices,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel > .h5-editor-download-notices,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel > .h5-editor-page-notices {
    display: none;
}

.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel.is-tab-0 > .is-pane-common,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel.is-tab-1 > .is-pane-appearance,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel.is-tab-2 > .is-pane-action {
    display: grid;
}

.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel.is-tab-3 > .is-pane-layout {
    display: block;
}

.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel.is-tab-3 > div.is-pane-layout {
    display: grid;
}

.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel.is-tab-4 > .h5-editor-grid-advanced,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel.is-tab-4 > .is-pane-advanced {
    display: block;
}

.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel.is-tab-4 > .h5-editor-grid-notices,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel.is-tab-4 > .h5-editor-entry-notices,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel.is-tab-4 > .h5-editor-image-notices,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel.is-tab-4 > .h5-editor-download-notices,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-tabbed-panel.is-tab-4 > .h5-editor-page-notices {
    display: grid;
}

/* H5 编辑器左侧列表降噪：沿用 v10 母版的轻量目录感，结构操作只在悬停时出现。 */
.h5-editor-readonly .h5-editor-readonly-page-list,
.h5-editor-readonly .h5-editor-readonly-component-tree {
    gap: 3px;
}

.h5-editor-readonly .h5-editor-page-row,
.h5-editor-readonly .h5-editor-tree-row {
    position: relative;
}

.h5-editor-readonly .h5-editor-page-row > button,
.h5-editor-readonly .h5-editor-tree-row > button {
    min-height: 46px;
    border-radius: 8px;
    padding: 8px 10px;
}

.h5-editor-readonly .h5-editor-tree-row > button {
    padding-right: 42px;
}

.h5-editor-readonly .h5-editor-page-row.is-active > button,
.h5-editor-readonly .h5-editor-tree-row.is-active > button {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.h5-editor-readonly .h5-editor-page-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    opacity: 0;
    padding: 0 8px !important;
    transition: max-height .16s ease, opacity .16s ease, padding .16s ease;
}

.h5-editor-readonly .h5-editor-page-row:hover .h5-editor-page-actions,
.h5-editor-readonly .h5-editor-page-row:focus-within .h5-editor-page-actions {
    max-height: 32px;
    opacity: 1;
    padding: 3px 8px 5px !important;
}

.h5-editor-readonly .h5-editor-page-actions button {
    height: 22px;
    border: 0;
    background: #f8fafc;
    color: #64748b;
    font-size: 0;
}

.h5-editor-readonly .h5-editor-page-actions button::before {
    font-size: 12px;
    line-height: 1;
}

.h5-editor-readonly .h5-editor-page-actions [data-h5-page-action="up"]::before {
    content: "↑";
}

.h5-editor-readonly .h5-editor-page-actions [data-h5-page-action="down"]::before {
    content: "↓";
}

.h5-editor-readonly .h5-editor-page-actions [data-h5-page-action="copy"]::before {
    content: "⧉";
}

.h5-editor-readonly .h5-editor-page-actions [data-h5-page-action="toggle"]::before {
    content: "◐";
}

.h5-editor-readonly .h5-editor-page-actions [data-h5-page-action="delete"]::before {
    content: "×";
}

.h5-editor-readonly .h5-editor-tree-actions {
    position: absolute;
    top: 50%;
    right: 8px;
    display: inline-flex;
    transform: translateY(-50%);
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
    opacity: 0;
    pointer-events: none;
}

.h5-editor-readonly .h5-editor-tree-row:hover .h5-editor-tree-actions,
.h5-editor-readonly .h5-editor-tree-row:focus-within .h5-editor-tree-actions {
    opacity: 1;
    pointer-events: auto;
}

.h5-editor-readonly .h5-editor-tree-actions button {
    width: 24px;
    height: 24px;
    border-radius: 0;
    font-size: 11px;
}

.h5-editor-readonly .h5-editor-tree-actions button:first-child {
    border-radius: 6px 0 0 6px;
}

.h5-editor-readonly .h5-editor-tree-actions button:last-child {
    border-radius: 0 6px 6px 0;
}

/* H5 编辑器 v10 细节：左侧树操作弱化，避免按钮抢走用户第一视线。 */
.h5-editor-readonly .h5-editor-page-actions {
    display: none;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    margin: -2px 8px 7px;
    border: 1px solid #dbeafe;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: #f8fbff;
    padding: 5px;
}

.h5-editor-readonly .h5-editor-page-row:hover .h5-editor-page-actions {
    display: grid;
}

.h5-editor-readonly .h5-editor-page-actions button {
    min-width: 0;
    height: 24px;
    min-height: 24px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 0 3px;
}

.h5-editor-readonly .h5-editor-page-actions button:hover {
    border-color: #bfdbfe;
    background: #fff;
    color: #1d4ed8;
}

.h5-editor-readonly .h5-editor-page-actions button.is-danger {
    color: #ef4444;
}

.h5-editor-readonly .h5-editor-page-actions button.is-danger:hover {
    border-color: #fecaca;
    background: #fff;
    color: #dc2626;
}

.h5-editor-readonly .h5-editor-page-actions button:disabled {
    border-color: transparent;
    background: transparent;
    color: #cbd5e1;
}

.h5-editor-readonly .h5-editor-tree-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    padding-right: 0;
}

.h5-editor-readonly .h5-editor-tree-row > button {
    padding-right: 64px;
}

.h5-editor-readonly .h5-editor-tree-actions {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 1px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity .15s ease;
    z-index: 2;
}

.h5-editor-readonly .h5-editor-tree-row:hover .h5-editor-tree-actions {
    opacity: 1;
    pointer-events: auto;
}

.h5-editor-readonly .h5-editor-tree-actions button {
    width: 21px;
    height: 23px;
    border-radius: 6px;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
}

.h5-editor-readonly .h5-editor-tree-actions button:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.h5-editor-readonly .h5-editor-tree-actions button.is-danger {
    color: #ef4444;
}

.h5-editor-readonly .h5-editor-tree-actions button.is-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* H5 编辑器 v10：资料下载控件属性面板。 */
.h5-editor-download-panel {
    display: grid;
    gap: 12px;
}

.h5-editor-download-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #eff6ff;
    padding: 12px;
}

.h5-editor-download-head div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.h5-editor-download-head span {
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
}

.h5-editor-download-head strong {
    overflow: hidden;
    color: #1e3a8a;
    font-size: 16px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-download-head em {
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    padding: 4px 8px;
    white-space: nowrap;
}

.h5-editor-download-head em.is-success {
    background: #ecfdf5;
    color: #15803d;
}

.h5-editor-download-head em.is-warning {
    background: #fffbeb;
    color: #b45309;
}

.h5-editor-download-card,
.h5-editor-download-advanced {
    display: grid;
    gap: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    padding: 12px;
}

.h5-editor-download-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.h5-editor-download-card-title strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 750;
}

.h5-editor-download-card-title span {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}

.h5-editor-download-field {
    display: grid;
    gap: 7px;
}

.h5-editor-download-field > span,
.h5-editor-download-visibility > span,
.h5-editor-download-sort > span {
    color: #334155;
    font-size: 12px;
    font-weight: 650;
}

.h5-editor-download-field input {
    width: 100%;
    min-height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font-size: 12px;
    font-weight: 500;
    padding: 0 10px;
}

.h5-editor-download-field input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    outline: 0;
}

.h5-editor-download-action-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    border-radius: 8px;
    background: #f1f5f9;
    padding: 4px;
}

.h5-editor-download-action-tabs button {
    min-height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 0 4px;
}

.h5-editor-download-action-tabs button.is-active {
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

.h5-editor-download-action-tabs button.is-warning.is-active {
    color: #b45309;
}

.h5-editor-download-action-tabs button:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.h5-editor-download-fields {
    display: grid;
    gap: 10px;
}

.h5-editor-download-file-summary {
    display: grid;
    gap: 7px;
}

.h5-editor-download-file-summary button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 650;
    padding: 0 10px;
}

.h5-editor-download-file-summary button.is-hidden-file {
    opacity: .58;
}

.h5-editor-download-file-summary span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-download-file-summary em {
    color: #94a3b8;
    font-size: 10px;
    font-style: normal;
}

.h5-editor-download-file-summary p,
.h5-editor-download-muted {
    margin: 0;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.5;
}

.h5-editor-download-advanced {
    padding: 0;
    overflow: hidden;
}

.h5-editor-download-advanced summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    padding: 11px 12px;
}

.h5-editor-download-advanced summary::-webkit-details-marker {
    display: none;
}

.h5-editor-download-advanced summary span {
    color: #334155;
    font-size: 13px;
    font-weight: 750;
}

.h5-editor-download-advanced summary i {
    color: #94a3b8;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
}

.h5-editor-download-advanced-body {
    display: grid;
    gap: 12px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    padding: 12px;
}

.h5-editor-download-visibility,
.h5-editor-download-sort {
    display: grid;
    gap: 7px;
}

.h5-editor-download-sort div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.h5-editor-download-sort button {
    min-height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.h5-editor-download-sort button:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.h5-editor-download-notices {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h5-editor-download-notices li {
    display: grid;
    gap: 3px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
    padding: 9px 10px;
}

.h5-editor-download-notices li.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.h5-editor-download-notices li.is-danger {
    border-color: #fecaca;
    background: #fef2f2;
}

.h5-editor-download-notices li.is-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.h5-editor-download-notices strong {
    color: #334155;
    font-size: 12px;
    font-weight: 750;
}

.h5-editor-download-notices span {
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}

/* H5 编辑器 v10：入口矩阵容器属性面板。 */
.h5-editor-grid-panel {
    display: grid;
    gap: 12px;
}

.h5-editor-grid-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #eff6ff;
    padding: 12px;
}

.h5-editor-grid-head div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.h5-editor-grid-head span {
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
}

.h5-editor-grid-head strong {
    overflow: hidden;
    color: #1e3a8a;
    font-size: 16px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-grid-head em {
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    padding: 4px 8px;
    white-space: nowrap;
}

.h5-editor-grid-head em.is-success {
    background: #ecfdf5;
    color: #15803d;
}

.h5-editor-grid-head em.is-warning {
    background: #fffbeb;
    color: #b45309;
}

.h5-editor-grid-card,
.h5-editor-grid-advanced {
    display: grid;
    gap: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    padding: 12px;
}

.h5-editor-grid-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.h5-editor-grid-card-title strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 750;
}

.h5-editor-grid-card-title span {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}

.h5-editor-grid-text-field {
    display: grid;
    gap: 7px;
}

.h5-editor-grid-text-field > span,
.h5-editor-grid-field-head span,
.h5-editor-grid-visibility > span,
.h5-editor-grid-sort > span {
    color: #334155;
    font-size: 12px;
    font-weight: 650;
}

.h5-editor-grid-text-field input,
.h5-editor-grid-slider input[type="number"] {
    width: 100%;
    min-height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font-size: 12px;
    font-weight: 500;
    padding: 0 10px;
}

.h5-editor-grid-text-field input:focus,
.h5-editor-grid-slider input[type="number"]:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    outline: 0;
}

.h5-editor-grid-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.h5-editor-grid-field {
    display: grid;
    gap: 7px;
}

.h5-editor-grid-field.is-wide {
    grid-column: 1 / -1;
}

.h5-editor-grid-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.h5-editor-grid-field-head em {
    color: #94a3b8;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.h5-editor-grid-slider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    align-items: center;
    gap: 8px;
}

.h5-editor-grid-slider input[type="range"] {
    accent-color: #2563eb;
}

.h5-editor-grid-entry-summary {
    display: grid;
    gap: 7px;
    max-height: 210px;
    overflow: auto;
}

.h5-editor-grid-entry-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 650;
    padding: 0 10px;
}

.h5-editor-grid-entry-summary div.is-hidden-entry {
    opacity: .58;
}

.h5-editor-grid-entry-summary span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-grid-entry-summary em {
    color: #94a3b8;
    font-size: 10px;
    font-style: normal;
}

.h5-editor-grid-entry-summary p {
    margin: 0;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.5;
}

.h5-editor-grid-action-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    border-radius: 8px;
    background: #f1f5f9;
    padding: 4px;
}

.h5-editor-grid-action-tabs button {
    min-height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 0 4px;
}

.h5-editor-grid-action-tabs button.is-active {
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

.h5-editor-grid-action-tabs button.is-warning.is-active {
    color: #b45309;
}

.h5-editor-grid-action-tabs button:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.h5-editor-grid-advanced {
    padding: 0;
    overflow: hidden;
}

.h5-editor-grid-advanced summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    padding: 11px 12px;
}

.h5-editor-grid-advanced summary::-webkit-details-marker {
    display: none;
}

.h5-editor-grid-advanced summary span {
    color: #334155;
    font-size: 13px;
    font-weight: 750;
}

.h5-editor-grid-advanced summary i {
    color: #94a3b8;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
}

.h5-editor-grid-advanced-body {
    display: grid;
    gap: 12px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    padding: 12px;
}

.h5-editor-grid-visibility,
.h5-editor-grid-sort {
    display: grid;
    gap: 7px;
}

.h5-editor-grid-sort div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.h5-editor-grid-sort button {
    min-height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.h5-editor-grid-sort button:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.h5-editor-grid-notices {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h5-editor-grid-notices li {
    display: grid;
    gap: 3px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
    padding: 9px 10px;
}

.h5-editor-grid-notices li.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.h5-editor-grid-notices li.is-danger {
    border-color: #fecaca;
    background: #fef2f2;
}

.h5-editor-grid-notices li.is-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.h5-editor-grid-notices strong {
    color: #334155;
    font-size: 12px;
    font-weight: 750;
}

.h5-editor-grid-notices span {
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}

/* H5 编辑器 v10 视觉收敛层：仅换外观，保留当前功能与数据模型。 */
.h5-editor-readonly {
    --h5-editor-blue: #2563eb;
    --h5-editor-blue-dark: #1d4ed8;
    --h5-editor-blue-soft: #eff6ff;
    --h5-editor-line: #e2e8f0;
    --h5-editor-line-soft: #f1f5f9;
    --h5-editor-text: #0f172a;
    --h5-editor-muted: #64748b;
    --h5-editor-faint: #94a3b8;
    display: flex;
    flex-direction: column;
    min-width: 1320px;
    height: calc(100vh - 116px);
    min-height: 760px;
    overflow: hidden;
    border: 1px solid var(--h5-editor-line);
    border-radius: 14px;
    background: #f8fafc;
    color: var(--h5-editor-text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.h5-editor-readonly-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 56px;
    min-height: 56px;
    border: 0;
    border-bottom: 1px solid var(--h5-editor-line);
    border-radius: 0;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    padding: 0 24px;
}

.h5-editor-readonly-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.h5-editor-readonly-title::before {
    content: "会";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
    background: var(--h5-editor-blue);
    box-shadow: 0 10px 20px rgba(37, 99, 235, .18);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
}

.h5-editor-readonly-title span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    color: var(--h5-editor-text);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    white-space: nowrap;
}

.h5-editor-readonly-title strong {
    max-width: 390px;
    overflow: hidden;
    border-left: 1px solid var(--h5-editor-line);
    color: var(--h5-editor-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    padding-left: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-readonly-statuses,
.h5-editor-readonly-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.h5-editor-readonly-statuses {
    margin-left: auto;
}

.h5-editor-readonly-statuses span,
.h5-editor-readonly-actions a,
.h5-editor-readonly-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border: 1px solid var(--h5-editor-line);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--h5-editor-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    padding: 5px 10px;
    text-decoration: none;
    white-space: nowrap;
}

.h5-editor-readonly-statuses span:first-child {
    border-color: #bfdbfe;
    background: var(--h5-editor-blue-soft);
    color: var(--h5-editor-blue-dark);
}

.h5-editor-readonly-statuses span.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}

.h5-editor-readonly-actions button:not(:disabled),
.h5-editor-readonly-actions a {
    cursor: pointer;
    background: #fff;
    color: #334155;
}

.h5-editor-readonly-actions button:not(:disabled):hover,
.h5-editor-readonly-actions a:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.h5-editor-readonly-actions button:nth-of-type(2):not(:disabled) {
    border-color: var(--h5-editor-blue);
    background: var(--h5-editor-blue);
    color: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .12);
}

.h5-editor-readonly-actions button:disabled {
    cursor: not-allowed;
    color: #94a3b8;
}

.h5-editor-readonly-workbench {
    display: grid;
    grid-template-columns: 320px minmax(520px, 1fr) 360px;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
    align-items: stretch;
}

.h5-editor-readonly-left {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 0;
    gap: 0;
    border-right: 1px solid var(--h5-editor-line);
    background: #fff;
}

.h5-editor-readonly-left .h5-editor-readonly-panel:first-child {
    border-bottom: 1px solid var(--h5-editor-line-soft);
}

.h5-editor-readonly-panel,
.h5-editor-readonly-preview-panel,
.h5-editor-readonly-inspector {
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.h5-editor-readonly-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    padding: 0;
}

.h5-editor-readonly-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    flex: 0 0 auto;
    padding: 0 16px;
}

.h5-editor-readonly-panel-head > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.h5-editor-readonly-panel-head strong {
    overflow: hidden;
    color: var(--h5-editor-text);
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-readonly-panel-head span {
    overflow: hidden;
    color: var(--h5-editor-faint);
    font-size: 11px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-readonly-panel-head button {
    min-height: 26px;
    border: 1px solid #dbeafe;
    border-radius: 6px;
    background: var(--h5-editor-blue-soft);
    color: var(--h5-editor-blue);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    white-space: nowrap;
}

.h5-editor-readonly-panel-head button:disabled {
    border-color: var(--h5-editor-line);
    background: #f8fafc;
    color: var(--h5-editor-faint);
    cursor: not-allowed;
}

.h5-editor-readonly-page-list,
.h5-editor-readonly-component-tree {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    gap: 4px;
    padding: 0 8px 16px;
}

.h5-editor-page-row,
.h5-editor-tree-row {
    min-width: 0;
}

.h5-editor-page-row > button,
.h5-editor-tree-row > button {
    width: 100%;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--h5-editor-text);
    padding: 9px 10px;
    text-align: left;
}

.h5-editor-page-row > button:hover,
.h5-editor-page-row.is-active > button,
.h5-editor-tree-row > button:hover,
.h5-editor-tree-row.is-active > button {
    border-color: #dbeafe;
    background: var(--h5-editor-blue-soft);
    box-shadow: none;
}

.h5-editor-page-head strong,
.h5-editor-page-row span,
.h5-editor-tree-row span {
    color: var(--h5-editor-text);
    font-size: 13px;
    font-weight: 700;
}

.h5-editor-page-head b {
    display: inline-flex;
    align-items: center;
    max-width: 82px;
    overflow: hidden;
    border-radius: 5px;
    background: #f1f5f9;
    color: #475569;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-page-row.is-active .h5-editor-page-head strong,
.h5-editor-page-row.is-active span,
.h5-editor-tree-row.is-active span {
    color: var(--h5-editor-blue-dark);
}

.h5-editor-page-row small,
.h5-editor-tree-row small,
.h5-editor-tree-row span em {
    color: var(--h5-editor-muted);
}

.h5-editor-page-actions {
    display: none;
    grid-template-columns: auto repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 4px;
    margin: -3px 8px 6px;
    border: 0;
    border-radius: 8px;
    background: #f8fafc;
    padding: 4px;
}

.h5-editor-readonly .h5-editor-page-row.is-active .h5-editor-page-actions {
    display: grid;
}

.h5-editor-page-row:hover .h5-editor-page-actions {
    display: flex;
}

.h5-editor-readonly .h5-editor-page-row:hover .h5-editor-page-actions {
    display: grid;
}

.h5-editor-page-actions span {
    color: var(--h5-editor-faint);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 0 2px;
    white-space: nowrap;
}

.h5-editor-page-actions button,
.h5-editor-tree-actions button {
    border-radius: 6px;
}

.h5-editor-page-actions button {
    min-width: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--h5-editor-muted);
    font-size: 11px;
    font-weight: 700;
}

.h5-editor-page-actions button:hover:not(:disabled) {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: var(--h5-editor-blue-dark);
}

.h5-editor-page-actions button.is-danger:hover:not(:disabled) {
    border-color: #fecaca;
    background: #fef2f2;
    color: #dc2626;
}

.h5-editor-tree-actions {
    align-self: center;
    opacity: .35;
    transition: opacity .15s ease;
}

.h5-editor-tree-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
}

.h5-editor-tree-type {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    padding: 3px 6px;
}

.h5-editor-tree-row.is-active .h5-editor-tree-type {
    background: #dbeafe;
    color: var(--h5-editor-blue-dark);
}

.h5-editor-tree-row small {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
}

.h5-editor-tree-action-badge {
    display: inline-flex;
    align-items: center;
    max-width: 120px;
    overflow: hidden;
    flex: 0 1 auto;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-tree-action-badge.is-page {
    background: #eff6ff;
    color: #1d4ed8;
}

.h5-editor-tree-action-badge.is-external {
    background: #ecfdf5;
    color: #15803d;
}

.h5-editor-tree-action-badge.is-file {
    background: #fef3c7;
    color: #92400e;
}

.h5-editor-tree-action-badge.is-phone {
    background: #f5f3ff;
    color: #6d28d9;
}

.h5-editor-tree-action-badge.is-muted {
    background: #f8fafc;
    color: #94a3b8;
}

.h5-editor-readonly .h5-editor-tree-row.is-active .h5-editor-tree-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    width: auto;
    margin: -2px 0 6px;
    border-radius: 8px;
    background: #f8fafc;
    opacity: 1;
    padding: 4px;
    pointer-events: auto;
}

.h5-editor-readonly .h5-editor-tree-row.is-active {
    grid-template-columns: minmax(0, 1fr);
}

.h5-editor-tree-row:not(.is-active) .h5-editor-tree-actions button {
    overflow: hidden;
    width: 22px;
    padding: 0;
    white-space: nowrap;
}

.h5-editor-tree-row.is-active .h5-editor-tree-actions button {
    width: auto;
    min-width: 0;
    padding: 0 6px;
    white-space: nowrap;
}

.h5-editor-tree-actions button:hover:not(:disabled) {
    background: #eff6ff;
    color: var(--h5-editor-blue-dark);
}

.h5-editor-tree-actions button.is-danger:hover:not(:disabled) {
    background: #fef2f2;
    color: #dc2626;
}

.h5-editor-tree-row:hover .h5-editor-tree-actions {
    opacity: 1;
}

.h5-editor-readonly .h5-editor-tree-row:hover .h5-editor-tree-actions {
    opacity: 1;
    pointer-events: auto;
}

/* H5 编辑器左侧树选中态：完整操作条必须占据独立行，不能遮住控件名称。 */
.h5-editor-readonly .h5-editor-tree-row.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

.h5-editor-readonly .h5-editor-tree-row.is-active > button {
    padding-right: 10px;
}

.h5-editor-readonly .h5-editor-tree-row.is-active .h5-editor-tree-actions {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    box-shadow: none;
}

.h5-editor-readonly .h5-editor-page-row.is-active .h5-editor-page-actions {
    display: grid;
    max-height: none;
    overflow: visible;
    opacity: 1;
    padding: 4px !important;
}

.h5-editor-modal-backdrop .h5-editor-modal.is-component-library {
    border-color: #e2e8f0;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .2);
}

.h5-editor-modal-backdrop .h5-editor-modal-head,
.h5-editor-modal-backdrop .h5-editor-modal-foot {
    border-color: #e2e8f0;
}

.h5-editor-modal-backdrop .h5-editor-library-tip {
    border-bottom-color: #f1f5f9;
}

.h5-editor-modal-backdrop .h5-editor-library-grid article,
.h5-editor-modal-backdrop .h5-editor-library-cats button {
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: none;
}

.h5-editor-modal-backdrop .h5-editor-library-grid article {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 90px;
}

.h5-editor-modal-backdrop .h5-editor-library-grid article:hover {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.h5-editor-modal-backdrop .h5-editor-library-grid article.is-disabled {
    background: #f8fafc;
}

.h5-editor-modal-backdrop .h5-editor-library-grid button {
    border: 1px solid #dbeafe;
    background: #2563eb;
    color: #fff;
}

.h5-editor-modal-backdrop .h5-editor-library-grid button:disabled {
    border-color: #e2e8f0;
    background: #f1f5f9;
    color: #94a3b8;
}

.h5-editor-readonly-preview-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-right: 1px solid var(--h5-editor-line);
    background: #f1f5f9;
    padding: 0;
}

.h5-editor-readonly-preview-panel > .h5-editor-readonly-panel-head {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(8px);
}

.h5-editor-readonly-phone {
    align-self: center;
    justify-self: center;
    width: 360px;
    min-height: 720px;
    max-height: calc(100vh - 210px);
    overflow: auto;
    border: 10px solid #0f172a;
    border-radius: 40px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .26);
}

.h5-editor-readonly-inspector {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: none;
    overflow: hidden;
    background: #fff;
    padding: 0;
}

.h5-editor-readonly-inspector > .h5-editor-readonly-panel-head {
    display: grid;
    min-height: auto;
    gap: 3px;
    border-bottom: 1px solid var(--h5-editor-line-soft);
    padding: 14px 16px;
}

.h5-editor-readonly-inspector > .h5-editor-readonly-panel-head strong {
    font-size: 16px;
}

.h5-editor-readonly-inspector > .h5-editor-readonly-panel-head span {
    color: var(--h5-editor-muted);
    font-size: 12px;
}

.h5-editor-readonly-inspector [data-h5-property-panel] {
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 18px;
}

.h5-editor-property-tabs {
    margin: 0 -16px 12px;
    border-bottom-color: var(--h5-editor-line-soft);
    background: #f8fafc;
    padding: 0 8px;
}

.h5-editor-property-tabs button {
    padding: 10px 4px;
    font-size: 12px;
    font-weight: 650;
}

.h5-editor-readonly-object,
.h5-editor-page-panel-head,
.h5-editor-entry-head,
.h5-editor-image-head {
    border-color: #dbeafe;
    border-radius: 12px;
    background: var(--h5-editor-blue-soft);
}

.h5-editor-page-card,
.h5-editor-page-advanced,
.h5-editor-entry-card,
.h5-editor-entry-advanced,
.h5-editor-layout-group,
.h5-editor-image-card,
.h5-editor-image-advanced,
.h5-editor-image-current,
.h5-editor-file-current,
.h5-editor-file-upload,
.h5-editor-file-list button {
    border-color: var(--h5-editor-line);
    border-radius: 10px;
    box-shadow: none;
}

.h5-editor-entry-action-tabs,
.h5-editor-image-fit-options,
.h5-editor-image-action-tabs,
.h5-editor-segmented-control {
    border-radius: 8px;
    background: #f1f5f9;
    padding: 4px;
}

.h5-editor-entry-action-tabs button.is-active,
.h5-editor-image-fit-options button.is-active,
.h5-editor-image-action-tabs button.is-active,
.h5-editor-segmented-control button.is-active {
    background: #fff;
    color: var(--h5-editor-blue-dark);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

.h5-editor-entry-field input,
.h5-editor-image-field input,
.h5-editor-image-slider input[type="number"],
.h5-editor-readonly-tab input,
.h5-editor-readonly-tab textarea,
.h5-editor-modal-field input[type="text"],
.h5-editor-modal-field input:not([type]) {
    border-color: var(--h5-editor-line);
    border-radius: 8px;
    background: #fff;
    color: var(--h5-editor-text);
}

.h5-editor-entry-field input:focus,
.h5-editor-image-field input:focus,
.h5-editor-image-slider input[type="number"]:focus,
.h5-editor-readonly-tab input:not([readonly]):focus,
.h5-editor-readonly-tab textarea:not([readonly]):focus,
.h5-editor-modal-field input:focus {
    border-color: var(--h5-editor-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    outline: 0;
}

.h5-editor-color-field {
    display: grid;
    gap: 7px;
}

.h5-editor-color-field > span {
    color: var(--h5-editor-muted);
    font-size: 12px;
    font-weight: 650;
}

.h5-editor-color-field label {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.h5-editor-color-field input[type="color"] {
    width: 36px;
    height: 34px;
    border: 1px solid var(--h5-editor-line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    padding: 3px;
}

.h5-editor-color-field input[type="text"] {
    min-height: 34px;
}

.h5-editor-modal-backdrop {
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(6px);
}

.h5-editor-modal {
    border-color: var(--h5-editor-line);
    border-radius: 12px;
    box-shadow: 0 22px 70px rgba(15, 23, 42, .18);
}

.h5-editor-modal-head {
    border-bottom-color: var(--h5-editor-line-soft);
}

.h5-editor-modal-foot {
    border-top-color: var(--h5-editor-line-soft);
    background: #f8fafc;
}

.h5-editor-radio-grid label,
.h5-editor-library-grid article,
.h5-editor-library-cats button {
    border-color: var(--h5-editor-line);
    border-radius: 10px;
    background: #fff;
}

.h5-editor-radio-grid label:has(input:checked),
.h5-editor-library-grid article:hover,
.h5-editor-library-cats button.is-active {
    border-color: #bfdbfe;
    background: var(--h5-editor-blue-soft);
}

.h5-editor-library-grid button,
.h5-editor-modal-foot button.is-primary {
    border-color: var(--h5-editor-blue);
    background: var(--h5-editor-blue);
    color: #fff;
}

/* H5 编辑器预览收敛：中间手机屏尽量贴近真实发布页，编辑信息放到左右栏。 */
.h5-editor-readonly-phone {
    width: 390px;
    background: linear-gradient(90deg, var(--h5-bg-edge, #bdf8fb) 0%, var(--h5-bg-mid, #f7ffff) 17%, var(--h5-bg-center, #fff) 50%, var(--h5-bg-mid, #f7ffff) 83%, var(--h5-bg-edge, #bdf8fb) 100%);
}

.h5-preview-block {
    background: transparent;
}

.h5-preview-config {
    align-content: start;
    gap: 14px;
    min-height: 100%;
    border: 0;
    background: transparent;
    padding: 28px 24px;
}

.h5-preview-config-title,
.h5-preview-share-card,
.h5-preview-theme-card {
    border: 1px solid rgba(191, 219, 254, .9);
    border-radius: 14px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.h5-preview-config-title {
    display: grid;
    gap: 5px;
    padding: 16px;
}

.h5-preview-config-title span,
.h5-preview-share-card span {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
}

.h5-preview-config-title strong {
    color: #0f172a;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.28;
}

.h5-preview-share-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
}

.h5-preview-share-card img,
.h5-preview-share-card b {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
}

.h5-preview-share-card b {
    display: grid;
    place-items: center;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 750;
}

.h5-preview-share-card div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.h5-preview-share-card strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-preview-share-card span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.h5-preview-theme-card {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.h5-preview-theme-card > strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 750;
}

.h5-preview-theme-strip {
    height: 74px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 12px;
    background: linear-gradient(90deg, var(--theme-edge, #bdf8fb) 0%, var(--theme-mid, #f7ffff) 17%, var(--theme-center, #fff) 50%, var(--theme-mid, #f7ffff) 83%, var(--theme-edge, #bdf8fb) 100%);
}

/* Final V10 left-panel override. Keep this after all h5-editor left tree rules. */
.h5-editor-readonly .h5-editor-readonly-page-list,
.h5-editor-readonly .h5-editor-readonly-component-tree {
    display: flex !important;
    flex-direction: column;
    gap: 4px !important;
}

.h5-editor-readonly .h5-editor-page-row,
.h5-editor-readonly .h5-editor-tree-row,
.h5-editor-readonly .h5-editor-tree-row.is-active {
    position: relative !important;
    display: block !important;
    min-height: 34px !important;
    padding: 0 !important;
}

.h5-editor-readonly .h5-editor-page-row > button,
.h5-editor-readonly .h5-editor-tree-row > button,
.h5-editor-readonly .h5-editor-tree-row.is-active > button {
    display: flex !important;
    align-items: center;
    gap: 8px;
    height: 34px !important;
    min-height: 34px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #475569 !important;
    padding: 0 9px !important;
}

.h5-editor-readonly .h5-editor-tree-row > button,
.h5-editor-readonly .h5-editor-tree-row.is-active > button {
    padding-right: 84px !important;
}

.h5-editor-readonly .h5-editor-page-row > button:hover,
.h5-editor-readonly .h5-editor-page-row.is-active > button,
.h5-editor-readonly .h5-editor-tree-row > button:hover,
.h5-editor-readonly .h5-editor-tree-row.is-active > button {
    border-color: #dbeafe !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.h5-editor-readonly .h5-editor-page-head,
.h5-editor-readonly .h5-editor-tree-title {
    display: flex !important;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    gap: 7px;
}

.h5-editor-readonly .h5-editor-page-head::before,
.h5-editor-readonly .h5-editor-tree-title::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    opacity: .62;
    background-image: radial-gradient(circle, #cbd5e1 1.2px, transparent 1.4px);
    background-size: 6px 6px;
}

.h5-editor-readonly .h5-editor-page-head strong,
.h5-editor-readonly .h5-editor-tree-title {
    min-width: 0;
    overflow: hidden;
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-readonly .h5-editor-page-head b,
.h5-editor-readonly .h5-editor-tree-type {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    max-width: 82px;
    overflow: hidden;
    border: 0 !important;
    border-radius: 5px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1;
    padding: 3px 5px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-readonly .h5-editor-page-main small,
.h5-editor-readonly .h5-editor-page-main i,
.h5-editor-readonly .h5-editor-tree-row > button > small {
    display: none !important;
}

.h5-editor-readonly .h5-editor-page-actions,
.h5-editor-readonly .h5-editor-page-row.is-active .h5-editor-page-actions,
.h5-editor-readonly .h5-editor-tree-actions,
.h5-editor-readonly .h5-editor-tree-row.is-active .h5-editor-tree-actions {
    position: absolute !important;
    top: 50% !important;
    right: 7px !important;
    display: flex !important;
    align-items: center;
    gap: 1px !important;
    width: auto !important;
    margin: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08) !important;
    opacity: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    pointer-events: none !important;
    transform: translateY(-50%) !important;
    transition: opacity .15s ease !important;
    z-index: 3;
}

.h5-editor-readonly .h5-editor-page-row:hover .h5-editor-page-actions,
.h5-editor-readonly .h5-editor-page-row:focus-within .h5-editor-page-actions,
.h5-editor-readonly .h5-editor-page-row.is-active .h5-editor-page-actions,
.h5-editor-readonly .h5-editor-tree-row:hover .h5-editor-tree-actions,
.h5-editor-readonly .h5-editor-tree-row:focus-within .h5-editor-tree-actions,
.h5-editor-readonly .h5-editor-tree-row.is-active .h5-editor-tree-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.h5-editor-readonly .h5-editor-page-actions span {
    display: none !important;
}

.h5-editor-readonly .h5-editor-page-actions button,
.h5-editor-readonly .h5-editor-tree-actions button,
.h5-editor-readonly .h5-editor-tree-row.is-active .h5-editor-tree-actions button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px !important;
    min-width: 22px !important;
    height: 24px !important;
    min-height: 24px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 0 !important;
    padding: 0 !important;
}

.h5-editor-readonly .h5-editor-page-actions button::before,
.h5-editor-readonly .h5-editor-tree-actions button::before {
    font-size: 12px;
    line-height: 1;
}

.h5-editor-readonly [data-h5-page-action="up"]::before,
.h5-editor-readonly [data-h5-component-action="up"]::before {
    content: "↑";
}

.h5-editor-readonly [data-h5-page-action="down"]::before,
.h5-editor-readonly [data-h5-component-action="down"]::before {
    content: "↓";
}

.h5-editor-readonly [data-h5-page-action="copy"]::before,
.h5-editor-readonly [data-h5-component-action="copy"]::before {
    content: "⧉";
}

.h5-editor-readonly [data-h5-page-action="toggle"]::before,
.h5-editor-readonly [data-h5-component-action="toggle"]::before {
    content: "◐";
}

.h5-editor-readonly [data-h5-page-action="delete"]::before,
.h5-editor-readonly [data-h5-component-action="delete"]::before {
    content: "×";
}

/* Final V10 left action polish: hover-only lucide-like icons. */
.h5-editor-readonly .h5-editor-readonly-left .h5-editor-readonly-panel-head span {
    display: none !important;
}

.h5-editor-readonly .h5-editor-readonly-left .h5-editor-readonly-panel-head > div {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.h5-editor-readonly .h5-editor-readonly-left .h5-editor-readonly-panel-head strong {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
}

.h5-editor-readonly .h5-editor-readonly-left .h5-editor-readonly-panel-head strong::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: #64748b;
    -webkit-mask: var(--h5-editor-panel-head-icon) center / 16px 16px no-repeat;
    mask: var(--h5-editor-panel-head-icon) center / 16px 16px no-repeat;
}

.h5-editor-readonly .h5-editor-readonly-panel.is-pages .h5-editor-readonly-panel-head strong::before {
    --h5-editor-panel-head-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18 7.1 3.55a1 1 0 0 1 0 1.79l-7.1 3.55a2 2 0 0 1-1.79 0l-7.1-3.55a1 1 0 0 1 0-1.79l7.1-3.55a2 2 0 0 1 1.79 0Z'/%3E%3Cpath d='m4 12 7.04 3.52a2 2 0 0 0 1.79 0L20 12'/%3E%3Cpath d='m4 17 7.04 3.52a2 2 0 0 0 1.79 0L20 17'/%3E%3C/svg%3E");
}

.h5-editor-readonly .h5-editor-readonly-panel.is-components .h5-editor-readonly-panel-head strong::before {
    --h5-editor-panel-head-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8.5h7v7h-7z'/%3E%3Cpath d='M12.5 4.5h7v7h-7z'/%3E%3Cpath d='M12.5 12.5h7v7h-7z'/%3E%3C/svg%3E");
}

.h5-editor-readonly .h5-editor-readonly-left .h5-editor-readonly-panel-head button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 26px !important;
    border-radius: 6px !important;
    font-weight: 650 !important;
    transition: background-color .15s ease, color .15s ease !important;
}

.h5-editor-readonly .h5-editor-readonly-left .h5-editor-readonly-panel-head button::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.h5-editor-readonly .h5-editor-page-row > button,
.h5-editor-readonly .h5-editor-tree-row > button,
.h5-editor-readonly .h5-editor-tree-row.is-active > button {
    padding-right: 118px !important;
}

.h5-editor-readonly .h5-editor-page-head::before,
.h5-editor-readonly .h5-editor-tree-title::before {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    background-color: #cbd5e1 !important;
    background-image: none !important;
    opacity: .9 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='5' r='1'/%3E%3Ccircle cx='9' cy='12' r='1'/%3E%3Ccircle cx='9' cy='19' r='1'/%3E%3Ccircle cx='15' cy='5' r='1'/%3E%3Ccircle cx='15' cy='12' r='1'/%3E%3Ccircle cx='15' cy='19' r='1'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='5' r='1'/%3E%3Ccircle cx='9' cy='12' r='1'/%3E%3Ccircle cx='9' cy='19' r='1'/%3E%3Ccircle cx='15' cy='5' r='1'/%3E%3Ccircle cx='15' cy='12' r='1'/%3E%3Ccircle cx='15' cy='19' r='1'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
}

.h5-editor-readonly .h5-editor-page-row:hover .h5-editor-page-head::before,
.h5-editor-readonly .h5-editor-tree-row:hover .h5-editor-tree-title::before,
.h5-editor-readonly .h5-editor-page-row.is-active .h5-editor-page-head::before,
.h5-editor-readonly .h5-editor-tree-row.is-active .h5-editor-tree-title::before {
    background-color: #94a3b8 !important;
}

.h5-editor-readonly .h5-editor-page-actions,
.h5-editor-readonly .h5-editor-page-row.is-active .h5-editor-page-actions,
.h5-editor-readonly .h5-editor-tree-actions,
.h5-editor-readonly .h5-editor-tree-row.is-active .h5-editor-tree-actions {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    transform: translateY(-50%) !important;
    transition: opacity .15s ease, visibility .15s ease !important;
    visibility: hidden !important;
    z-index: 4 !important;
}

.h5-editor-readonly .h5-editor-page-actions,
.h5-editor-readonly .h5-editor-page-row.is-active .h5-editor-page-actions {
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
}

.h5-editor-readonly .h5-editor-page-row:hover .h5-editor-page-actions,
.h5-editor-readonly .h5-editor-tree-row:hover .h5-editor-tree-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

.h5-editor-readonly .h5-editor-page-actions button,
.h5-editor-readonly .h5-editor-tree-actions button,
.h5-editor-readonly .h5-editor-tree-row.is-active .h5-editor-tree-actions button {
    position: relative !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
}

.h5-editor-readonly .h5-editor-page-actions button[data-h5-tooltip]::after,
.h5-editor-readonly .h5-editor-tree-actions button[data-h5-tooltip]::after {
    content: attr(data-h5-tooltip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    z-index: 30;
    display: block;
    width: max-content;
    max-width: 120px;
    border-radius: 6px;
    background: #0f172a;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .16);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    opacity: 0;
    padding: 6px 7px;
    pointer-events: none;
    transform: translate(-50%, 2px);
    transition: opacity .12s ease, transform .12s ease;
    visibility: hidden;
    white-space: nowrap;
}

.h5-case-template-editor .h5-editor-readonly-component-tree,
.h5-case-template-editor .h5-editor-tree-row,
.h5-case-template-editor .h5-editor-tree-actions {
    overflow: visible !important;
}

.h5-editor-readonly .h5-editor-tree-actions,
.h5-editor-readonly .h5-editor-tree-row.is-active .h5-editor-tree-actions {
    transition: none !important;
}

.h5-case-template-editor .h5-editor-tree-row:hover,
.h5-case-template-editor .h5-editor-tree-row:focus-within {
    z-index: 20;
}

.h5-case-template-editor .h5-editor-tree-row:hover .h5-editor-tree-actions,
.h5-case-template-editor .h5-editor-tree-row:focus-within .h5-editor-tree-actions {
    z-index: 40 !important;
}

.h5-editor-readonly .h5-editor-tree-actions button[data-h5-tooltip]::after {
    z-index: 60;
}

.h5-editor-readonly .h5-editor-page-actions [data-h5-page-action="delete"]::after,
.h5-editor-readonly .h5-editor-tree-actions [data-h5-component-action="delete"]::after {
    right: 0;
    left: auto;
    transform: translateY(2px);
}

.h5-editor-readonly .h5-editor-page-actions button[data-h5-tooltip]:hover::after,
.h5-editor-readonly .h5-editor-page-actions button[data-h5-tooltip]:focus-visible::after,
.h5-editor-readonly .h5-editor-tree-actions button[data-h5-tooltip]:hover::after,
.h5-editor-readonly .h5-editor-tree-actions button[data-h5-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
}

.h5-editor-readonly .h5-editor-page-actions [data-h5-page-action="delete"]:hover::after,
.h5-editor-readonly .h5-editor-page-actions [data-h5-page-action="delete"]:focus-visible::after,
.h5-editor-readonly .h5-editor-tree-actions [data-h5-component-action="delete"]:hover::after,
.h5-editor-readonly .h5-editor-tree-actions [data-h5-component-action="delete"]:focus-visible::after {
    transform: translateY(0);
}

.h5-editor-readonly .h5-editor-page-actions button::before,
.h5-editor-readonly .h5-editor-tree-actions button::before {
    content: "" !important;
    display: block !important;
    width: 13px !important;
    height: 13px !important;
    background-color: currentColor !important;
    -webkit-mask: var(--h5-editor-action-icon) center / 13px 13px no-repeat !important;
    mask: var(--h5-editor-action-icon) center / 13px 13px no-repeat !important;
}

.h5-editor-readonly [data-h5-page-action="up"],
.h5-editor-readonly [data-h5-component-action="up"] {
    --h5-editor-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}

.h5-editor-readonly [data-h5-page-action="down"],
.h5-editor-readonly [data-h5-component-action="down"] {
    --h5-editor-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.h5-editor-readonly [data-h5-page-action="copy"],
.h5-editor-readonly [data-h5-component-action="copy"] {
    --h5-editor-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='13' height='13' x='9' y='9' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}

.h5-editor-readonly [data-h5-page-action="toggle"],
.h5-editor-readonly [data-h5-component-action="toggle"] {
    --h5-editor-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.1 12s3.6-7 9.9-7 9.9 7 9.9 7-3.6 7-9.9 7-9.9-7-9.9-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.h5-editor-readonly [data-h5-page-action="delete"],
.h5-editor-readonly [data-h5-component-action="delete"] {
    --h5-editor-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
}

.h5-editor-readonly .h5-editor-page-actions button:hover:not(:disabled),
.h5-editor-readonly .h5-editor-tree-actions button:hover:not(:disabled) {
    background: #e2e8f0 !important;
    color: #475569 !important;
}

.h5-editor-readonly .h5-editor-page-actions button.is-danger,
.h5-editor-readonly .h5-editor-tree-actions button.is-danger {
    color: #ef4444 !important;
}

.h5-editor-readonly .h5-editor-page-actions button.is-danger:hover:not(:disabled),
.h5-editor-readonly .h5-editor-tree-actions button.is-danger:hover:not(:disabled) {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

.h5-editor-readonly .h5-editor-grid-entry-summary {
    gap: 0 !important;
    max-height: 190px !important;
    overflow: auto !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
}

.h5-editor-readonly .h5-editor-grid-entry-summary div {
    min-height: 32px !important;
    border: 0 !important;
    border-top: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 0 10px !important;
}

.h5-editor-readonly .h5-editor-grid-entry-summary div:first-child {
    border-top: 0 !important;
}

.h5-editor-readonly .h5-editor-grid-entry-summary span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.h5-editor-readonly .h5-editor-grid-entry-summary span::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 999px;
    background: #bfdbfe;
}

.h5-editor-readonly .h5-editor-grid-entry-summary div.is-hidden-entry span::before {
    background: #fecdd3;
}

.h5-editor-readonly .h5-editor-grid-entry-summary em {
    flex: 0 0 auto;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 650;
    line-height: 1;
    padding: 4px 7px;
}

/* Final V10 inspector override: selected object, tabs, then compact fields. */
.h5-editor-readonly .h5-editor-readonly-inspector {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
    border-left: 1px solid #e2e8f0 !important;
    background: #fff !important;
}

.h5-editor-readonly .h5-editor-readonly-inspector > .h5-editor-readonly-panel-head {
    display: none !important;
}

.h5-editor-readonly .h5-editor-readonly-inspector [data-h5-property-panel] {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 0 !important;
    background: #fff !important;
}

.h5-editor-readonly .h5-editor-readonly-object,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-entry-head,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-image-head,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-grid-head,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-download-head,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-page-panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 10px;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
}

.h5-editor-readonly .h5-editor-readonly-object::before {
    content: "正在修改";
    grid-column: 1 / -1;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
}

.h5-editor-readonly .h5-editor-readonly-object strong,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-entry-head strong,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-image-head strong,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-grid-head strong,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-download-head strong,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-page-panel-head strong {
    min-width: 0;
    overflow: hidden;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 750 !important;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-editor-readonly .h5-editor-readonly-object span,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-entry-head span,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-image-head span,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-grid-head span,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-download-head span,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-page-panel-head span {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.45;
}

.h5-editor-readonly [data-h5-property-panel] .h5-editor-entry-head em,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-image-head em,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-grid-head em,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-download-head em,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-page-panel-head em {
    border: 1px solid #e2e8f0 !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 1;
    padding: 5px 8px !important;
}

.h5-editor-readonly .h5-editor-property-tabs,
.h5-editor-readonly .h5-editor-section-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #f8fafc !important;
    padding: 0 8px !important;
}

.h5-editor-readonly .h5-editor-property-tabs button,
.h5-editor-readonly .h5-editor-section-tabs button {
    flex: 1 1 0;
    min-height: 39px;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1;
    padding: 0 4px !important;
}

.h5-editor-readonly .h5-editor-property-tabs button.is-active,
.h5-editor-readonly .h5-editor-section-tabs button.is-active {
    border-bottom-color: #2563eb !important;
    color: #2563eb !important;
}

.h5-editor-readonly .h5-editor-readonly-tab,
.h5-editor-readonly .h5-editor-section-pane.is-active {
    padding: 14px 16px 18px !important;
}

.h5-editor-readonly [data-h5-property-panel] .h5-editor-entry-card,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-image-card,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-grid-card,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-download-card,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-page-card,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-entry-advanced,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-image-advanced,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-grid-advanced,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-download-advanced,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-page-advanced,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-grid-notices,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-entry-notices,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-image-notices,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-download-notices,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-page-notices {
    margin-left: 16px !important;
    margin-right: 16px !important;
}

.h5-editor-readonly [data-h5-property-panel] .h5-editor-entry-card,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-image-card,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-grid-card,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-download-card,
.h5-editor-readonly [data-h5-property-panel] .h5-editor-page-card {
    border-color: #e2e8f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .02) !important;
    padding: 12px !important;
}

.h5-preview-theme-card p {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.h5-preview-theme-card p span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 650;
}

.h5-preview-theme-card p span::before {
    width: 14px;
    height: 14px;
    border: 1px solid rgba(148, 163, 184, .5);
    border-radius: 4px;
    background: var(--swatch-color, #fff);
    content: "";
}

.h5-preview-entry-grid {
    background: transparent;
    overflow: visible;
    padding: var(--preview-grid-padding-top, 24px) var(--preview-grid-padding-x, 37px) var(--preview-grid-padding-bottom, 28px);
}

.h5-preview-entry-grid button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    padding: 0;
    text-align: center;
}

.h5-preview-entry-grid button.is-selected {
    border-radius: 12px;
    background: rgba(239, 246, 255, .42);
}

.h5-preview-entry-icon {
    width: var(--preview-icon-size, 52px);
    height: var(--preview-icon-size, 52px);
    border-width: var(--preview-icon-border-width, 1.6px);
    border-color: var(--preview-icon-border-color, #145fc9);
    margin-bottom: var(--preview-icon-text-gap, 7px);
}

.h5-preview-entry-icon img,
.h5-preview-entry-icon i {
    width: calc(100% - var(--preview-icon-inner-padding, 16px));
    height: calc(100% - var(--preview-icon-inner-padding, 16px));
}

.h5-preview-entry-grid strong {
    width: var(--preview-title-width, 120%);
    max-width: none;
    overflow: visible;
    color: var(--preview-entry-text-color, #0e55b3);
    font-size: var(--preview-title-font-size, 16px);
    font-weight: 800;
    letter-spacing: 0;
    line-height: var(--preview-title-line-height, 1.18);
    text-overflow: clip;
    white-space: nowrap;
}

.h5-preview-entry-grid small {
    width: var(--preview-subtitle-width, 128%);
    max-width: none;
    overflow: visible;
    margin-top: 4px;
    color: var(--preview-entry-text-color, #0e55b3);
    font-size: var(--preview-subtitle-font-size, 13px);
    font-weight: 400;
    line-height: var(--preview-subtitle-line-height, 1.2);
    text-overflow: clip;
    white-space: normal;
}

.h5-preview-entry-grid em {
    display: none;
}

.h5-preview-case-bqwx-home {
    width: 100%;
    overflow: hidden;
    background: #f8ffff;
    color: #0758bd;
}

.h5-preview-case-hero,
.h5-preview-case-main,
.h5-preview-case-footer {
    position: relative;
    width: 100%;
}

.h5-preview-case-hero img,
.h5-preview-case-footer img {
    display: block;
    width: 100%;
    max-width: 100%;
}

.h5-preview-case-main {
    height: 561px;
    overflow: hidden;
    background: url("/assets/h5-templates/case_bQWxDxhM/home-bg-source.png") center center / cover no-repeat;
}

.h5-preview-case-grid {
    display: grid;
    grid-template-columns: repeat(3, 92px);
    grid-auto-rows: 130px;
    justify-content: space-between;
    gap: 7px 0;
    width: 100%;
    padding: 25px 30px 0;
}

.h5-preview-case-entry {
    position: relative;
    display: block;
    width: 92px;
    height: 130px;
    min-width: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #0758bd;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: center;
}

.h5-preview-case-entry-icon {
    position: absolute;
    top: 0;
    left: 6px;
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border: 1px solid #195ab5;
    border-radius: 999px;
    background: transparent;
}

.h5-preview-case-entry-icon img,
.h5-preview-case-entry-icon i {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.h5-preview-case-entry-icon i {
    border-radius: 999px;
    background: #e8f3f6;
}

.h5-preview-case-entry strong,
.h5-preview-case-entry small {
    position: absolute;
    left: 0;
    display: block;
    width: 92px;
    margin: 0;
    overflow: visible;
    color: #195ab5;
    font-style: normal;
    text-align: center;
    text-overflow: clip;
    white-space: normal;
    word-break: keep-all;
}

.h5-preview-case-entry strong {
    top: 86px;
    width: 89px;
    height: 17px;
    font-size: 15px;
    font-weight: 700;
    line-height: 17px;
    white-space: nowrap;
}

.h5-preview-case-entry small {
    top: 103px;
    font-family: "Times New Roman", "Microsoft YaHei", serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.h5-preview-case-footer {
    height: 68.75px;
    overflow: hidden;
}

.h5-preview-case-footer img {
    height: 68.75px;
    object-fit: cover;
    object-position: center top;
}

.h5-preview-case-hero.is-selected,
.h5-preview-case-main.is-selected,
.h5-preview-case-footer.is-selected,
.h5-preview-case-entry.is-selected {
    outline: 2px solid var(--h5-editor-blue);
    outline-offset: -2px;
}

.h5-preview-block.is-selected,
.h5-preview-entry-grid.is-selected,
.h5-preview-download-list.is-selected,
.h5-preview-entry-grid button.is-selected,
.h5-preview-download-list button.is-selected {
    border-color: var(--h5-editor-blue);
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .14);
}

@media (max-width: 1280px) {
    .h5-editor-readonly {
        min-width: 1180px;
    }

    .h5-editor-readonly-workbench {
        grid-template-columns: 300px minmax(470px, 1fr) 340px;
    }
}
.h5-case-template-editor-page .admin-shell > .workspace > .content {
    height: calc(100vh - 76px);
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.h5-case-template-editor {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #f1f5f9;
}

.h5-case-template-editor .h5-case-editor-topbar {
    flex: 0 0 auto;
    margin: 0;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
}

.h5-case-template-editor .h5-editor-readonly-title {
    flex: 1 1 auto;
    gap: 8px;
}

.h5-case-template-editor .h5-editor-readonly-title::before {
    display: none;
}

.h5-case-template-editor .h5-editor-readonly-title strong {
    max-width: 430px;
    font-size: 15px;
}

.h5-case-editor-title-status,
.h5-case-editor-title-stats span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.h5-case-editor-title-status {
    min-height: 32px;
    border: 1px solid transparent;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
}

.h5-case-editor-title-stats {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.h5-case-editor-title-stats span {
    gap: 3px;
    padding: 4px 7px;
}

.h5-case-editor-title-stats b,
.h5-case-editor-title-stats em {
    font-style: normal;
    line-height: 1;
}

.h5-case-editor-title-stats b {
    font-weight: 700;
}

.h5-case-editor-title-stats em {
    font-weight: 500;
}

.h5-case-editor-title-status.is-success,
.h5-case-editor-title-stats span.is-success {
    background: #ecfdf5;
    color: #047857;
}

.h5-case-editor-title-status.is-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.h5-case-editor-title-status.is-danger,
.h5-case-editor-title-stats span.is-danger {
    background: #fef2f2;
    color: #dc2626;
}

.h5-case-editor-title-status.is-danger {
    border-color: #fecaca;
}

.h5-case-editor-title-status.is-warning,
.h5-case-editor-title-stats span.is-warning {
    background: #fffbeb;
    color: #b45309;
}

.h5-case-editor-title-status.is-warning {
    border-color: #fde68a;
}

.h5-case-editor-title-status.is-muted,
.h5-case-editor-title-stats span.is-muted {
    background: #f1f5f9;
    color: #64748b;
}

.h5-case-editor-title-status.is-muted {
    border-color: #e2e8f0;
}

.h5-case-template-editor .h5-editor-readonly-statuses span.is-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.h5-case-template-editor .h5-editor-readonly-statuses span.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}

.h5-case-template-editor .h5-editor-readonly-statuses span.is-danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #dc2626;
}

.h5-case-template-editor .h5-editor-readonly-actions button.is-primary:not(:disabled) {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .12);
    cursor: pointer;
}

.h5-case-template-editor .h5-editor-readonly-actions button.is-primary:not(:disabled):hover {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #fff;
}

.h5-case-template-editor .h5-editor-readonly-actions button.is-primary:disabled {
    border-color: #dbe3ef;
    background: #f8fafc;
    color: #64748b;
    box-shadow: none;
}

.h5-case-template-editor .h5-case-editor-workbench {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 12px 12px;
}

.h5-case-template-editor .h5-editor-readonly-left,
.h5-case-template-editor .h5-case-editor-inspector {
    min-height: 0;
}

.h5-case-template-editor .h5-editor-readonly-page-list,
.h5-case-template-editor .h5-editor-readonly-component-tree {
    min-width: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.h5-case-template-editor .h5-editor-readonly-page-list::-webkit-scrollbar,
.h5-case-template-editor .h5-editor-readonly-component-tree::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.h5-case-template-editor .h5-editor-page-row,
.h5-case-template-editor .h5-editor-tree-row {
    max-width: 100%;
}

.h5-case-template-editor .h5-editor-page-row > button,
.h5-case-template-editor .h5-editor-tree-row > button {
    min-width: 0;
    max-width: 100%;
}

.h5-case-template-editor .h5-editor-page-head,
.h5-case-template-editor .h5-editor-tree-title {
    min-width: 0;
    max-width: 100%;
}

.h5-case-template-editor .h5-editor-page-head strong {
    flex: 1 1 auto;
    min-width: 0;
}

.h5-case-template-editor .h5-editor-page-head strong,
.h5-case-template-editor .h5-editor-page-head b,
.h5-case-template-editor .h5-editor-tree-title,
.h5-case-template-editor .h5-editor-tree-name,
.h5-case-template-editor .h5-editor-tree-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-case-template-editor .h5-editor-tree-name {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.h5-case-template-editor .h5-editor-readonly-panel,
.h5-case-template-editor .h5-case-editor-preview-panel,
.h5-case-template-editor .h5-case-editor-inspector {
    border-color: #e2e8f0;
    border-radius: 10px;
}

.h5-case-template-editor .h5-editor-readonly-panel-head em {
    margin-left: 6px;
    color: #64748b;
    font-style: normal;
    font-weight: 500;
}

.h5-case-template-editor .h5-editor-empty-row {
    padding: 12px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
}

.h5-case-template-editor .h5-editor-tree-row {
    --h5-tree-depth: 0;
    --h5-tree-indent: 0px;
    position: relative;
    box-sizing: border-box;
    width: calc(100% - var(--h5-tree-indent));
    margin-left: var(--h5-tree-indent);
}

.h5-case-template-editor .h5-editor-tree-row > button {
    position: relative;
    overflow: hidden;
}

.h5-case-template-editor .h5-editor-tree-row.is-child-node::before {
    content: "";
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: 7px;
    width: 1px;
    background: #dbeafe;
    pointer-events: none;
    z-index: 0;
}

.h5-case-template-editor .h5-editor-tree-row.is-child-node > button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 7px;
    width: 13px;
    height: 1px;
    background: #bfdbfe;
    pointer-events: none;
    z-index: 0;
}

.h5-case-template-editor .h5-editor-tree-row.is-container-node > button {
    background: #f8fbff;
    box-shadow: inset 3px 0 0 #bfdbfe;
}

.h5-case-template-editor .h5-editor-tree-row.is-container-node .h5-editor-tree-title::before {
    background-color: #93c5fd !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
}

.h5-case-template-editor .h5-editor-page-row.is-hidden-page > button,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node > button,
.h5-case-template-editor .h5-editor-page-row.is-hidden-page.is-active > button,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node.is-active > button {
    color: #94a3b8 !important;
}

.h5-case-template-editor .h5-editor-page-row.is-hidden-page .h5-editor-page-head strong,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node .h5-editor-tree-title,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node .h5-editor-tree-title *,
.h5-case-template-editor .h5-editor-page-row.is-hidden-page.is-active .h5-editor-page-head strong,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node.is-active .h5-editor-tree-title,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node.is-active .h5-editor-tree-title * {
    color: #94a3b8 !important;
}

.h5-case-template-editor .h5-editor-page-row.is-hidden-page .h5-editor-page-head b,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node .h5-editor-tree-type {
    background: #f8fafc !important;
    color: #94a3b8 !important;
}

.h5-case-template-editor .h5-editor-page-row.is-hidden-page .h5-editor-page-head::before,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node .h5-editor-tree-title::before {
    opacity: .34 !important;
}

.h5-case-template-editor .h5-editor-tree-row.is-hidden-node.is-container-node > button {
    background: #fbfdff !important;
    box-shadow: inset 3px 0 0 #e2e8f0;
}

.h5-case-template-editor .h5-editor-tree-row.is-hidden-node.is-child-node::before,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node.is-child-node > button::before {
    background: #e2e8f0;
}

.h5-case-template-editor .h5-case-editor-preview-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    justify-items: center;
    min-width: 0;
}

.h5-case-template-editor .h5-case-editor-preview-panel > .h5-editor-readonly-panel-head {
    display: none;
}

.h5-case-template-editor .h5-case-preview-phone {
    position: relative;
    width: min(378px, calc(100% - 24px));
    height: min(820px, calc(100% - 16px));
    min-height: 660px;
    max-height: calc(100% - 16px);
    overflow: auto;
    background: #fff;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.h5-case-template-editor .h5-case-preview-phone::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.h5-case-template-editor .h5-case-preview-phone > * {
    width: 100%;
    height: 100%;
}

.h5-case-template-editor .h5-case-wechat-card-preview {
    position: relative;
    width: min(378px, calc(100% - 24px));
    height: min(820px, calc(100% - 16px));
    min-height: 660px;
    max-height: calc(100% - 16px);
    overflow: hidden;
    margin: 0 auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.h5-case-template-editor .h5-case-wechat-card-preview::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.h5-case-template-editor.is-system-mode .h5-case-wechat-card-preview {
    align-self: center;
    justify-self: center;
    margin-top: 0;
}

.h5-case-template-editor .h5-editor-panel-group-title {
    margin: 16px 0 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.h5-case-template-editor [data-property-panel] > .h5-editor-panel-group-title:first-child {
    margin-top: 0;
}

.h5-case-wechat-phone {
    display: grid;
    grid-template-rows: 28px 44px minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    border: 0;
    border-radius: 30px;
    background: #ededed;
    box-shadow: none;
}

.h5-case-wechat-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
    padding: 0 20px;
    background: #f7f7f7;
    color: #111827;
    font-size: 12px;
    font-weight: 650;
}

.h5-case-wechat-status i,
.h5-case-wechat-status b {
    display: block;
    height: 11px;
}

.h5-case-wechat-status i {
    width: 28px;
    border-radius: 10px;
    background: linear-gradient(90deg, #111827 0 4px, transparent 4px 7px, #111827 7px 11px, transparent 11px 14px, #111827 14px 18px, transparent 18px 21px, #111827 21px 25px);
}

.h5-case-wechat-status b {
    width: 24px;
    border: 1.6px solid #111827;
    border-radius: 3px;
    position: relative;
}

.h5-case-wechat-status b::after {
    position: absolute;
    top: 2px;
    right: -4px;
    width: 2px;
    height: 5px;
    border-radius: 0 2px 2px 0;
    background: #111827;
    content: "";
}

.h5-case-wechat-nav {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    height: 44px;
    border-bottom: 1px solid #d8d8d8;
    background: #f7f7f7;
    color: #111827;
    text-align: center;
}

.h5-case-wechat-nav span,
.h5-case-wechat-nav em {
    color: #111827;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.h5-case-wechat-nav em {
    font-size: 17px;
    letter-spacing: 1px;
}

.h5-case-wechat-nav strong {
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-case-wechat-chat {
    position: relative;
    min-height: 0;
    overflow: hidden;
    padding: 18px 12px;
    background: #ededed;
}

.h5-case-wechat-time {
    width: max-content;
    max-width: 72%;
    margin: 0 auto 18px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .10);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    padding: 5px 7px;
}

.h5-case-wechat-message {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 8px;
    align-items: start;
}

.h5-case-wechat-bubble {
    justify-self: end;
    position: relative;
    max-width: 262px;
}

.h5-case-wechat-bubble::after {
    position: absolute;
    top: 14px;
    right: -6px;
    width: 12px;
    height: 12px;
    background: #fff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: "";
}

.h5-case-wechat-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 4px;
    background: linear-gradient(135deg, #60a5fa, #2563eb);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.h5-case-wechat-card {
    display: grid;
    gap: 8px;
    width: 250px;
    min-height: 108px;
    border-radius: 4px;
    background: #fff;
    color: #111827;
    padding: 10px 10px 7px;
    text-align: left;
}

.h5-case-wechat-card > strong {
    display: -webkit-box;
    overflow: hidden;
    color: #111827;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.h5-case-wechat-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 9px;
    align-items: start;
    min-height: 48px;
}

.h5-case-wechat-card-body span {
    display: -webkit-box;
    overflow: hidden;
    color: #7b7b7b;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.h5-case-wechat-card-img {
    width: 48px;
    height: 48px;
    border-radius: 3px;
    background: #eef2f7 center / cover no-repeat;
}

.h5-case-wechat-card-foot {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    border-top: 1px solid #eeeeee;
    color: #a0a0a0;
    font-size: 11px;
    line-height: 1;
    padding-top: 7px;
}

.h5-case-wechat-card-foot i {
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 2px;
    background: linear-gradient(135deg, #9ca3af, #cbd5e1);
}

.h5-case-wechat-phone.is-disabled .h5-case-wechat-card {
    opacity: .58;
}

.h5-case-wechat-disabled {
    width: max-content;
    max-width: 76%;
    margin: 20px auto 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, .08);
    color: #fff;
    font-size: 12px;
    line-height: 1.45;
    padding: 6px 8px;
    text-align: center;
}

.h5-case-template-editor [data-property-panel] {
    padding: 12px;
}

.h5-case-template-editor .h5-case-inspector-tabs {
    position: sticky;
    top: 0;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin: 10px -12px 2px;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    padding: 8px 12px;
}

.h5-case-template-editor .h5-case-inspector-tabs button {
    min-width: 0;
    min-height: 30px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    padding: 0 8px;
}

.h5-case-template-editor .h5-case-inspector-tabs button:hover,
.h5-case-template-editor .h5-case-inspector-tabs button.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

.h5-case-template-editor .h5-case-inspector-tabs + .h5-editor-action-panel {
    margin-top: 12px;
    border-top: 0;
    padding-top: 0;
}

.h5-case-template-editor .h5-editor-field,
.h5-case-template-editor .h5-editor-switch-field,
.h5-case-template-editor .h5-editor-color-field,
.h5-case-template-editor .h5-editor-upload-field,
.h5-case-template-editor .h5-editor-action-panel,
.h5-case-template-editor .h5-editor-select-field,
.h5-case-template-editor .h5-editor-page-choice-list {
    display: block;
    margin-top: 12px;
}

.h5-case-template-editor .h5-editor-field > span,
.h5-case-template-editor .h5-editor-switch-field > span,
.h5-case-template-editor .h5-editor-color-field > span,
.h5-case-template-editor .h5-editor-upload-text span,
.h5-case-template-editor .h5-editor-select-field > span,
.h5-case-template-editor .h5-editor-action-panel > strong {
    display: block;
    margin-bottom: 6px;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
}

.h5-case-template-editor .h5-editor-action-panel {
    margin-top: 16px;
    border-top: 1px solid #e2e8f0;
    padding-top: 13px;
}

.h5-case-template-editor .h5-editor-action-panel > strong {
    margin-bottom: 0;
}

.h5-case-template-editor .h5-editor-field input,
.h5-case-template-editor .h5-editor-field textarea {
    width: 100%;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: 13px;
    line-height: 20px;
    outline: none;
    padding: 8px 10px;
    resize: vertical;
}

.h5-case-template-editor .h5-editor-field input:focus,
.h5-case-template-editor .h5-editor-field textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.h5-case-template-editor .h5-editor-switch-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.h5-case-template-editor .h5-editor-switch-field > span,
.h5-case-template-editor .h5-editor-color-field > span {
    margin: 0;
}

.h5-case-template-editor .h5-editor-switch-control {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 38px;
    height: 22px;
}

.h5-case-template-editor .h5-editor-switch-control input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    opacity: 0;
}

.h5-case-template-editor .h5-editor-switch-control input:disabled {
    cursor: default;
}

.h5-case-template-editor .h5-editor-switch-control i {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #cbd5e1;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
    transition: background-color .16s ease;
}

.h5-case-template-editor .h5-editor-switch-control i::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
    content: "";
    transition: transform .16s ease;
}

.h5-case-template-editor .h5-editor-switch-control input:checked + i {
    background: #22c55e;
}

.h5-case-template-editor .h5-editor-switch-control input:checked + i::after {
    transform: translateX(16px);
}

.h5-case-template-editor .h5-editor-switch-control input:focus-visible + i {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14), inset 0 0 0 1px rgba(15, 23, 42, .06);
}

.h5-case-template-editor .h5-editor-switch-control input:disabled + i {
    opacity: .58;
}

.h5-case-template-editor .h5-editor-color-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.h5-case-template-editor .h5-editor-color-control {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 24px;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    padding: 3px;
}

.h5-case-template-editor .h5-editor-color-control i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
}

.h5-case-template-editor .h5-editor-color-control input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    cursor: pointer;
    opacity: 0;
}

.h5-case-template-editor .h5-editor-color-control input:disabled {
    cursor: default;
}

.h5-case-template-editor .h5-editor-upload-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.h5-case-template-editor .h5-editor-upload-text {
    min-width: 0;
}

.h5-case-template-editor .h5-editor-upload-text span {
    margin-bottom: 3px;
}

.h5-case-template-editor .h5-editor-upload-text strong {
    display: block;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-case-template-editor .h5-editor-upload-field button,
.h5-case-template-editor .h5-editor-segmented button,
.h5-case-template-editor .h5-editor-page-choice-list button {
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    padding: 6px 10px;
}

.h5-case-template-editor .h5-editor-upload-field button:hover,
.h5-case-template-editor .h5-editor-segmented button:hover,
.h5-case-template-editor .h5-editor-page-choice-list button:hover {
    border-color: #2563eb;
    color: #2563eb;
}

.h5-case-template-editor .h5-editor-upload-field button:disabled,
.h5-case-template-editor .h5-editor-segmented button:disabled,
.h5-case-template-editor .h5-editor-page-choice-list button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.h5-case-template-editor .h5-editor-select {
    position: relative;
}

.h5-case-template-editor .h5-editor-select-trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14px;
    gap: 2px 8px;
    align-items: center;
    width: 100%;
    min-height: 42px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    font: inherit;
    padding: 8px 10px;
    text-align: left;
}

.h5-case-template-editor .h5-editor-select-trigger:hover,
.h5-case-template-editor .h5-editor-select-trigger[aria-expanded="true"] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.h5-case-template-editor .h5-editor-select-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.h5-case-template-editor .h5-editor-select-trigger strong,
.h5-case-template-editor .h5-editor-select-trigger small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-case-template-editor .h5-editor-select-trigger strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
}

.h5-case-template-editor .h5-editor-select-trigger small {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    grid-column: 1 / 2;
    line-height: 16px;
}

.h5-case-template-editor .h5-editor-select-trigger i {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    grid-column: 2;
    grid-row: 1 / span 2;
}

.h5-case-template-editor .h5-editor-select-trigger i::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 7px;
    height: 7px;
    border-right: 1.7px solid #64748b;
    border-bottom: 1.7px solid #64748b;
    transform: rotate(45deg);
}

.h5-case-template-editor .h5-editor-select.is-open .h5-editor-select-trigger i::before {
    top: 6px;
    transform: rotate(225deg);
}

.h5-case-template-editor .h5-editor-select-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    display: grid;
    gap: 4px;
    max-height: 232px;
    overflow-y: auto;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    padding: 6px;
}

.h5-case-template-editor .h5-editor-select-menu[hidden] {
    display: none;
}

.h5-case-template-editor .h5-editor-select-menu button {
    display: grid;
    gap: 2px;
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #0f172a;
    cursor: pointer;
    font: inherit;
    padding: 8px 9px;
    text-align: left;
}

.h5-case-template-editor .h5-editor-select-menu button:hover,
.h5-case-template-editor .h5-editor-select-menu button.is-selected {
    background: #eff6ff;
}

.h5-case-template-editor .h5-editor-select-menu button strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
}

.h5-case-template-editor .h5-editor-select-menu button small {
    color: #64748b;
    font-size: 12px;
    line-height: 16px;
}

.h5-case-template-editor .h5-editor-select-menu button.is-selected strong,
.h5-case-template-editor .h5-editor-select-menu button.is-selected small {
    color: #2563eb;
}

.h5-editor-modal-backdrop .h5-editor-modal-foot button.is-primary {
    border-color: #2563eb !important;
    background: #2563eb !important;
    color: #fff !important;
    opacity: 1 !important;
}

.h5-editor-modal-backdrop .h5-editor-modal-foot button.is-primary:hover {
    border-color: #1d4ed8 !important;
    background: #1d4ed8 !important;
}

.h5-case-template-editor .h5-editor-segmented,
.h5-case-template-editor .h5-editor-page-choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.h5-case-template-editor .h5-editor-segmented button.is-active,
.h5-case-template-editor .h5-editor-page-choice-list button.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
}

.h5-case-component-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.h5-case-component-options button {
    display: grid;
    gap: 5px;
    min-height: 82px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    padding: 13px;
    text-align: left;
}

.h5-case-component-options button:hover {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.h5-case-component-options strong,
.h5-editor-radio-grid strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
}

.h5-case-component-options span,
.h5-editor-radio-grid small {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.h5-editor-modal .h5-editor-radio-grid label {
    align-items: flex-start;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
}

.h5-editor-modal .h5-editor-radio-grid input {
    margin-top: 2px;
}

.h5-case-editor-toast {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 20;
    max-width: 320px;
    padding: 10px 12px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

@media (max-width: 1280px) {
    .h5-case-template-editor .h5-case-preview-phone,
    .h5-case-template-editor .h5-case-wechat-card-preview {
        width: min(330px, calc(100% - 16px));
    }
}

/* H5 case-template side panel typography: quiet SaaS hierarchy. */
.h5-case-template-editor .h5-editor-readonly-left,
.h5-case-template-editor .h5-case-editor-inspector {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.h5-case-template-editor .h5-editor-readonly-left .h5-editor-readonly-panel-head strong {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
}

.h5-case-template-editor .h5-editor-readonly-left .h5-editor-readonly-panel-head strong::before {
    background: #94a3b8 !important;
    opacity: .78 !important;
}

.h5-case-template-editor .h5-editor-page-row > button,
.h5-case-template-editor .h5-editor-tree-row > button {
    border-color: transparent !important;
    background: transparent !important;
    color: #334155 !important;
    font-family: inherit !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.h5-case-template-editor .h5-editor-page-head,
.h5-case-template-editor .h5-editor-tree-title {
    gap: 8px !important;
    line-height: 1.45 !important;
}

.h5-case-template-editor .h5-editor-page-head strong,
.h5-case-template-editor .h5-editor-tree-name {
    color: #334155 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
}

.h5-case-template-editor .h5-editor-page-head b,
.h5-case-template-editor .h5-editor-tree-type,
.h5-case-template-editor .h5-editor-tree-action-badge {
    border: 0 !important;
    border-radius: 5px !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    padding: 2px 5px !important;
}

.h5-case-template-editor .h5-editor-page-row > button:hover,
.h5-case-template-editor .h5-editor-tree-row > button:hover {
    border-color: transparent !important;
    background: rgba(59, 130, 246, .05) !important;
    box-shadow: none !important;
}

.h5-case-template-editor .h5-editor-page-row.is-active > button,
.h5-case-template-editor .h5-editor-tree-row.is-active > button {
    border-color: transparent !important;
    background: rgba(59, 130, 246, .08) !important;
    color: #334155 !important;
    box-shadow: none !important;
}

.h5-case-template-editor .h5-editor-page-row.is-active .h5-editor-page-head strong,
.h5-case-template-editor .h5-editor-tree-row.is-active .h5-editor-tree-name {
    color: #334155 !important;
    font-weight: 600 !important;
}

.h5-case-template-editor .h5-editor-page-row.is-active .h5-editor-page-head b,
.h5-case-template-editor .h5-editor-tree-row.is-active .h5-editor-tree-type {
    background: rgba(241, 245, 249, .82) !important;
    color: #334155 !important;
}

.h5-case-template-editor .h5-editor-page-row.is-hidden-page .h5-editor-page-head strong,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node .h5-editor-tree-name,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node.is-active .h5-editor-tree-name {
    color: #64748b !important;
}

.h5-case-template-editor .h5-editor-page-row.is-hidden-page .h5-editor-page-head b,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node .h5-editor-tree-type,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node.is-active .h5-editor-tree-type {
    background: #f8fafc !important;
    color: #cbd5e1 !important;
}

/* H5 case-template left panel polish: clearer current page/control states. */
.h5-case-template-editor .h5-editor-readonly-left {
    color: #334155;
}

.h5-case-template-editor .h5-editor-page-row > button,
.h5-case-template-editor .h5-editor-tree-row > button {
    position: relative !important;
    min-height: 39px;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: inset 0 0 0 0 transparent !important;
    color: #334155 !important;
    padding: 9px 10px !important;
    transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease, transform .08s ease;
}

.h5-case-template-editor .h5-editor-tree-row > button {
    padding-right: 58px !important;
}

.h5-case-template-editor .h5-editor-page-head strong,
.h5-case-template-editor .h5-editor-tree-name {
    color: #334155 !important;
    font-size: 12.5px !important;
    font-weight: 520 !important;
    line-height: 1.38 !important;
}

.h5-case-template-editor .h5-editor-page-head b,
.h5-case-template-editor .h5-editor-tree-type,
.h5-case-template-editor .h5-editor-tree-action-badge {
    border: 1px solid #eef2f7 !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 10.5px !important;
    font-weight: 430 !important;
    padding: 2px 6px !important;
}

.h5-case-template-editor .h5-editor-page-row > button:hover,
.h5-case-template-editor .h5-editor-tree-row > button:hover {
    border-color: #dbeafe !important;
    background: #f8fbff !important;
    color: #1d4ed8 !important;
    box-shadow: inset 2px 0 0 #bfdbfe !important;
}

.h5-case-template-editor .h5-editor-page-row > button:active,
.h5-case-template-editor .h5-editor-tree-row > button:active {
    transform: translateY(1px);
}

.h5-case-template-editor .h5-editor-page-row > button:focus-visible,
.h5-case-template-editor .h5-editor-tree-row > button:focus-visible {
    outline: 0;
    border-color: #93c5fd !important;
    box-shadow: inset 3px 0 0 #2563eb, 0 0 0 3px rgba(37, 99, 235, .10) !important;
}

.h5-case-template-editor .h5-editor-page-row.is-current-page:not(.is-active) > button {
    border-color: #dbeafe !important;
    background: #f8fbff !important;
    box-shadow: inset 2px 0 0 #93c5fd !important;
}

.h5-case-template-editor .h5-editor-page-row.is-active > button,
.h5-case-template-editor .h5-editor-tree-row.is-active > button {
    border-color: #93c5fd !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    box-shadow: inset 3px 0 0 #2563eb, 0 1px 2px rgba(15, 23, 42, .04) !important;
}

.h5-case-template-editor .h5-editor-page-row.is-current-page .h5-editor-page-head strong,
.h5-case-template-editor .h5-editor-page-row.is-active .h5-editor-page-head strong,
.h5-case-template-editor .h5-editor-tree-row.is-active .h5-editor-tree-name {
    color: #1d4ed8 !important;
    font-weight: 620 !important;
}

.h5-case-template-editor .h5-editor-page-row.is-current-page .h5-editor-page-head b,
.h5-case-template-editor .h5-editor-page-row.is-active .h5-editor-page-head b,
.h5-case-template-editor .h5-editor-tree-row.is-active .h5-editor-tree-type {
    border-color: #bfdbfe !important;
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

.h5-case-template-editor .h5-editor-page-row.is-hidden-page > button,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node > button {
    background: #fbfdff !important;
}

.h5-case-template-editor .h5-editor-page-row.is-hidden-page .h5-editor-page-head strong,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node .h5-editor-tree-name {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

.h5-case-template-editor .h5-editor-page-row.is-hidden-page .h5-editor-page-head b,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node .h5-editor-tree-type {
    border-color: #f1f5f9 !important;
    background: #f8fafc !important;
    color: #cbd5e1 !important;
}

.h5-case-template-editor .h5-editor-page-row.is-hidden-page.is-current-page > button,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node.is-active > button {
    border-color: #dbeafe !important;
    background: #f8fbff !important;
    box-shadow: inset 3px 0 0 #93c5fd !important;
}

/* H5 case-template left panel refinement: no leading stripe, fixed type/action columns. */
.h5-case-template-editor .h5-case-editor-title-status {
    min-height: 32px !important;
    box-sizing: border-box;
    padding: 7px 11px !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
}

.h5-case-template-editor .h5-editor-page-row > button {
    padding-right: 112px !important;
}

.h5-case-template-editor .h5-editor-tree-row > button {
    padding-right: 96px !important;
}

.h5-case-template-editor .h5-editor-page-head {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100%;
    min-width: 0;
}

.h5-case-template-editor .h5-editor-page-head strong {
    flex: 1 1 auto;
    min-width: 0;
}

.h5-case-template-editor .h5-editor-page-head b {
    justify-content: center;
    flex: 0 0 76px;
    max-width: 76px;
    font-size: 11px !important;
    text-align: center;
}

.h5-case-template-editor .h5-editor-page-row > button:hover,
.h5-case-template-editor .h5-editor-tree-row > button:hover,
.h5-case-template-editor .h5-editor-page-row.is-current-page:not(.is-active) > button,
.h5-case-template-editor .h5-editor-page-row.is-active > button,
.h5-case-template-editor .h5-editor-tree-row.is-active > button,
.h5-case-template-editor .h5-editor-page-row.is-hidden-page.is-current-page > button,
.h5-case-template-editor .h5-editor-tree-row.is-hidden-node.is-active > button {
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

.h5-case-template-editor .h5-editor-page-row > button:focus-visible,
.h5-case-template-editor .h5-editor-tree-row > button:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10) !important;
}

.h5-case-template-editor .h5-editor-page-row:hover .h5-editor-page-head::before,
.h5-case-template-editor .h5-editor-tree-row:hover .h5-editor-tree-title::before,
.h5-case-template-editor .h5-editor-page-row.is-active .h5-editor-page-head::before,
.h5-case-template-editor .h5-editor-tree-row.is-active .h5-editor-tree-title::before,
.h5-case-template-editor .h5-editor-page-row.is-current-page .h5-editor-page-head::before {
    background-color: #cbd5e1 !important;
}