:root {
    --panel-bg: #f5f6f8;
    --panel-surface: #ffffff;
    --panel-border: #e1e5ea;
    --panel-text: #20242a;
    --panel-muted: #69717d;
    --panel-accent: #7a2846;
    --panel-accent-dark: #5b1d33;
    --panel-accent-soft: #f4e8ee;
    --panel-green: #2f745c;
    --panel-gold: #a36b17;
}

body.panel-body,
body.customer-login-body {
    margin: 0;
    color: var(--panel-text);
    background: var(--panel-bg);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

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

.panel-sidebar {
    background: var(--panel-surface);
    border-right: 1px solid var(--panel-border);
    padding: 22px 16px;
}

.panel-brand {
    align-items: center;
    color: var(--panel-accent);
    display: flex;
    font-size: 21px;
    font-weight: 800;
    gap: 11px;
    margin-bottom: 28px;
    padding: 0 8px;
    text-decoration: none;
}

.panel-brand-mark {
    align-items: center;
    background: var(--panel-accent);
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 38px;
    height: 38px;
    justify-content: center;
}

.panel-brand small { color: var(--panel-muted); display: block; font-size: 11px; font-weight: 700; margin-top: 1px; }

.panel-nav {
    display: grid;
    gap: 6px;
}

.panel-nav-link {
    align-items: center;
    border-radius: 8px;
    color: var(--panel-text);
    display: flex;
    font-weight: 650;
    gap: 11px;
    min-height: 44px;
    padding: 10px 12px;
    position: relative;
    text-decoration: none;
}

.panel-nav-link i { color: #77808c; font-size: 17px; width: 20px; }
.panel-nav-link small { background: #f0f2f5; border-radius: 999px; font-size: 10px; margin-left: auto; padding: 3px 6px; }

.panel-nav-link:hover,
.panel-nav-link.active {
    background: var(--panel-accent-soft);
    color: var(--panel-accent-dark);
}

.panel-nav-link.active::before { background: var(--panel-accent); border-radius: 0 3px 3px 0; content: ""; height: 24px; left: -16px; position: absolute; width: 3px; }
.panel-nav-link:hover i, .panel-nav-link.active i { color: var(--panel-accent); }
.panel-nav-install {
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    width: 100%;
    background: #373b3fab
}
.panel-nav-install[hidden] { display: none; }
.panel-logout { color: #8f3447; margin-top: 10px; }

.panel-nav-link.disabled {
    color: #a4aab4;
    cursor: not-allowed;
}

.panel-main {
    min-width: 0;
    padding: 28px;
}

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

.panel-topbar h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
}

.panel-topbar p {
    color: var(--panel-muted);
    margin: 4px 0 0;
}

.panel-user {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-muted);
    display: flex;
    font-weight: 700;
    gap: 9px;
    padding: 10px 14px;
}

.panel-user > span { align-items: center; background: var(--panel-accent-soft); border-radius: 50%; color: var(--panel-accent); display: inline-flex; height: 28px; justify-content: center; width: 28px; }

.panel-user-block {
    align-items: flex-end;
    display: grid;
    gap: 8px;
    justify-items: end;
}

.panel-floating-whatsapp {
    align-items: center;
    background: #168557;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 999px;
    bottom: 24px;
    box-shadow: 0 10px 24px rgba(15, 94, 60, 0.24);
    color: #fff;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 8px;
    min-height: 48px;
    padding: 0 17px;
    position: fixed;
    right: 24px;
    text-decoration: none;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    z-index: 1030;
}

.panel-floating-whatsapp-icon { display: block; flex: 0 0 19px; height: 19px; pointer-events: none; width: 19px; }

.panel-floating-whatsapp:hover,
.panel-floating-whatsapp:focus-visible {
    background: #11774d;
    box-shadow: 0 14px 28px rgba(15, 94, 60, 0.3);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.panel-floating-whatsapp:focus-visible {
    outline: 3px solid var(--panel-accent);
    outline-offset: 3px;
}

.panel-project {
    color: var(--panel-muted);
    font-size: 14px;
    font-weight: 700;
}

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

.panel-metric-card,
.customer-login-card,
.panel-form,
.panel-table-shell {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(32, 36, 42, 0.07);
}

.panel-metric-card {
    padding: 22px;
}

.panel-metric-card span {
    color: var(--panel-muted);
    display: block;
    font-weight: 800;
    margin-bottom: 8px;
}

.panel-metric-card span i { color: var(--panel-accent); margin-right: 5px; }

.panel-metric-card strong {
    color: var(--panel-accent-dark);
    display: block;
    font-size: 32px;
    overflow-wrap: anywhere;
}

.panel-toolbar {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.panel-toolbar h2 {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
}

.panel-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-start-cta {
    align-items: center;
    background: var(--panel-surface);
    border-left: 4px solid var(--panel-accent);
    box-shadow: 0 12px 34px rgba(32, 36, 42, 0.07);
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 22px 24px;
}

.quick-start-cta span {
    color: var(--panel-accent);
    display: block;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 4px;
}

.quick-start-cta h2 {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
}

.quick-start-cta p {
    color: var(--panel-muted);
    margin: 5px 0 0;
}

.quick-start-cta .btn {
    flex: 0 0 auto;
}

.panel-toolbar-copy {
    color: var(--panel-muted);
    margin: 5px 0 0;
}

.panel-table-shell {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 16px;
}

.panel-table {
    border-collapse: collapse;
    min-width: 860px;
    width: 100%;
}

.panel-table.js-user-datatable { min-width: 100%; }
.panel-table.js-user-datatable tbody th,
.panel-table.js-user-datatable tbody td { padding: 9px 12px; transition: background-color 0.18s ease; }
.panel-table.js-user-datatable thead th { padding: 10px 12px; }
.panel-table.js-user-datatable tbody tr:hover > * { background-color: #fbf8f9; }
.panel-table.js-user-datatable td.panel-actions { white-space: nowrap; }

.panel-table-shell .dt-container { min-width: 0; }
.panel-table-shell .dt-layout-row { align-items: center; gap: 12px; margin: 0 0 13px; }
.panel-table-shell .dt-layout-row:last-child { margin: 13px 0 0; }
.panel-table-shell .dt-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.panel-table-shell .dt-button { background: #fff !important; border: 1px solid var(--panel-border) !important; border-radius: 6px !important; color: var(--panel-text) !important; font-size: 13px; font-weight: 700; padding: 7px 10px !important; }
.panel-table-shell .dt-button:hover { background: var(--panel-accent-soft) !important; border-color: #d8b8c4 !important; }
.panel-table-shell .dt-search input,
.panel-table-shell .dt-length select { border: 1px solid var(--panel-border); border-radius: 6px; min-height: 38px; }
.panel-table-shell .dt-info,
.panel-table-shell .dt-length,
.panel-table-shell .dt-search { color: var(--panel-muted); font-size: 13px; }
.panel-table-shell .pagination { margin: 0; }
.panel-table-shell .page-link { color: var(--panel-accent); }
.panel-table-shell .active > .page-link { background: var(--panel-accent); border-color: var(--panel-accent); color: #fff; }

.panel-table th,
.panel-table td {
    border-bottom: 1px solid var(--panel-border);
    padding: 14px 16px;
    vertical-align: middle;
}

.panel-table th {
    color: var(--panel-muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.panel-table tr:last-child td {
    border-bottom: 0;
}

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

.panel-actions.compact { flex-wrap: nowrap; gap: 6px; }
.panel-icon-button { align-items: center; display: inline-flex; height: 32px; justify-content: center; padding: 0; width: 32px; }

.panel-actions form {
    margin: 0;
}

.panel-status {
    border-radius: 999px;
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    padding: 5px 10px;
}

.panel-status.active {
    background: #e8f6ef;
    color: #197a54;
}

.panel-status.passive {
    background: #f8e9ed;
    color: #9a2540;
}

.panel-status.pending {
    background: #fff4d6;
    color: #8a6414;
}

.panel-status.default {
    background: #eaf0ff;
    color: #3158a6;
}

.panel-form {
    max-width: 760px;
    padding: 24px;
}

.panel-form.wide {
    max-width: 1120px;
}

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

.message-preset-list .list-group-item { padding: 12px 14px; }
.message-preset-list strong, .message-preset-list small { display: block; }
.message-preset-list strong { font-size: 14px; }
.message-preset-list small { color: var(--panel-muted); line-height: 1.45; margin-top: 3px; }

.full-span {
    grid-column: 1 / -1;
}

.usage-strip {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-muted);
    font-weight: 800;
    margin-bottom: 16px;
    padding: 14px 16px;
}

.usage-strip span {
    color: var(--panel-accent-dark);
    margin-left: 8px;
}

.panel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.panel-tabs a {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--panel-muted);
    font-weight: 800;
    padding: 8px 12px;
    text-decoration: none;
}

.panel-tabs a.active,
.panel-tabs a:hover {
    background: var(--panel-accent-soft);
    border-color: var(--panel-accent-soft);
    color: var(--panel-accent-dark);
}

.panel-filter-form {
    align-items: end;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(32, 36, 42, 0.07);
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(180px, 1fr) minmax(160px, 220px) minmax(180px, 1fr) auto;
    margin: 18px 0;
    padding: 16px;
}

.panel-filter-actions {
    display: flex;
    gap: 8px;
}

.table-muted {
    color: var(--panel-muted);
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-top: 2px;
}

/* Attendance report */
.attendance-report-page { min-width: 0; }
.attendance-general-invite { align-items: center; background: var(--panel-surface); border: 1px solid var(--panel-border); border-left: 4px solid var(--panel-accent); border-radius: 8px; box-shadow: 0 8px 24px rgba(32, 36, 42, .045); display: flex; flex-wrap: wrap; gap: 14px 20px; justify-content: space-between; margin: 0 0 18px; min-width: 0; padding: 16px 18px; }
.attendance-general-invite > div { min-width: 0; }
.attendance-general-invite h2 { color: var(--panel-text); font-size: 15px; font-weight: 800; margin: 0; }
.attendance-general-invite p { color: var(--panel-muted); font-size: 13px; line-height: 1.5; margin: 4px 0 0; overflow-wrap: anywhere; }
.attendance-general-invite .btn { align-items: center; display: inline-flex; flex: 0 1 auto; gap: 7px; justify-content: center; min-height: 42px; max-width: 100%; white-space: normal; }
.attendance-report-metrics { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.attendance-report-metric { --attendance-color: var(--panel-accent); --attendance-soft: var(--panel-accent-soft); align-items: start; background: var(--panel-surface); border: 1px solid var(--panel-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(32, 36, 42, .055); color: inherit; display: grid; gap: 12px; grid-template-columns: 40px minmax(0, 1fr); min-height: 132px; padding: 18px 16px; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.attendance-report-metric:hover { border-color: color-mix(in srgb, var(--attendance-color) 30%, var(--panel-border)); box-shadow: 0 11px 28px rgba(32, 36, 42, .075); transform: translateY(-1px); }
.attendance-report-metric:focus-visible { outline: 3px solid color-mix(in srgb, var(--attendance-color) 28%, transparent); outline-offset: 2px; }
.attendance-report-metric.is-selected { border-color: color-mix(in srgb, var(--attendance-color) 45%, var(--panel-border)); box-shadow: 0 10px 28px color-mix(in srgb, var(--attendance-color) 12%, transparent); }
.attendance-report-metric-icon { align-items: center; background: var(--attendance-soft); border-radius: 7px; color: var(--attendance-color); display: inline-flex; font-size: 19px; height: 40px; justify-content: center; margin: 0; width: 40px; }
.attendance-report-metric-label { color: var(--panel-muted); display: block; font-size: 12px; font-weight: 800; line-height: 1.35; margin: 1px 0 7px; }
.attendance-report-metric strong { color: var(--panel-text); display: block; font-size: 29px; line-height: 1; overflow-wrap: anywhere; }
.attendance-report-metric small { color: var(--panel-muted); display: block; font-size: 11px; line-height: 1.35; margin-top: 8px; }
.attendance-report-metric.is-attending { --attendance-color: #197a54; --attendance-soft: #e8f6ef; }
.attendance-report-metric.is-declined { --attendance-color: #a13c48; --attendance-soft: #fae9ec; }
.attendance-report-metric.is-pending { --attendance-color: #956414; --attendance-soft: #fff4d8; }
.attendance-report-metric.is-people { --attendance-color: #176e8b; --attendance-soft: #e5f3f7; }
.attendance-report-metric.is-capacity { --attendance-color: #6652a3; --attendance-soft: #f0ecfa; }

.attendance-report-filter { grid-template-columns: minmax(150px, .65fr) minmax(190px, 1fr) auto; padding: 18px; }
.attendance-report-filter-heading { align-items: center; display: flex; gap: 11px; grid-column: 1 / -1; }
.attendance-report-filter-heading > span { align-items: center; background: var(--panel-accent-soft); border-radius: 7px; color: var(--panel-accent); display: inline-flex; flex: 0 0 auto; height: 36px; justify-content: center; width: 36px; }
.attendance-report-filter-heading strong, .attendance-report-filter-heading small { display: block; }
.attendance-report-filter-heading strong { color: var(--panel-text); font-size: 14px; }
.attendance-report-filter-heading small { color: var(--panel-muted); font-size: 12px; margin-top: 2px; }
.attendance-report-filter .form-label { color: var(--panel-muted); font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.attendance-report-filter .panel-filter-actions .btn { align-items: center; display: inline-flex; gap: 6px; justify-content: center; min-height: 40px; }

.attendance-report-table-shell { padding: 18px; }
.attendance-report-table-shell .dt-button { font-size: 12px; padding: 6px 9px !important; }
.attendance-report-table-shell .dt-search input { min-width: 210px; }
.attendance-report-table-shell .panel-table thead th { background: #f7f8fa; color: #59636a; font-size: 11px; letter-spacing: 0; padding-block: 11px; white-space: nowrap; }
.attendance-report-table-shell .panel-table tbody td { height: 52px; }
.attendance-report-table-shell .panel-table tbody tr:hover > * { background: #fbf8f9; }
.attendance-report-group, .attendance-report-event > strong { color: var(--panel-text); font-size: 13px; }
.attendance-report-number { font-variant-numeric: tabular-nums; text-align: center; }
.attendance-report-note { color: #59636a; max-width: 220px; overflow-wrap: anywhere; }
.attendance-report-date, .attendance-report-last-view { color: var(--panel-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.attendance-report-last-view { align-items: center; display: inline-flex; gap: 6px; }
.attendance-report-last-view i { color: #7f8d95; font-size: 13px; }
.attendance-report-table-shell .panel-status { border: 1px solid transparent; font-size: 11px; padding: 5px 9px; white-space: nowrap; }
.attendance-report-table-shell .panel-status.active { background: #e8f6ef; border-color: #c8ead8; color: #176c4b; }
.attendance-report-table-shell .panel-status.passive { background: #fae9ec; border-color: #f1cdd3; color: #963642; text-decoration: none; }
.attendance-report-table-shell .panel-status.pending { background: #fff4d8; border-color: #f0dda8; color: #7b5414; }
.attendance-report-table-shell .panel-actions { justify-content: flex-end; }
.attendance-report-table-shell .panel-icon-button { border-color: #d8dee2; color: #59636a; transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
.attendance-report-table-shell .panel-icon-button:hover, .attendance-report-table-shell .panel-icon-button:focus-visible { background: var(--panel-accent-soft); border-color: #d8b8c4; color: var(--panel-accent); }
.attendance-report-empty > span { align-items: center; background: var(--panel-accent-soft); border-radius: 50%; color: var(--panel-accent); display: inline-flex; font-size: 25px; height: 54px; justify-content: center; margin-bottom: 12px; width: 54px; }
.attendance-report-mobile-list { display: none; }
.attendance-report-mobile-card { background: var(--panel-surface); border: 1px solid var(--panel-border); border-radius: 8px; box-shadow: 0 8px 22px rgba(32, 36, 42, .055); min-width: 0; padding: 15px; }
.attendance-report-mobile-card header { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.attendance-report-mobile-card header > div { min-width: 0; }
.attendance-report-mobile-card header strong, .attendance-report-mobile-card header span { display: block; }
.attendance-report-mobile-card header strong { color: var(--panel-text); font-size: 14px; overflow-wrap: anywhere; }
.attendance-report-mobile-card header > div span { color: var(--panel-muted); font-size: 12px; margin-top: 3px; overflow-wrap: anywhere; }
.attendance-report-mobile-card header > .panel-status { flex: 0 0 auto; font-size: 10px; white-space: nowrap; }
.attendance-report-mobile-card dl { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0 0; }
.attendance-report-mobile-card dl > div { background: #f8f9fa; border-radius: 7px; min-width: 0; padding: 9px 10px; }
.attendance-report-mobile-card dl > div:last-child { grid-column: 1 / -1; }
.attendance-report-mobile-card dt { color: var(--panel-muted); font-size: 10px; font-weight: 800; }
.attendance-report-mobile-card dd { color: var(--panel-text); font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 800; margin: 3px 0 0; overflow-wrap: anywhere; }
.attendance-report-mobile-note { color: #59636a; font-size: 12px; line-height: 1.5; margin: 12px 0 0; overflow-wrap: anywhere; }
.attendance-report-mobile-note span { color: var(--panel-muted); display: block; font-size: 10px; font-weight: 800; margin-bottom: 2px; text-transform: uppercase; }
.attendance-report-mobile-card footer { border-top: 1px solid #edf0f2; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 13px; padding-top: 12px; }
.attendance-report-mobile-card footer .btn { align-items: center; display: inline-flex; gap: 6px; justify-content: center; min-height: 40px; min-width: 0; white-space: normal; }

@media (max-width: 1180px) {
    .attendance-report-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .attendance-report-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-report-filter .panel-filter-actions { align-self: end; }
}

@media (max-width: 760px) {
    .attendance-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-report-filter { grid-template-columns: 1fr; }
    .attendance-report-filter .panel-filter-actions { flex-direction: row; }
    .attendance-report-filter .panel-filter-actions .btn { flex: 1 1 0; }
    .attendance-report-table-shell { display: none; }
    .attendance-report-mobile-list { display: grid; gap: 12px; }
}

@media (max-width: 520px) {
    .attendance-general-invite { align-items: stretch; flex-direction: column; padding: 15px; }
    .attendance-general-invite .btn { flex: 1 1 auto; width: 100%; }
    .attendance-report-metrics { grid-template-columns: 1fr; }
    .attendance-report-metric { align-items: center; min-height: 0; padding: 15px; }
    .attendance-report-filter-heading { align-items: flex-start; }
    .attendance-report-filter .panel-filter-actions { flex-direction: column; }
    .attendance-report-mobile-card footer { grid-template-columns: 1fr; }
}

.other-type-field {
    display: none;
}

.other-type-field.visible {
    display: block;
}

.event-map {
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    height: 320px;
    overflow: hidden;
    width: 100%;
}

.event-map-search { position: relative; }

.event-map-search-row {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto auto;
}
.event-map-locate-btn {
    width: 44px;
    padding: 0;
}

.event-map-search-row .btn { align-items: center; display: inline-flex; gap: 7px; justify-content: center; min-height: 44px; }
.event-map-search-results { background: #fff; border: 1px solid var(--panel-border); border-radius: 8px; box-shadow: 0 12px 28px rgba(27, 40, 50, .12); display: grid; margin-top: 7px; max-height: 240px; overflow-y: auto; position: absolute; width: 100%; z-index: 510; }
.event-map-search-results[hidden] { display: none; }
.event-map-search-result { background: #fff; border: 0; border-bottom: 1px solid #edf0f2; color: var(--panel-text); cursor: pointer; font-size: 13px; line-height: 1.45; min-height: 44px; padding: 10px 12px; text-align: left; }
.event-map-search-result:last-child { border-bottom: 0; }
.event-map-search-result:hover,
.event-map-search-result:focus-visible { background: var(--panel-accent-soft); color: var(--panel-accent-dark); outline: 0; }
.event-datetime-composite { display: grid; gap: 8px; grid-template-columns: minmax(145px, 1fr) 74px 74px; }
.event-datetime-composite .form-select { min-width: 0; }

.map-lookup-status {
    align-items: center;
    color: var(--panel-muted);
    display: none;
    font-size: 13px;
    gap: 8px;
    min-height: 32px;
    padding-top: 8px;
}

.map-lookup-status.loading,
.map-lookup-status.error,
.map-lookup-status.success { display: flex; }
.map-lookup-status.loading { color: var(--panel-accent); }
.map-lookup-status.error { color: #9a2540; }
.map-lookup-status.success { color: var(--panel-green); }

.coordinate-details { background: #fafbfc; border: 1px solid var(--panel-border); border-radius: 8px; padding: 12px 14px; }
.coordinate-details summary { color: var(--panel-muted); cursor: pointer; font-size: 13px; font-weight: 700; }
.coordinate-details .panel-form-grid { margin-top: 14px; }

.event-sticky-save {
    align-items: center;
    background: #fff;
    border: 1px solid var(--panel-border);
    border-left: 4px solid var(--panel-accent);
    border-radius: 8px;
    bottom: max(24px, env(safe-area-inset-bottom));
    box-shadow: 0 14px 34px rgba(18, 48, 65, .16);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    max-width: min(460px, calc(100vw - 260px));
    padding: 10px 11px 10px 14px;
    position: fixed;
    right: max(220px, env(safe-area-inset-right));
    width: 100%;
    z-index: 1028;
}
.event-sticky-save[hidden] { display: none; }
.event-sticky-save > span { align-items: center; color: var(--panel-text); display: inline-flex; font-size: 12px; font-weight: 750; gap: 7px; line-height: 1.35; }
.event-sticky-save > span i { color: var(--panel-accent); font-size: 16px; }
.event-sticky-save .btn { align-items: center; display: inline-flex; flex: 0 0 auto; gap: 6px; min-height: 40px; }
.event-sticky-dismiss { align-items: center; background: transparent; border: 0; border-radius: 6px; color: var(--panel-muted); display: none; flex: 0 0 40px; font-size: 17px; height: 40px; justify-content: center; padding: 0; width: 40px; }
.event-sticky-dismiss:hover,
.event-sticky-dismiss:focus-visible { background: var(--panel-accent-soft); color: var(--panel-accent-dark); }
.event-sticky-dismiss:focus-visible { outline: 3px solid color-mix(in srgb, var(--panel-accent) 28%, transparent); outline-offset: 2px; }
body:has(.pwa-install-prompt:not([hidden])) .event-sticky-save,
body:has(.pwa-install-success-toast) .event-sticky-save { bottom: max(104px, calc(80px + env(safe-area-inset-bottom))); }

@media (max-width: 680px) {
    .event-sticky-save {
        bottom: calc(82px + env(safe-area-inset-bottom));
        left: max(16px, env(safe-area-inset-left));
        max-width: none;
        right: calc(84px + env(safe-area-inset-right));
        width: auto;
    }
    .event-sticky-dismiss { display: inline-flex; }
    body:has(.pwa-install-prompt:not([hidden])) .event-sticky-save,
    body:has(.pwa-install-success-toast) .event-sticky-save { bottom: calc(154px + env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
    .event-sticky-save { gap: 9px; padding-left: 11px; }
    .event-sticky-save > span { font-size: 11px; }
    .event-sticky-save .btn { padding-inline: 11px; }
}

.current-cover-link {
    color: var(--panel-accent);
    display: inline-block;
    font-weight: 800;
    margin-top: 8px;
    text-decoration: none;
}

.badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 320px;
}

.badge-list span {
    background: var(--panel-accent-soft);
    border-radius: 999px;
    color: var(--panel-accent-dark);
    font-size: 12px;
    font-weight: 800;
    padding: 5px 8px;
}

.panel-section-title {
    font-size: 20px;
    font-weight: 800;
    margin: 28px 0 14px;
}

.readonly-line {
    background: var(--panel-accent-soft);
    border-radius: 8px;
    color: var(--panel-accent-dark);
    font-weight: 800;
    margin-bottom: 18px;
    padding: 12px 14px;
}

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

.event-choice-card {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(32, 36, 42, 0.05);
    display: grid;
    gap: 14px;
    padding: 18px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.event-choice-card.selected {
    border-color: rgba(122, 40, 70, 0.45);
    box-shadow: 0 12px 28px rgba(122, 40, 70, 0.09);
}

.event-choice-card.limit-full {
    background: #fafafa;
    opacity: 0.82;
}

.event-choice-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.event-choice-head strong,
.event-choice-head span {
    display: block;
}

.event-choice-head strong {
    color: var(--panel-text);
    font-size: 17px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.event-choice-head span,
.usage-mini {
    color: var(--panel-muted);
    font-size: 13px;
    font-weight: 700;
}

.event-choice-head span { margin-top: 5px; }
.event-choice-head span i { color: var(--panel-accent); margin-right: 4px; }

.event-choice-head em {
    background: #f8e9ed;
    border-radius: 999px;
    color: #9a2540;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    padding: 5px 8px;
    white-space: nowrap;
}

.event-check {
    align-items: center;
    background: #fafbfc;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: flex;
    gap: 8px;
    font-weight: 800;
    margin: 0;
    padding: 10px 12px;
}

.event-check input {
    height: 18px;
    width: 18px;
}

.event-choice-bottom {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
}

.usage-mini {
    background: var(--panel-accent-soft);
    border-radius: 8px;
    padding: 10px 12px;
}

.usage-mini span,
.usage-mini strong {
    display: block;
}

.usage-mini small { display: block; font-size: 11px; font-weight: 600; line-height: 1.45; margin-top: 7px; }

.usage-mini strong {
    color: var(--panel-accent-dark);
    font-size: 18px;
    line-height: 1.2;
    margin-top: 2px;
}

.event-max-input:disabled {
    background: #f2f4f7;
    color: #8d96a3;
}

.panel-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 24px;
}

.dynamic-form-section {
    border-top: 1px solid var(--panel-border);
    margin-top: 8px;
    padding-top: 22px;
}

.section-fields { margin-top: 18px; }

.validation-summary-panel {
    background: #fff4f5;
    border: 1px solid #efcbd2;
    border-left: 4px solid #a62d49;
    border-radius: 6px;
    color: #84243a;
    margin-bottom: 22px;
    padding: 14px 16px;
}

.validation-summary-panel.validation-summary-valid { display: none; }
.validation-summary-panel strong { display: block; margin-bottom: 5px; }
.validation-summary-panel ul { margin: 0; padding-left: 20px; }
.input-validation-error { border-color: #bd3654 !important; box-shadow: 0 0 0 3px rgba(189, 54, 84, 0.1); }
.field-validation-error { display: block; font-size: 13px; margin-top: 5px; }

.panel-section-heading {
    align-items: flex-start;
    display: flex;
    gap: 12px;
}

.panel-section-heading > span {
    align-items: center;
    background: var(--panel-accent);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 30px;
    font-weight: 800;
    height: 30px;
    justify-content: center;
}

.panel-section-heading h2 {
    font-size: 19px;
    font-weight: 800;
    margin: 2px 0 0;
}

.panel-section-heading p,
.dynamic-empty,
.form-help {
    color: var(--panel-muted);
}

.panel-section-heading p {
    margin: 4px 0 0;
}

.dynamic-fields-grid,
.dynamic-theme-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.dynamic-theme-card {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    grid-template-rows: 190px minmax(0, 1fr);
    min-height: 360px;
    overflow: hidden;
}

.dynamic-theme-card > input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.dynamic-theme-content {
    align-content: start;
    display: grid;
    gap: 8px;
    padding: 16px;
}

.dynamic-theme-content > div:first-child {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.dynamic-theme-content > div:first-child > strong {
    font-size: 17px;
}

.dynamic-theme-content > small {
    color: var(--panel-muted);
    line-height: 1.45;
    min-height: 40px;
}

.dynamic-theme-card.selected {
    border-color: var(--panel-accent);
    box-shadow: 0 8px 22px rgba(122, 40, 70, 0.1);
}

.dynamic-theme-card:focus-within {
    outline: 3px solid rgba(122, 40, 70, 0.18);
    outline-offset: 2px;
}

.theme-selected-badge {
    background: var(--panel-accent-soft);
    border-radius: 999px;
    color: var(--panel-accent-dark);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 7px;
}

.dynamic-theme-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 4px;
}

.theme-template-preview {
    align-content: center;
    background: #f5f6f8;
    color: #2b3036;
    display: grid;
    justify-items: center;
    overflow: hidden;
    padding: 25px;
    position: relative;
    text-align: center;
}

.theme-template-preview::before {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(70, 70, 70, 0.12);
    box-shadow: 0 10px 24px rgba(32, 36, 42, 0.08);
    content: "";
    inset: 15px 24px;
    position: absolute;
}

.theme-template-preview span,
.theme-template-preview strong,
.theme-template-preview small,
.theme-template-preview i,
.theme-template-preview b {
    position: relative;
    z-index: 1;
}

.theme-template-preview span {
    background: currentColor;
    height: 1px;
    margin-bottom: 13px;
    opacity: 0.55;
    width: 46px;
}

.theme-template-preview strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 400;
}

.theme-template-preview small {
    font-size: 9px;
    font-weight: 800;
    margin-top: 5px;
    text-transform: uppercase;
}

.theme-template-preview i {
    border-top: 1px solid currentColor;
    margin-top: 14px;
    opacity: 0.45;
    width: 70px;
}

.theme-template-preview.wedding-romantic { background: #ead9dd; color: #6f263e; }
.theme-template-preview.wedding-romantic b { border: 1px solid #7b8c76; border-radius: 90% 10% 90% 10%; height: 35px; left: 38px; position: absolute; top: 26px; transform: rotate(28deg); width: 18px; }
.theme-template-preview.wedding-elegant { background: #e8ded1; color: #4d3432; }
.theme-template-preview.wedding-elegant::after { border: 1px solid rgba(107, 39, 55, 0.35); content: ""; inset: 23px 32px; position: absolute; }
.theme-template-preview.wedding-botanical { background: #dfe8da; color: #526149; }
.theme-template-preview.wedding-botanical b { border: 1px solid #66745b; border-radius: 90% 10% 90% 10%; height: 48px; position: absolute; right: 39px; top: 24px; transform: rotate(35deg); width: 23px; }
.theme-template-preview.birthday-celebration { background: #fff2f5; color: #ad294d; }
.theme-template-preview.birthday-celebration::after { background: #f4b942; border-radius: 50%; box-shadow: 88px 25px 0 #4f9d9d, 168px -8px 0 #6750a4; content: ""; height: 13px; left: 28px; position: absolute; top: 25px; width: 13px; }
.theme-template-preview.birthday-celebration b { border: 2px solid #e34f6f; height: 24px; position: absolute; right: 40px; top: 70px; transform: rotate(28deg); width: 24px; }
.theme-template-preview.circumcision-modern { background: #f5f0e6; color: #173b61; }
.theme-template-preview.circumcision-modern::after { border: 1px solid rgba(31, 78, 121, 0.35); content: ""; inset: 19px; position: absolute; }
.theme-template-preview.circumcision-modern b { border: 1px solid #a88a4e; border-radius: 50%; height: 38px; position: absolute; right: 35px; top: 25px; width: 38px; }
.theme-template-preview.corporate-clean { background: #eff3f8; color: #172033; text-align: left; }
.theme-template-preview.corporate-clean::after { background: #172033; content: ""; height: 100%; position: absolute; right: 0; top: 0; width: 24%; }
.theme-template-preview.corporate-clean span { margin-left: 12%; margin-right: auto; }
.theme-template-preview.corporate-clean strong, .theme-template-preview.corporate-clean small { margin-left: 12%; margin-right: auto; }
.theme-template-preview.corporate-clean i { margin-left: 12%; margin-right: auto; }
.theme-template-preview.minimal { background: #eef1f3; color: #252a31; }

.theme-customization {
    margin-top: 20px;
}

.theme-customization h3 {
    font-size: 17px;
    font-weight: 800;
    margin: 0;
}

.theme-property {
    min-width: 0;
}

.theme-property-help { margin: -2px 0 10px; }

.theme-preview-guidance {
    align-items: flex-start;
    background: #f7f8fa;
    border-left: 3px solid var(--panel-accent);
    color: var(--panel-muted);
    display: flex;
    gap: 9px;
    line-height: 1.5;
    margin: 16px 0 0;
    padding: 11px 13px;
}

.theme-image-preview {
    aspect-ratio: 16 / 8;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    display: block;
    margin-bottom: 10px;
    object-fit: cover;
    width: 100%;
}

.theme-remove-check {
    align-items: center;
    color: #9a2540;
    display: flex;
    font-size: 13px;
    font-weight: 700;
    gap: 7px;
    margin-top: 9px;
}

.theme-remove-check input {
    height: 17px;
    width: 17px;
}

.theme-color-row {
    align-items: center;
    display: grid;
    gap: 9px;
    grid-template-columns: 48px minmax(0, 150px);
}

.theme-color-row input[type="color"] {
    background: #fff;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    height: 42px;
    padding: 4px;
    width: 48px;
}

.theme-color-swatches {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.theme-color-swatches button {
    background: var(--swatch-color);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--panel-border);
    height: 26px;
    padding: 0;
    width: 26px;
}

.theme-color-swatches button:focus-visible {
    outline: 3px solid rgba(122, 40, 70, 0.25);
    outline-offset: 2px;
}

.required-mark {
    color: #9a2540;
}

.form-help {
    display: block;
    font-size: 13px;
    margin-top: 5px;
}

.check-row.compact {
    margin-top: 0;
    min-height: 42px;
}

.panel-empty-state {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(32, 36, 42, 0.07);
    max-width: 720px;
    padding: 28px;
}

.panel-empty-state h3 {
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 8px;
}

.panel-empty-state p {
    color: var(--panel-muted);
    margin: 0 0 18px;
}

.message-template-table {
    min-width: 920px;
}

.message-template-table td:nth-child(2) {
    width: 42%;
}

.message-snippet {
    color: var(--panel-muted);
    display: -webkit-box;
    line-height: 1.5;
    max-width: 520px;
    overflow: hidden;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.message-template-form {
    max-width: 1180px;
}

.message-editor-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
}

.message-editor-textarea {
    line-height: 1.55;
    min-height: 300px;
    resize: vertical;
}

.message-fields-panel {
    background: #fafbfc;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 16px;
}

.message-fields-panel h3 {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 5px;
}

.message-fields-panel p {
    color: var(--panel-muted);
    font-size: 14px;
    margin: 0 0 13px;
}

.message-field-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.message-field-button {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--panel-accent-dark);
    font-family: Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 9px;
}

.message-field-button:hover,
.message-field-button:focus-visible {
    background: var(--panel-accent-soft);
    border-color: var(--panel-accent);
}

.message-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.message-options .check-row {
    flex: 1 1 220px;
}

.message-live-preview {
    align-self: start;
    background: #fffdfd;
    border: 1px solid #eadce2;
    border-radius: 8px;
    padding: 20px;
    position: sticky;
    top: 20px;
}

.message-preview-kicker {
    color: var(--panel-accent);
    display: block;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.message-preview-content {
    color: var(--panel-text);
    line-height: 1.65;
    min-height: 260px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.whatsapp-button {
    background: #1f8f5f;
    border-color: #1f8f5f;
    color: #fff;
}

.whatsapp-button:hover,
.whatsapp-button:focus {
    background: #176e49;
    border-color: #176e49;
    color: #fff;
}

.whatsapp-button:disabled {
    background: #d8dde1;
    border-color: #d8dde1;
    color: #747d86;
}

.copy-invite-link.copied {
    background: #e8f6ef;
    border-color: #90cfb3;
    color: #197a54;
}

.whatsapp-share-form { max-width: 1120px; }
.whatsapp-share-heading { align-items: center; border-bottom: 1px solid var(--panel-border); display: flex; gap: 14px; margin-bottom: 20px; padding-bottom: 18px; }
.whatsapp-share-heading span:not(.whatsapp-share-icon) { color: var(--panel-muted); display: block; font-size: 12px; font-weight: 700; }
.whatsapp-share-heading h2 { font-size: 21px; font-weight: 800; margin: 2px 0 0; overflow-wrap: anywhere; }
.whatsapp-share-icon { align-items: center; background: #e8f6ef; border-radius: 7px; color: #197a54; display: inline-flex; font-size: 22px; height: 46px; justify-content: center; width: 46px; }
.whatsapp-share-textarea { line-height: 1.55; min-height: 300px; resize: vertical; }
.whatsapp-share-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); }
.whatsapp-share-editor { display: grid; gap: 18px; }
.whatsapp-message-preview { position: static; }
.message-template-status { color: var(--panel-muted); display: block; font-size: 12px; margin-top: 7px; min-height: 18px; }

.guest-list-shell { overflow: visible; }
.guest-list-table { min-width: 0; }
.guest-bulk-actions { align-items: center; background: #f4f7f8; border: 1px solid var(--panel-border); display: flex; gap: 14px; justify-content: space-between; margin: 0 0 16px; padding: 12px 14px; }
.guest-bulk-actions-copy { align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.guest-bulk-actions-copy strong { color: var(--panel-text); font-size: 14px; }
.guest-bulk-actions-copy span { color: #9b2c2c; font-size: 12px; min-height: 18px; }
.guest-select-column { text-align: center; width: 42px; }
.guest-select { cursor: pointer; height: 19px; margin: 0; width: 19px; }
.guest-select:disabled { cursor: not-allowed; opacity: .45; }
.panel-table.js-user-datatable.guest-list-table td.invite-actions-cell { display: table-cell; min-width: 0; white-space: normal; }
.guest-list-name { color: var(--panel-text); display: block; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.guest-list-detail { color: var(--panel-muted); display: block; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.guest-list-events { display: flex; flex-wrap: wrap; gap: 5px; max-width: 260px; }
.guest-list-events span { background: #f0f3f5; border-radius: 4px; color: #46525b; font-size: 11px; font-weight: 700; padding: 4px 7px; }
.guest-list-status { font-size: 11px; padding: 4px 8px; }
.guest-list-status.passive { background: #eef0f2; color: #5c646b; }
.guest-invite-count { align-items: flex-start; color: var(--panel-accent); display: inline-flex; flex-direction: column; gap: 1px; text-decoration: none; }
.guest-invite-count strong { font-size: 15px; line-height: 1.2; }
.guest-invite-count span { color: var(--panel-muted); font-size: 11px; line-height: 1.35; }
.guest-invite-count:hover strong, .guest-invite-count:focus strong { text-decoration: underline; }
.invite-share-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.invite-share-actions .btn { align-items: center; display: inline-flex; gap: 5px; min-height: 38px; white-space: nowrap; }
.invite-share-actions .btn:focus-visible, .guest-list-menu .dropdown-item:focus-visible { outline: 2px solid var(--panel-accent); outline-offset: 2px; }
.guest-list-more { align-items: center; display: inline-flex; font-size: 18px; justify-content: center; min-height: 38px; min-width: 38px; padding: 0; }
.guest-list-menu .dropdown-menu { border-color: var(--panel-border); box-shadow: 0 12px 28px rgba(32, 36, 42, .14); min-width: 180px; z-index: 1080; }
.guest-list-menu .dropdown-item { align-items: center; display: flex; gap: 10px; min-height: 38px; }
.guest-list-menu .dropdown-item i { width: 16px; }
.guest-list-menu form { margin: 0; }
.whatsapp-queue { background: #fff; border: 1px solid var(--panel-border); display: grid; gap: 22px; max-width: 760px; padding: 24px; }
.whatsapp-queue-progress { align-items: center; border-bottom: 1px solid var(--panel-border); color: var(--panel-muted); display: flex; font-size: 13px; font-weight: 700; justify-content: space-between; padding-bottom: 14px; }
.whatsapp-queue-progress span:first-child { color: var(--panel-accent); }
.whatsapp-queue-person { align-items: center; display: flex; gap: 14px; }
.whatsapp-queue-person > div { min-width: 0; }
.whatsapp-queue-person span:not(.whatsapp-share-icon) { color: var(--panel-muted); display: block; font-size: 12px; font-weight: 700; }
.whatsapp-queue-person h2 { font-size: 21px; margin: 2px 0 4px; overflow-wrap: anywhere; }
.whatsapp-queue-person p { color: var(--panel-muted); margin: 0; overflow-wrap: anywhere; }
.whatsapp-queue-preview { background: #f6f8f9; border: 1px solid var(--panel-border); padding: 16px; }
.whatsapp-queue-preview .message-preview-content { max-height: 300px; min-height: 0; overflow: auto; white-space: pre-wrap; }
.queue-invitation-link { display: inline-block; font-size: 13px; margin-top: 14px; overflow-wrap: anywhere; }
.whatsapp-queue-actions { margin: 0; }

.panel-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.invite-create-flow { display: grid; gap: 20px; padding-bottom: 70px; }
.invite-flow-progress { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.invite-flow-progress li { align-items: center; border-bottom: 3px solid var(--panel-border); color: var(--panel-muted); display: flex; font-size: 12px; font-weight: 700; gap: 8px; min-width: 0; padding: 10px 4px; }
.invite-flow-progress li span { align-items: center; background: #eef1f3; border-radius: 50%; display: inline-flex; flex: 0 0 28px; height: 28px; justify-content: center; }
.invite-flow-progress li.active, .invite-flow-progress li.complete { border-color: var(--panel-accent); color: var(--panel-text); }
.invite-flow-progress li.active span, .invite-flow-progress li.complete span { background: var(--panel-accent); color: #fff; }
.invite-flow-step { background: #fff; border: 1px solid var(--panel-border); padding: 22px; }
.invite-flow-step > header { margin-bottom: 18px; }
.invite-flow-step > header > span { color: var(--panel-accent); display: block; font-size: 12px; font-weight: 800; margin-bottom: 3px; text-transform: uppercase; }
.invite-flow-step > header h2 { font-size: 21px; margin: 0 0 5px; }
.invite-flow-step > header p { color: var(--panel-muted); margin: 0; }
.invite-event-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.invite-event-option { border: 1px solid var(--panel-border); cursor: pointer; display: grid; gap: 3px; min-height: 132px; padding: 16px 44px 16px 16px; position: relative; }
.invite-event-option:has(input:checked) { border-color: var(--panel-accent); box-shadow: inset 0 0 0 1px var(--panel-accent); }
.invite-event-option.disabled { background: #f7f8f9; color: var(--panel-muted); cursor: not-allowed; }
.invite-event-option input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.invite-option-check { align-items: center; border: 1px solid var(--panel-border); border-radius: 50%; display: flex; height: 25px; justify-content: center; position: absolute; right: 14px; top: 14px; width: 25px; }
.invite-event-option:has(input:checked) .invite-option-check { background: var(--panel-accent); border-color: var(--panel-accent); color: #fff; }
.invite-event-option > span:not(.invite-option-check) { color: var(--panel-muted); font-size: 13px; }
.invite-event-option small { color: var(--panel-accent); font-weight: 700; margin-top: auto; }
.invite-event-option.disabled small { color: #7d858d; }
.invite-guest-tools { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.invite-rights-note, .invite-rights-summary { background: var(--panel-accent-soft); border: 1px solid var(--panel-border); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 5px 16px; margin: 0 0 14px; padding: 11px 13px; }
.invite-rights-note strong, .invite-rights-summary strong { color: var(--panel-text); font-size: 13px; }
.invite-rights-note span, .invite-rights-summary span { color: var(--panel-muted); font-size: 12px; }
.invite-rights-note a { font-size: 12px; font-weight: 800; }
.invite-rights-summary strong { flex-basis: 100%; }
.invite-rights-warning { background: #fff4e8; border: 1px solid #eacb9b; border-radius: 6px; margin-bottom: 14px; padding: 11px 13px; }
.invite-rights-warning[hidden] { display: none; }
.invite-rights-warning p { color: #684b19; font-size: 13px; font-weight: 700; margin: 0 0 8px; }
.invite-general-shortcut { align-items: center; display: flex; flex-wrap: wrap; font-size: 12px; gap: 4px 9px; margin-bottom: 12px; }
.invite-general-shortcut span { color: var(--panel-muted); }
.invite-general-shortcut a { font-weight: 800; }
.invite-guest-search { align-items: center; border: 1px solid var(--panel-border); display: flex; flex: 1 1 260px; gap: 8px; min-height: 40px; padding: 0 11px; }
.invite-guest-search input { border: 0; min-width: 0; outline: 0; width: 100%; }
.invite-guest-list, .invite-maximum-list { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.invite-guest-card { align-items: center; border: 1px solid var(--panel-border); display: flex; gap: 12px; justify-content: space-between; min-width: 0; padding: 13px; }
.invite-guest-card.selected { border-color: var(--panel-accent); box-shadow: inset 3px 0 var(--panel-accent); }
.invite-guest-card { flex-wrap: wrap; }
.invite-guest-card .invite-guest-choice { order: 1; }
.invite-guest-card .invite-guest-maximum { order: 2; }
.invite-existing-state { flex: 1 1 100%; order: 3; }
.invite-existing-state strong { color: var(--panel-muted); display: block; font-size: 12px; }
.invite-guest-card.has-existing-invite .invite-existing-state strong { color: var(--panel-accent); }
.invite-existing-state small { color: var(--panel-muted); display: block; font-size: 11px; line-height: 1.45; margin-top: 3px; }
.invite-maximum-notice { background: var(--panel-accent-soft); border-left: 2px solid var(--panel-accent); flex: 1 1 100%; font-size: 12px; line-height: 1.5; margin: 0; order: 4; padding: 9px 11px; }
.invite-guest-choice { align-items: center; cursor: pointer; display: flex; gap: 11px; min-width: 0; }
.invite-guest-choice input { flex: 0 0 auto; height: 20px; width: 20px; }
.invite-guest-choice span { min-width: 0; }
.invite-guest-choice strong, .invite-guest-choice small { display: block; overflow-wrap: anywhere; }
.invite-guest-choice small { color: var(--panel-muted); font-size: 12px; margin-top: 2px; }
.invite-guest-maximum { display: none; }
.invite-maximum-list .invite-guest-card { align-items: center; }
.invite-maximum-list .invite-guest-maximum { align-items: center; display: flex; gap: 10px; justify-content: space-between; width: 100%; }
.invite-maximum-list .invite-guest-maximum > span:first-child { font-weight: 700; }
.invite-maximum-list .invite-guest-card { flex-wrap: wrap; }
.invite-maximum-person { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.invite-maximum-person strong { font-size: .94rem; }
.invite-maximum-person small { color: var(--panel-muted); }
.invite-number-stepper { align-items: center; border: 1px solid var(--panel-border); display: grid; flex: 0 0 auto; grid-template-columns: 44px 54px 44px; }
.invite-number-stepper button { background: #f4f6f7; border: 0; font-size: 20px; height: 44px; }
.invite-number-stepper input { border: 0; font-weight: 800; height: 44px; min-width: 0; text-align: center; width: 54px; }
.invite-review { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.invite-review > div { background: #f5f7f8; border: 1px solid var(--panel-border); padding: 16px; }
.invite-review span, .invite-review strong { display: block; }
.invite-review span { color: var(--panel-muted); font-size: 12px; margin-bottom: 4px; }
.invite-flow-actions { align-items: center; display: flex; gap: 9px; justify-content: flex-end; }
.invite-flow-feedback { color: #a43b3b; font-size: 13px; font-weight: 700; margin-right: auto; }
.invite-mobile-summary { display: none; }
.invite-result-summary { align-items: center; background: #edf8f1; border: 1px solid #b9ddc5; display: flex; gap: 14px; margin-bottom: 16px; padding: 18px; }
.invite-result-summary > i { color: #1e7c45; font-size: 30px; }
.invite-result-summary h2 { font-size: 20px; margin: 0 0 3px; }
.invite-result-summary p { color: #476453; margin: 0; }
.invite-reused-summary { border: 1px solid var(--panel-border); margin-bottom: 16px; padding: 14px 16px; }
.invite-reused-summary h3 { font-size: 15px; margin: 0 0 8px; }
.invite-reused-summary ul { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.invite-reused-summary li { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.invite-reused-summary li span { color: var(--panel-muted); }
.invite-result-queue { align-items: center; background: #fff; border: 1px solid var(--panel-border); display: flex; gap: 16px; justify-content: space-between; margin-bottom: 14px; padding: 14px; }
.invite-result-queue div span { color: var(--panel-muted); display: block; font-size: 12px; }
.invite-result-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1050px) { .invite-result-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1350px) { .invite-result-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.invite-result-grid .invite-result-card header { grid-template-columns: auto minmax(0, 1fr); }
.invite-result-grid .invite-result-card header > span { grid-column: 2; justify-self: start; }
.invite-result-grid .invite-result-card header small { color: var(--panel-muted); font-size: 11px; }
.invite-result-compact-meta { border-top: 1px solid var(--panel-border); display: flex; flex-wrap: wrap; font-size: 11px; gap: 4px 9px; margin-top: 10px; padding-top: 8px; }
.invite-result-compact-meta span { min-width: 0; overflow-wrap: anywhere; }
.invite-result-card { border: 1px solid var(--panel-border); min-width: 0; padding: 15px; }
.invite-result-card header { align-items: flex-start; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; }
.invite-result-card h3 { font-size: 17px; margin: 0; }
.managed-invite-filter { align-items: end; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; margin-bottom: 16px; min-width: 0; }
.managed-invite-filter-field { min-width: 0; }
.managed-invite-filter label { display: block; font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.managed-invite-filter :is(select, input, button) { box-sizing: border-box; border-radius: 8px; font-size: 14px; height: 40px; min-height: 40px; }
.managed-invite-filter :is(select, input) { border: 1px solid var(--panel-border); padding: 8px 12px; width: 100%; }
.managed-invite-filter select { padding-right: 36px; }
.managed-invite-filter .btn { align-self: end; padding: 8px 16px; }
.panel-event-switcher { align-items: end; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; min-width: 0; }
.panel-event-switcher label { color: var(--panel-muted); flex: 1 1 100%; font-size: 12px; font-weight: 800; margin: 0; }
.panel-event-switcher select { flex: 0 1 420px; max-width: 100%; min-width: 0; }
.panel-event-switcher .btn { min-height: 42px; }
.panel-event-picker { background: var(--panel-surface); border: 1px solid var(--panel-border); border-radius: 8px; padding: 16px; }
.managed-invite-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-bottom: 14px; }
.managed-invite-grid { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.managed-invite-card { border-radius: 8px; padding: 11px; }
.managed-invite-card header { grid-template-columns: minmax(0, 1fr) auto; }
.managed-invite-card h2 { font-size: 17px; margin: 0; overflow-wrap: anywhere; }
.managed-invite-card header small { color: var(--panel-muted); font-size: 11px; }
.managed-invite-card header .panel-status { align-self: start; white-space: normal; }
.managed-invite-facts { display: grid; gap: 4px 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 9px 0; }
.managed-invite-facts div { border-top: 1px solid var(--panel-border); min-width: 0; padding-top: 7px; }
.managed-invite-facts dt { color: var(--panel-muted); font-size: 11px; }
.managed-invite-facts dd { font-size: 12px; font-weight: 750; margin: 2px 0 0; overflow-wrap: anywhere; }
.managed-invite-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.managed-invite-actions .btn { min-height: 40px; }
.managed-invite-edit { border-top: 1px solid var(--panel-border); margin-top: 8px; padding-top: 8px; }
.managed-invite-edit summary { color: var(--panel-accent); cursor: pointer; font-size: 12px; font-weight: 800; }
.managed-invite-edit form { align-items: end; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.managed-invite-edit label { font-size: 12px; font-weight: 700; }
.managed-invite-edit input { max-width: 110px; }
.managed-invite-edit small { color: var(--panel-muted); flex: 1 1 100%; }
@media (max-width: 900px) { .managed-invite-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 650px) { .managed-invite-filter { align-items: stretch; grid-template-columns: minmax(0, 1fr); } .managed-invite-filter .btn { width: 100%; } .managed-invite-card header { grid-template-columns: minmax(0, 1fr); } }
.invite-result-card header p { color: var(--panel-muted); font-size: 12px; margin: 2px 0 0; }
.invite-result-card header > span { background: #eef3f5; font-size: 11px; font-weight: 700; padding: 4px 6px; }
.invite-result-select input { height: 19px; width: 19px; }
.invite-result-link { align-items: center; background: #f6f8f9; display: flex; gap: 8px; margin: 13px 0; padding: 8px; }
.invite-result-link > span { color: var(--panel-muted); flex: 1 1 auto; font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-result-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }
.invite-whatsapp-state { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 11px; min-width: 0; }
.invite-whatsapp-state .panel-status { align-items: center; display: inline-flex; gap: 5px; max-width: 100%; }
.invite-whatsapp-state small { color: var(--panel-muted); font-size: 11px; }
.invite-copy-feedback { color: var(--panel-muted); font-size: 11px; }
.guest-detail-summary { background: #fff; border-block: 1px solid var(--panel-border); display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 24px; }
.guest-detail-summary > div { min-width: 0; padding: 15px 18px; }
.guest-detail-summary > div + div { border-left: 1px solid var(--panel-border); }
.guest-detail-summary span:not(.panel-status) { color: var(--panel-muted); display: block; font-size: 11px; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; }
.guest-detail-summary strong:not(.panel-status) { display: block; font-size: 14px; overflow-wrap: anywhere; }
.guest-invitations-heading { align-items: end; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 12px; }
.guest-invitations-heading span { color: var(--panel-accent); display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.guest-invitations-heading h3 { font-size: 21px; margin: 2px 0 0; }
.guest-invitations-heading > strong { color: var(--panel-muted); font-size: 13px; }
.guest-invitation-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.guest-invitation-card header > span { grid-column: auto; }
.guest-invitation-type { color: var(--panel-accent); display: block; font-size: 11px; font-weight: 800; margin-bottom: 3px; text-transform: uppercase; }
.guest-invitation-meta { display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0; }
.guest-invitation-meta div { background: #f6f8f9; min-width: 0; padding: 9px 10px; }
.guest-invitation-meta dt { color: var(--panel-muted); font-size: 11px; font-weight: 600; }
.guest-invitation-meta dd { font-size: 13px; font-weight: 800; margin: 2px 0 0; overflow-wrap: anywhere; }




/* Özet kutusunu kart görünümüne al, sayfadan ayrıştır */
.guest-detail-summary {
    background: #fff;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 28px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

    .guest-detail-summary > div {
        min-width: 0;
        padding: 16px 20px;
    }

        .guest-detail-summary > div + div {
            border-left: 1px solid var(--panel-border);
        }

    .guest-detail-summary span:not(.panel-status) {
        color: var(--panel-muted);
        display: block;
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    .guest-detail-summary strong:not(.panel-status) {
        display: block;
        font-size: 14px;
        overflow-wrap: anywhere;
    }

/* Başlık bloğunu biraz nefeslendir */
.guest-invitations-heading {
    align-items: end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--panel-border);
}

/* 3 kolon + daha dar kart */
.guest-invitation-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1200px) {
    .guest-invitation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .guest-invitation-grid {
        grid-template-columns: 1fr;
    }
}

/* Kartı belirgin bir kutu haline getir */
.guest-invitation-card {
    background: #fff;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

    .guest-invitation-card:hover {
        border-color: color-mix(in srgb, var(--panel-accent) 40%, var(--panel-border));
        box-shadow: 0 6px 18px rgba(16, 24, 40, .08);
        transform: translateY(-2px);
    }

    /* Header'ı ayır */
     .guest-invitation-card header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px;
        padding-bottom: 12px;
        border-bottom: 1px dashed var(--panel-border);
    }

        .guest-invitation-card header > .panel-status {
            justify-self: end;
            align-self: start;
            white-space: nowrap;
            margin: 0;
        }

        .guest-invitation-card header h3 {
            font-size: 16px;
            margin: 2px 0 0;
            line-height: 1.3;
            overflow-wrap: anywhere;
        }

/* Meta kutularını yumuşat */
.guest-invitation-meta {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

    .guest-invitation-meta div {
        background: #f6f8f9;
        border-radius: 8px;
        min-width: 0;
        padding: 9px 10px;
    }

    .guest-invitation-meta dt {
        color: var(--panel-muted);
        font-size: 11px;
        font-weight: 600;
    }

    .guest-invitation-meta dd {
        font-size: 13px;
        font-weight: 800;
        margin: 2px 0 0;
        overflow-wrap: anywhere;
    }

/* Link kutusu */
.invite-result-link {
    background: #f6f8f9;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--panel-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Aksiyonlar alt kısımda düzgün hizalansın */
.invite-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--panel-border);
}

    .invite-result-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

.invite-copy-feedback {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--panel-muted);
}





@media (max-width: 767.98px) {
    .panel-toolbar-actions { width: 100%; }
    .panel-toolbar-actions .btn { flex: 1 1 auto; }
    .invite-create-flow { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
    .invite-flow-progress { gap: 3px; }
    .invite-flow-progress li { font-size: 0; justify-content: center; }
    .invite-flow-progress li span { font-size: 12px; }
    .invite-flow-step { padding: 16px; }
    .invite-event-grid, .invite-guest-list, .invite-maximum-list, .invite-result-grid { grid-template-columns: 1fr; }
    .invite-event-option { min-height: 118px; }
    .invite-guest-tools .btn { flex: 1 1 calc(50% - 4px); }
    .invite-review { grid-template-columns: 1fr; }
    .invite-flow-actions { justify-content: stretch; }
    .invite-flow-actions .btn { flex: 1 1 0; }
    .invite-flow-feedback { flex-basis: 100%; order: -1; }
    .invite-mobile-summary:not([hidden]) { align-items: center; background: #fff; border: 1px solid var(--panel-border); bottom: calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 8px 28px rgba(24, 34, 42, .18); display: flex; gap: 10px; justify-content: space-between; left: max(12px, env(safe-area-inset-left)); padding: 10px; position: fixed; right: calc(80px + env(safe-area-inset-right)); z-index: 1040; }
    body:has(.pwa-install-prompt:not([hidden])) .invite-mobile-summary,
    body:has(.pwa-install-success-toast) .invite-mobile-summary { bottom: calc(154px + env(safe-area-inset-bottom)); }
    .invite-result-queue { align-items: stretch; flex-direction: column; }
    .invite-result-card header { grid-template-columns: auto minmax(0, 1fr); }
    .invite-result-card header > span { grid-column: 2; justify-self: start; }
    .invite-result-link { align-items: stretch; flex-direction: column; }
    .invite-result-link > span { white-space: normal; word-break: break-all; }
    .guest-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .guest-detail-summary > div + div { border-left: 0; }
    .guest-detail-summary > div:nth-child(even) { border-left: 1px solid var(--panel-border); }
    .guest-detail-summary > div:nth-child(n+3) { border-top: 1px solid var(--panel-border); }
    .guest-invitation-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .whatsapp-share-grid { grid-template-columns: minmax(0, 1fr); }
    .whatsapp-message-preview { order: 2; }
    .whatsapp-message-preview .message-preview-content { min-height: 180px; }
}

@media (max-width: 520px) {
    .whatsapp-share-form { padding: 18px; }
    .whatsapp-share-textarea { min-height: 260px; }
    .guest-list-shell { padding: 10px; }
    .guest-list-table td.invite-actions-cell { width: 210px; }
    .invite-share-actions { justify-content: flex-start; }
    .invite-share-actions .btn { font-size: 11px; padding-inline: 7px; }
    .guest-bulk-actions { align-items: stretch; flex-direction: column; }
    .guest-bulk-actions .btn { justify-content: center; width: 100%; }
    .guest-select-column { width: 38px; }
    .whatsapp-queue { gap: 18px; padding: 18px; }
    .whatsapp-queue-progress { align-items: flex-start; flex-direction: column; gap: 4px; }
    .whatsapp-queue-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .whatsapp-queue-actions .whatsapp-button { grid-column: 1 / -1; order: -1; }
    .whatsapp-queue-actions [data-queue-finish] { grid-column: 1 / -1; }
    .guest-detail-summary { grid-template-columns: 1fr; }
    .guest-detail-summary > div:nth-child(even) { border-left: 0; }
    .guest-detail-summary > div + div { border-top: 1px solid var(--panel-border); }
    .guest-invitation-card .invite-result-actions .btn { justify-content: center; width: 100%; }
}

.theme-picker {
    margin-bottom: 24px;
    max-width: 1120px;
}

.theme-picker-heading {
    align-items: end;
    display: flex;
    gap: 22px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.theme-picker-heading span {
    color: var(--panel-accent);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.theme-picker-heading h2 {
    font-size: 23px;
    margin: 3px 0 0;
}

.theme-picker-heading p {
    color: var(--panel-muted);
    margin: 0;
    max-width: 480px;
}

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

.theme-option {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    overflow: hidden;
}

.theme-option.selected {
    border-color: rgba(122, 40, 70, 0.55);
    box-shadow: 0 10px 28px rgba(122, 40, 70, 0.09);
}

.theme-option-preview {
    align-content: center;
    display: grid;
    min-height: 190px;
    padding: 18px;
    position: relative;
    text-align: center;
}

.theme-option-preview span,
.theme-option-preview strong {
    display: block;
    position: relative;
    z-index: 1;
}

.theme-option-preview span {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.theme-option-preview strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 400;
    margin-top: 5px;
}

.theme-option-preview.minimal {
    background: #f7f8fa;
    color: #252a31;
}

.theme-option-preview.minimal i {
    background: #7a2846;
    bottom: 46px;
    height: 2px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 54px;
}

.theme-option-preview.wedding-romantic {
    background: #f1e8e6;
    color: #5c2035;
}

.theme-option-preview.wedding-romantic::before,
.theme-option-preview.wedding-romantic::after {
    border: 1px solid #8b9a83;
    border-radius: 90% 10% 90% 10%;
    content: "";
    height: 42px;
    position: absolute;
    width: 22px;
}

.theme-option-preview.wedding-romantic::before { left: 17px; top: 20px; transform: rotate(28deg); }
.theme-option-preview.wedding-romantic::after { bottom: 20px; right: 17px; transform: rotate(208deg); }

.theme-option-preview.wedding-romantic i {
    border: 1px solid #aa884e;
    bottom: 42px;
    height: 8px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
}

.theme-option-content {
    align-content: center;
    display: grid;
    padding: 18px;
}

.theme-option-content h3 {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 5px;
}

.theme-option-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
}

.theme-option-title h3 {
    margin: 0;
}

.theme-option-content p {
    color: var(--panel-muted);
    font-size: 14px;
    margin: 0 0 14px;
}

.theme-option-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.theme-option-actions form {
    margin: 0;
}

.local-theme-preview-canvas { min-height: 320px; }
.local-theme-preview-canvas .theme-template-preview { min-height: 320px; }
.local-theme-preview-canvas .local-theme-mock { align-content: center; padding-bottom: 74px; }
.local-theme-preview-canvas .local-theme-mock > strong { font-size: clamp(28px, 7vw, 46px); overflow-wrap: anywhere; }
.local-theme-preview-canvas .local-theme-mock > small { font-size: 11px; }
.local-theme-preview-details {
    align-items: center;
    bottom: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    justify-content: center;
    left: 28px;
    position: absolute;
    right: 28px;
    z-index: 2;
}
.local-theme-preview-details span { background: transparent; height: auto; margin: 0; opacity: 0.8; width: auto; }
.local-theme-preview-details strong { flex-basis: 100%; font-family: "Segoe UI", Arial, sans-serif; font-size: 10px; letter-spacing: 0; text-transform: uppercase; }
#localThemePreviewModal .modal-content { border: 0; border-radius: 8px; box-shadow: 0 22px 55px rgba(32, 36, 42, 0.2); overflow: hidden; }
#localThemePreviewModal .modal-header { align-items: flex-start; }
#localThemePreviewModal .modal-title { font-size: 21px; font-weight: 800; margin-top: 2px; }
#localThemePreviewModal .modal-body { padding: 0; }
#localThemePreviewModal .modal-body > p { font-weight: 700; margin: 18px 20px 5px; }
#localThemePreviewModal .modal-body > small { color: var(--panel-muted); display: block; line-height: 1.5; margin: 0 20px 20px; }

.customer-login-body {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 24px;
    position: relative;
}

.customer-login-body::before {
    background-image: linear-gradient(rgba(122, 40, 70, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 116, 92, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.customer-login-card {
    max-width: 440px;
    padding: 34px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.customer-login-heading {
    margin-bottom: 12px;
}

.customer-login-heading span {
    color: var(--panel-accent);
    font-weight: 800;
}

.customer-login-brand { align-items: center; display: inline-flex; gap: 7px; }
.customer-login-brand i { font-size: 20px; }

.customer-login-heading h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 6px 0 0;
}

.customer-login-heading p { color: var(--panel-muted); line-height: 1.55; margin: 9px 0 0; }
.customer-login-card .btn { min-height: 44px; }

.auth-alert {
    align-items: flex-start;
    border: 1px solid;
    border-radius: 6px;
    display: flex;
    gap: 9px;
    line-height: 1.5;
    margin-bottom: 18px;
    padding: 12px 14px;
}

.auth-alert:empty,
.auth-alert.validation-summary-valid { display: none; }
.auth-alert ul { margin: 0; padding-left: 18px; }
.auth-alert-info { background: #eef6f3; border-color: #c8dfd6; color: #245b49; }
.auth-alert-success { background: #edf7f1; border-color: #c8e1d2; color: #245b3f; }
.auth-alert-error { background: #fff4f5; border-color: #efcbd2; color: #84243a; }

.form-label {
    color: var(--panel-muted);
    font-weight: 700;
}

.form-control,
.form-select {
    border-color: var(--panel-border);
    border-radius: 8px;
    min-height: 42px;
}

.btn-primary {
    background: var(--panel-accent);
    border-color: var(--panel-accent);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--panel-accent-dark);
    border-color: var(--panel-accent-dark);
}

.forgot-link {
    color: var(--panel-accent);
    display: block;
    font-weight: 700;
    margin-top: 16px;
    text-align: center;
    text-decoration: none;
}

.forgot-link:hover,
.forgot-link:focus { color: var(--panel-accent-dark); }

.forgot-link.disabled { color: #8d95a0; cursor: default; }
.forgot-link small { background: #edf0f3; border-radius: 999px; font-size: 10px; margin-left: 5px; padding: 3px 6px; }

.entitlement-section,
.next-steps {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-left: 4px solid var(--panel-accent);
    padding: 24px;
}

.section-title-row { align-items: end; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 18px; }
.section-title-row h2, .next-steps h2 { font-size: 21px; font-weight: 800; margin: 2px 0 0; }
.section-kicker { color: var(--panel-accent); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.entitlement-total { color: var(--panel-muted); font-size: 14px; }
.entitlement-overview { display: grid; gap: 16px; }
.entitlement-package-pill {
    align-items: center;
    background: #fafbfc;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 13px 16px;
}
.entitlement-package-pill span {
    color: var(--panel-muted);
    font-size: 13px;
    font-weight: 800;
}
.entitlement-package-pill span i { color: var(--panel-accent); margin-right: 6px; }
.entitlement-package-pill strong { color: var(--panel-accent-dark); font-size: 16px; overflow-wrap: anywhere; text-align: right; }
.entitlement-pool-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.entitlement-pool-card {
    background: #fff;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(32, 36, 42, 0.055);
    min-width: 0;
    padding: 18px;
}

.entitlement-pool-stats { clear: both; }


.entitlement-pool-head {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.entitlement-buy-link {
    margin-left: auto; /* satır sonuna iter */
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    background: var(--bs-primary, #0d6efd);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .entitlement-buy-link:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    }

/* Çok dar ekranlarda sadece ikon göster */
@media (max-width: 400px) {
    .entitlement-buy-link span {
        display: none;
    }

    .entitlement-buy-link {
        padding: .5rem;
    }
}



.dashboard-purchase-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 24px; }
.dashboard-purchase-actions .btn { min-height: 44px; }
.sales-category { scroll-margin-top: 18px; }
.entitlement-pool-head {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}
.entitlement-pool-head > span {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 8px;
    color: var(--panel-accent);
    display: inline-flex;
    flex: 0 0 42px;
    font-size: 20px;
    height: 42px;
    justify-content: center;
}
.entitlement-pool-head h3 {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
}
.entitlement-pool-head small {
    color: var(--panel-muted);
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    margin-top: 4px;
}
.entitlement-pool-stats {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.entitlement-pool-stats > div {
    background: #f7f8fa;
    border: 1px solid #edf0f3;
    border-radius: 8px;
    min-width: 0;
    padding: 12px;
}
.entitlement-pool-stats span {
    color: var(--panel-muted);
    display: block;
    font-size: 12px;
    font-weight: 800;
}
.entitlement-pool-stats strong {
    color: var(--panel-text);
    display: block;
    font-size: 25px;
    line-height: 1.1;
    margin-top: 6px;
    overflow-wrap: anywhere;
}
.entitlement-pool-stats .is-remaining {
    background: #f0f8f5;
    border-color: #cfe6dc;
}
.entitlement-pool-stats .is-remaining span { color: var(--panel-green); }
.entitlement-pool-stats .is-remaining strong {
    color: var(--panel-green);
    font-size: 34px;
}
.entitlement-grid { display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.entitlement-item { border-right: 1px solid var(--panel-border); min-width: 0; padding: 5px 20px; }
.entitlement-item:first-child { padding-left: 0; }
.entitlement-item:last-child { border-right: 0; }
.entitlement-item span { color: var(--panel-muted); display: block; font-size: 13px; font-weight: 700; }
.entitlement-item span i { color: var(--panel-green); margin-right: 5px; }
.entitlement-item strong { color: var(--panel-text); display: block; font-size: 24px; margin-top: 5px; overflow-wrap: anywhere; }
.entitlement-progress { background: #eceff1; border-radius: 999px; height: 8px; margin-top: 20px; overflow: hidden; }
.entitlement-progress span { background: var(--panel-green); border-radius: inherit; display: block; height: 100%; }
.dashboard-section { margin-top: 28px; }
.dashboard-stat-grid .panel-metric-card:nth-child(2) span i { color: var(--panel-gold); }
.dashboard-stat-grid .panel-metric-card:nth-child(3) span i { color: var(--panel-green); }
.next-steps { align-items: center; border-left-color: var(--panel-green); display: grid; gap: 24px; grid-template-columns: minmax(180px, 0.8fr) minmax(0, 2fr) auto; margin-top: 28px; }
.next-steps-copy p { color: var(--panel-muted); margin: 6px 0 0; }
.next-steps ol { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.next-steps li { align-items: flex-start; display: flex; gap: 9px; min-width: 0; }
.next-steps li > span { align-items: center; background: #e8f3ef; border-radius: 50%; color: var(--panel-green); display: inline-flex; flex: 0 0 28px; font-size: 12px; font-weight: 800; height: 28px; justify-content: center; }
.next-steps li strong, .next-steps li small { display: block; }
.next-steps li strong { font-size: 13px; }
.next-steps li small { color: var(--panel-muted); font-size: 11px; line-height: 1.35; margin-top: 2px; }
.next-steps.onboarding-checklist { align-items: start; grid-template-columns: minmax(180px, .75fr) minmax(0, 2fr); }
.onboarding-checklist .next-steps-copy { grid-row: 1 / 3; }
.onboarding-help-link { background: transparent; border: 0; color: var(--panel-accent); font-size: 12px; font-weight: 800; margin-top: 10px; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.onboarding-help-link:hover, .onboarding-help-link:focus-visible { color: var(--panel-accent-dark); }
.onboarding-progress { align-items: center; display: flex; gap: 12px; }
.onboarding-progress > strong { color: var(--panel-muted); flex: 0 0 auto; font-size: 12px; }
.onboarding-progress > span { background: #e8ecef; border-radius: 999px; display: block; height: 7px; overflow: hidden; width: 100%; }
.onboarding-progress > span i { background: var(--panel-green); border-radius: inherit; display: block; height: 100%; }
.onboarding-checklist li > span { background: #edf0f3; color: var(--panel-muted); }
.onboarding-checklist li.completed > span { background: #e8f3ef; color: var(--panel-green); }
.onboarding-checklist li.current > span { background: var(--panel-accent); color: #fff; }
.onboarding-checklist li.completed strong { color: var(--panel-green); }
.onboarding-next-action { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; grid-column: 2; }
.onboarding-complete { align-items: center; display: flex; gap: 10px; margin-right: auto; }
.onboarding-complete > i { color: var(--panel-green); font-size: 24px; }
.onboarding-complete span, .onboarding-complete small { display: block; }
.onboarding-complete small { color: var(--panel-muted); font-size: 12px; margin-top: 2px; }
.onboarding-modal .modal-dialog { max-width: 520px; }
.onboarding-modal .modal-content { border: 0; border-radius: 8px; box-shadow: 0 24px 70px rgba(25, 35, 45, .2); max-height: calc(100dvh - 24px); overflow-y: auto; }
.onboarding-modal .modal-body { padding: 30px; }
.onboarding-modal-icon { align-items: center; background: var(--panel-accent-soft); border-radius: 8px; color: var(--panel-accent); display: inline-flex; font-size: 24px; height: 48px; justify-content: center; width: 48px; }
.onboarding-modal h2 { font-size: 25px; font-weight: 850; margin: 16px 0 6px; }
.onboarding-modal .modal-body > p { color: var(--panel-muted); line-height: 1.55; margin: 0; }
.onboarding-modal ol { display: grid; gap: 12px; list-style: none; margin: 22px 0; padding: 0; }
.onboarding-modal li { align-items: flex-start; display: flex; gap: 11px; }
.onboarding-modal li > span { align-items: center; background: var(--panel-accent-soft); border-radius: 50%; color: var(--panel-accent); display: inline-flex; flex: 0 0 30px; font-size: 12px; font-weight: 850; height: 30px; justify-content: center; }
.onboarding-modal li strong, .onboarding-modal li small { display: block; }
.onboarding-modal li strong { font-size: 14px; }
.onboarding-modal li small { color: var(--panel-muted); font-size: 12px; line-height: 1.4; margin-top: 2px; }
.onboarding-modal-actions { display: grid; gap: 9px; }
.onboarding-modal-actions form, .onboarding-modal-actions .btn { margin: 0; width: 100%; }

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

.account-settings-card {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(32, 36, 42, 0.07);
    min-width: 0;
    padding: 24px;
}

.account-settings-heading {
    align-items: flex-start;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
}

.account-settings-heading > span {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 8px;
    color: var(--panel-accent);
    display: inline-flex;
    flex: 0 0 42px;
    font-size: 19px;
    height: 42px;
    justify-content: center;
}

.account-settings-heading h2 {
    font-size: 20px;
    font-weight: 800;
    margin: 2px 0 0;
}

.account-settings-heading p {
    color: var(--panel-muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 6px 0 0;
}

.account-settings-form {
    display: grid;
    gap: 17px;
}

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

.account-settings-form .form-label {
    margin-bottom: 6px;
}

.account-settings-form .text-danger {
    display: block;
    font-size: 13px;
    margin-top: 5px;
}

.account-settings-form .validation-summary:empty,
.account-settings-form .field-validation-valid {
    display: none;
}

.account-readonly-field:disabled {
    background: #f4f6f8;
    color: #69717d;
    opacity: 1;
}

.account-settings-form .form-text {
    color: var(--panel-muted);
    display: block;
    font-size: 12px;
    line-height: 1.5;
    margin-top: 6px;
}

.account-form-actions {
    align-items: center;
    border-top: 1px solid var(--panel-border);
    display: flex;
    justify-content: flex-end;
    margin-top: 3px;
    padding-top: 18px;
}

.account-form-actions .btn {
    min-height: 42px;
}

@media (max-width: 860px) {
    .panel-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .panel-sidebar {
        border-bottom: 1px solid var(--panel-border);
        border-right: 0;
    }

    .panel-nav {
        display: flex;
        overflow-x: auto;
    }

    .panel-nav-link { flex: 0 0 auto; }
    .panel-nav-link.active::before { bottom: -1px; height: 3px; left: 12px; width: calc(100% - 24px); }

    .panel-main {
        padding: 20px;
    }

    .panel-topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .panel-user-block {
        align-items: stretch;
        justify-items: stretch;
    }

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

    .entitlement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .entitlement-pool-grid { grid-template-columns: 1fr; }
    .entitlement-item { border-bottom: 1px solid var(--panel-border); margin-bottom: 12px; padding: 5px 12px 15px; }
    .entitlement-item:nth-child(2) { border-right: 0; }
    .entitlement-item:nth-child(n+3) { border-bottom: 0; margin-bottom: 0; padding-bottom: 5px; }
    .next-steps { align-items: start; grid-template-columns: 1fr; }
    .next-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .next-steps.onboarding-checklist { grid-template-columns: minmax(0, 1fr); }
    .onboarding-checklist .next-steps-copy { grid-row: auto; }
    .onboarding-next-action { grid-column: auto; }

    .panel-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .quick-start-cta {
        align-items: stretch;
        flex-direction: column;
    }

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

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

    .panel-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }

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

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

    .message-editor-grid {
        grid-template-columns: 1fr;
    }

    .message-live-preview {
        position: static;
    }

    .theme-picker-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .theme-option-grid {
        grid-template-columns: 1fr;
    }

    .dynamic-fields-grid,
    .dynamic-theme-grid {
        grid-template-columns: 1fr;
    }

    .account-settings-grid {
        grid-template-columns: 1fr;
    }
}

/* General invitation module */
.invitation-tabs { border-bottom: 1px solid var(--panel-border); display: flex; gap: 4px; margin-bottom: 22px; overflow-x: auto; }
.invitation-tabs a { border-bottom: 3px solid transparent; color: var(--panel-muted); flex: 0 0 auto; font-weight: 800; padding: 11px 14px; text-decoration: none; }
.invitation-tabs a.active { border-color: var(--panel-accent); color: var(--panel-accent); }
.general-invite-lock { align-items: center; background: var(--panel-surface); border: 1px solid var(--panel-border); border-left: 4px solid var(--panel-accent); display: grid; gap: 18px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 22px; }
.general-invite-lock > i { color: var(--panel-accent); font-size: 26px; }
.general-invite-lock h3, .general-invite-lock p { margin: 0; }
.general-invite-lock p { color: var(--panel-muted); margin-top: 5px; }
.general-invite-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.general-invite-form .form-field-wide { min-width: 0; }
.general-invite-form .general-event-select { box-sizing: border-box; font-size: 14px; min-height: 46px; min-width: 0; width: 100%; }
.general-attendance-note { color: var(--panel-muted); font-size: 12px; margin: 0 0 14px; }
.panel-nav-group { min-width: 0; }
.panel-nav-group > summary { align-items: center; border-radius: 8px; color: rgba(255,255,255,.82); cursor: pointer; display: flex; font-size: 13px; font-weight: 750; gap: 10px; list-style: none; min-height: 42px; padding: 9px 12px; }
.panel-nav-group > summary::-webkit-details-marker { display: none; }
.panel-nav-group > summary:hover, .panel-nav-group[open] > summary { background: rgba(255,255,255,.11); color: #fff; }
.panel-nav-group > summary > i:first-child { font-size: 17px; width: 20px; }
.panel-nav-group-chevron { font-size: 11px; margin-left: auto; transition: transform .18s ease; }
.panel-nav-group[open] .panel-nav-group-chevron { transform: rotate(180deg); }
.panel-nav-group-links { display: grid; gap: 2px; padding: 2px 0 4px 14px; }
.panel-nav-group-links .panel-nav-link { font-size: 12px; min-height: 38px; padding: 7px 10px; }
.panel-shell.sidebar-collapsed .panel-nav-group > summary { justify-content: center; padding-inline: 0; }
.panel-shell.sidebar-collapsed .panel-nav-group > summary span, .panel-shell.sidebar-collapsed .panel-nav-group-chevron { display: none; }
.panel-shell.sidebar-collapsed .panel-nav-group-links { padding-left: 0; }
@media (max-width: 860px) {
    .panel-shell.sidebar-collapsed .panel-nav-group > summary { justify-content: flex-start; padding-inline: 12px; }
    .panel-shell.sidebar-collapsed .panel-nav-group > summary span, .panel-shell.sidebar-collapsed .panel-nav-group-chevron { display: inline; }
    .panel-shell.sidebar-collapsed .panel-nav-group-links { padding-left: 14px; }
}
.general-invite-card { background: var(--panel-surface); border: 1px solid var(--panel-border); border-radius: 8px; box-shadow: 0 10px 28px rgba(32,36,42,.06); min-width: 0; padding: 18px; }
.general-invite-card header { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.general-invite-card header > div { min-width: 0; }
.general-invite-card header > div > span { color: var(--panel-accent); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.general-invite-card h3 { font-size: 18px; margin: 4px 0; overflow-wrap: anywhere; }
.general-invite-card header p, .general-invite-count { color: var(--panel-muted); margin: 0; }
.general-invite-count { border-bottom: 1px solid var(--panel-border); border-top: 1px solid var(--panel-border); margin: 14px 0; padding: 11px 0; }
.general-invite-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.general-invite-actions form { margin: 0; }
.general-field-editor { border-top: 1px solid var(--panel-border); margin-top: 22px; padding-top: 20px; }
.general-field-editor > header { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; }
.general-field-editor h3, .general-field-editor p { margin: 0; }
.general-field-editor header p { color: var(--panel-muted); margin-top: 4px; }
.general-field-row { align-items: end; border: 1px solid var(--panel-border); border-radius: 8px; display: grid; gap: 10px; grid-template-columns: minmax(180px, 2fr) minmax(130px, 1fr) auto 40px; margin-top: 12px; padding: 12px; }
.general-field-row label:not(.general-field-required), .general-field-preview label { display: grid; gap: 5px; }
.general-field-row label > span, .general-field-preview label > span { color: var(--panel-muted); font-size: 12px; font-weight: 800; }
.general-field-row input:not([type="checkbox"]), .general-field-row select, .general-field-preview input { border: 1px solid var(--panel-border); border-radius: 6px; min-height: 40px; padding: 8px 10px; width: 100%; }
.general-field-required { align-items: center; display: flex; gap: 7px; min-height: 40px; white-space: nowrap; }
.general-field-remove { align-items: center; display: inline-flex; height: 40px; justify-content: center; padding: 0; width: 40px; }
.general-field-limit { color: var(--panel-muted); font-size: 12px; padding-top: 8px; }
.general-field-preview { background: #f8f9fa; border: 1px solid var(--panel-border); border-radius: 8px; margin-top: 14px; padding: 14px; }
.general-field-preview > div { display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.general-field-preview p { color: var(--panel-muted); }
.general-attendance-list { display: grid; gap: 12px; }
.general-attendance-card { background: var(--panel-surface); border: 1px solid var(--panel-border); border-radius: 8px; padding: 16px; }
.general-attendance-card header { align-items: center; display: flex; justify-content: space-between; }
.general-attendance-card time { color: var(--panel-muted); font-size: 12px; font-weight: 700; }
.general-attendance-card dl { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0 0; }
.general-attendance-card dl div { min-width: 0; }
.general-attendance-card dt { color: var(--panel-muted); font-size: 11px; margin-bottom: 2px; }
.general-attendance-card dd { font-weight: 700; margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .general-invite-grid { grid-template-columns: 1fr; }
    .general-invite-lock { align-items: start; grid-template-columns: auto minmax(0, 1fr); }
    .general-invite-lock .btn { grid-column: 1 / -1; width: 100%; }
    .general-field-editor > header { align-items: stretch; flex-direction: column; }
    .general-field-row { align-items: stretch; grid-template-columns: 1fr; }
    .general-field-remove { justify-self: end; }
    .general-field-preview > div, .general-attendance-card dl { grid-template-columns: 1fr; }
    .general-invite-actions .btn, .general-invite-actions form, .general-invite-actions form .btn { width: 100%; }
}

@media (max-width: 520px) {
    .panel-main { padding: 16px; }
    .panel-sidebar { padding: 16px; }
    .section-title-row { align-items: flex-start; flex-direction: column; }
    .entitlement-grid, .next-steps ol { grid-template-columns: 1fr; }
    .next-steps { padding: 18px; }
    .onboarding-next-action, .onboarding-next-action .btn { align-items: stretch; width: 100%; }
    .onboarding-complete { align-items: flex-start; margin-bottom: 3px; width: 100%; }
    .onboarding-modal .modal-dialog { margin: 12px; }
    .onboarding-modal .modal-body { padding: 22px 18px; }
    .onboarding-modal h2 { font-size: 22px; }
    .entitlement-package-pill { align-items: flex-start; flex-direction: column; }
    .entitlement-package-pill strong { text-align: left; }
    .entitlement-pool-card { padding: 15px; }
    .entitlement-pool-stats { grid-template-columns: 1fr; }
    .entitlement-pool-stats .is-remaining strong { font-size: 31px; }
    .entitlement-item { border-bottom: 1px solid var(--panel-border) !important; border-right: 0; margin: 0; padding: 12px 0 !important; }
    .entitlement-item:last-child { border-bottom: 0 !important; }
    .panel-table-shell { padding: 12px; }
    .panel-table-shell .dt-layout-row { align-items: stretch; flex-direction: column; }
    .panel-table-shell .dt-layout-cell { width: 100%; }
    .panel-table-shell .dt-search input { margin-left: 0; width: 100%; }
    .theme-option {
        grid-template-columns: 1fr;
    }

    .theme-option-preview {
        min-height: 150px;
    }

    .account-settings-card {
        padding: 18px;
    }

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

    .account-form-actions,
    .account-form-actions .btn {
        width: 100%;
    }
}

/* Package overview and upgrade preparation */
.package-overview,
.packages-section,
.package-history-section,
.package-review {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 24px;
}

.packages-section,
.package-history-section { margin-top: 24px; }
.package-overview { border-left: 4px solid var(--panel-green); }
.package-overview-description { color: var(--panel-muted); margin: -4px 0 22px; max-width: 760px; }
.package-current-badge { align-items: center; background: #e8f3ef; border-radius: 999px; color: var(--panel-green); display: inline-flex; font-size: 11px; font-weight: 800; gap: 6px; padding: 6px 10px; white-space: nowrap; }
.package-entitlement-grid { margin-top: 16px; }
.package-usage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.package-usage-grid > div { border-right: 1px solid var(--panel-border); min-width: 0; padding: 4px 18px; }
.package-usage-grid > div:first-child { padding-left: 0; }
.package-usage-grid > div:nth-child(3n) { border-right: 0; }
.package-usage-grid span { color: var(--panel-muted); display: block; font-size: 12px; font-weight: 700; }
.package-usage-grid strong { display: block; font-size: 23px; line-height: 1.25; margin-top: 6px; overflow-wrap: anywhere; }
.package-usage-grid > div:last-child strong { font-size: 16px; }
.package-progress-copy { align-items: center; color: var(--panel-muted); display: flex; font-size: 12px; justify-content: space-between; margin-top: 22px; }
.package-progress-copy strong { color: var(--panel-text); }
.package-overview .entitlement-progress { margin-top: 8px; }
.package-period { display: flex; gap: 30px; margin: 20px 0 0; }
.package-period div { display: flex; gap: 7px; }
.package-period dt { color: var(--panel-muted); font-size: 12px; }
.package-period dd { font-size: 12px; font-weight: 800; margin: 0; }

.package-card-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.package-option-card { border: 1px solid var(--panel-border); border-radius: 8px; display: flex; flex-direction: column; min-width: 0; padding: 20px; }
.package-option-card.is-current { border-color: #9bc5b6; box-shadow: inset 0 3px 0 var(--panel-green); }
.package-option-head { align-items: center; display: flex; justify-content: space-between; min-height: 40px; }
.package-option-icon { align-items: center; background: var(--panel-accent-soft); border-radius: 8px; color: var(--panel-accent); display: inline-flex; height: 38px; justify-content: center; width: 38px; }
.package-option-card h3 { font-size: 19px; font-weight: 800; margin: 18px 0 7px; }
.sales-catalog .package-option-card h4 { font-size: 18px; font-weight: 800; margin: 16px 0 7px; overflow-wrap: anywhere; }
.package-option-price { color: var(--panel-accent); font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.package-option-card > p { color: var(--panel-muted); font-size: 13px; line-height: 1.65; margin: 0; min-height: 43px; }
.package-option-card ul { border-top: 1px solid var(--panel-border); display: grid; gap: 9px; list-style: none; margin: 18px 0; padding: 17px 0 0; }
.package-option-card li { align-items: flex-start; display: flex; font-size: 13px; gap: 8px; }
.package-option-card li i { color: var(--panel-green); }
.package-option-note { color: var(--panel-muted); display: block; font-size: 11px; line-height: 1.45; margin: -7px 0 16px; }
.package-option-card .btn { margin-top: auto; }

.extra-entitlements-section {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    margin-top: 24px;
    padding: 24px;
}

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

.extra-entitlement-option {
    align-items: flex-start;
    background: #fafbfc;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--panel-text);
    display: grid;
    gap: 8px;
    min-height: 122px;
    padding: 16px;
    text-align: left;
}

.extra-entitlement-option i {
    align-items: center;
    background: var(--panel-accent-soft);
    border-radius: 8px;
    color: var(--panel-accent);
    display: inline-flex;
    font-size: 19px;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.extra-entitlement-option span {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.extra-entitlement-option small {
    color: var(--panel-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.extra-entitlement-option:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.package-contact-section {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-left: 4px solid #1f8f5f;
    border-radius: 8px;
    display: grid;
    gap: 18px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin-top: 24px;
    padding: 22px 24px;
}

.package-contact-icon {
    align-items: center;
    background: #e8f6ef;
    border-radius: 8px;
    color: #197a54;
    display: inline-flex;
    font-size: 22px;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.package-contact-section h2 { font-size: 19px; font-weight: 800; margin: 2px 0 5px; }
.package-contact-section p { color: var(--panel-muted); font-size: 13px; margin: 0; }
.package-contact-section .btn { align-items: center; display: inline-flex; gap: 7px; white-space: nowrap; }

.sales-catalog { background: transparent; border: 0; padding: 0; }
.sales-catalog-toggle {
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid #c4df81;
    border-radius: 8px;
    color: var(--panel-text);
    display: flex;
    justify-content: space-between;
    padding: 18px 20px;
    text-align: left;
    width: 100%;
}
.sales-catalog-toggle strong, .sales-catalog-toggle small { display: block; }
.sales-catalog-toggle strong { font-size: 17px; }
.sales-catalog-toggle small { color: var(--panel-muted); font-size: 12px; margin-top: 3px; }
.sales-catalog-toggle > i { color: var(--panel-accent); transition: transform .18s ease; }
.sales-catalog-toggle:hover, .sales-catalog-toggle[aria-expanded="true"] { background: #fbf5f7; border-color: #d8bdc8; }
.sales-catalog-toggle[aria-expanded="true"] > i { transform: rotate(180deg); }
.sales-catalog-toggle:focus-visible, .sales-payment-method:focus-visible { outline: 2px solid var(--panel-accent); outline-offset: 2px; }
.sales-category { margin-top: 12px; }
.sales-category h3 { font-size: 17px; font-weight: 800; margin: 0 0 12px; }
.sales-category-empty { color: var(--panel-muted); font-size: 13px; margin: 0; }
.sales-catalog .package-option-card, .sales-extra-card { background: var(--panel-surface); }
.sales-catalog .package-option-card > p { min-height: 0; }
.sales-extra-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sales-extra-card { border: 1px solid var(--panel-border); border-radius: 8px; display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 18px; }
.sales-extra-card > i { color: var(--panel-accent); font-size: 22px; }
.sales-extra-card h4 { font-size: 16px; font-weight: 800; margin: 4px 0 0; overflow-wrap: anywhere; }
.sales-extra-card p { color: var(--panel-text); font-size: 13px; margin: 0; }
.sales-extra-card small { color: var(--panel-muted); display: block; font-size: 12px; line-height: 1.45; }
.sales-extra-card > strong { color: var(--panel-accent); font-size: 17px; margin-top: auto; padding-top: 8px; }
.sales-extra-card .btn { margin-top: 6px; min-height: 40px; }
.sales-purchase-modal .modal-title { font-size: 19px; font-weight: 800; overflow-wrap: anywhere; }
.sales-purchase-modal .modal-body h3 { font-size: 14px; font-weight: 800; margin: 20px 0 10px; }

.sales-purchase-modal .modal-header {
    align-items: center;
    background: #ecf0f3;
    border-bottom: 1px solid var(--panel-border);
}

.sales-purchase-modal .modal-footer {
    background: #ecf0f3;
    border-top: 1px solid var(--panel-border);
}

.sales-purchase-summary { background: #fbf3f6; border: 1px solid #eedde4; border-radius: 6px; display: flex; gap: 12px; justify-content: space-between; padding: 14px; }
.sales-purchase-summary span { font-size: 13px; }
    .sales-purchase-summary strong {
        color: var(--panel-accent);
        font-size: 17px; /* 15px -> 17px */
        font-weight: 800; /* eklendi */
        white-space: nowrap;
    }
.sales-payment-methods { display: grid; gap: 8px; }
.sales-payment-form { margin: 0; }
.sales-payment-method { align-items: center; background: #fff; border: 1px solid var(--panel-border); border-radius: 6px; color: var(--panel-text); display: flex; gap: 12px; min-height: 62px; padding: 10px 13px; text-align: left; width: 100%; }
.sales-payment-method > i { color: var(--panel-accent); font-size: 20px; width: 24px; }
.sales-payment-method strong, .sales-payment-method small { display: block; }
.sales-payment-method strong { font-size: 13px; }
.sales-payment-method small { color: var(--panel-muted); font-size: 11px; margin-top: 2px; }
.sales-payment-method .sales-payment-price b { color: var(--panel-text); font-weight: 800; }
.sales-payment-method.is-selected { background: var(--panel-accent-soft); border-color: var(--panel-accent); }
.sales-payment-method[data-payment-method="bank"] > i { color: #197a54; }
.sales-payment-method[data-payment-method="bank"].is-selected { background: #eaf6ef; border-color: #9bcdb1; }
.sales-payment-method[data-payment-method="whatsapp"] > i { color: #128c56; }
.sales-payment-method[data-payment-method="whatsapp"].is-selected { background: #e8f7ef; border-color: #8fcdaa; }
.sales-payment-method.is-online { background: #ffffff; }
.sales-payment-method.is-online > i { color: #547391; }
.sales-payment-method:disabled { cursor: not-allowed; opacity: .55; }
.sales-payment-details {
    background: #edf0f3;
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--panel-accent);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
    margin-top: 12px;
    padding: 15px;
    animation: salesDetailIn .18s ease;
}

@keyframes salesDetailIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.sales-payment-details dd.sales-iban {
    background: #99940026;
    border-radius: 4px;
    display: inline-block;
    font-family: "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 8px;
}

.sales-payment-details[hidden], .sales-payment-details [hidden] { display: none; }
.sales-payment-details dl { margin: 0; }
.sales-payment-details dl div { display: grid; gap: 4px; margin-bottom: 10px; }
.sales-payment-details dt { color: var(--panel-muted); font-size: 11px; }
.sales-payment-details dd { font-size: 13px; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.sales-payment-details dd.sales-bank-payable { color: #197a54; font-size: 15px; }
.sales-payment-details p { color: var(--panel-muted); font-size: 12px; margin: 8px 0 0; }

.package-history-list { border-top: 1px solid var(--panel-border); }
.package-history-row { align-items: center; border-bottom: 1px solid var(--panel-border); display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) auto auto; padding: 15px 4px; }
.package-history-row:last-child { border-bottom: 0; }
.package-history-row > div { display: flex; flex-direction: column; min-width: 0; }
.package-history-row strong { font-size: 14px; }
.package-history-row span { color: var(--panel-muted); font-size: 12px; }
.package-status { background: #eef0f3; border-radius: 999px; min-width: 54px; padding: 5px 8px; text-align: center; }
.package-status.is-active { background: #e8f3ef; color: var(--panel-green); font-weight: 800; }
.package-history-empty { color: var(--panel-muted); margin: 0; }

.purchase-history-list { border-top: 1px solid var(--panel-border); }
.purchase-history-row {
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(180px, 1.2fr) minmax(300px, 2fr) auto;
    padding: 15px 4px;
}
.purchase-history-row:last-child { border-bottom: 0; }
.purchase-history-product { display: flex; flex-direction: column; min-width: 0; }
.purchase-history-product strong { font-size: 14px; overflow-wrap: anywhere; }
.purchase-history-product span { color: var(--panel-muted); font-size: 12px; }
.purchase-history-details { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.purchase-history-details div { min-width: 0; }
.purchase-history-details dt { color: var(--panel-muted); font-size: 11px; font-weight: 700; }
.purchase-history-details dd { font-size: 13px; font-weight: 800; margin: 2px 0 0; overflow-wrap: anywhere; }

.panel-back-link { align-items: center; color: var(--panel-accent); display: inline-flex; font-size: 13px; font-weight: 800; gap: 7px; margin-bottom: 16px; text-decoration: none; }
.package-review-heading { max-width: 720px; }
.package-review-heading h2 { font-size: 26px; font-weight: 800; margin: 3px 0 9px; }
.package-review-heading p { color: var(--panel-muted); margin: 0; }
.package-comparison-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 25px; }
.package-comparison-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.package-comparison-card { border: 1px solid var(--panel-border); border-radius: 8px; min-width: 0; padding: 21px; }
.package-comparison-card.target { border-color: #c9a8b6; box-shadow: inset 0 3px 0 var(--panel-accent); }
.package-comparison-card > span { color: var(--panel-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.package-comparison-card h3 { font-size: 20px; font-weight: 800; margin: 8px 0 18px; }
.package-comparison-card > p { color: var(--panel-muted); margin: 0; }
.package-comparison-card dl { margin: 0; }
.package-comparison-card dl div { align-items: flex-start; border-top: 1px solid var(--panel-border); display: flex; gap: 16px; justify-content: space-between; padding: 12px 0; }
.package-comparison-card dt { color: var(--panel-muted); font-size: 12px; font-weight: 700; }
.package-comparison-card dd { font-size: 13px; font-weight: 800; margin: 0; text-align: right; }
.payment-preparation-note {
    align-items: flex-start;
    background: #dbedda;
    border-left: 3px solid var(--panel-accent);
    display: flex;
    gap: 13px;
    margin-top: 20px;
    padding: 16px 18px;
}
.payment-preparation-note > i { color: var(--panel-accent); font-size: 20px; }
.payment-preparation-note strong { font-size: 14px; }
.payment-preparation-note p { color: var(--panel-muted); font-size: 12px; margin: 3px 0 0; }
.package-review-actions { border-top: 1px solid var(--panel-border); display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; padding-top: 20px; }
.paytr-payment { max-width: 900px; }
.paytr-payment-heading { align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.paytr-payment-heading h2 { font-size: 23px; margin: 0; }
.paytr-payment > p { color: var(--panel-muted); font-size: 13px; margin: 12px 0 18px; }
.paytr-payment iframe { border: 0; min-height: 560px; width: 100%; }

@media (max-width: 1050px) {
    .package-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .extra-entitlement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sales-extra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .package-usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .package-usage-grid > div { border-bottom: 1px solid var(--panel-border); padding: 14px; }
    .package-usage-grid > div:nth-child(even) { border-right: 0; }
    .package-usage-grid > div:nth-child(odd) { border-right: 1px solid var(--panel-border); }
    .package-usage-grid > div:nth-child(n+3) { border-bottom: 0; }
    .package-usage-grid > div:first-child { padding-left: 14px; }
}

@media (max-width: 620px) {
    .package-overview,
    .packages-section,
    .extra-entitlements-section,
    .package-history-section,
    .package-review { padding: 18px; }
    .package-card-grid,
    .extra-entitlement-grid,
    .sales-extra-grid,
    .package-comparison-grid,
    .package-usage-grid { grid-template-columns: 1fr; }
    .package-usage-grid > div { border-bottom: 1px solid var(--panel-border) !important; border-right: 0 !important; padding: 13px 0 !important; }
    .package-usage-grid > div:last-child { border-bottom: 0 !important; }
    .package-period { flex-direction: column; gap: 7px; }
    .package-history-row { align-items: flex-start; grid-template-columns: 1fr auto; }
    .package-history-row > div { grid-column: 1 / -1; }
    .purchase-history-row { align-items: flex-start; grid-template-columns: minmax(0, 1fr); }
    .purchase-history-details { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .purchase-history-row .package-status { justify-self: start; }
    .package-review-actions { align-items: stretch; flex-direction: column-reverse; }
    .package-review-actions .btn { width: 100%; }
    .package-contact-section { align-items: flex-start; grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
    .package-contact-section .btn { grid-column: 1 / -1; justify-content: center; white-space: normal; width: 100%; }
    .sales-catalog { padding: 0; }
    .sales-purchase-summary { flex-direction: column; gap: 3px; }
}

/* Collapsible customer navigation */
.panel-shell,
.panel-sidebar,
.panel-main { transition: grid-template-columns 180ms ease, padding 180ms ease; }

.panel-sidebar-head {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 28px;
}

.panel-sidebar-head .panel-brand { margin-bottom: 0; min-width: 0; }

.panel-sidebar-toggle {
    align-items: center;
    background: #fff;
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    color: var(--panel-muted);
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.panel-sidebar-toggle:hover { background: var(--panel-accent-soft); border-color: #d8b8c4; color: var(--panel-accent); }
.panel-sidebar-toggle:focus-visible { outline: 3px solid rgba(122, 40, 70, 0.2); outline-offset: 2px; }

.panel-shell.sidebar-collapsed { grid-template-columns: 82px minmax(0, 1fr); }
.panel-shell.sidebar-collapsed .panel-sidebar { padding-inline: 13px; }
.panel-shell.sidebar-collapsed .panel-sidebar-head { flex-direction: column; }
.panel-shell.sidebar-collapsed .panel-brand { padding: 0; }
.panel-shell.sidebar-collapsed .panel-brand > span:last-child,
.panel-shell.sidebar-collapsed .panel-nav-link > span { display: none; }
.panel-shell.sidebar-collapsed .panel-nav-link { justify-content: center; padding-inline: 0; }
.panel-shell.sidebar-collapsed .panel-nav-link i { text-align: center; width: 22px; }
.panel-shell.sidebar-collapsed .panel-nav-link.active::before { left: -13px; }

/* Event editor and live invitation preview */
.event-v1-steps {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
    overflow: hidden;
}
.event-v1-steps button { align-items: center; background: transparent; border: 0; border-right: 1px solid var(--panel-border); color: var(--panel-muted); display: flex; gap: 9px; min-height: 58px; padding: 10px 14px; text-align: left; }
.event-v1-steps button:last-child { border-right: 0; }
.event-v1-steps button span { align-items: center; background: #eef2f4; border-radius: 50%; display: inline-flex; flex: 0 0 28px; font-size: 12px; font-weight: 800; height: 28px; justify-content: center; }
.event-v1-steps button strong { font-size: 12px; line-height: 1.3; }
.event-v1-steps button.active { background: var(--panel-accent-soft); color: var(--panel-accent-dark); }
.event-v1-steps button.active span { background: var(--panel-accent); color: #fff; }
.event-v1-navigation { align-items: center; display: flex; gap: 12px; justify-content: center; margin: 18px 0; }
.event-v1-navigation > span { color: var(--panel-muted); font-size: 12px; font-weight: 800; min-width: 42px; text-align: center; }
.event-v1-navigation .btn { align-items: center; display: inline-flex; gap: 7px; min-height: 44px; }
[data-event-v1-step][hidden] { display: none !important; }
.event-publish-actions { gap: 10px; justify-content: flex-end; }
.event-publish-primary { min-height: 46px; }
.event-list-publish { align-items: center; display: inline-flex; gap: 6px; white-space: nowrap; }

.panel-form.event-editor-form {
    background: transparent;
    border: 0;
    box-shadow: none;
    max-width: 1480px;
    padding: 0;
}

.event-editor-layout {
    align-items: start;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 3fr) minmax(330px, 2fr);
}
.event-editor-layout.preview-step-active { grid-template-columns: minmax(0, 3fr) minmax(330px, 2fr); }

.event-editor-fields { display: grid; gap: 18px; min-width: 0; }

.event-form-card,
.event-editor-form .dynamic-form-section {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(32, 36, 42, 0.055);
    margin: 0;
    min-width: 0;
    padding: 22px;
}

.event-editor-form .dynamic-form-section { border-top: 1px solid var(--panel-border); }
.event-form-card.preview-section-active { border-color: #9eb8c3; box-shadow: inset 3px 0 0 var(--panel-accent), 0 10px 28px rgba(32, 36, 42, 0.055); }
.event-editor-form .panel-section-heading { border-bottom: 1px solid #edf0f3; padding-bottom: 16px; }
.event-editor-form .panel-section-heading > span { border-radius: 7px; }
.event-editor-form .section-fields,
.event-editor-form .dynamic-fields-grid,
.event-editor-form .dynamic-theme-grid { margin-top: 18px; }
.event-editor-form .panel-form-actions { background: var(--panel-surface); border: 1px solid var(--panel-border); border-radius: 8px; padding: 14px; }

.event-media-fields { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.event-media-selection { display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; }
.event-media-selection[hidden] { display: none; }
.event-media-selection img { aspect-ratio: 4 / 3; background: #f3f5f6; border: 1px solid var(--panel-border); border-radius: 6px; object-fit: contain; width: 100%; }
.event-gallery-selected-item { margin: 0; min-width: 0; }
.event-gallery-selected-item img { display: block; }
.event-gallery-selected-item figcaption { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-gallery-remove-selected { background: none; border: 0; color: #a12832; cursor: pointer; font-size: 12px; padding: 5px 0; }
.event-media-selection.logo-selection { grid-template-columns: minmax(0, 112px); }
.event-gallery-limit-info { background: #fff8e6; border: 1px solid #ead39a; border-radius: 6px; color: #735515; font-size: 12px; line-height: 1.5; margin: 9px 0 0; padding: 8px 10px; }
.event-gallery-limit-info[hidden] { display: none; }
.event-gallery-replace-info { background: #eef6f8; border: 1px solid #c6dce3; border-radius: 6px; color: #28596b; display: grid; font-size: 12px; gap: 2px; line-height: 1.5; margin: 9px 0 0; padding: 9px 11px; }
.event-gallery-replace-info[hidden] { display: none; }
.event-gallery-replace-info span { color: #57727d; }
.event-image-processing-status { align-items: center; color: var(--panel-accent); display: flex; font-size: 12px; font-weight: 750; gap: 7px; margin: 9px 0 0; }
.event-image-processing-status::before { animation: event-image-processing-spin .8s linear infinite; border: 2px solid #c9dce4; border-radius: 50%; border-top-color: var(--panel-accent); content: ""; height: 14px; width: 14px; }
.event-image-processing-status[hidden] { display: none; }
.event-media-grid.pending-replacement { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
    .event-image-processing-status::before { animation: none; }
}
@keyframes event-image-processing-spin { to { transform: rotate(360deg); } }
.event-media-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 20px; }
.event-media-item { border: 1px solid var(--panel-border); border-radius: 7px; display: grid; gap: 8px; min-width: 0; padding: 11px; position: relative; }
.event-media-item > img { aspect-ratio: 4 / 3; background: #f3f5f6; border-radius: 5px; object-fit: contain; width: 100%; }
.event-media-type { background: #fff; border: 1px solid var(--panel-border); border-radius: 5px; color: var(--panel-accent-dark); font-size: 10px; font-weight: 800; left: 18px; padding: 3px 6px; position: absolute; top: 18px; }
.event-media-item .form-label { font-size: 11px; margin: 0; }
.event-media-item .form-control { min-width: 0; }
.event-media-actions { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.event-media-actions .check-row { margin: 0; }
.event-media-actions .danger { color: #a33434; }

.event-intro-options {
    border: 0;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 18px 0 0;
    padding: 0;
}
.event-opening-type { border: 0; display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; }
.event-opening-type label { cursor: pointer; min-width: 0; }
.event-opening-type input { opacity: 0; pointer-events: none; position: absolute; }
.event-opening-type span { align-items: center; background: #fff; border: 1px solid var(--panel-border); border-radius: 6px; color: var(--panel-text); display: flex; font-size: 12px; font-weight: 750; justify-content: center; min-height: 42px; padding: 7px; text-align: center; }
.event-opening-type input:checked + span { background: var(--panel-accent-soft); border-color: var(--panel-accent); color: var(--panel-accent-dark); }
.event-opening-type { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.event-custom-intro-consent { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; margin: 10px 0; }
.event-custom-intro-consent input { flex: none; margin-top: 4px; }
[data-opening-panel="custom"] .form-control { max-width: 100%; min-width: 0; }
.event-logo-visibility { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.event-logo-visibility .btn-check:checked + .btn { background: var(--panel-accent); border-color: var(--panel-accent); color: #fff; }
.event-logo-visibility span { color: var(--panel-muted); font-size: 11px; }

.event-intro-option {
    align-items: center;
    background: #fff;
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    cursor: pointer;
    display: grid;
    gap: 11px;
    grid-template-columns: auto 48px minmax(0, 1fr);
    min-height: 82px;
    padding: 12px;
    position: relative;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.event-intro-option:hover { background: #fafbfd; border-color: #bfcbd3; }
.event-intro-option:has(input:checked),
.event-intro-option.selected { background: #f5fafb; border-color: #176e8b; box-shadow: inset 4px 0 0 #176e8b, 0 0 0 1px rgba(23, 110, 139, .18); }
.event-intro-option > input { accent-color: #176e8b; height: 17px; margin: 0; width: 17px; }
.event-intro-option > span:last-child { display: grid; gap: 3px; min-width: 0; }
.event-intro-option strong { color: #28323b; font-size: 13px; }
.event-intro-option small { color: var(--panel-muted); font-size: 11px; line-height: 1.4; }
.event-intro-selected-label { align-items: center; color: #176e8b; display: none; font-size: 10px; font-weight: 850; gap: 4px; white-space: nowrap; }
.event-intro-option > .event-intro-selected-label { grid-column: 2 / -1; }
.event-video-intro-card > .event-intro-selected-label { margin: 0 13px; }
.event-intro-option:has(input:checked) .event-intro-selected-label,
.event-intro-option.selected .event-intro-selected-label,
.event-video-intro-card.selected .event-intro-selected-label { display: inline-flex; }

.hero-background-mode { border: 0; display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: 0; padding: 0; }
.hero-background-mode label { cursor: pointer; min-width: 0; }
.hero-background-mode input { opacity: 0; pointer-events: none; position: absolute; }
.hero-background-mode span { align-items: center; border: 1px solid var(--panel-border); border-radius: 7px; color: var(--panel-muted); display: flex; gap: 8px; justify-content: center; min-height: 48px; padding: 9px; }
.hero-background-mode input:checked + span { background: var(--panel-accent-soft); border-color: var(--panel-accent); color: var(--panel-accent-dark); box-shadow: inset 0 0 0 1px var(--panel-accent); }
.hero-background-mode input:focus-visible + span { outline: 3px solid rgba(23, 110, 139, .25); outline-offset: 2px; }
.event-legacy-fields .dynamic-form-section { border: 0; box-shadow: none; margin-top: 12px; padding: 0; }

.event-intro-option-mark {
    align-items: center;
    background: #f0f2f5;
    border-radius: 6px;
    display: flex;
    height: 42px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 48px;
}

.event-intro-option-mark i,
.event-intro-option-mark b { display: block; position: absolute; }
.event-intro-option-mark.none::after { color: #89919a; content: "—"; font-size: 20px; }
.event-intro-option-mark.elegant-reveal { background: #eef4f6; }
.event-intro-option-mark.elegant-reveal i { background: #32768e; height: 1px; width: 28px; }
.event-intro-option-mark.elegant-reveal b { border: 1px solid #74a6b7; height: 20px; width: 20px; }
.event-intro-option-mark.romantic-floral { background: #f8f1f4; }
.event-intro-option-mark.romantic-floral i,
.event-intro-option-mark.romantic-floral b { border: 1px solid #a35d76; border-radius: 80% 10% 80% 10%; height: 16px; width: 10px; }
.event-intro-option-mark.romantic-floral i { transform: translate(-6px, -5px) rotate(-30deg); }
.event-intro-option-mark.romantic-floral b { transform: translate(6px, 5px) rotate(150deg); }
.event-intro-option-mark.photo-reveal { background: linear-gradient(145deg, #7895a0, #d4c4ba); }
.event-intro-option-mark.photo-reveal i { border: 1px solid rgba(255,255,255,.9); height: 26px; width: 34px; }
.event-intro-option-mark.photo-reveal b { background: #fff; border-radius: 50%; height: 5px; transform: translate(8px, -6px); width: 5px; }

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

.event-live-preview-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.event-live-preview-heading > span { color: var(--panel-accent-dark); font-size: 13px; font-weight: 800; }
.event-live-preview-heading [data-active-preview-label] { font-size: inherit; font-weight: 650; }
.event-live-preview-heading i { color: var(--panel-accent); margin-right: 5px; }
.event-live-preview-heading small { color: var(--panel-muted); font-size: 10px; }
.event-live-preview-tools { align-items: end; display: grid; gap: 2px; justify-items: end; }
.event-live-preview-tools button { background: transparent; border: 0; color: var(--panel-accent-dark); cursor: pointer; font-size: 10px; font-weight: 750; padding: 2px 0; text-decoration: underline; text-underline-offset: 2px; }
.event-live-preview-tools button:hover { color: var(--panel-accent); }
.event-live-preview-tools button:focus-visible { outline: 2px solid rgba(23, 110, 139, .32); outline-offset: 2px; }
.event-live-preview-tools [data-close-public-preview] { display: none; }
.event-live-preview.mobile-open .event-live-preview-tools [data-close-public-preview] { display: inline-flex; font-size: 13px; min-height: 40px; align-items: center; }

.event-preview-device {
    --event-preview-accent: #7a2846;
    background: #fff;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    box-shadow: 0 22px 48px rgba(32, 36, 42, 0.16);
    color: #252a31;
    min-height: 550px;
    overflow: hidden;
    position: relative;
}

.event-preview-device::before {
    background: #252a31;
    border-radius: 999px;
    content: "";
    height: 4px;
    left: 50%;
    opacity: 0.2;
    position: absolute;
    top: 9px;
    transform: translateX(-50%);
    width: 42px;
    z-index: 2;
}

.event-preview-intro {
    align-items: center;
    background: #f4f6f8;
    border-bottom: 1px solid #dfe4e8;
    color: #59626c;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-height: 40px;
    overflow: hidden;
    padding: 13px 13px 8px;
    position: relative;
    z-index: 3;
}

.event-preview-intro > img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.event-preview-intro > img[hidden] { display: none; }
.event-preview-intro::after { background: linear-gradient(90deg, rgba(19, 24, 31, .68), rgba(19, 24, 31, .28)); content: ""; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity .18s ease; }
.event-preview-intro-content { align-items: center; display: flex; gap: 8px; justify-content: space-between; position: relative; width: 100%; z-index: 1; }
.event-preview-intro span { font-size: 10px; font-weight: 800; }
.event-preview-intro small { font-size: 8px; text-align: right; }
.event-preview-intro.has-cover { color: #fff; min-height: 96px; padding: 17px 13px 11px; }
.event-preview-intro.has-cover::after { opacity: 1; }
.event-preview-intro.elegant-reveal { background: #edf5f7; color: #286c84; }
.event-preview-intro.romantic-floral { background: #f9f0f4; color: #8a3f5c; }
.event-preview-intro.photo-reveal { background: #344d58; color: #fff; }
.event-preview-intro.has-cover.elegant-reveal,
.event-preview-intro.has-cover.romantic-floral,
.event-preview-intro.has-cover.photo-reveal { color: #fff; }

.event-preview-background {
    background-position: center;
    background-size: cover;
    inset: 0;
    opacity: 0.16;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.event-preview-background[hidden] { display: none; }

.event-preview-hero {
    align-items: center;
    background: #edf0f3;
    display: flex;
    height: 190px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.event-preview-hero img { height: 100%; object-fit: cover; width: 100%; }
.event-preview-hero img[hidden],
.event-preview-hero [hidden] { display: none; }
.event-preview-hero > div { align-items: center; color: var(--event-preview-accent); display: flex; flex-direction: column; font-size: 12px; font-weight: 800; gap: 8px; }
.event-preview-hero > div i { font-size: 32px; }
.event-preview-logo { align-items: center; background: rgba(255, 255, 255, .88); border-radius: 5px; box-shadow: 0 6px 18px rgba(28, 32, 38, .18); display: flex; left: 14px; max-height: 64px; max-width: 130px; padding: 7px 9px; position: absolute; top: 14px; z-index: 2; }
.event-preview-logo[hidden] { display: none; }
.event-preview-logo img { height: auto; max-height: 50px; max-width: 110px; object-fit: contain; width: auto; }

.event-preview-content { background: rgba(255, 255, 255, 0.88); overflow: hidden; padding: 21px 20px 19px; position: relative; z-index: 1; }
.event-preview-content > :not(.event-preview-background) { position: relative; z-index: 1; }
.event-preview-type { color: var(--event-preview-accent); display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.event-preview-content h2 { font-family: Georgia, "Times New Roman", serif; font-size: 26px; line-height: 1.15; margin: 7px 0 15px; overflow-wrap: anywhere; }
.event-preview-description { color: #555d68; font-size: 11px; line-height: 1.55; margin: -5px 0 14px; overflow-wrap: anywhere; }
.event-preview-description[hidden] { display: none; }
.event-preview-gallery { margin: 0 0 13px; }
.event-preview-gallery[hidden] { display: none; }
.event-preview-gallery > strong { color: var(--event-preview-accent); display: block; font-size: 8px; margin-bottom: 6px; text-transform: uppercase; }
.event-preview-gallery > div { display: grid; gap: 5px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.event-preview-gallery img { aspect-ratio: 1; border-radius: 4px; height: auto; object-fit: cover; width: 100%; }
.event-preview-meta { border-block: 1px solid #e5e7ea; display: grid; grid-template-columns: 1fr auto; padding: 11px 0; }
.event-preview-meta span { align-items: center; display: flex; font-size: 11px; gap: 6px; min-width: 0; }
.event-preview-meta i { color: var(--event-preview-accent); }
.event-preview-meta b { overflow-wrap: anywhere; }
.event-preview-place { align-items: flex-start; display: flex; gap: 9px; margin-top: 14px; }
.event-preview-place > i { color: var(--event-preview-accent); }
.event-preview-place div { display: grid; min-width: 0; }
.event-preview-place strong { font-size: 12px; overflow-wrap: anywhere; }
.event-preview-place span { color: #747b85; font-size: 10px; line-height: 1.4; margin-top: 2px; overflow-wrap: anywhere; }
.event-preview-special { display: grid; gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 13px; }
.event-preview-special[hidden] { display: none; }
.event-preview-special > span { background: #f5f6f8; border-radius: 6px; display: grid; gap: 2px; min-width: 0; padding: 7px 8px; }
.event-preview-special small { color: #747b85; font-size: 8px; text-transform: uppercase; }
.event-preview-special strong { font-size: 10px; overflow-wrap: anywhere; }
.event-preview-note { background: color-mix(in srgb, var(--event-preview-accent) 8%, #fff); border-left: 2px solid var(--event-preview-accent); color: #555d68; display: grid; font-size: 10px; gap: 2px; line-height: 1.5; margin: 14px 0 0; padding: 9px 10px; overflow-wrap: anywhere; }
.event-preview-note strong { color: #343941; font-size: 8px; text-transform: uppercase; }
.event-preview-note[hidden] { display: none; }
.event-preview-actions { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.event-preview-actions span { border: 1px solid var(--event-preview-accent); border-radius: 6px; color: var(--event-preview-accent); font-size: 9px; font-weight: 800; padding: 7px; text-align: center; }
.event-preview-actions span:last-child { background: var(--event-preview-accent); color: #fff; }

.event-preview-device.wedding-romantic { background: #fffafb; --event-preview-accent: #7a2946; }
.event-preview-device.wedding-elegant { background: #fcfaf7; --event-preview-accent: #62413e; }
.event-preview-device.wedding-botanical { background: #fbfdf9; --event-preview-accent: #5e7256; }
.event-preview-device.birthday-celebration { background: #fffafb; --event-preview-accent: #b83259; }
.event-preview-device.circumcision-modern { background: #fbfcfe; --event-preview-accent: #214e78; }
.event-preview-device.corporate-clean { background: #f9fbfd; --event-preview-accent: #17324f; }
.event-preview-device.corporate-clean .event-preview-content h2 { font-family: Inter, "Segoe UI", Arial, sans-serif; font-weight: 800; }
.event-map .leaflet-control-layers { border-radius: 6px; font-family: Inter, "Segoe UI", Arial, sans-serif; max-width: min(240px, calc(100vw - 72px)); }
.event-map .leaflet-control-layers-expanded { overflow-wrap: anywhere; padding: 8px 10px; }
.event-map .leaflet-control-layers label { margin: 0; }

@media (max-width: 1180px) {
    .event-editor-layout,
    .event-editor-layout.preview-step-active { grid-template-columns: minmax(0, 1fr); }
    .event-live-preview { margin: 0 auto; max-width: 390px; position: static; width: 100%; }
}

@media (max-width: 860px) {
    .panel-shell.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
    .panel-shell.sidebar-collapsed .panel-sidebar { padding: 22px 16px; }
    .panel-shell.sidebar-collapsed .panel-sidebar-head { flex-direction: row; }
    .panel-shell.sidebar-collapsed .panel-brand { padding: 0 8px; }
    .panel-shell.sidebar-collapsed .panel-brand > span:last-child,
    .panel-shell.sidebar-collapsed .panel-nav-link > span { display: block; }
    .panel-shell.sidebar-collapsed .panel-nav-link { justify-content: flex-start; padding: 10px 12px; }
    .panel-sidebar-toggle { display: none; }
    .panel-sidebar-head { margin-bottom: 18px; }
}

@media (max-width: 520px) {
    .event-v1-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .event-v1-steps button { border-bottom: 1px solid var(--panel-border); min-height: 52px; padding: 8px 10px; }
    .event-v1-steps button:nth-child(2) { border-right: 0; }
    .event-v1-steps button:nth-child(n+3) { border-bottom: 0; }
    .event-v1-steps button strong { font-size: 11px; }
    .hero-background-mode, .event-opening-type { grid-template-columns: minmax(0, 1fr); }
    .event-datetime-composite { grid-template-columns: minmax(0, 1fr) 70px 70px; }
    .event-v1-navigation { justify-content: space-between; }
    .event-form-card,
    .event-editor-form .dynamic-form-section { padding: 17px; }
    .event-editor-layout { gap: 18px; }
    .event-preview-device { min-height: 520px; }
    .event-live-preview-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
    .event-editor-form .panel-form-actions { align-items: stretch; flex-direction: column-reverse; }
    .event-editor-form .panel-form-actions .btn { width: 100%; }
    .event-media-fields { grid-template-columns: minmax(0, 1fr); }
    .event-media-selection { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .event-media-grid { grid-template-columns: minmax(0, 1fr); }
    .event-intro-options { grid-template-columns: minmax(0, 1fr); }
}

/* Optional invitation design editor */
.design-editor-entry { align-items: flex-start; border-top: 1px solid var(--panel-border); display: flex; flex-direction: column; gap: 8px; margin-top: 20px; padding-top: 18px; }
.design-editor-entry[hidden] { display: none; }
.design-editor-entry small { color: var(--panel-muted); font-size: 12px; line-height: 1.55; max-width: 680px; }
.design-editor-entry .btn { align-items: center; display: inline-flex; gap: 7px; }

.design-editor-panel { background: #fff; border: 1px solid var(--panel-border); border-radius: 8px; box-shadow: 0 18px 42px rgba(32, 42, 52, .1); min-width: 0; padding: 24px; }
.design-editor-panel[hidden] { display: none; }
.design-editor-header { align-items: flex-start; border-bottom: 1px solid var(--panel-border); display: flex; gap: 20px; justify-content: space-between; margin-bottom: 22px; padding-bottom: 18px; }
.design-editor-header h2 { font-size: 21px; margin: 3px 0 5px; }
.design-editor-header p { color: var(--panel-muted); font-size: 13px; margin: 0; max-width: 680px; }
.design-editor-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.02fr) minmax(340px, .98fr); min-width: 0; }
.design-editor-settings, .design-preview-column { min-width: 0; }
.design-theme-fieldset { border: 0; margin: 0 0 22px; min-width: 0; padding: 0; }
.design-theme-fieldset > legend { color: var(--panel-text); font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.dynamic-theme-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dynamic-theme-grid.compact .dynamic-theme-card { cursor: pointer; grid-template-columns: 94px minmax(0, 1fr); padding: 10px; }
.dynamic-theme-grid.compact .theme-template-preview { min-height: 82px; }
.dynamic-theme-grid.compact .dynamic-theme-content { align-content: center; display: grid; gap: 4px; }
.dynamic-theme-grid.compact .dynamic-theme-content small { color: var(--panel-muted); font-size: 11px; line-height: 1.35; }
.design-fields { display: grid; gap: 15px; }
.design-fields .theme-property { background: #f8fafb; border: 1px solid #e2e7ea; border-radius: 7px; min-width: 0; padding: 14px; }
.design-field-heading { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 7px; }
.design-field-heading .form-label { margin: 0; }
.design-source { color: #58707d; font-size: 10px; font-weight: 750; text-align: right; }
.design-fields .theme-property-help { display: block; margin-top: 7px; }
.design-fields textarea { resize: vertical; }
.design-fields .theme-image-preview { height: clamp(118px, 18vw, 180px); margin-bottom: 9px; object-fit: cover; width: 100%; }
.design-preview-column { align-self: start; position: sticky; top: 20px; }
.design-preview-heading { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 9px; }
.design-preview-heading strong { font-size: 13px; }
.design-preview-heading span { color: var(--panel-muted); font-size: 11px; }
.design-preview-frame { background: #f4f5f6; border: 1px solid #d9dfe3; border-radius: 8px; height: min(720px, calc(100vh - 130px)); min-height: 560px; width: 100%; }
.design-preview-shell { border-radius: 8px; position: relative; }
.design-preview-shell .design-preview-frame { display: block; }
.design-preview-loading { align-items: center; background: #f4f5f6; border: 1px solid #d9dfe3; border-radius: 8px; color: var(--panel-muted); display: flex; font-size: 12px; gap: 8px; inset: 0; justify-content: center; opacity: 0; pointer-events: none; position: absolute; transition: opacity 90ms ease; z-index: 2; }
.design-preview-shell.preview-loading .design-preview-loading { opacity: 1; pointer-events: auto; }
.design-editor-actions { align-items: center; border-top: 1px solid var(--panel-border); display: flex; gap: 15px; justify-content: space-between; margin-top: 22px; padding-top: 18px; }
.design-editor-actions > div { display: flex; flex-wrap: wrap; gap: 9px; }
.design-editor-feedback { color: #176b4d; font-size: 12px; margin: 11px 0 0; min-height: 18px; }
.design-editor-feedback.error { color: #a12b36; }

/* Semantic event editor */
.event-preview-mobile-toggle { display: none; margin: 0 0 14px auto; min-height: 44px; }
.event-mobile-preview-shortcut { display: none !important; }
.event-form-card > .dynamic-form-section { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.event-subsection-title { border-top: 1px solid #edf0f3; color: var(--panel-accent-dark); font-size: 13px; font-weight: 800; margin: 22px 0 -10px; padding-top: 10px; }
.event-form-card .event-subsection-title:first-of-type { margin-top: 0px; }
.event-design-options { background: #f8fafb; border: 1px solid #dce4e8; border-radius: 7px; margin-top: 20px; overflow: hidden; padding: 0 14px; transition: border-color 160ms ease, background-color 160ms ease; }
.event-design-options:hover { border-color: #b9c9d0; }
.event-design-options[open] { background: #fff; border-color: #b9c9d0; }
.event-design-options > summary { align-items: center; color: var(--panel-accent-dark); cursor: pointer; display: flex; gap: 12px; justify-content: space-between; list-style: none; min-height: 58px; padding: 8px 0; }
.event-design-options > summary::-webkit-details-marker { display: none; }
.event-design-options > summary:focus-visible { outline: 3px solid rgba(23, 110, 139, .24); outline-offset: 4px; }
.event-design-options[open] > summary { border-bottom: 1px solid #e5eaed; }
.event-design-summary-copy { align-items: center; display: flex; gap: 10px; min-width: 0; }
.event-design-summary-copy > i { color: var(--panel-accent); flex: 0 0 auto; font-size: 17px; }
.event-design-summary-copy > span { display: grid; gap: 2px; min-width: 0; }
.event-design-summary-copy strong { font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.event-design-summary-copy small { color: var(--panel-muted); font-size: 11px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.event-design-chevron { flex: 0 0 auto; font-size: 14px; transition: transform 160ms ease; }
.event-design-options[open] .event-design-chevron { transform: rotate(180deg); }
.event-advanced-options { border-top: 1px solid #e5eaed; margin-top: 20px; padding-top: 4px; }
.event-advanced-options > summary { align-items: center; color: var(--panel-accent-dark); cursor: pointer; display: flex; font-size: 13px; font-weight: 800; gap: 8px; min-height: 44px; padding: 8px 0; }
.event-design-options > .design-fields,
.event-design-options > .design-theme-fieldset,
.event-advanced-options > .section-fields { margin-top: 10px; }
.event-design-options > .design-fields,
.event-design-options > .design-theme-fieldset { padding-bottom: 14px; }
[data-logo-field].unsupported { background: #f7f8f9; border: 1px dashed #cfd7dc; border-radius: 7px; padding: 12px; }
[data-logo-field].unsupported .form-label { color: #77818a; }
[data-logo-field].unsupported .form-help { color: #68737b; }
.design-theme-fieldset > .btn { margin-top: 12px; min-height: 40px; }
.event-live-preview { max-width: 430px; min-width: 0; width: 100%; }
.event-live-preview .design-preview-frame { box-shadow: 0 18px 42px rgba(32, 42, 52, .12); display: block; height: min(760px, calc(100vh - 92px)); min-height: 620px; overflow: hidden; }

@media (max-width: 1100px) {
    .design-editor-layout { grid-template-columns: minmax(0, 1fr); }
    .design-preview-column { position: static; }
    .design-preview-frame { height: 680px; }
}

@media (max-width: 1180px) {
    .event-preview-mobile-toggle { align-items: center; display: inline-flex; gap: 7px; }
    .event-live-preview[data-public-preview-panel] { display: none; }
    .event-live-preview[data-public-preview-panel].mobile-open { display: block; }
    .event-live-preview { width: 100%; }
    .event-live-preview .design-preview-frame { height: 720px; min-height: 560px; }
}

@media (max-width: 620px) {
    .event-v1-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .event-v1-steps button { align-items: center; border-bottom: 0 !important; border-right: 1px solid var(--panel-border) !important; flex-direction: column; gap: 2px; justify-content: center; min-width: 0; padding: 6px 2px; text-align: center; }
    .event-v1-steps button:last-child { border-right: 0 !important; }
    .event-v1-steps button strong { font-size: 10px; }
    .event-editor-fields { gap: 12px; }
    .event-form-card { padding: 16px; }
    .event-v1-navigation { background: var(--panel-surface); border-top: 1px solid var(--panel-border); bottom: 0; gap: 6px; left: 0; margin: 0; padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); position: sticky; right: 0; z-index: 1030; }
    .event-v1-navigation .btn { justify-content: center; min-width: 44px; padding-inline: 10px; }
    .event-mobile-preview-shortcut { display: inline-flex !important; }
    .event-v1-navigation > span { min-width: 35px; }
    .event-editor-form { padding-bottom: 72px !important; }
    .design-editor-panel { padding: 16px; }
    .design-editor-header, .design-editor-actions { align-items: stretch; flex-direction: column; }
    .design-editor-header .btn, .design-editor-actions .btn { width: 100%; }
    .design-editor-actions > div { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
    .dynamic-theme-grid.compact { grid-template-columns: minmax(0, 1fr); }
    .dynamic-theme-grid.compact .dynamic-theme-card { grid-template-columns: 84px minmax(0, 1fr); }
    .design-field-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
    .design-source { text-align: left; }
    .design-preview-frame { height: 620px; min-height: 520px; }
    .event-live-preview[data-public-preview-panel] { max-width: 100%; }
    .event-live-preview-tools { align-items: start; justify-items: start; }
    .event-live-preview .design-preview-frame { height: 640px; min-height: 520px; }
    .event-design-options .design-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Shared admin/customer brand language */
.panel-sidebar {
    background: linear-gradient(145deg, #05456b 25%, #4a8ea8 86%);
    border-right: 0;
}

.panel-brand {
    color: #2ba2a4;
    flex: 1 1 auto;
    font-size: 18px;
    line-height: 1.1;
}

.panel-brand:hover,
.panel-brand:focus { color: #fff; }

.panel-brand-logo {   
    border-radius: 8px;
    filter: drop-shadow(0 6px 12px rgba(3, 42, 65, 0.28));
    flex: 0 0 0px;
    height: 42px;
    object-fit: contain;
    padding: 2px;
    width: 52px;
}

.panel-brand small {
    color: rgba(255, 255, 255, 0.62);
    font-size: 10px;
    text-transform: uppercase;
}

.panel-nav-link { color: rgba(255, 255, 255, 0.78); }
.panel-nav-link i { color: rgba(255, 255, 255, 0.6); }
.panel-nav-link:hover,
.panel-nav-link.active { background: rgba(255, 255, 255, 0.11); color: #fff; }
.panel-nav-link:hover i,
.panel-nav-link.active i { color: #fff; }
.panel-nav-link.active::before { background: #fff; }
.panel-logout { color: #ffd0da; }

.panel-sidebar-toggle {
    background:#197a54;
    border: 0;
    border-radius: 6px;
    color: #fff;
    flex-basis: 30px;
    height: 30px;
    width: 30px;
}

.panel-sidebar-toggle:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.panel-sidebar-toggle:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.42); outline-offset: 2px; }
.panel-shell.sidebar-collapsed .panel-brand-logo { flex-basis: 50px; height: 40px; width: 50px; }
.panel-shell.sidebar-collapsed .panel-sidebar-head { gap: 12px; }

.customer-login-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(229, 231, 235, 0.94);
    border-radius: 14px;
    box-shadow: 0 22px 56px rgba(32, 36, 43, 0.14);
    max-width: 420px;
    padding: 30px;
}

.customer-login-heading { margin-bottom: 12px; text-align: center; }
.customer-login-brand { display: flex; justify-content: center; }
.customer-login-brand img { display: block; height: 82px; object-fit: contain; width: 104px; }
.customer-login-brand-link { border-radius: 8px; text-decoration: none; }
.customer-login-brand-link:focus-visible { outline: 3px solid rgba(23, 110, 139, .58); outline-offset: 4px; }
.customer-login-heading h1 { color: #20242b; font-size: 26px; margin-top: 8px; }
.customer-login-heading p { color: #68707c; font-size: 14px; margin-inline: auto; max-width: 330px; }
.customer-login-card .form-label { color: #3f4752; font-size: 13px; font-weight: 750; }
.customer-login-card .form-label i { color: #397f99; margin-right: 5px; }

.customer-login-input { position: relative; }
.customer-login-input > i {
    color: #77818d;
    font-size: 14px;
    left: 14px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.customer-login-input .form-control {
    border-color: #dfe3e8;
    border-radius: 8px;
    min-height: 46px;
    padding-left: 40px;
}

.customer-login-input .form-control:focus {
    border-color: #4a8ea8;
    box-shadow: 0 0 0 3px rgba(74, 142, 168, 0.16);
}

.customer-login-remember {
    align-items: center;
    color: #3f4752;
    cursor: pointer;
    display: flex;
    gap: 11px;
    margin: -4px 0 18px;
    min-height: 44px;
}
.customer-login-remember input { accent-color: #075273; flex: 0 0 18px; height: 18px; margin: 0; width: 18px; }
.customer-login-remember span { display: grid; gap: 1px; }
.customer-login-remember strong { font-size: 13px; line-height: 1.35; }
.customer-login-remember small { color: #68707c; font-size: 11px; line-height: 1.4; }
.customer-login-remember:has(input:focus-visible) { border-radius: 7px; outline: 3px solid rgba(23, 110, 139, .32); outline-offset: 3px; }

.customer-login-button {
    align-items: center;
    background: #075273;
    border-color: #075273;
    border-radius: 8px;
    display: flex;
    font-weight: 750;
    justify-content: space-between;
    min-height: 46px;
    padding-inline: 17px;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.customer-login-button:hover,
.customer-login-button:focus {
    background: #064461;
    border-color: #064461;
    box-shadow: 0 10px 22px rgba(5, 69, 107, 0.24);
    transform: translateY(-1px);
}

.auth-login-divider { align-items: center; color: #7b8490; display: flex; font-size: 12px; gap: 12px; margin: 20px 0 14px; text-transform: lowercase; }
.auth-login-divider::before, .auth-login-divider::after { background: #e1e5e9; content: ""; flex: 1 1 auto; height: 1px; }
.google-login-button { align-items: center; background: #fff; border: 1px solid #d8dde3; border-radius: 8px; color: #2f3742; display: flex; font-size: 14px; font-weight: 750; gap: 11px; justify-content: center; min-height: 46px; padding: 10px 16px; text-decoration: none; transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; width: 100%; }
.google-login-button img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.google-login-button:hover, .google-login-button:focus { background: #f8fafb; border-color: #b9c1ca; box-shadow: 0 6px 18px rgba(32, 36, 43, .09); color: #20242b; }
.google-login-button:focus-visible { outline: 3px solid rgba(66, 133, 244, .28); outline-offset: 3px; }

.customer-login-card .forgot-link { color: #176e8b; font-size: 13px; }
.customer-register-button { align-items: center; display: inline-flex; justify-content: center; margin-top: 10px; min-height: 44px; }
.customer-login-card .forgot-link:hover,
.customer-login-card .forgot-link:focus { color: #05456b; text-decoration: underline; }
.auth-marketing-home-link { align-items: center; color: #68707c; display: flex; font-size: 13px; font-weight: 700; gap: 6px; justify-content: center; margin-top: 12px; text-decoration: none; }
.auth-marketing-home-link:hover,
.auth-marketing-home-link:focus { color: #05456b; text-decoration: underline; }
.auth-marketing-home-link:focus-visible { outline: 3px solid rgba(23, 110, 139, .58); outline-offset: 3px; }

@media (max-width: 860px) {
    .panel-sidebar { border-bottom: 0; }
    .panel-nav { overflow-y: hidden; scrollbar-width: none; }
    .panel-nav::-webkit-scrollbar { display: none; }
    .panel-nav-link.active::before { background: #fff; }
}

@media (max-width: 520px) {
    .customer-login-body { box-sizing: border-box; padding: 12px; }
    .customer-login-card { box-sizing: border-box; max-width: min(100%, 390px); min-width: 0; padding: 16px 17px; }
    .customer-login-heading { margin-bottom: 12px; }
    .customer-login-heading p { margin-top: 4px; line-height: 1.4; }
    .customer-login-card form > .mb-4 { margin-bottom: 12px!important; }
    .customer-login-remember { margin-bottom: 8px; }
    .auth-login-divider { margin: 11px 0 9px; }
    .customer-login-card :is(input, button) { box-sizing: border-box; max-width: 100%; }
    .customer-login-brand img { height: 54px; width: 76px; }
    .customer-login-heading h1 { font-size: 23px; }
    .event-map-toolbar .btn { width: 44px; }
    .panel-brand-logo { height: 38px; width: 48px; }
}

@media (max-width: 680px) {
    .panel-floating-whatsapp {
        align-items: center;
        bottom: calc(16px + env(safe-area-inset-bottom));
        box-sizing: border-box;
        border-radius: 50%;
        flex: 0 0 52px;
        height: 52px;
        justify-content: center;
        line-height: 0;
        max-height: 52px;
        max-width: 52px;
        min-height: 52px;
        min-width: 52px;
        overflow: hidden;
        padding: 0;
        right: calc(16px + env(safe-area-inset-right));
        width: 52px;
    }
    .panel-floating-whatsapp-icon {
        align-self: center;
        flex: 0 0 24px;
        height: 24px;
        margin: 0;
        transform: none;
        width: 24px;
    }
    .panel-floating-whatsapp span { display: none; }

    body:has(.event-editor-form) .event-sticky-save {
        z-index: 1031;
    }

}

@media (max-width: 680px) and (hover: none) {
    .panel-floating-whatsapp:hover,
    .panel-floating-whatsapp:focus-visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .panel-floating-whatsapp { transition: none; }
    .panel-floating-whatsapp:hover { transform: none; }
}

.image-preset-open {
    align-items: center;
    display: inline-flex;
    gap: 7px;
    margin-top: 9px;
}

.selected-preset-preview {
    align-items: center;
    display: flex;
    gap: 10px;
    margin: 10px 0 0;
}

.selected-preset-preview[hidden],
.theme-image-preview[hidden] { display: none; }

.selected-preset-preview img {
    aspect-ratio: 16 / 9;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    object-fit: cover;
    width: min(170px, 45%);
}

.selected-preset-preview figcaption {
    color: var(--panel-muted);
    font-size: 13px;
    font-weight: 700;
}

.hero-motion-select { max-width: 360px; }
.hero-motion-select:disabled { cursor: not-allowed; opacity: .65; }
.hero-motion-image-help { color: #6d5660; margin-top: 7px; }
.hero-motion-image-help[hidden] { display: none; }

.design-fields .theme-image-preview--compact {
    display: block;
    height: 150px;
    max-width: 260px;
    width: 100%;
}

.catalog-picker-modal .modal-dialog {
    height: min(78vh, 720px);
    max-height: calc(100dvh - 32px);
}

.catalog-picker-modal .modal-content { max-height: 100%; }
.catalog-picker-modal .modal-header,
.catalog-picker-modal .modal-footer { flex: 0 0 auto; }
.catalog-picker-modal .modal-body { min-height: 0; overflow-x: hidden; overflow-y: auto; }

.image-preset-modal .modal-content {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 22px 55px rgba(32, 36, 42, .2);
    overflow: hidden;
}

.image-preset-modal .modal-header { align-items: flex-start; }
.image-preset-modal .modal-header p { color: var(--panel-muted); font-size: 13px; margin-top: 4px; }

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

.image-preset-option {
    background: #fff;
    border: 2px solid transparent;
    border-radius: 6px;
    color: var(--panel-text);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: left;
}

.image-preset-option[hidden] { display: none; }
.image-preset-option:hover { border-color: color-mix(in srgb, var(--panel-accent) 45%, transparent); }
.image-preset-option.selected { border-color: var(--panel-accent); }
.image-preset-option img { aspect-ratio: 4 / 3; background: #f3f5f6; display: block; object-fit: contain; width: 100%; }
.image-preset-option span { display: block; font-size: 13px; font-weight: 750; overflow-wrap: anywhere; padding: 9px 10px 10px; }
.image-preset-option i { color: var(--panel-accent); display: none; font-size: 20px; position: absolute; right: 8px; top: 8px; }
.image-preset-option.selected i { display: block; }

@media (max-width: 767.98px) {
    .image-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .image-preset-modal .modal-dialog { margin: 12px; }
    .catalog-picker-modal .modal-dialog { height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
}
/* Event video intro selector */
.event-intro-group-title { font-size: 15px; font-weight: 800; margin: 20px 0 10px; }
.event-video-intro-heading { align-items: end; display: flex; justify-content: space-between; margin-top: 26px; }
.event-video-intro-heading p { color: var(--panel-muted); font-size: 12px; margin: 0 0 10px; }
.event-video-intro-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.event-video-intro-card[hidden], .event-video-intro-toggle-wrap[hidden] { display: none; }
.event-video-intro-toggle-wrap { display: flex; justify-content: center; margin-top: 16px; }
.event-video-intro-toggle { background: transparent; border: 1px solid var(--panel-border); border-radius: 7px; color: var(--panel-accent); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; min-height: 40px; padding: 8px 18px; }
.event-video-intro-toggle:hover { background: color-mix(in srgb, var(--panel-accent) 6%, #fff); }
.event-video-intro-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--panel-accent) 30%, transparent); outline-offset: 2px; }
.event-video-intro-card { background: #fff; border: 1px solid var(--panel-border); border-radius: 7px; cursor: pointer; display: grid; gap: 10px; min-width: 0; overflow: hidden; padding-bottom: 13px; position: relative; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
.event-video-intro-card:hover { border-color: #aebbc3; }
.event-video-intro-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--panel-accent) 30%, transparent); outline-offset: 3px; }
.event-video-intro-card.selected { background: color-mix(in srgb, var(--panel-accent) 5%, #fff); border-color: var(--panel-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel-accent) 14%, transparent); }
.event-video-intro-card > input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.event-video-intro-check { align-items: center; background: rgba(255,255,255,.94); border: 2px solid #829099; border-radius: 50%; color: transparent; display: flex; font-size: 16px; height: 30px; justify-content: center; position: absolute; right: 10px; top: 10px; transition: background-color .16s ease, border-color .16s ease, color .16s ease; width: 30px; z-index: 3; }
.event-video-intro-card.selected .event-video-intro-check { background: var(--panel-accent); border-color: var(--panel-accent); color: #fff; }
.event-video-preview { aspect-ratio: 16 / 9; background: #121416; overflow: hidden; position: relative; }
.event-video-preview video { height: 100%; object-fit: cover; opacity: 0; width: 100%; }
.event-video-preview > .event-intro-poster-placeholder,.event-video-preview > .event-intro-poster-frame { height: 100%; inset: 0; position: absolute; width: 100%; z-index: 2; }
.event-video-preview > .event-intro-poster-placeholder { align-items: center; background: linear-gradient(155deg,#202b32,#11161c); color: #e6eef1; display: flex; flex-direction: column; font-size: 11px; gap: 7px; justify-content: center; padding: 14px; text-align: center; }
.event-video-preview > .event-intro-poster-placeholder i { font-size: 24px; }
.event-video-preview > .event-intro-poster-frame { background: #171b20; object-fit: contain; }
.event-video-preview button { align-items: center; background: rgba(255,255,255,.94); border: 0; border-radius: 50%; color: #222; display: flex; font-size: 20px; height: 42px; inset: 50% auto auto 50%; justify-content: center; position: absolute; transform: translate(-50%, -50%); width: 42px; z-index: 3; }
.event-video-preview button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.event-intro-preview-modal .modal-dialog { width: min(92vw, calc(43.875dvh + 18px), 445px); max-width: calc(100vw - 24px); margin: 12px auto; }
.event-intro-preview-modal .modal-content { background: #14181d; color: #fff; max-height: calc(100dvh - 24px); overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; }
.event-intro-preview-modal .modal-header { padding: 10px 12px; border-bottom-color: rgba(255,255,255,.16); }
.event-intro-preview-modal .modal-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-intro-preview-modal .modal-body { display: grid; place-items: center; min-height: 0; overflow: hidden; padding: 8px; }
.event-intro-preview-modal video { display: block; width: min(100%, 43.875dvh, 427px); max-width: 100%; height: auto; max-height: 78dvh; aspect-ratio: 9 / 16; object-fit: contain; background: #090b0e; border-radius: 8px; }
.event-video-intro-card > div:last-child { display: grid; gap: 4px; padding: 0 13px; }
.event-video-intro-card strong { font-size: 14px; overflow-wrap: anywhere; }
.event-video-intro-card span { color: var(--panel-accent); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.event-video-intro-card small, .event-video-intro-empty { color: var(--panel-muted); font-size: 12px; }
.event-video-intro-empty { grid-column: 1 / -1; margin: 0; padding: 16px 0; }
.event-intro-selection-status { color: var(--panel-muted); font-size: 12px; margin: 12px 0 0; }
.event-preview-intro.video-intro { background: #23272a; color: #fff; }
@media (max-width: 900px) { .event-video-intro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .event-video-intro-heading { align-items: start; flex-direction: column; } .event-video-intro-grid { grid-template-columns: minmax(0, 1fr); } }

/* Mobile panel navigation: override the earlier horizontal-scroll fallback. */
.panel-mobile-menu-toggle { display: none; }

@media (max-width: 860px) {
    .panel-sidebar { padding: 16px; }
    .panel-sidebar-head { margin-bottom: 0; }
    .panel-mobile-menu-toggle {
        align-items: center;
        background: rgba(255, 255, 255, 0.12);
        border: 0;
        border-radius: 6px;
        color: #fff;
        display: inline-flex;
        flex: 0 0 44px;
        font-size: 20px;
        height: 44px;
        justify-content: center;
        width: 44px;
    }
    .panel-mobile-menu-toggle:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.48); outline-offset: 2px; }
    .panel-nav { display: none; overflow: visible; }
    .panel-sidebar.is-mobile-nav-open .panel-sidebar-head { margin-bottom: 16px; }
    .panel-sidebar.is-mobile-nav-open .panel-nav { display: grid; grid-template-columns: minmax(0, 1fr); }
    .panel-nav-link { flex: 1 1 auto; min-width: 0; }
    .panel-nav-link.active::before { bottom: auto; height: 24px; left: -16px; top: 10px; width: 3px; }
}

/* User-panel PWA install prompt and standalone safe-area support. */
.pwa-install-prompt {
    align-items: center;
    background: #fff;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    bottom: max(24px, env(safe-area-inset-bottom));
    box-shadow: 0 14px 34px rgba(18, 48, 65, .16);
    display: grid;
    gap: 10px;
    grid-template-columns: 42px minmax(0, 1fr) auto 36px;
    left: max(24px, env(safe-area-inset-left));
    max-width: min(560px, calc(100vw - 140px));
    padding: 11px 12px;
    position: fixed;
    z-index: 1029;
}

.pwa-install-prompt[hidden] { display: none; }
.pwa-install-action[hidden] { display: none; }
.pwa-install-icon { border-radius: 8px; display: block; height: 42px; object-fit: cover; width: 42px; }
.pwa-install-copy { display: grid; gap: 2px; min-width: 0; }
.pwa-install-copy strong { color: var(--panel-text); font-size: 13px; line-height: 1.3; }
.pwa-install-copy span { color: var(--panel-muted); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.pwa-install-action {
    align-items: center;
    background: #075273;
    border: 1px solid #075273;
    border-radius: 7px;
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
    white-space: nowrap;
}
.pwa-install-action:hover,
.pwa-install-action:focus-visible { background: #064461; border-color: #064461; }
.pwa-install-action:focus-visible,
.pwa-install-dismiss:focus-visible { outline: 3px solid rgba(23, 110, 139, .35); outline-offset: 2px; }
.pwa-install-dismiss {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--panel-muted);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    padding: 0;
    width: 36px;
}
.pwa-install-dismiss:hover { background: var(--panel-accent-soft); color: var(--panel-accent-dark); }

.pwa-install-success-toast {
    align-items: start;
    background: #fff;
    border: 1px solid #cfe2d9;
    border-left: 4px solid var(--panel-green);
    border-radius: 8px;
    bottom: max(24px, env(safe-area-inset-bottom));
    box-shadow: 0 14px 34px rgba(18, 48, 65, .16);
    display: grid;
    gap: 10px;
    grid-template-columns: 24px minmax(0, 1fr);
    left: max(24px, env(safe-area-inset-left));
    max-width: min(440px, calc(100vw - 140px));
    opacity: 0;
    padding: 14px 16px;
    position: fixed;
    transform: translateY(10px);
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 1029;
}
.pwa-install-success-toast.is-visible { opacity: 1; transform: translateY(0); }
.pwa-install-success-toast > i { color: var(--panel-green); font-size: 20px; line-height: 1.2; }
.pwa-install-help-toast { border-color: #cbdde5; border-left-color: var(--panel-accent); }
.pwa-install-help-toast > i { color: var(--panel-accent); }
.pwa-install-success-toast > div { display: grid; gap: 3px; min-width: 0; }
.pwa-install-success-toast strong { color: var(--panel-text); font-size: 13px; line-height: 1.35; }
.pwa-install-success-toast span { color: var(--panel-muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }

body.panel-body.pwa-standalone .panel-shell { min-height: 100dvh; }
body.panel-body.pwa-standalone .panel-sidebar {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-top: max(22px, env(safe-area-inset-top));
}
body.panel-body.pwa-standalone .panel-main {
    padding-bottom: max(28px, env(safe-area-inset-bottom));
    padding-right: max(28px, env(safe-area-inset-right));
}

@media (max-width: 680px) {
    .pwa-install-prompt {
        bottom: max(16px, env(safe-area-inset-bottom));
        gap: 9px;
        grid-template-columns: 38px minmax(0, 1fr) 36px;
        left: max(16px, env(safe-area-inset-left));
        max-width: none;
        right: calc(84px + env(safe-area-inset-right));
    }
    .pwa-install-icon { height: 38px; width: 38px; }
    .pwa-install-action { grid-column: 2 / 4; justify-content: center; width: 100%; }
    .pwa-install-dismiss { grid-column: 3; grid-row: 1; }
    .pwa-install-copy { grid-column: 2; grid-row: 1; }
    .pwa-install-success-toast {
        bottom: max(16px, env(safe-area-inset-bottom));
        left: max(16px, env(safe-area-inset-left));
        max-width: none;
        right: calc(84px + env(safe-area-inset-right));
    }
    body.panel-body.pwa-standalone .panel-sidebar { padding-top: max(16px, env(safe-area-inset-top)); }
    body.panel-body.pwa-standalone .panel-main {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}

@media (max-width: 390px) {
    .pwa-install-prompt { grid-template-columns: minmax(0, 1fr) 36px; }
    .pwa-install-icon { display: none; }
    .pwa-install-copy { grid-column: 1; }
    .pwa-install-action { grid-column: 1 / 3; }
    .pwa-install-dismiss { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-install-action,
    .pwa-install-dismiss,
    .pwa-install-success-toast { transition: none; }
    .pwa-install-success-toast { transform: none; }
}

@media (max-width: 680px) {
    /* Keep the final form controls scrollable above every active floating layer. */
    body:has(.event-editor-form) { --event-mobile-bottom-clearance: 96px; }
    body:has(.event-editor-form):has(.event-sticky-save:not([hidden])),
    body:has(.event-editor-form):has(.pwa-install-prompt:not([hidden])),
    body:has(.event-editor-form):has(.pwa-install-success-toast) { --event-mobile-bottom-clearance: 176px; }
    body:has(.event-editor-form):has(.event-sticky-save:not([hidden])):has(.pwa-install-prompt:not([hidden])),
    body:has(.event-editor-form):has(.event-sticky-save:not([hidden])):has(.pwa-install-success-toast) { --event-mobile-bottom-clearance: 246px; }
    body:has(.event-editor-form) .panel-main,
    body.panel-body.pwa-standalone:has(.event-editor-form) .panel-main {
        padding-bottom: calc(var(--event-mobile-bottom-clearance) + env(safe-area-inset-bottom));
    }
}
.event-ready-label { align-items: center; display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: space-between; margin-bottom: 7px; }
.event-ready-label .form-label { margin: 0; }
.event-ready-label .btn { white-space: nowrap; }
.event-ready-modal .modal-dialog { max-width: min(640px, calc(100% - 24px)); }
.event-ready-options { display: grid; gap: 10px; }
.event-ready-card { border: 1px solid var(--panel-border); border-radius: 6px; padding: 13px; }
.event-ready-card strong { display: block; font-size: 14px; }
.event-ready-card p { margin: 6px 0 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 640px) { .event-ready-modal .modal-dialog { margin: 12px; } }

.event-create-rights { align-items: center; background: var(--panel-accent-soft); border: 1px solid var(--panel-border); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 7px 12px; margin-bottom: 12px; padding: 10px 13px; }
.event-create-rights strong { font-size: 13px; }
.event-create-rights span { color: var(--panel-muted); font-size: 12px; }
.event-create-rights.is-empty { background: #fff7e8; border-color: #e6c88c; }
.event-mobile-step-heading { display: none; }
[data-mobile-part][hidden] { display: none !important; }

@media (max-width: 620px) {
    .event-v1-steps { display: none; }
    .event-mobile-step-heading { align-items: baseline; display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 0 0 10px; }
    .event-mobile-step-heading span { color: var(--panel-muted); font-size: 12px; font-weight: 800; }
    .event-mobile-step-heading strong { color: var(--panel-text); font-size: 15px; }
    .event-v1-navigation { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); position: fixed; width: 100%; }
    .event-v1-navigation > span { display: none; }
    .event-v1-navigation .btn { font-size: 12px; min-width: 0; white-space: nowrap; width: 100%; }
    .event-v1-navigation .btn[hidden] { visibility: hidden; display: inline-flex !important; }
    .event-v1-navigation [data-event-step-previous] { grid-column: 1; grid-row: 1; }
    .event-v1-navigation [data-mobile-preview-shortcut] { grid-column: 2; grid-row: 1; }
    .event-v1-navigation [data-event-step-next], .event-v1-navigation [data-mobile-publish] { grid-column: 3; grid-row: 1; }
    .event-mobile-publish:not([hidden]) { display: inline-flex; }
    .event-editor-form .event-publish-primary { display: none; }
    .event-ready-label .btn { max-width: 100%; white-space: normal; }
    body:has(.event-editor-form) .panel-floating-whatsapp { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

.firm-login-card .firm-login-label { color: #176e8b; display: inline-block; font-size: 16px; letter-spacing: .08em; margin-top: 8px; text-transform: uppercase; }
.firm-login-card .customer-login-heading { margin-bottom: 12px; }
.firm-login-card .customer-login-button { background: #176e8b; border-color: #176e8b; }
.firm-login-card .customer-login-button:hover, .firm-login-card .customer-login-button:focus { background: #105b73; border-color: #105b73; box-shadow: 0 10px 22px rgba(23, 110, 139, .22); }
@media (max-width: 520px) { .firm-login-card { padding: 24px 20px; } }

.event-gallery-replace-choice { display: flex; gap: 8px; margin-top: 12px; }
.event-gallery-order { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.event-gallery-order span { font-size: 12px; font-weight: 700; margin-right: auto; }
.image-preset-card { background: #f3f5f6; border-radius: 6px; min-width: 0; overflow: hidden; }
.image-preset-card[hidden] { display: none; }
.image-preset-card .image-preset-option { display: block; width: 100%; }
.image-preset-preview-button { background: transparent; border: 0; color: var(--panel-accent); cursor: pointer; font-size: 13px; font-weight: 700; padding: 10px; text-align: center; width: 100%; }
.image-preset-preview[hidden] { display: none; }
.image-preset-preview { display: grid; gap: 12px; justify-items: center; text-align: center; }
.image-preset-preview img { max-height: 70dvh; max-width: 100%; object-fit: contain; }
.image-preset-preview p { font-weight: 700; margin: 0; }
.image-preset-modal.preset-preview-open .image-preset-grid { display: none; }
.image-preset-modal.preset-preview-open .modal-dialog { max-width: min(94vw, 1100px); }