* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, Segoe UI, Arial, sans-serif;
    color: #172033;
    background: #eef3f9;
}

a {
    color: inherit;
}

.app-shell {
    min-height: 100vh;
    display: flex;
}

.sidebar-fragment {
    display: contents;
}

.sidebar {
    width: 270px;
    min-height: 100vh;
    padding: 22px 0;
    color: #dce7f5;
    background: linear-gradient(180deg, #101729 0%, #17233b 48%, #0f513f 100%);
    flex: 0 0 270px;
    position: sticky;
    top: 0;
    overflow: visible;
    transition: width .2s ease, flex-basis .2s ease, transform .2s ease, opacity .2s ease;
}

.brand,
.role-card,
.sidebar-foot {
    margin: 0 18px 20px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-toggle {
    width: 34px;
    height: 34px;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
}

.sidebar-restore {
    position: fixed;
    left: 14px;
    top: 14px;
    z-index: 50;
    display: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(126, 149, 180, .28);
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #725cff, #ff5f87);
    box-shadow: 0 16px 34px rgba(29, 44, 78, .18);
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.brand-mark,
.avatar {
    display: grid;
    place-items: center;
    color: white;
    font-weight: 800;
    background: linear-gradient(135deg, #725cff, #ff5f87);
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 22px;
}

.brand strong {
    display: block;
    font-size: 21px;
}

.brand span,
.role-card span,
.sidebar-foot span {
    display: block;
    color: #9fb0ca;
    font-size: 12px;
}

.role-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 12px;
}

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

.nav-label {
    margin: 18px 22px 8px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7d8ca5;
}

.nav a {
    display: flex;
    align-items: center;
    margin: 0 12px;
    padding: 12px 16px;
    border-radius: 8px;
    text-decoration: none;
    color: #b8c6dc;
    font-weight: 650;
}

.nav a:hover,
.nav a.active {
    color: white;
    background: rgba(114, 92, 255, .22);
}

.sidebar-foot {
    margin-top: 32px;
    padding: 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
}

.sidebar-collapsed .sidebar {
    width: 0;
    flex-basis: 0;
    padding-inline: 0;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

.sidebar-collapsed .sidebar-restore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0);
}

.sidebar-collapsed .sidebar {
    pointer-events: auto;
}

.sidebar-collapsed .brand,
.sidebar-collapsed .nav,
.sidebar-collapsed .sidebar-foot {
    pointer-events: none;
}

.sidebar-collapsed .content {
    padding-left: 72px;
}

.content {
    width: 100%;
    padding: 28px;
    overflow-x: hidden;
}

.topbar,
.panel,
.metric,
.event-card {
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(126, 149, 180, .22);
    box-shadow: 0 18px 55px rgba(29, 44, 78, .08);
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 24px;
    border-radius: 8px;
}

.topbar-actions,
.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.language-switch {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 4px;
    border-radius: 8px;
    background: #eef3ff;
    border: 1px solid #dce5f4;
}

.language-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 7px;
    color: #53627b;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
}

.language-switch a.active {
    color: #ffffff;
    background: linear-gradient(135deg, #725cff, #ff5f87);
    box-shadow: 0 8px 18px rgba(114, 92, 255, .18);
}

.login-language {
    justify-self: end;
    margin-bottom: 18px;
}

.marketing-language {
    margin-left: 4px;
}

.profile-dropdown {
    position: relative;
}

.profile-trigger,
.logout-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 800;
}

.profile-trigger {
    padding: 7px 10px 7px 8px;
    color: #172033;
    background: #f4f7ff;
    border: 1px solid #dce5f4;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 10px 24px rgba(29, 44, 78, .06);
    list-style: none;
}

.profile-trigger::-webkit-details-marker {
    display: none;
}

.profile-dropdown[open] .profile-trigger,
.profile-trigger:hover {
    color: #5b4dff;
    border-color: rgba(114, 92, 255, .42);
    box-shadow: 0 10px 24px rgba(114, 92, 255, .12);
}

.profile-initial {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #725cff, #ff5f87);
    font-size: 12px;
}

.profile-copy {
    display: grid;
    gap: 1px;
    min-width: 88px;
}

.profile-copy strong,
.profile-copy small {
    line-height: 1.1;
}

.profile-copy strong {
    color: #172033;
    font-size: 14px;
}

.profile-copy small {
    color: #65728a;
    font-size: 11px;
    font-weight: 750;
}

.profile-caret {
    color: #65728a;
    font-size: 12px;
}

.profile-menu {
    position: absolute;
    z-index: 1000;
    right: 0;
    top: calc(100% + 8px);
    display: none;
    min-width: 190px;
    padding: 8px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(126, 149, 180, .22);
    box-shadow: 0 20px 45px rgba(23, 32, 51, .16);
}

.profile-dropdown[open] .profile-menu {
    display: grid;
    gap: 4px;
}

.profile-menu a {
    padding: 11px 12px;
    border-radius: 8px;
    color: #25324a;
    text-decoration: none;
    font-weight: 850;
}

.profile-menu a:hover,
.profile-menu a.active {
    color: #5b4dff;
    background: #f4f7ff;
}

.logout-btn {
    padding: 0 16px;
    color: #ffffff;
    background: #172033;
    border: 1px solid rgba(23, 32, 51, .18);
}

.logout-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(23, 32, 51, .16);
}

.eyebrow {
    margin: 0 0 6px;
    color: #65728a;
    font-weight: 750;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0;
    font-size: 34px;
    letter-spacing: 0;
}

h2 {
    font-size: 20px;
}

.primary-btn,
.secondary-btn,
.submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
}

.primary-btn,
.submit-btn {
    color: white;
    background: linear-gradient(135deg, #725cff, #ff5f87);
}

.secondary-btn {
    color: #25324a;
    background: #e5ecf6;
}

.return-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 17px;
    border: 2px solid #18aaa4;
    border-radius: 7px;
    color: #078f89;
    background: #ffffff;
    text-decoration: none;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.return-btn span {
    font-size: 22px;
    line-height: 1;
}

.return-btn b {
    font-size: 15px;
    line-height: 1;
}

.return-btn:hover,
.return-btn:focus-visible {
    color: #047a75;
    border-color: #079b95;
    background: #effdfb;
}

.toast {
    margin-bottom: 16px;
    padding: 13px 16px;
    border-radius: 8px;
    color: #065f46;
    background: #d8fae9;
    font-weight: 700;
}

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

.metric {
    padding: 20px;
    border-radius: 8px;
}

.metric span,
.metric em {
    display: block;
    color: #66758f;
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
}

.metric strong {
    display: block;
    margin: 8px 0;
    font-size: 36px;
}

.panel {
    padding: 22px;
    border-radius: 8px;
}

.panel-head,
.split,
.setting-top,
.qr-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.qr-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #e3ebf6;
    border-radius: 8px;
    background: #f8fbff;
}

.qr-card h2 {
    margin-bottom: 6px;
}

.qr-card p {
    margin-bottom: 0;
    color: #64748b;
    line-height: 1.45;
}

.qr-card img {
    width: 128px;
    height: 128px;
    flex: 0 0 128px;
    border-radius: 8px;
    background: #ffffff;
}

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

.participant-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin: 18px 0 14px;
}

.participant-filter {
    display: grid;
    gap: 7px;
    flex: 1 1 420px;
    max-width: 620px;
}

.participant-filter label {
    color: #52617a;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.participant-filter input {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #d8e2ef;
    border-radius: 8px;
    color: #172033;
    background: #f8fbff;
    font: inherit;
}

.participant-filter input:focus {
    outline: none;
    border-color: #6c63ff;
    box-shadow: 0 0 0 4px rgba(108, 99, 255, .1);
}

.export-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.participant-import-form {
    display: grid;
    gap: 12px;
}

.participant-import-form input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.participant-import-form label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid #d8e2ef;
    border-radius: 8px;
    color: #334155;
    background: #ffffff;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.import-file-name {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px dashed #c9d6e8;
    border-radius: 8px;
    color: #52617a;
    background: #f8fbff;
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.import-status {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #991b1b;
    background: #fff1f2;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.45;
}

.import-hint {
    margin: 0;
    color: #65728a;
    font-size: 13px;
    font-weight: 760;
    line-height: 1.45;
}

.export-btn,
.id-link-btn {
    border: 0;
    border-radius: 8px;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
}

.export-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .12);
}

.export-btn.pdf {
    background: linear-gradient(135deg, #ef4444, #fb7185);
}

.export-btn.excel {
    background: linear-gradient(135deg, #10b981, #22c55e);
}

.export-btn.template {
    color: #102039;
    background: linear-gradient(135deg, #facc15, #38ef7d);
}

.export-btn.import {
    background: linear-gradient(135deg, #14b8a6, #6c63ff);
}

.id-link-btn {
    padding: 0;
    color: #5b4dff;
    background: transparent;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.id-link-btn:hover {
    color: #ff5f87;
}

.pagination-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid #e3eaf4;
    border-radius: 8px;
    background: #f8fbff;
}

.page-size-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.page-size-control label,
.page-summary {
    color: #52617a;
    font-size: 12px;
    font-weight: 900;
}

.page-size-control select {
    min-height: 34px;
    padding: 0 30px 0 10px;
    border: 1px solid #d8e2ef;
    border-radius: 8px;
    color: #172033;
    background: #ffffff;
    font-weight: 850;
}

.page-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pager {
    display: inline-flex;
    gap: 8px;
}

.pager a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 8px;
    color: #5b4dff;
    background: #ffffff;
    border: 1px solid rgba(91, 77, 255, .2);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.pager a.is-disabled {
    color: #94a3b8;
    background: #eef3f9;
    border-color: #e2e8f0;
    pointer-events: none;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 14px;
    border-bottom: 1px solid #e3eaf4;
    text-align: left;
    vertical-align: top;
}

th {
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

td small {
    display: block;
    margin-top: 4px;
    color: #76849a;
}

.status {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    color: #0b5f4a;
    background: #d9fbe9;
    font-size: 12px;
    font-weight: 800;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.status-badge.is-verified,
.status-badge.is-attended {
    color: #065f46;
    background: #d9fbe9;
}

.status-badge.is-pending {
    color: #8a5b00;
    background: #fff4cc;
}

.status-badge.is-rejected {
    color: #9f1239;
    background: #ffe4e6;
}

.status-badge.is-neutral {
    color: #475569;
    background: #eef3f9;
}

.audit-meta {
    display: grid;
    gap: 2px;
    margin-top: 7px;
    color: #718096;
    font-size: 11px;
    line-height: 1.25;
}

.audit-meta b {
    color: #334155;
}

.row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(132px, 1fr));
    gap: 8px;
    min-width: 286px;
    align-items: center;
}

.row-actions form,
.row-actions > button {
    min-width: 0;
}

.mini-action {
    width: 100%;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: #64748b;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
    white-space: normal;
    line-height: 1.15;
    text-align: center;
}

.mini-action span {
    flex: 0 0 20px;
    width: 20px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    font-size: 12px;
    line-height: 1;
}

.mini-action em {
    color: inherit;
    font-style: normal;
}

.mini-action.success {
    background: linear-gradient(135deg, #10b981, #22c55e);
}

.mini-action.danger {
    background: linear-gradient(135deg, #ef4444, #fb7185);
}

.mini-action.primary {
    background: linear-gradient(135deg, #6c63ff, #00b4db);
}

.mini-action.warning {
    color: #1f2937;
    background: linear-gradient(135deg, #facc15, #fb923c);
}

.mini-action.warning span {
    background: rgba(255, 255, 255, .48);
}

.mini-action.seat {
    background: linear-gradient(135deg, #14b8a6, #6c63ff);
}

.mini-action.delete {
    background: linear-gradient(135deg, #991b1b, #ef4444);
}

.mini-action:hover,
.receipt-view-btn:hover {
    transform: translateY(-1px);
}

.seat-info {
    display: grid;
    gap: 4px;
    min-width: 130px;
}

.seat-info strong {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #0f766e;
    background: #ccfbf1;
    font-size: 12px;
    font-weight: 950;
}

.seat-info > span {
    color: #52617a;
    font-size: 12px;
    font-weight: 750;
}

.seat-info b {
    color: #172033;
}

.receipt-view-btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid rgba(108, 99, 255, .28);
    border-radius: 8px;
    color: #5b4dff;
    background: #f4f7ff;
    box-shadow: 0 10px 22px rgba(91, 77, 255, .08);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.receipt-actions {
    display: grid;
    gap: 7px;
    width: fit-content;
    min-width: 92px;
}

.receipt-empty {
    color: #94a3b8;
    font-weight: 900;
}

.receipt-upload-form {
    display: grid;
}

.receipt-upload-form input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.receipt-upload-btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #10b981, #5b4dff);
    box-shadow: 0 10px 22px rgba(16, 185, 129, .13);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.receipt-upload-btn:hover {
    transform: translateY(-1px);
}

.import-modal {
    position: fixed;
    inset: 0;
    z-index: 138;
    display: none;
    place-items: center;
    padding: 18px;
}

.import-modal.is-open {
    display: grid;
}

.import-success-modal {
    display: grid;
}

.import-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 13, 24, .58);
    backdrop-filter: blur(10px);
}

.import-dialog {
    position: relative;
    width: min(560px, 100%);
    overflow: hidden;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 34px 90px rgba(10, 18, 35, .34);
}

.import-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px;
    border-bottom: 1px solid #e5edf7;
    background: linear-gradient(135deg, rgba(20, 184, 166, .08), rgba(108, 99, 255, .1));
}

.import-dialog h2 {
    margin: 3px 0 0;
    color: #0f1f36;
    font-size: 22px;
}

.import-dialog header button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    color: #334155;
    background: #eef3fb;
    font-size: 24px;
    font-weight: 800;
    cursor: pointer;
}

.import-body {
    display: grid;
    gap: 14px;
    padding: 22px;
}

.import-body > .export-btn {
    width: fit-content;
}

.import-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.import-success-dialog {
    width: min(460px, 100%);
}

.import-success-count {
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 24px 16px;
    border: 1px solid #c8f2dd;
    border-radius: 8px;
    color: #0f3f2a;
    background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(108, 99, 255, .08));
    text-align: center;
}

.import-success-count strong {
    color: #059669;
    font-size: 48px;
    line-height: 1;
}

.import-success-count span {
    color: #1f3b31;
    font-size: 14px;
    font-weight: 900;
}

.import-success-message {
    margin: 0;
    color: #52617a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
}

.import-success-dialog .import-body > button {
    justify-self: end;
}

.receipt-modal {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: none;
    place-items: center;
    padding: 18px;
}

.receipt-modal.is-open {
    display: grid;
}

.receipt-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 13, 24, .62);
    backdrop-filter: blur(10px);
}

.receipt-dialog {
    position: relative;
    width: min(980px, 100%);
    height: min(760px, calc(100vh - 36px));
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 38px 100px rgba(10, 18, 35, .38);
}

.receipt-dialog header,
.receipt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #e5edf7;
}

.receipt-dialog h2 {
    margin: 3px 0 0;
    color: #0f1f36;
    font-size: 20px;
    overflow-wrap: anywhere;
}

.receipt-dialog header button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    color: #334155;
    background: #eef3fb;
    font-size: 24px;
    font-weight: 800;
    cursor: pointer;
}

.receipt-toolbar {
    justify-content: flex-end;
    padding-block: 10px;
    background: #f8fbff;
}

.receipt-toolbar button,
.receipt-toolbar a {
    min-width: 36px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid #d7e1ee;
    border-radius: 8px;
    color: #172033;
    background: #ffffff;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.receipt-toolbar a {
    color: #ffffff;
    background: linear-gradient(135deg, #6c63ff, #ff6584);
    border: 0;
}

.receipt-stage {
    overflow: auto;
    padding: 18px;
    background: #e9eef6;
}

.receipt-stage iframe,
.receipt-stage img {
    width: 100%;
    min-height: 580px;
    display: block;
    border: 0;
    border-radius: 8px;
    background: #ffffff;
    transform-origin: top left;
}

.receipt-stage iframe {
    height: 100%;
}

.receipt-stage img {
    height: auto;
    min-height: 0;
    max-width: none;
    object-fit: contain;
}

.receipt-stage img[hidden],
.receipt-stage iframe[hidden] {
    display: none;
}

.detail-modal {
    position: fixed;
    inset: 0;
    z-index: 136;
    display: none;
    place-items: center;
    padding: 18px;
}

.detail-modal.is-open {
    display: grid;
}

.detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 13, 24, .62);
    backdrop-filter: blur(10px);
}

.detail-dialog {
    position: relative;
    width: min(920px, 100%);
    max-height: calc(100vh - 36px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 38px 100px rgba(10, 18, 35, .38);
}

.detail-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px;
    border-bottom: 1px solid #e5edf7;
    background: linear-gradient(135deg, rgba(108, 99, 255, .1), rgba(255, 95, 135, .1));
}

.detail-dialog h2 {
    margin: 3px 0 0;
    color: #0f1f36;
}

.detail-dialog header button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    color: #334155;
    background: #eef3fb;
    font-size: 24px;
    font-weight: 800;
    cursor: pointer;
}

.detail-form {
    overflow: auto;
    padding: 22px;
}

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

.detail-grid > label {
    display: grid;
    gap: 8px;
}

.detail-grid > label.wide {
    grid-column: 1 / -1;
}

.detail-grid label > span:first-child {
    color: #1d2b44;
    font-size: 13px;
    font-weight: 900;
}

.detail-grid label > span:first-child b {
    color: #ef4444;
}

.detail-grid input,
.detail-grid textarea,
.detail-grid select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #d8e2ef;
    border-radius: 8px;
    color: #172033;
    background: #f8fbff;
    font: inherit;
}

.detail-grid textarea {
    min-height: 90px;
    resize: vertical;
}

.detail-choice-list {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #e3eaf4;
    border-radius: 8px;
    background: #f8fbff;
}

.detail-choice-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.detail-choice-list input {
    width: auto;
    min-height: 0;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.seating-modal {
    position: fixed;
    inset: 0;
    z-index: 135;
    display: none;
    place-items: center;
    padding: 18px;
}

.seating-modal.is-open {
    display: grid;
}

.seating-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 13, 24, .58);
    backdrop-filter: blur(10px);
}

.seating-dialog {
    position: relative;
    width: min(620px, 100%);
    overflow: hidden;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 34px 90px rgba(10, 18, 35, .34);
}

.seating-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px;
    border-bottom: 1px solid #e5edf7;
    background: linear-gradient(135deg, rgba(20, 184, 166, .08), rgba(108, 99, 255, .1));
}

.seating-dialog h2 {
    margin: 3px 0 0;
    overflow-wrap: anywhere;
}

.seating-dialog header button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    color: #334155;
    background: #eef3fb;
    font-size: 24px;
    font-weight: 800;
    cursor: pointer;
}

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

.seating-form p {
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    color: #52617a;
    background: #f4f7ff;
    font-size: 13px;
    font-weight: 700;
}

.seating-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 18px;
}

.event-card {
    overflow: hidden;
    border-radius: 8px;
}

.event-strip {
    height: 9px;
    background: linear-gradient(135deg, #725cff, #ff5f87);
}

.event-body {
    padding: 20px;
}

.event-body p {
    color: #64748b;
    min-height: 44px;
}

dl {
    display: grid;
    gap: 10px;
    margin: 16px 0;
}

dt {
    color: #7b879b;
    font-size: 12px;
}

dd {
    margin: 0;
    font-weight: 750;
}

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

.actions a,
.danger-link {
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    color: #25324a;
    background: #edf2f8;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.danger-link {
    color: #b42318;
}

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

label {
    display: grid;
    gap: 8px;
    color: #39465e;
    font-weight: 760;
}

input,
textarea,
select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cfdae9;
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    background: white;
}

textarea {
    resize: vertical;
}

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

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

.check input {
    width: auto;
}

.template-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.template-picker > span {
    grid-column: 1 / -1;
    font-weight: 800;
}

.template-picker label {
    padding: 13px;
    border: 1px solid #d7e0ec;
    border-radius: 8px;
    color: #1f2a44;
    background: white;
}

.template-picker input {
    width: auto;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.switch {
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    gap: 10px;
}

.switch input {
    display: none;
}

.switch span {
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: #c8d3e2;
    position: relative;
}

.switch span::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: white;
    transition: .2s;
}

.switch input:checked + span {
    background: #1fae74;
}

.switch input:checked + span::after {
    transform: translateX(20px);
}

.switch.small {
    font-size: 13px;
}

.qr-panel {
    margin-bottom: 20px;
    padding: 18px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f7fbff, #eff8f2);
}

.qr-panel img {
    width: 116px;
    height: 116px;
    border-radius: 8px;
    background: white;
}

.empty {
    color: #7b879b;
    text-align: center;
}

.performance {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
}

.bars {
    display: grid;
    gap: 14px;
}

.bars > div {
    display: grid;
    grid-template-columns: 180px 1fr 100px;
    align-items: center;
    gap: 12px;
}

.bars div div {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #dde6f2;
}

.bars i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #18a999, #725cff, #ffbe3d);
}

.template-ombak { background: linear-gradient(135deg, #00b4db, #0083b0); }
.template-flamingo { background: linear-gradient(135deg, #f093fb, #f5576c); }
.template-gelap { background: linear-gradient(135deg, #111827, #00f2fe); }
.template-cerah { background: linear-gradient(135deg, #ff6b6b, #ffe66d); }
.template-angkasa { background: linear-gradient(135deg, #312e81, #fbc2eb); }
.template-mawar { background: linear-gradient(135deg, #ff9a9e, #fecfef); }
.template-emas { background: linear-gradient(135deg, #ffd200, #f7971e); }
.template-zamrud { background: linear-gradient(135deg, #11998e, #38ef7d); }
.template-pelangi { background: linear-gradient(135deg, #fc5c7d, #6a82fb); }
.template-aurora { background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); }
.template-sunset { background: linear-gradient(135deg, #f12711, #f5af19); }
.template-forest { background: linear-gradient(135deg, #134e5e, #71b280); }
.template-galaxy { background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); }
.template-ocean { background: linear-gradient(135deg, #005c97, #363795); }
.template-sakura { background: linear-gradient(135deg, #f093fb, #f5576c); }
.template-midnight { background: linear-gradient(135deg, #0b0e1a, #1a1a2e, #2d2d44); }
.template-tropical { background: linear-gradient(135deg, #ff6b6b, #ffe66d, #4ecdc4); }
.template-royal { background: linear-gradient(135deg, #6c3c7a, #b33c7a, #e83c7a); }
.template-carbon { background: linear-gradient(135deg, #2c2c2c, #1a1a1a, #0d0d0d); }

.event-builder {
    --builder-primary: #6c63ff;
    --builder-secondary: #ff6584;
    --builder-gradient: linear-gradient(135deg, #6c63ff 0%, #ff6584 100%);
    --builder-card: #ffffff;
    --builder-text: #2d3748;
    --builder-muted: #718096;
    --builder-shadow: 0 20px 60px rgba(108, 99, 255, .14);
    color: var(--builder-text);
}

.builder-hero,
.template-selector,
.builder-card {
    background: var(--builder-card);
    border: 1px solid rgba(126, 149, 180, .18);
    border-radius: 8px;
    box-shadow: var(--builder-shadow);
}

.builder-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    padding: 22px 26px;
}

.hero-brand {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hero-logo {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: white;
    background: var(--builder-gradient);
    font-size: 22px;
    box-shadow: 0 10px 24px rgba(108, 99, 255, .28);
}

.hero-actions,
.preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.builder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 8px;
    border: 0;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.builder-btn i,
.builder-btn span {
    color: inherit;
}

.builder-btn.primary {
    color: white;
    background: var(--builder-gradient);
    box-shadow: 0 8px 22px rgba(108, 99, 255, .22);
}

.builder-btn.gradient {
    color: white;
    background: linear-gradient(135deg, #725cff, #f05583);
    box-shadow: 0 12px 28px rgba(114, 92, 255, .24);
}

.builder-btn.mail {
    color: var(--builder-primary);
    background: #ffffff;
    border: 2px solid var(--builder-primary);
}

.builder-btn.scan {
    color: white;
    background: #ff5278;
    box-shadow: 0 12px 28px rgba(255, 82, 120, .22);
}

.builder-btn.success {
    color: #10231a;
    background: #38ef7d;
    box-shadow: 0 10px 24px rgba(56, 239, 125, .22);
}

.builder-btn.outline {
    color: var(--builder-primary);
    background: transparent;
    border: 2px solid color-mix(in srgb, var(--builder-primary) 70%, white);
}

.event-builder.template-moden,
.event-builder.template-ombak,
.event-builder.template-flamingo,
.event-builder.template-gelap,
.event-builder.template-cerah,
.event-builder.template-angkasa,
.event-builder.template-mawar,
.event-builder.template-emas,
.event-builder.template-zamrud,
.event-builder.template-pelangi {
    --builder-primary: var(--preview-primary);
    --builder-gradient: var(--preview-gradient);
    background: transparent;
}

.event-builder.template-moden .builder-btn.primary,
.event-builder.template-ombak .builder-btn.primary,
.event-builder.template-flamingo .builder-btn.primary,
.event-builder.template-gelap .builder-btn.primary,
.event-builder.template-cerah .builder-btn.primary,
.event-builder.template-angkasa .builder-btn.primary,
.event-builder.template-mawar .builder-btn.primary,
.event-builder.template-emas .builder-btn.primary,
.event-builder.template-zamrud .builder-btn.primary,
.event-builder.template-pelangi .builder-btn.primary,
.event-builder.template-moden .builder-btn.gradient,
.event-builder.template-ombak .builder-btn.gradient,
.event-builder.template-flamingo .builder-btn.gradient,
.event-builder.template-gelap .builder-btn.gradient,
.event-builder.template-cerah .builder-btn.gradient,
.event-builder.template-angkasa .builder-btn.gradient,
.event-builder.template-mawar .builder-btn.gradient,
.event-builder.template-emas .builder-btn.gradient,
.event-builder.template-zamrud .builder-btn.gradient,
.event-builder.template-pelangi .builder-btn.gradient,
.event-builder.template-moden .builder-btn.scan,
.event-builder.template-ombak .builder-btn.scan,
.event-builder.template-flamingo .builder-btn.scan,
.event-builder.template-gelap .builder-btn.scan,
.event-builder.template-cerah .builder-btn.scan,
.event-builder.template-angkasa .builder-btn.scan,
.event-builder.template-mawar .builder-btn.scan,
.event-builder.template-emas .builder-btn.scan,
.event-builder.template-zamrud .builder-btn.scan,
.event-builder.template-pelangi .builder-btn.scan {
    color: #ffffff;
    background: var(--preview-gradient);
    box-shadow: var(--preview-shadow);
}

.event-builder.template-moden .builder-btn.outline,
.event-builder.template-ombak .builder-btn.outline,
.event-builder.template-flamingo .builder-btn.outline,
.event-builder.template-gelap .builder-btn.outline,
.event-builder.template-cerah .builder-btn.outline,
.event-builder.template-angkasa .builder-btn.outline,
.event-builder.template-mawar .builder-btn.outline,
.event-builder.template-emas .builder-btn.outline,
.event-builder.template-zamrud .builder-btn.outline,
.event-builder.template-pelangi .builder-btn.outline,
.event-builder.template-moden .builder-btn.mail,
.event-builder.template-ombak .builder-btn.mail,
.event-builder.template-flamingo .builder-btn.mail,
.event-builder.template-gelap .builder-btn.mail,
.event-builder.template-cerah .builder-btn.mail,
.event-builder.template-angkasa .builder-btn.mail,
.event-builder.template-mawar .builder-btn.mail,
.event-builder.template-emas .builder-btn.mail,
.event-builder.template-zamrud .builder-btn.mail,
.event-builder.template-pelangi .builder-btn.mail {
    color: var(--preview-primary);
    background: color-mix(in srgb, var(--preview-card) 86%, white);
    border-color: color-mix(in srgb, var(--preview-primary) 75%, white);
}

.event-builder.template-gelap .builder-btn.outline,
.event-builder.template-angkasa .builder-btn.outline,
.event-builder.template-emas .builder-btn.outline,
.event-builder.template-pelangi .builder-btn.outline,
.event-builder.template-gelap .builder-btn.mail,
.event-builder.template-angkasa .builder-btn.mail,
.event-builder.template-emas .builder-btn.mail,
.event-builder.template-pelangi .builder-btn.mail {
    background: rgba(255, 255, 255, .95);
}

.event-builder.template-aurora,
.event-builder.template-sunset,
.event-builder.template-forest,
.event-builder.template-galaxy,
.event-builder.template-ocean,
.event-builder.template-sakura,
.event-builder.template-midnight,
.event-builder.template-tropical,
.event-builder.template-royal,
.event-builder.template-carbon {
    --builder-primary: var(--preview-primary);
    --builder-gradient: var(--preview-gradient);
    background: transparent;
}

.event-builder.template-aurora .builder-btn.primary,
.event-builder.template-sunset .builder-btn.primary,
.event-builder.template-forest .builder-btn.primary,
.event-builder.template-galaxy .builder-btn.primary,
.event-builder.template-ocean .builder-btn.primary,
.event-builder.template-sakura .builder-btn.primary,
.event-builder.template-midnight .builder-btn.primary,
.event-builder.template-tropical .builder-btn.primary,
.event-builder.template-royal .builder-btn.primary,
.event-builder.template-carbon .builder-btn.primary,
.event-builder.template-aurora .builder-btn.gradient,
.event-builder.template-sunset .builder-btn.gradient,
.event-builder.template-forest .builder-btn.gradient,
.event-builder.template-galaxy .builder-btn.gradient,
.event-builder.template-ocean .builder-btn.gradient,
.event-builder.template-sakura .builder-btn.gradient,
.event-builder.template-midnight .builder-btn.gradient,
.event-builder.template-tropical .builder-btn.gradient,
.event-builder.template-royal .builder-btn.gradient,
.event-builder.template-carbon .builder-btn.gradient,
.event-builder.template-aurora .builder-btn.scan,
.event-builder.template-sunset .builder-btn.scan,
.event-builder.template-forest .builder-btn.scan,
.event-builder.template-galaxy .builder-btn.scan,
.event-builder.template-ocean .builder-btn.scan,
.event-builder.template-sakura .builder-btn.scan,
.event-builder.template-midnight .builder-btn.scan,
.event-builder.template-tropical .builder-btn.scan,
.event-builder.template-royal .builder-btn.scan,
.event-builder.template-carbon .builder-btn.scan {
    color: #ffffff;
    background: var(--preview-gradient);
    box-shadow: var(--preview-shadow);
}

.event-builder.template-aurora .builder-btn.outline,
.event-builder.template-sunset .builder-btn.outline,
.event-builder.template-forest .builder-btn.outline,
.event-builder.template-galaxy .builder-btn.outline,
.event-builder.template-ocean .builder-btn.outline,
.event-builder.template-sakura .builder-btn.outline,
.event-builder.template-midnight .builder-btn.outline,
.event-builder.template-tropical .builder-btn.outline,
.event-builder.template-royal .builder-btn.outline,
.event-builder.template-carbon .builder-btn.outline,
.event-builder.template-aurora .builder-btn.mail,
.event-builder.template-sunset .builder-btn.mail,
.event-builder.template-forest .builder-btn.mail,
.event-builder.template-galaxy .builder-btn.mail,
.event-builder.template-ocean .builder-btn.mail,
.event-builder.template-sakura .builder-btn.mail,
.event-builder.template-midnight .builder-btn.mail,
.event-builder.template-tropical .builder-btn.mail,
.event-builder.template-royal .builder-btn.mail,
.event-builder.template-carbon .builder-btn.mail {
    color: var(--preview-primary);
    background: color-mix(in srgb, var(--preview-card) 86%, white);
    border-color: color-mix(in srgb, var(--preview-primary) 75%, white);
}

.event-builder.template-aurora .builder-btn.outline,
.event-builder.template-galaxy .builder-btn.outline,
.event-builder.template-midnight .builder-btn.outline,
.event-builder.template-carbon .builder-btn.outline,
.event-builder.template-aurora .builder-btn.mail,
.event-builder.template-galaxy .builder-btn.mail,
.event-builder.template-midnight .builder-btn.mail,
.event-builder.template-carbon .builder-btn.mail {
    background: rgba(255, 255, 255, .95);
}

.builder-btn:hover {
    transform: translateY(-1px);
}

.template-selector {
    margin-bottom: 22px;
    padding: 20px 24px;
}

.selector-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.selector-head h2,
.builder-card-head h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 18px;
}

.selector-head i,
.builder-card-head i {
    color: var(--builder-primary);
}

.selector-head span {
    color: var(--builder-muted);
    font-size: 13px;
    font-weight: 700;
}

.template-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.template-chip {
    min-width: 142px;
    position: relative;
    display: grid;
    gap: 4px;
    padding: 13px 14px 13px 42px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    color: #2d3748;
    background: #fff;
    cursor: pointer;
    transition: .2s ease;
}

.template-chip input {
    position: absolute;
    left: 13px;
    top: 18px;
    width: 16px;
    min-height: 16px;
    accent-color: var(--builder-primary);
}

.template-chip strong {
    font-size: 14px;
}

.template-chip small {
    color: #718096;
    font-size: 11px;
}

.template-chip:hover,
.template-chip:has(input:checked),
.template-chip.is-active {
    border-color: var(--builder-primary);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(108, 99, 255, .16);
}

.template-chip:has(input:checked),
.template-chip.is-active {
    outline: 2px solid color-mix(in srgb, var(--builder-primary) 30%, white);
    outline-offset: 2px;
}

.builder-layout {
    display: grid;
    grid-template-columns: minmax(420px, .9fr) minmax(520px, 1.1fr);
    gap: 22px;
    align-items: start;
}

.builder-main,
.builder-side {
    display: grid;
    gap: 22px;
}

.builder-card {
    padding: 22px;
}

.builder-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf2f7;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    color: #2d3748;
    background: rgba(108, 99, 255, .12);
    font-size: 12px;
    font-weight: 800;
}

.badge.accent {
    background: rgba(56, 239, 125, .22);
}

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

.builder-field {
    display: grid;
    gap: 7px;
    margin-bottom: 16px;
}

.builder-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.builder-field label {
    display: block;
    color: var(--builder-text);
    font-size: 14px;
    font-weight: 800;
}

.builder-field label b {
    color: #fc5c7d;
}

.mini-inline-switch {
    display: inline-flex !important;
    grid-template-columns: none;
    align-items: center;
    gap: 8px;
    color: var(--builder-muted) !important;
    font-size: 12px !important;
    white-space: nowrap;
}

.mini-inline-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mini-inline-switch b {
    width: 38px;
    height: 22px;
    position: relative;
    border-radius: 999px;
    background: #e1e8f1;
    transition: .2s ease;
}

.mini-inline-switch b::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(23, 32, 51, .16);
    transition: .2s ease;
}

.mini-inline-switch span {
    color: var(--builder-primary);
    transition: .2s ease;
}

.mini-inline-switch:has(input:checked) span {
    color: var(--builder-primary);
}

.mini-inline-switch:has(input:checked) b,
.mini-inline-switch input:checked + b {
    background: var(--builder-gradient);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--builder-primary) 28%, transparent);
}

.mini-inline-switch:has(input:checked) b::after,
.mini-inline-switch input:checked + b::after {
    transform: translateX(16px);
}

.builder-field input,
.builder-field textarea,
.builder-field select {
    width: 100%;
    min-height: 48px;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    color: var(--builder-text);
    background: #f8fafc;
    font: inherit;
    transition: .2s ease;
}

.builder-field textarea {
    resize: vertical;
}

.field-help {
    display: block;
    margin-top: 2px;
    color: #6f7d94;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
}

.media-input-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.builder-btn.compact {
    min-height: 44px;
    padding-inline: 13px;
    white-space: nowrap;
}

.builder-field input:focus,
.builder-field textarea:focus,
.builder-field select:focus {
    outline: none;
    border-color: var(--builder-primary);
    background: white;
    box-shadow: 0 0 0 4px rgba(108, 99, 255, .1);
}

.banner-size-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.banner-size-options label {
    min-height: 46px;
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fbff;
    cursor: pointer;
}

.banner-size-options input {
    width: 18px;
    min-height: 18px;
    accent-color: var(--builder-primary);
}

.banner-size-options label:has(input:checked) {
    color: var(--builder-primary);
    border-color: var(--builder-primary);
    background: rgba(108, 99, 255, .08);
}

.receipt-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding: 16px;
    border: 2px dashed #dbe4f0;
    border-radius: 8px;
    background: #f8fafc;
}

.receipt-toggle input {
    width: 18px;
    min-height: 18px;
    accent-color: var(--builder-primary);
}

.receipt-toggle span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: white;
    background: var(--builder-gradient);
}

.screen-settings-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

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

.screen-setting-item {
    min-height: 104px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 8px;
    background: #f7faff;
    min-width: 0;
}

.screen-setting-item > i {
    color: var(--builder-primary);
    font-size: 15px;
    text-align: center;
}

.screen-setting-item > i.fa-eye-slash {
    color: #fc5c7d;
}

.screen-setting-item strong {
    color: #172033;
    font-size: 14px;
    line-height: 1.15;
    min-width: 0;
    overflow-wrap: anywhere;
}

.screen-setting-item small {
    display: block;
    margin-top: 4px;
    color: #6f7d94;
    font-size: 11px;
    font-weight: 700;
}

.editable-setting-item {
    align-items: start;
}

.field-editor {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    margin-top: 4px;
}

.field-editor summary {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--builder-primary);
    background: rgba(108, 99, 255, .08);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.field-editor summary::-webkit-details-marker {
    display: none;
}

.field-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.field-editor-grid label,
.field-delete-option {
    display: grid;
    gap: 6px;
    color: #53627a;
    font-size: 12px;
    font-weight: 850;
}

.field-editor-grid input,
.field-editor-grid select,
.field-editor-grid textarea {
    width: 100%;
    min-height: 38px;
    padding: 9px 10px;
    border: 1px solid #d8e2f0;
    border-radius: 8px;
    color: #172033;
    background: #f8fbff;
    font: inherit;
}

.field-editor-grid textarea {
    resize: vertical;
}

.field-delete-option {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    padding: 10px 12px;
    border-radius: 8px;
    color: #b42318;
    background: #fff1f2;
}

.field-delete-option input {
    width: 17px;
    height: 17px;
    accent-color: #ef4444;
}

.custom-field-panel {
    display: grid;
    gap: 12px;
    margin-top: 22px;
    padding: 18px 18px 16px;
    border: 1px dashed rgba(108, 99, 255, .28);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(247, 250, 255, .95), rgba(244, 247, 255, .78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}

.custom-field-panel h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #172033;
    font-size: 17px;
}

.custom-field-panel h3 i {
    color: var(--builder-primary);
}

.screen-settings-card .custom-field-panel {
    position: relative;
}

.screen-settings-card .custom-field-panel::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: -12px;
    height: 1px;
    background: #e8eef7;
}

.custom-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.custom-field-panel p {
    margin: 0;
    padding: 11px 12px;
    border-radius: 8px;
    color: #53627a;
    background: #f4f7ff;
    font-size: 13px;
    line-height: 1.45;
}

.custom-field-options {
    display: none;
}

.custom-field-options.is-visible {
    display: grid;
}

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

.settings-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e8eef7;
}

.settings-panel-head h2 {
    margin: 0;
    font-size: 22px;
}

.settings-panel-head a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #725cff, #ff5f87);
    font-weight: 800;
    text-decoration: none;
}

.settings-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 14px;
}

.settings-field-item {
    min-height: 132px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: start;
    background: #f7faff;
}

.settings-field-item small {
    display: block;
    margin-top: 5px;
    color: #6f7d94;
    font-size: 12px;
    font-weight: 650;
}

.setting-field-type {
    justify-self: end;
    padding: 5px 9px;
    border-radius: 999px;
    color: #53627a;
    background: #e9eef7;
    font-size: 11px;
    font-weight: 850;
}

.settings-theme {
    min-height: 100vh;
    border-radius: 0;
    color: var(--preview-text);
}

.settings-theme .topbar,
.settings-theme .panel {
    color: var(--preview-text);
    background: var(--preview-card);
    border-color: color-mix(in srgb, var(--preview-primary) 20%, transparent);
    box-shadow: var(--preview-shadow);
}

.settings-theme .topbar h1,
.settings-theme .settings-panel h2,
.settings-theme .settings-field-item strong {
    color: var(--preview-text);
}

.settings-theme .eyebrow,
.settings-theme .settings-field-item small,
.settings-theme .inline-switch {
    color: var(--preview-muted);
}

.settings-theme .secondary-btn {
    color: var(--preview-primary);
    background: var(--preview-soft);
    border: 1px solid color-mix(in srgb, var(--preview-primary) 28%, transparent);
}

.settings-theme .settings-panel-head {
    border-bottom-color: color-mix(in srgb, var(--preview-primary) 16%, transparent);
}

.settings-theme .settings-panel-head a,
.settings-theme .primary-btn {
    color: #ffffff;
    background: var(--preview-gradient);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--preview-primary) 22%, transparent);
}

.settings-theme .settings-field-item {
    background: var(--preview-soft);
    border: 1px solid color-mix(in srgb, var(--preview-primary) 12%, transparent);
}

.settings-theme .screen-setting-item > i {
    color: var(--preview-primary);
}

.settings-theme .screen-setting-item > i.fa-eye-slash {
    color: var(--preview-secondary);
}

.settings-theme .setting-field-type {
    color: var(--preview-primary);
    background: color-mix(in srgb, var(--preview-primary) 12%, var(--preview-card));
}

.settings-theme .inline-switch input:checked + b {
    background: var(--preview-primary);
}

.inline-switch {
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    color: #74809a;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.inline-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.inline-switch b {
    width: 44px;
    height: 25px;
    position: relative;
    border-radius: 999px;
    background: #e1e8f1;
    transition: .2s ease;
}

.inline-switch b::after {
    content: "";
    position: absolute;
    width: 19px;
    height: 19px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 8px rgba(23, 32, 51, .16);
    transition: .2s ease;
}

.inline-switch input:checked + b {
    background: var(--builder-primary);
}

.inline-switch input:checked + b::after {
    transform: translateX(19px);
}

.inline-switch.is-disabled {
    opacity: .45;
    cursor: not-allowed;
}

.inline-switch.is-disabled b {
    cursor: not-allowed;
}

.preview-card {
    position: sticky;
    top: 24px;
}

.public-preview-frame {
    --preview-primary: #6c63ff;
    --preview-secondary: #ff6584;
    --preview-gradient: linear-gradient(135deg, #6c63ff 0%, #ff6584 100%);
    --preview-page-bg: #edf3f8;
    --preview-card: #ffffff;
    --preview-soft: #f5f7ff;
    --preview-text: #263247;
    --preview-muted: #6e7c91;
    --preview-shadow: 0 24px 80px rgba(28, 41, 70, .16);
    padding: 16px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--preview-primary) 14%, transparent), transparent 35%),
        var(--preview-page-bg);
    overflow: hidden;
    transition: background .2s ease;
}

.public-preview {
    overflow: hidden;
    border-radius: 8px;
    background: var(--preview-card);
    color: var(--preview-text);
    box-shadow: var(--preview-shadow);
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.preview-banner {
    min-height: 210px;
    display: grid;
    align-content: end;
    gap: 8px;
    padding: 22px;
    color: white;
    background: var(--preview-gradient);
    background-size: cover;
    background-position: center;
    position: relative;
    cursor: grab;
    user-select: none;
}

.preview-banner.banner-size-image {
    min-height: 0;
}

.preview-banner.banner-size-fixed {
    aspect-ratio: auto !important;
}

.preview-banner.is-dragging {
    cursor: grabbing;
}

.preview-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 15, 30, .04), rgba(10, 15, 30, .38));
}

.preview-banner.has-banner-image::after {
    display: none;
}

.preview-banner > * {
    position: relative;
    z-index: 1;
}

.preview-logo {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin-bottom: 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
    overflow: hidden;
}

.preview-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-logo.is-hidden {
    display: none;
}

.preview-banner-copy {
    display: grid;
    gap: 8px;
}

.preview-banner.banner-text-hidden {
    align-content: center;
}

.preview-banner.banner-text-hidden .preview-banner-copy {
    display: none;
}

.banner-upload-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: rgba(15, 23, 42, .62);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .18);
    font-weight: 850;
    cursor: pointer;
}

.banner-upload-btn:hover {
    background: rgba(15, 23, 42, .78);
}

.preview-banner span {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: 12px;
    font-weight: 850;
}

.preview-banner strong {
    overflow-wrap: anywhere;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.05;
}

.preview-banner small {
    color: rgba(255, 255, 255, .88);
    font-size: 14px;
    line-height: 1.4;
}

.preview-public-body {
    display: block;
    padding: 18px;
}

.preview-payment {
    align-self: start;
    display: grid;
    gap: 11px;
    padding: 18px;
    border-radius: 8px;
    background: var(--preview-soft);
}

.preview-payment h3 {
    margin: 0;
    font-size: 22px;
}

.preview-payment-grid {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.preview-qr {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 220px;
    justify-self: center;
    border-radius: 8px;
    color: var(--preview-primary);
    background: white;
    font-size: clamp(82px, 13vw, 118px);
}

.preview-qr img {
    width: min(100%, 220px);
    height: min(100%, 220px);
    display: block;
    object-fit: contain;
    border-radius: 8px;
    margin: auto;
}

.preview-qr.has-custom-qr {
    padding: 0;
    font-size: 0;
}

.qr-input-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.qr-input-actions .builder-btn {
    min-height: 44px;
    white-space: nowrap;
}

.preview-payment dl {
    margin: 0;
    gap: 8px;
}

.preview-payment dl div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid #e3e9f4;
}

.preview-payment dt {
    color: var(--preview-muted);
}

.preview-payment dd {
    max-width: 220px;
    overflow-wrap: anywhere;
    text-align: right;
}

.preview-payment p {
    margin: 2px 0 0;
    color: var(--preview-muted);
    font-size: 12px;
    line-height: 1.35;
}

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

.preview-input-row,
.preview-upload {
    display: grid;
    gap: 7px;
}

.preview-input-row {
    position: relative;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.preview-input-row[data-preview-sortable="true"] {
    cursor: grab;
}

.preview-input-row[data-preview-sortable="true"]:hover {
    border-color: color-mix(in srgb, var(--preview-primary) 42%, #d9e2ef);
    box-shadow: 0 12px 28px rgba(29, 44, 78, .08);
}

.preview-input-row.is-dragging {
    z-index: 3;
    cursor: grabbing;
    opacity: .72;
    border-color: var(--preview-primary);
    box-shadow: 0 18px 42px rgba(29, 44, 78, .18);
    transform: scale(.985);
}

.preview-drag-handle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: var(--preview-primary);
    background: var(--preview-soft);
    cursor: grab;
}

.preview-drag-handle:active {
    cursor: grabbing;
}

.preview-input-row.wide,
.preview-upload.wide,
.preview-payment-upload-row.wide,
.preview-submit {
    grid-column: 1 / -1;
}

.preview-input-row label,
.preview-upload strong {
    color: var(--preview-text);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
}

.preview-input-row label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.preview-input-row b,
.preview-upload b {
    display: inline;
    margin-left: 4px;
    padding: 0;
    border-radius: 0;
    color: #e11d48;
    background: transparent;
    font-size: 15px;
    font-weight: 950;
    line-height: 1;
}

.preview-input-row > span {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    color: var(--preview-muted);
    background: var(--preview-card);
    font-size: 12px;
}

.preview-input-row .preview-check-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.preview-input-row .preview-check-box {
    border-style: dashed;
    background: var(--preview-soft);
}

.preview-select-box::after {
    content: "\25BE";
    margin-left: auto;
    color: var(--preview-primary);
    font-size: 12px;
}

.preview-option-list {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: var(--preview-card);
}

.preview-option-list span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--preview-muted);
    font-size: 12px;
}

.preview-option-list i {
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--preview-primary) 55%, #cbd5e1);
    border-radius: 999px;
}

.preview-option-list em {
    font-style: normal;
}

.preview-upload {
    min-height: 100%;
    align-content: center;
    padding: 14px;
    border: 2px dashed color-mix(in srgb, var(--preview-primary) 50%, #d5deea);
    border-radius: 8px;
    background: var(--preview-soft);
    text-align: center;
}

.preview-payment-upload-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: stretch;
}

.preview-upload span {
    color: var(--preview-muted);
    font-size: 12px;
}

.preview-submit {
    min-height: 46px;
    border: 0;
    border-radius: 8px;
    color: white;
    background: var(--preview-gradient);
    font-weight: 900;
}

.is-hidden {
    display: none !important;
}

.preview-actions {
    margin-top: 14px;
}

.preview-actions span {
    color: var(--builder-muted);
    font-size: 13px;
    font-weight: 700;
}

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

.builder-qr-item {
    display: grid;
    justify-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fbff;
}

.builder-qr-item h3 {
    margin: 0;
    color: #172033;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
}

.builder-qr img {
    width: min(160px, 100%);
    height: auto;
    aspect-ratio: 1;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
}

.mini-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.mini-stats div {
    min-height: 82px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: 8px;
    background: #f7fafc;
    text-align: center;
}

.mini-stats strong {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--builder-primary);
    font-size: 24px;
    line-height: 1;
}

.mini-stats span {
    color: var(--builder-muted);
    font-size: 12px;
    font-weight: 800;
}

.management-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.management-stats div {
    min-height: 80px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 14px 10px;
    border-radius: 8px;
    background: #f7fafc;
    text-align: center;
}

.management-stats strong {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 30px;
    line-height: 1;
    color: var(--builder-primary);
}

.management-stats div:nth-child(2) strong {
    color: #2fe87b;
}

.management-stats div:nth-child(3) strong {
    color: #ffd23c;
}

.management-stats span {
    color: var(--builder-muted);
    font-size: 13px;
    font-weight: 700;
}

.management-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.management-actions > span {
    color: var(--builder-muted);
    font-size: 13px;
    font-weight: 700;
}

.event-builder.template-moden,
.public-preview-frame.template-moden,
.public-preview.template-moden {
    --preview-primary: #6c63ff;
    --preview-secondary: #ff6584;
    --preview-gradient: linear-gradient(135deg, #6c63ff 0%, #ff6584 100%);
    --preview-page-bg: #edf3f8;
    --preview-card: #ffffff;
    --preview-soft: #f5f7ff;
    --preview-text: #263247;
    --preview-muted: #6e7c91;
    --preview-shadow: 0 24px 80px rgba(108, 99, 255, .18);
}

.event-builder.template-ombak,
.public-preview-frame.template-ombak,
.public-preview.template-ombak {
    --preview-primary: #00a9d6;
    --preview-secondary: #006f99;
    --preview-gradient: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
    --preview-page-bg: #e9f8fc;
    --preview-card: #ffffff;
    --preview-soft: #edfaff;
    --preview-text: #17324d;
    --preview-muted: #50677f;
    --preview-shadow: 0 24px 80px rgba(0, 132, 176, .18);
}

.event-builder.template-flamingo,
.public-preview-frame.template-flamingo,
.public-preview.template-flamingo {
    --preview-primary: #ee75d8;
    --preview-secondary: #ef435d;
    --preview-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --preview-page-bg: #fff0f7;
    --preview-card: #ffffff;
    --preview-soft: #fff1f8;
    --preview-text: #37253a;
    --preview-muted: #745f77;
    --preview-shadow: 0 24px 80px rgba(245, 87, 108, .18);
}

.event-builder.template-gelap,
.public-preview-frame.template-gelap,
.public-preview.template-gelap {
    --preview-primary: #4facfe;
    --preview-secondary: #00f2fe;
    --preview-gradient: linear-gradient(135deg, #111827 0%, #164e63 100%);
    --preview-page-bg: #070b14;
    --preview-card: #0f172a;
    --preview-soft: #17223a;
    --preview-text: #e5eefb;
    --preview-muted: #a6b4c8;
    --preview-shadow: 0 24px 80px rgba(79, 172, 254, .18);
}

.event-builder.template-cerah,
.public-preview-frame.template-cerah,
.public-preview.template-cerah {
    --preview-primary: #ff6b6b;
    --preview-secondary: #f5b400;
    --preview-gradient: linear-gradient(135deg, #ff6b6b 0%, #ffe66d 100%);
    --preview-page-bg: #fff7df;
    --preview-card: #ffffff;
    --preview-soft: #fff8df;
    --preview-text: #2e2d22;
    --preview-muted: #746d5d;
    --preview-shadow: 0 24px 80px rgba(255, 107, 107, .18);
}

.event-builder.template-angkasa,
.public-preview-frame.template-angkasa,
.public-preview.template-angkasa {
    --preview-primary: #a18cd1;
    --preview-secondary: #f183d3;
    --preview-gradient: linear-gradient(135deg, #1a1a2e 0%, #533483 100%);
    --preview-page-bg: #090b18;
    --preview-card: #121528;
    --preview-soft: #1e233d;
    --preview-text: #edf2ff;
    --preview-muted: #b8c1d9;
    --preview-shadow: 0 24px 80px rgba(161, 140, 209, .22);
}

.event-builder.template-mawar,
.public-preview-frame.template-mawar,
.public-preview.template-mawar {
    --preview-primary: #ff8aa1;
    --preview-secondary: #d85b93;
    --preview-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --preview-page-bg: #fff2f6;
    --preview-card: #ffffff;
    --preview-soft: #fff2f6;
    --preview-text: #3d2430;
    --preview-muted: #816577;
    --preview-shadow: 0 24px 80px rgba(255, 138, 161, .18);
}

.event-builder.template-emas,
.public-preview-frame.template-emas,
.public-preview.template-emas {
    --preview-primary: #ffd200;
    --preview-secondary: #f7971e;
    --preview-gradient: linear-gradient(135deg, #2c210c 0%, #f7971e 100%);
    --preview-page-bg: #0f1118;
    --preview-card: #171b24;
    --preview-soft: #23202a;
    --preview-text: #fff9e8;
    --preview-muted: #dfd1aa;
    --preview-shadow: 0 24px 80px rgba(255, 210, 0, .16);
}

.event-builder.template-zamrud,
.public-preview-frame.template-zamrud,
.public-preview.template-zamrud {
    --preview-primary: #11998e;
    --preview-secondary: #38ef7d;
    --preview-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --preview-page-bg: #edfff6;
    --preview-card: #ffffff;
    --preview-soft: #edfff6;
    --preview-text: #173f35;
    --preview-muted: #477263;
    --preview-shadow: 0 24px 80px rgba(17, 153, 142, .18);
}

.event-builder.template-pelangi,
.public-preview-frame.template-pelangi,
.public-preview.template-pelangi {
    --preview-primary: #fc5c7d;
    --preview-secondary: #6a82fb;
    --preview-gradient: linear-gradient(135deg, #fc5c7d 0%, #6a82fb 100%);
    --preview-page-bg: #090b18;
    --preview-card: #111329;
    --preview-soft: #1c213e;
    --preview-text: #edf2ff;
    --preview-muted: #bbc4dd;
    --preview-shadow: 0 24px 80px rgba(108, 130, 251, .18);
}

.event-builder.template-aurora,
.public-preview-frame.template-aurora,
.public-preview.template-aurora {
    --preview-primary: #00d4ff;
    --preview-secondary: #302b63;
    --preview-gradient: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    --preview-page-bg: #090b18;
    --preview-card: #111329;
    --preview-soft: #1d2140;
    --preview-text: #edf2ff;
    --preview-muted: #b6bfd8;
    --preview-shadow: 0 24px 80px rgba(0, 212, 255, .16);
}

.event-builder.template-sunset,
.public-preview-frame.template-sunset,
.public-preview.template-sunset {
    --preview-primary: #f12711;
    --preview-secondary: #f5af19;
    --preview-gradient: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
    --preview-page-bg: #fff3e8;
    --preview-card: #ffffff;
    --preview-soft: #fff2df;
    --preview-text: #392416;
    --preview-muted: #7b5b43;
    --preview-shadow: 0 24px 80px rgba(241, 39, 17, .18);
}

.event-builder.template-forest,
.public-preview-frame.template-forest,
.public-preview.template-forest {
    --preview-primary: #134e5e;
    --preview-secondary: #71b280;
    --preview-gradient: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
    --preview-page-bg: #eef9f2;
    --preview-card: #ffffff;
    --preview-soft: #eef9f2;
    --preview-text: #173a34;
    --preview-muted: #517167;
    --preview-shadow: 0 24px 80px rgba(19, 78, 94, .18);
}

.event-builder.template-galaxy,
.public-preview-frame.template-galaxy,
.public-preview.template-galaxy {
    --preview-primary: #4f8cff;
    --preview-secondary: #0f3460;
    --preview-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    --preview-page-bg: #080b17;
    --preview-card: #11172b;
    --preview-soft: #1a2340;
    --preview-text: #edf2ff;
    --preview-muted: #b8c2dc;
    --preview-shadow: 0 24px 80px rgba(79, 140, 255, .16);
}

.event-builder.template-ocean,
.public-preview-frame.template-ocean,
.public-preview.template-ocean {
    --preview-primary: #005c97;
    --preview-secondary: #363795;
    --preview-gradient: linear-gradient(135deg, #005c97 0%, #363795 100%);
    --preview-page-bg: #edf7ff;
    --preview-card: #ffffff;
    --preview-soft: #eef7ff;
    --preview-text: #172d4d;
    --preview-muted: #50647f;
    --preview-shadow: 0 24px 80px rgba(0, 92, 151, .18);
}

.event-builder.template-sakura,
.public-preview-frame.template-sakura,
.public-preview.template-sakura {
    --preview-primary: #f093fb;
    --preview-secondary: #f5576c;
    --preview-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --preview-page-bg: #fff0f7;
    --preview-card: #ffffff;
    --preview-soft: #fff1f8;
    --preview-text: #3d2438;
    --preview-muted: #7d6377;
    --preview-shadow: 0 24px 80px rgba(245, 87, 108, .18);
}

.event-builder.template-midnight,
.public-preview-frame.template-midnight,
.public-preview.template-midnight {
    --preview-primary: #6c63ff;
    --preview-secondary: #2d2d44;
    --preview-gradient: linear-gradient(135deg, #0b0e1a 0%, #1a1a2e 50%, #2d2d44 100%);
    --preview-page-bg: #070914;
    --preview-card: #111329;
    --preview-soft: #1b1f37;
    --preview-text: #edf2ff;
    --preview-muted: #b8c1d9;
    --preview-shadow: 0 24px 80px rgba(108, 99, 255, .16);
}

.event-builder.template-tropical,
.public-preview-frame.template-tropical,
.public-preview.template-tropical {
    --preview-primary: #ff6b6b;
    --preview-secondary: #4ecdc4;
    --preview-gradient: linear-gradient(135deg, #ff6b6b 0%, #ffe66d 50%, #4ecdc4 100%);
    --preview-page-bg: #f0fff9;
    --preview-card: #ffffff;
    --preview-soft: #effff9;
    --preview-text: #213838;
    --preview-muted: #5d7572;
    --preview-shadow: 0 24px 80px rgba(78, 205, 196, .18);
}

.event-builder.template-royal,
.public-preview-frame.template-royal,
.public-preview.template-royal {
    --preview-primary: #6c3c7a;
    --preview-secondary: #e83c7a;
    --preview-gradient: linear-gradient(135deg, #6c3c7a 0%, #b33c7a 50%, #e83c7a 100%);
    --preview-page-bg: #fff0f7;
    --preview-card: #ffffff;
    --preview-soft: #fff2f8;
    --preview-text: #3c233d;
    --preview-muted: #735d78;
    --preview-shadow: 0 24px 80px rgba(179, 60, 122, .18);
}

.event-builder.template-carbon,
.public-preview-frame.template-carbon,
.public-preview.template-carbon {
    --preview-primary: #2c2c2c;
    --preview-secondary: #0d0d0d;
    --preview-gradient: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 50%, #0d0d0d 100%);
    --preview-page-bg: #f1f3f5;
    --preview-card: #ffffff;
    --preview-soft: #f3f4f6;
    --preview-text: #20242b;
    --preview-muted: #606874;
    --preview-shadow: 0 24px 80px rgba(13, 13, 13, .15);
}

.public-preview.template-moden .preview-banner,
.template-chip.template-moden { background: linear-gradient(135deg, #6c63ff, #ff6584); color: white; }
.public-preview.template-ombak .preview-banner,
.template-chip.template-ombak { background: linear-gradient(135deg, #00b4db, #0083b0); color: white; }
.public-preview.template-flamingo .preview-banner,
.template-chip.template-flamingo { background: linear-gradient(135deg, #f093fb, #f5576c); color: white; }
.public-preview.template-gelap .preview-banner,
.template-chip.template-gelap { background: linear-gradient(135deg, #111827, #00f2fe); color: white; }
.public-preview.template-cerah .preview-banner,
.template-chip.template-cerah { background: linear-gradient(135deg, #ff6b6b, #ffe66d); color: white; }
.public-preview.template-angkasa .preview-banner,
.template-chip.template-angkasa { background: linear-gradient(135deg, #312e81, #fbc2eb); color: white; }
.public-preview.template-mawar .preview-banner,
.template-chip.template-mawar { background: linear-gradient(135deg, #ff9a9e, #fecfef); color: #3d2430; }
.public-preview.template-emas .preview-banner,
.template-chip.template-emas { background: linear-gradient(135deg, #ffd200, #f7971e); color: #2d2505; }
.public-preview.template-zamrud .preview-banner,
.template-chip.template-zamrud { background: linear-gradient(135deg, #11998e, #38ef7d); color: white; }
.public-preview.template-pelangi .preview-banner,
.template-chip.template-pelangi { background: linear-gradient(135deg, #fc5c7d, #6a82fb); color: white; }
.public-preview.template-aurora .preview-banner,
.template-chip.template-aurora { background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); color: white; }
.public-preview.template-sunset .preview-banner,
.template-chip.template-sunset { background: linear-gradient(135deg, #f12711, #f5af19); color: white; }
.public-preview.template-forest .preview-banner,
.template-chip.template-forest { background: linear-gradient(135deg, #134e5e, #71b280); color: white; }
.public-preview.template-galaxy .preview-banner,
.template-chip.template-galaxy { background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); color: white; }
.public-preview.template-ocean .preview-banner,
.template-chip.template-ocean { background: linear-gradient(135deg, #005c97, #363795); color: white; }
.public-preview.template-sakura .preview-banner,
.template-chip.template-sakura { background: linear-gradient(135deg, #f093fb, #f5576c); color: white; }
.public-preview.template-midnight .preview-banner,
.template-chip.template-midnight { background: linear-gradient(135deg, #0b0e1a, #1a1a2e, #2d2d44); color: white; }
.public-preview.template-tropical .preview-banner,
.template-chip.template-tropical { background: linear-gradient(135deg, #ff6b6b, #ffe66d, #4ecdc4); color: #213838; }
.public-preview.template-royal .preview-banner,
.template-chip.template-royal { background: linear-gradient(135deg, #6c3c7a, #b33c7a, #e83c7a); color: white; }
.public-preview.template-carbon .preview-banner,
.template-chip.template-carbon { background: linear-gradient(135deg, #2c2c2c, #1a1a1a, #0d0d0d); color: white; }

.template-chip.template-moden small,
.template-chip.template-ombak small,
.template-chip.template-flamingo small,
.template-chip.template-gelap small,
.template-chip.template-cerah small,
.template-chip.template-angkasa small,
.template-chip.template-zamrud small,
.template-chip.template-pelangi small,
.template-chip.template-aurora small,
.template-chip.template-sunset small,
.template-chip.template-forest small,
.template-chip.template-galaxy small,
.template-chip.template-ocean small,
.template-chip.template-sakura small,
.template-chip.template-midnight small,
.template-chip.template-royal small,
.template-chip.template-carbon small {
    color: rgba(255,255,255,.82);
}

.template-chip.template-tropical small {
    color: rgba(33, 56, 56, .75);
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 18% 12%, rgba(114, 92, 255, .22), transparent 34%),
        radial-gradient(circle at 82% 20%, rgba(255, 95, 135, .2), transparent 32%),
        linear-gradient(135deg, #eef3ff 0%, #f7fbff 48%, #edf8f4 100%);
}

.login-shell {
    width: min(1080px, calc(100vw - 48px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(126, 149, 180, .24);
    box-shadow: 0 28px 90px rgba(29, 44, 78, .16);
}

.login-hero {
    min-height: 560px;
    display: grid;
    align-content: center;
    gap: 18px;
    padding: 46px;
    color: #ffffff;
    background: linear-gradient(135deg, #172033 0%, #725cff 48%, #ff5f87 100%);
}

.login-brand-link {
    width: fit-content;
    display: inline-flex;
    text-decoration: none;
}

.login-brand-link .brand-mark {
    margin-bottom: 14px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.login-brand-link:hover .brand-mark,
.login-brand-link:focus-visible .brand-mark {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(255, 95, 135, .28);
}

.login-hero h1 {
    max-width: 620px;
    font-size: clamp(36px, 6vw, 68px);
    line-height: 1;
}

.login-hero p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 17px;
    line-height: 1.55;
}

.login-product-preview {
    width: min(440px, 100%);
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 24px 60px rgba(7, 11, 24, .24);
    backdrop-filter: blur(14px);
}

.preview-template-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.preview-template-strip span {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 950;
    box-shadow: 0 10px 20px rgba(7, 11, 24, .16);
}

.preview-form-shadow {
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 18px 45px rgba(7, 11, 24, .22);
}

.preview-mini-banner {
    min-height: 86px;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, .05), rgba(15, 23, 42, .42)),
        linear-gradient(135deg, #b9f5ea 0%, #d8f9f0 40%, #eef2ff 100%);
}

.preview-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    background: #e9fff8;
}

.preview-mini-grid span {
    min-height: 32px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #cfe3f2;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65);
}

.login-card {
    display: grid;
    align-content: center;
    gap: 18px;
    padding: 38px;
    background: #ffffff;
}

.login-card h2 {
    margin: 0;
    font-size: 30px;
}

.login-card form {
    display: grid;
    gap: 16px;
}

.login-card label {
    color: #263247;
}

.login-alert {
    padding: 12px 14px;
    border-radius: 8px;
    color: #07543f;
    background: #d8fae9;
    font-weight: 800;
}

.login-alert.error {
    color: #9f1239;
    background: #ffe4ec;
}

.marketing-page {
    min-height: 100vh;
    color: #172033;
    background:
        linear-gradient(135deg, rgba(114, 92, 255, .08) 0%, rgba(24, 170, 164, .07) 42%, rgba(255, 95, 135, .08) 100%),
        linear-gradient(180deg, #f7f9fe 0%, #eef4fb 100%);
}

.marketing-nav {
    width: min(1180px, calc(100% - 32px));
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 auto;
    padding: 10px 0;
}

.marketing-brand,
.marketing-nav nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.marketing-brand {
    text-decoration: none;
}

.marketing-brand .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.marketing-nav nav a {
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 800;
}

.marketing-nav nav a:hover {
    background: rgba(114, 92, 255, .1);
}

.marketing-hero {
    width: min(1180px, calc(100% - 32px));
    min-height: calc(100vh - 92px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
    gap: 42px;
    align-items: center;
    margin: 0 auto;
    padding: 28px 0 64px;
}

.marketing-hero h1,
.section-title h1 {
    max-width: 780px;
    margin-bottom: 18px;
    font-size: clamp(42px, 7vw, 76px);
    line-height: .98;
}

.marketing-hero p,
.section-title p,
.signup-copy p,
.payment-card p {
    color: #65728a;
    font-size: 17px;
    line-height: 1.55;
}

.marketing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.hero-product,
.package-card,
.signup-card,
.payment-card,
.bank-card,
.feature-grid article {
    border: 1px solid rgba(126, 149, 180, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 24px 70px rgba(29, 44, 78, .12);
}

.hero-product {
    overflow: hidden;
}

.hero-product-bar {
    height: 10px;
    background: linear-gradient(135deg, #725cff, #ff5f87);
}

.hero-product-banner {
    min-height: 220px;
    display: grid;
    align-content: end;
    gap: 8px;
    padding: 22px;
    color: #ffffff;
    background: linear-gradient(135deg, #6c63ff, #ff6584);
}

.hero-product-banner span {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-weight: 850;
}

.hero-product-banner strong {
    font-size: 34px;
}

.hero-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 16px;
}

.hero-product-grid div {
    display: grid;
    place-items: center;
    min-height: 88px;
    border-radius: 8px;
    background: #f7fafc;
}

.hero-product-grid b {
    color: #725cff;
    font-size: 30px;
}

.hero-product-grid span {
    color: #65728a;
    font-weight: 750;
}

.marketing-section {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 56px 0;
}

.section-title {
    margin-bottom: 24px;
}

.section-title.center {
    display: grid;
    justify-items: center;
    text-align: center;
}

.section-title h2 {
    font-size: clamp(30px, 4vw, 46px);
}

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

.feature-grid article,
.package-card {
    padding: 22px;
}

.feature-grid article {
    display: grid;
    gap: 10px;
}

.feature-grid span,
.package-card p,
.package-card li {
    color: #65728a;
    line-height: 1.45;
}

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

.package-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.package-card {
    display: grid;
    gap: 14px;
}

.package-card.featured {
    border-color: rgba(114, 92, 255, .42);
    box-shadow: 0 28px 80px rgba(114, 92, 255, .18);
}

.package-card > span {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #725cff, #ff5f87);
    font-size: 12px;
    font-weight: 900;
}

.package-card h3 {
    margin: 0;
    font-size: 24px;
}

.package-card > strong {
    font-size: 24px;
}

.package-card ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border-radius: 8px;
    background: #f7fafc;
}

.price-row.yearly {
    background: #ecfff5;
}

.package-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.package-actions a,
.package-card > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 8px;
    color: #725cff;
    background: rgba(114, 92, 255, .1);
    font-weight: 900;
    text-decoration: none;
}

.package-actions a.highlight,
.package-card > a:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #725cff, #ff5f87);
}

.package-manager-form,
.package-manager-checks {
    display: grid;
    gap: 8px;
}

.package-manager-form label,
.package-manager-checks label {
    display: grid;
    gap: 4px;
    color: #52617a;
    font-size: 12px;
    font-weight: 900;
}

.package-manager-checks label {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.package-manager-form input[type="number"] {
    width: 130px;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid #d8e2ef;
    border-radius: 8px;
    background: #ffffff;
}

.feedback-summary {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.feedback-summary h3 {
    margin: 0;
    color: #172033;
}

.feedback-summary > div {
    display: grid;
    grid-template-columns: minmax(120px, 220px) 1fr 44px;
    gap: 10px;
    align-items: center;
}

.feedback-bar {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf2f7;
}

.feedback-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, #18aaa4, #725cff);
}

.feedback-manage-page .content {
    gap: 26px;
}

.feedback-section {
    margin-top: 10px;
}

.feedback-manage-page .panel-head {
    gap: 18px;
}

.feedback-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .01em;
    white-space: nowrap;
}

.feedback-status i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .7);
}

.feedback-status.is-ready {
    color: #065f46;
    border-color: #b9efd6;
    background: linear-gradient(135deg, #e8fff4, #d9fbe9);
}

.feedback-status.is-ready i {
    background: #10b981;
}

.feedback-status.is-new {
    color: #8a5b00;
    border-color: #f7dda2;
    background: linear-gradient(135deg, #fff8df, #fff0bd);
}

.feedback-status.is-new i {
    background: #f59e0b;
}

.feedback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.feedback-actions form {
    margin: 0;
}

.feedback-modal {
    position: fixed;
    inset: 0;
    z-index: 138;
    display: none;
    place-items: center;
    padding: 18px;
}

.feedback-modal.is-open {
    display: grid;
}

.feedback-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 13, 24, .62);
    backdrop-filter: blur(10px);
}

.feedback-dialog {
    position: relative;
    width: min(760px, 100%);
    max-height: calc(100vh - 36px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 38px 100px rgba(10, 18, 35, .38);
}

.feedback-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px;
    border-bottom: 1px solid #e5edf7;
    background: linear-gradient(135deg, rgba(108, 99, 255, .1), rgba(255, 95, 135, .1));
}

.feedback-dialog h2 {
    margin: 3px 0 0;
    color: #0f1f36;
}

.feedback-dialog header button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    color: #334155;
    background: #eef3fb;
    font-size: 24px;
    font-weight: 800;
    cursor: pointer;
}

.billing-note {
    width: fit-content;
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 auto 24px;
    padding: 8px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(29, 44, 78, .1);
}

.billing-note span,
.billing-note strong {
    padding: 8px 14px;
    border-radius: 999px;
}

.billing-note strong {
    color: #ffffff;
    background: linear-gradient(135deg, #11998e, #38ef7d);
}

.signup-layout,
.payment-layout {
    width: min(1120px, calc(100% - 32px));
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(440px, 1.18fr);
    gap: 32px;
    align-items: start;
    margin: 0 auto;
    padding: 40px 0 72px;
}

.signup-copy {
    position: sticky;
    top: 24px;
    padding: 34px 0;
}

.signup-copy h1 {
    max-width: 520px;
    margin-bottom: 14px;
    font-size: clamp(36px, 4.4vw, 56px);
    line-height: 1.04;
}

.signup-promise {
    display: grid;
    gap: 10px;
    max-width: 420px;
    margin-top: 24px;
}

.signup-promise span {
    position: relative;
    padding: 13px 16px 13px 42px;
    border-radius: 8px;
    color: #1f2a44;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(126, 149, 180, .18);
    font-weight: 900;
    box-shadow: 0 14px 34px rgba(29, 44, 78, .07);
}

.signup-promise span::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #18aaa4;
    box-shadow: 0 0 0 5px rgba(24, 170, 164, .12);
}

.signup-card,
.payment-card,
.bank-card {
    padding: 24px;
}

.signup-card {
    display: grid;
    gap: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(251, 253, 255, .95));
    box-shadow: 0 28px 80px rgba(29, 44, 78, .13);
}

.signup-card h2 {
    margin: 0;
    color: #111b31;
    font-size: 19px;
}

.signup-card .form-grid {
    gap: 16px 14px;
}

.signup-card label > span {
    color: #26334d;
    font-size: 13px;
    font-weight: 900;
}

.signup-card input {
    border-color: #d3deec;
    background: #fbfdff;
    color: #172033;
    font-weight: 760;
}

.signup-card input:focus {
    outline: none;
    border-color: #18aaa4;
    box-shadow: 0 0 0 4px rgba(24, 170, 164, .12);
}

.signup-packages,
.billing-choice {
    display: grid;
    gap: 10px;
}

.signup-packages label,
.billing-choice label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px;
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    background: #f8fafc;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.signup-packages label:has(input:checked),
.billing-choice label:has(input:checked) {
    border-color: rgba(24, 170, 164, .5);
    background: #f3fffd;
    box-shadow: 0 12px 26px rgba(24, 170, 164, .1);
}

.signup-packages label:hover,
.billing-choice label:hover {
    border-color: rgba(114, 92, 255, .34);
    transform: translateY(-1px);
}

.signup-packages strong,
.billing-choice span {
    color: #1f2a44;
    font-weight: 950;
}

.signup-packages label > span {
    color: #25324a;
    font-weight: 900;
    white-space: nowrap;
}

.signup-packages input,
.billing-choice input {
    width: auto;
    min-height: auto;
}

.billing-choice {
    grid-template-columns: 1fr 1fr;
}

.billing-choice b {
    color: #11998e;
    font-size: 13px;
    white-space: nowrap;
}

.signup-card .submit-btn {
    min-height: 48px;
    margin-top: -2px;
    box-shadow: 0 18px 34px rgba(114, 92, 255, .2);
}

.payment-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
}

.payment-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.payment-summary-grid div {
    padding: 16px;
    border-radius: 8px;
    background: #f7fafc;
}

.payment-summary-grid span {
    display: block;
    color: #65728a;
    font-size: 12px;
    font-weight: 800;
}

.payment-summary-grid strong {
    display: block;
    margin-top: 6px;
    font-size: 24px;
}

.bank-card {
    display: grid;
    gap: 14px;
}

.bank-qr {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    width: min(220px, 100%);
    justify-self: center;
    border-radius: 8px;
    color: #725cff;
    background: #ffffff;
    border: 16px solid #f5f7ff;
    font-size: 64px;
    font-weight: 950;
}

.bank-card dl {
    display: grid;
    gap: 8px;
}

.bank-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.profile-page {
    background:
        radial-gradient(circle at 18% 0%, rgba(24, 170, 164, .16), transparent 34%),
        radial-gradient(circle at 92% 12%, rgba(255, 95, 135, .13), transparent 30%),
        linear-gradient(180deg, #eef6f8 0%, #f6f8fb 44%, #edf2f7 100%);
}

.profile-page .content {
    position: relative;
}

.profile-page .content::before {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 28px;
    height: 210px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 10% 10%, rgba(24, 170, 164, .12), transparent 34%),
        radial-gradient(circle at 92% 0%, rgba(255, 95, 135, .1), transparent 30%),
        #ffffff;
    border: 1px solid rgba(126, 149, 180, .18);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
    pointer-events: none;
}

.profile-page .topbar,
.profile-page .toast,
.profile-page .profile-layout {
    position: relative;
    z-index: 1;
}

.profile-page .topbar {
    z-index: 80;
    min-height: 156px;
    align-items: end;
    overflow: visible;
    color: #102039;
    background:
        radial-gradient(circle at 14% 20%, rgba(24, 170, 164, .12), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .92));
    border-color: rgba(126, 149, 180, .18);
    box-shadow: none;
}

.profile-page .profile-layout {
    z-index: 1;
}

.profile-page .topbar .eyebrow {
    color: #64748b;
}

.profile-page .topbar h1 {
    color: #102039;
    font-size: 38px;
}

.profile-page .header-actions,
.profile-page .profile-dropdown {
    position: relative;
    z-index: 20;
}

.profile-page .language-switch,
.profile-page .profile-trigger {
    background: #f8fbff;
    border-color: #dbe4f0;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
}

.profile-page .profile-menu {
    z-index: 5000;
    border-color: rgba(126, 149, 180, .24);
    box-shadow: 0 28px 70px rgba(15, 23, 42, .24);
}

.profile-page .profile-menu a {
    color: #111827;
    background: transparent;
}

.profile-page .profile-menu a:hover,
.profile-page .profile-menu a.active {
    color: #111827;
    background: #f4f7ff;
}

.profile-page .profile-menu a[href="/logout"] {
    color: #111827;
}

.profile-page .profile-menu a[href="/logout"]:hover {
    color: #111827;
    background: #f4f7ff;
}

.profile-page-subtitle {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 14px;
    font-weight: 750;
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .8fr);
    gap: 20px;
    align-items: start;
}

.profile-panel {
    padding: 26px;
    border-color: rgba(126, 149, 180, .18);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 80px rgba(20, 34, 56, .1);
}

.profile-page .panel-head {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 18px;
}

.profile-page .panel-head h2 {
    color: #102039;
    font-size: 22px;
}

.profile-page .status {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 999px;
    color: #047857;
    background: #d7fae8;
    border: 1px solid rgba(16, 185, 129, .18);
    font-size: 12px;
    font-weight: 950;
}

.profile-hero-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding: 18px;
    overflow: hidden;
    border-radius: 8px;
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 95, 135, .18), transparent 34%),
        linear-gradient(135deg, #f2f8ff, #fff3f8);
    border: 1px solid rgba(114, 92, 255, .15);
}

.profile-hero-card::after {
    content: "";
    position: absolute;
    right: -42px;
    bottom: -50px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(24, 170, 164, .14);
}

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

.profile-avatar-lg {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #18aaa4, #725cff 56%, #ff5f87);
    box-shadow: 0 18px 34px rgba(114, 92, 255, .22);
    font-size: 27px;
    font-weight: 950;
}

.profile-hero-card strong,
.profile-hero-card span {
    display: block;
}

.profile-hero-card strong {
    color: #102039;
    font-size: 20px;
    line-height: 1.15;
}

.profile-hero-card span {
    margin-top: 4px;
    color: #65728a;
    font-size: 13px;
}

.role-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.role-pills i {
    padding: 6px 10px;
    border-radius: 999px;
    color: #0f766e;
    background: #ffffff;
    border: 1px solid rgba(24, 170, 164, .2);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.profile-page .form-grid label > span {
    color: #23314a;
    font-size: 14px;
    font-weight: 900;
}

.profile-page .form-grid input {
    min-height: 46px;
    border-color: #d8e2ef;
    background: #fbfdff;
    font-weight: 760;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.profile-page .form-grid input:focus {
    outline: none;
    border-color: #18aaa4;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(24, 170, 164, .12);
}

.profile-page .form-grid input:disabled {
    color: #53627a;
    background: #f2f5f9;
    opacity: 1;
}

.profile-page .primary-btn {
    min-height: 44px;
    padding: 0 20px;
    background: linear-gradient(135deg, #18aaa4, #725cff 58%, #ff5f87);
    box-shadow: 0 16px 30px rgba(114, 92, 255, .18);
}

.package-profile-panel {
    grid-column: 1 / -1;
}

.package-capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.package-capability-grid div {
    padding: 14px;
    border: 1px solid #e3eaf4;
    border-radius: 8px;
    background: #f8fbff;
}

.package-capability-grid span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.package-capability-grid strong {
    display: block;
    margin-top: 6px;
    color: #172033;
    font-size: 20px;
}

.profile-package-upgrade {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.profile-package-upgrade > label {
    display: grid;
    gap: 8px;
}

.profile-package-upgrade select {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #d8e2ef;
    border-radius: 8px;
    color: #172033;
    background: #f8fbff;
    font: inherit;
}

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

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 52px;
}

.password-toggle {
    position: absolute;
    right: 10px;
    bottom: 8px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: #eaf7f6;
    cursor: pointer;
}

.password-toggle:hover {
    background: #d8f1ef;
}

.password-eye {
    position: relative;
    width: 18px;
    height: 12px;
    border: 2px solid #0f766e;
    border-radius: 50%;
}

.password-eye::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0f766e;
    transform: translate(-50%, -50%);
}

.password-toggle.is-visible .password-eye::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -5px;
    width: 2px;
    height: 22px;
    border-radius: 999px;
    background: #ff5f87;
    transform: rotate(45deg);
}

.password-note {
    margin: 14px 0 0;
    padding: 14px;
    border-radius: 8px;
    color: #475569;
    background: linear-gradient(135deg, #f0fdfa, #f5f7ff);
    border: 1px solid #dbeafe;
    font-size: 13px;
    line-height: 1.45;
}

.password-submit-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #18aaa4);
    box-shadow: 0 14px 28px rgba(15, 118, 110, .18);
    font-weight: 900;
    cursor: pointer;
}

.password-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(15, 118, 110, .24);
}

.error-toast {
    color: #9f1239;
    background: #fff1f2;
    border-color: #fecdd3;
}

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    place-items: center;
    padding: 18px;
}

.confirm-modal.is-open {
    display: grid;
}

.confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 13, 24, .58);
    backdrop-filter: blur(10px);
}

.confirm-dialog {
    position: relative;
    width: min(430px, 100%);
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 255, .96)),
        #ffffff;
    box-shadow: 0 34px 90px rgba(10, 18, 35, .34);
}

.confirm-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #ff5f87, #6d5dfc);
    box-shadow: 0 18px 30px rgba(255, 95, 135, .28);
    font-size: 28px;
    font-weight: 950;
}

.confirm-dialog h2 {
    margin: 4px 0 8px;
    color: #0f1f36;
    font-size: 24px;
    line-height: 1.2;
}

.confirm-dialog p:not(.eyebrow) {
    margin: 0;
    color: #5f6c83;
    line-height: 1.55;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.confirm-cancel-btn,
.confirm-danger-btn {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 8px;
    font-weight: 900;
    cursor: pointer;
}

.confirm-cancel-btn {
    color: #334155;
    background: #eef3fb;
    border: 1px solid #d8e1ef;
}

.confirm-danger-btn {
    color: #ffffff;
    background: linear-gradient(135deg, #ef4444, #ff5f87);
    border: 0;
    box-shadow: 0 16px 30px rgba(239, 68, 68, .24);
}

.confirm-danger-btn.is-primary-confirm {
    background: linear-gradient(135deg, #18aaa4, #0f766e);
    box-shadow: 0 16px 30px rgba(15, 118, 110, .22);
}

.confirm-cancel-btn:hover,
.confirm-danger-btn:hover {
    transform: translateY(-1px);
}

@media (max-width: 900px) {
    .app-shell {
        display: block;
    }

    .sidebar {
        width: 100%;
        min-height: auto;
        position: relative;
        top: auto;
        padding: 14px 0 16px;
        background: linear-gradient(135deg, #0b1220 0%, #14213d 55%, #1b3a34 100%);
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        box-shadow: 0 20px 35px rgba(13, 22, 38, .2);
    }

    .sidebar-restore {
        display: none !important;
    }

    .brand,
    .role-card {
        margin-inline: 14px;
    }

    .sidebar-toggle,
    .sidebar-foot,
    .nav-label {
        display: none;
    }

    .nav {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 2px 14px 4px;
        scrollbar-width: thin;
    }

    .nav a {
        flex: 0 0 auto;
        margin: 0;
        padding: 11px 14px;
        color: #ffffff;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .08);
        white-space: nowrap;
    }

    .nav a.active,
    .nav a:hover {
        background: linear-gradient(135deg, rgba(114, 92, 255, .95), rgba(255, 95, 135, .85));
    }

    .sidebar-collapsed .sidebar {
        width: 100%;
        flex-basis: auto;
        padding: 14px 0 16px;
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar-collapsed .sidebar-copy,
    .sidebar-collapsed .nav a span {
        display: block;
    }

    .sidebar-collapsed .role-card {
        display: flex;
    }

    .sidebar-collapsed .brand {
        justify-content: flex-start;
        margin-inline: 14px;
    }

    .sidebar-collapsed .brand,
    .sidebar-collapsed .nav,
    .sidebar-collapsed .sidebar-foot {
        pointer-events: auto;
    }

    .sidebar-collapsed .nav a {
        justify-content: center;
        min-height: 42px;
        padding: 11px 14px;
    }

    .content {
        padding: 16px;
    }

    .sidebar-collapsed .content {
        padding-left: 16px;
    }

    .topbar,
    .panel-head,
    .setting-top,
    .qr-panel,
    .performance {
        display: grid;
    }

    .qr-panel {
        grid-template-columns: 1fr;
    }

    .qr-card {
        display: grid;
        justify-items: center;
        text-align: center;
    }

    .topbar-actions,
    .header-actions,
    .hero-actions .header-actions {
        justify-content: stretch;
        width: 100%;
    }

    .topbar-actions > *,
    .header-actions > *,
    .profile-dropdown,
    .profile-trigger,
    .logout-btn {
        flex: 1 1 auto;
    }

    .profile-trigger {
        width: 100%;
    }

    .profile-menu {
        left: 0;
        right: 0;
    }

    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-page .content::before {
        left: 16px;
        right: 16px;
        top: 16px;
        height: 190px;
    }

    .profile-page .topbar {
        min-height: 150px;
        align-items: start;
    }

    .profile-page .topbar h1 {
        font-size: 32px;
    }

    .metric-grid,
    .form-grid,
    .detail-grid,
    .seating-form,
    .package-capability-grid {
        grid-template-columns: 1fr;
    }

    .participant-toolbar,
    .export-actions,
    .pagination-bar {
        display: grid;
        width: 100%;
    }

    .participant-filter,
    .export-btn,
    .participant-import-form,
    .participant-import-form label,
    .participant-import-form button {
        max-width: none;
        width: 100%;
    }

    .detail-grid > label.wide {
        grid-column: auto;
    }

    .bars > div {
        grid-template-columns: 1fr;
    }

    .builder-hero,
    .selector-head,
    .builder-layout,
    .builder-row,
    .screen-setting-grid,
    .builder-card-head {
        display: grid;
    }

    .hero-actions,
    .builder-btn {
        width: 100%;
    }

    .builder-layout,
    .mini-stats,
    .builder-qr,
    .settings-field-grid {
        grid-template-columns: 1fr;
    }

    .settings-panel-head {
        display: grid;
    }

    .settings-panel-head a {
        justify-content: center;
    }

    .settings-field-item {
        grid-template-columns: 22px minmax(0, 1fr) auto;
    }

    .preview-payment-upload-row,
    .preview-form,
    .preview-payment-grid {
        grid-template-columns: 1fr;
    }

    .template-chip {
        min-width: calc(50% - 5px);
    }

    .login-page {
        padding: 12px;
    }

    .login-shell {
        width: calc(100vw - 24px);
        grid-template-columns: 1fr;
    }

    .login-hero {
        min-height: auto;
        padding: 28px 22px;
        overflow: hidden;
    }

    .login-hero h1 {
        max-width: 12ch;
        font-size: 31px;
        line-height: 1.08;
    }

    .login-hero p {
        max-width: 31ch;
        font-size: 15px;
    }

    .login-product-preview {
        width: min(100%, 320px);
        max-width: 100%;
        margin-top: 8px;
    }

    .preview-template-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .preview-mini-banner {
        min-height: 70px;
    }

    .login-card {
        padding: 26px;
    }

    .marketing-nav {
        display: grid;
        justify-items: start;
        padding: 14px 0;
    }

    .marketing-nav nav {
        flex-wrap: wrap;
    }

    .marketing-hero,
    .feature-grid,
    .package-grid,
    .signup-layout,
    .payment-layout {
        grid-template-columns: 1fr;
    }

    .marketing-hero {
        min-height: auto;
    }

    .signup-copy {
        position: static;
    }

    .billing-choice,
    .payment-summary-grid {
        grid-template-columns: 1fr;
    }

    .screen-setting-item {
        grid-template-columns: 22px 1fr;
    }

    .inline-switch {
        justify-content: space-between;
        width: 100%;
        grid-column: span 2;
    }
}