@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
    --tr-primary: #7c3aed;
    --tr-primary-dark: #6d28d9;
    --tr-secondary: #2563eb;
    --tr-secondary-dark: #1d4ed8;
    --tr-amber: #d97706;
    --tr-amber-dark: #b45309;
    --tr-accent: #7c3aed;
    --tr-accent-2: #6d28d9;
    --tr-ink: #0f172a;
    --tr-muted: #475569;
    --tr-bg: #f8fafc;
    --tr-card: #ffffff;
    --tr-line: #dbe4f0;
}

body {
    font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
    color: var(--mud-palette-text-primary, var(--tr-ink));
    background: var(--mud-palette-background, var(--tr-bg));
}

html.eventrika-dark,
body.eventrika-dark {
    background: #172439;
    color-scheme: dark;
}

body.eventrika-dark .home-page {
    --home-ink: #e5edf9;
    --home-heading: #f8fbff;
    --home-subtle: #b5c3d8;
    --home-line: rgba(170, 192, 220, 0.28);
    --home-surface: #172439;
    --home-surface-soft: #172439;
    --home-accent: #c4b5fd;
    --home-accent-deep: #a78bfa;
    --home-shadow: 0 28px 80px rgba(2, 8, 23, 0.45);
}

body.eventrika-dark .landing-page {
    --landing-ink: #e5edf9;
    --landing-heading: #f8fbff;
    --landing-subtle: #b5c3d8;
    --landing-line: rgba(170, 192, 220, 0.28);
    --landing-surface: #172439;
    --landing-accent: #c4b5fd;
    --landing-accent-deep: #a78bfa;
    --landing-shadow: 0 22px 56px rgba(2, 8, 23, 0.5);
}

h1,h2,h3,h4,h5,h6,.brand,.button,button,.btn {
    font-family: "Manrope", system-ui, -apple-system, sans-serif;
}

.account-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 2.2rem 0.6rem 3rem;
    animation: account-page-fadein 220ms ease-out;
}

@keyframes account-page-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Hero header for Login / Register landing pages ── */
.account-page--hero .account-hero {
    text-align: center;
    margin-bottom: 1.5rem;
}

.account-hero-eyebrow {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%);
    color: #6d28d9;
    border: 1px solid #ddd6fe;
    border-radius: 999px;
    font-family: "Manrope", system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.account-page--hero .account-heading {
    font-size: clamp(2.1rem, 3.6vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.account-page--hero .account-subheading {
    font-size: 1.08rem;
    max-width: 36ch;
    margin: 0.4rem auto 0;
}

/* ── Row of "remember me" + "forgot password?" ── */
.account-page .account-row-between {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.account-page .checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--tr-muted);
    cursor: pointer;
    font-size: 0.94rem;
}

.account-page .account-inline-link {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--tr-accent-2);
    text-decoration: none;
}

.account-page .account-inline-link:hover {
    text-decoration: underline;
}

/* ── "OR" divider ── */
.account-page .account-divider {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 1.25rem 0 1rem;
    color: var(--tr-muted);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.account-page .account-divider::before,
.account-page .account-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.account-page .account-passkey-btn {
    background: #ffffff;
    color: var(--tr-ink);
}

.account-page .account-passkey-btn svg {
    color: var(--tr-accent-2);
}

/* ── Footer prompt under the card ── */
.account-page .account-footer-prompt {
    margin: 1.4rem 0 0;
    text-align: center;
    color: var(--tr-muted);
    font-size: 0.96rem;
}

.account-page .account-footer-prompt a {
    color: var(--tr-accent-2);
    font-weight: 600;
    text-decoration: none;
}

.account-page .account-footer-prompt a:hover {
    text-decoration: underline;
}

.account-page .account-footer-sep {
    margin: 0 0.45rem;
    color: #cbd5e1;
}

.account-heading {
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    margin: 0 0 0.4rem;
    color: var(--tr-ink);
}

.account-subheading {
    margin: 0 0 1.2rem;
    color: var(--tr-muted);
    font-size: 1.02rem;
}

.account-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 1.1rem;
}

.account-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid var(--tr-line);
    border-radius: 18px;
    padding: 1.75rem;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06), 0 6px 12px rgba(15, 23, 42, 0.04);
}

.account-page--hero .account-card {
    padding: 2rem;
}

@media (max-width: 600px) {
    .account-card,
    .account-page--hero .account-card {
        padding: 1.25rem;
    }
}

.account-card hr {
    border: 0;
    border-top: 1px solid #e7edf6;
    margin: 0.9rem 0;
}

/* ── Floating-label form controls (Bootstrap-style, native CSS) ── */
.account-page .form-floating {
    position: relative;
}

.account-page .form-floating > .form-control {
    width: 100%;
    height: calc(3.4rem + 2px);
    min-height: calc(3.4rem + 2px);
    padding: 1.45rem 0.9rem 0.45rem;
    border: 1px solid #c9d7eb;
    border-radius: 10px;
    background: #ffffff;
    color: var(--tr-ink);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.25;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.account-page .form-floating > .form-control::placeholder {
    color: transparent;
}

.account-page .form-floating > .form-control:disabled {
    background: #f5f7fb;
    color: #64748b;
    cursor: not-allowed;
}

.account-page .form-floating > .form-control:focus,
.account-page .form-floating > .form-control:not(:placeholder-shown) {
    outline: none;
    border-color: #93b4ff;
    box-shadow: 0 0 0 0.22rem #7c3aed22;
}

.account-page .form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1.05rem 0.9rem;
    color: #64748b;
    pointer-events: none;
    transform-origin: 0 0;
    transition: opacity 120ms ease, transform 120ms ease, color 120ms ease;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-page .form-floating > .form-control:focus ~ label,
.account-page .form-floating > .form-control:not(:placeholder-shown) ~ label {
    transform: translate(0.05rem, -0.6rem) scale(0.78);
    opacity: 0.85;
    color: #475569;
}

/* ── Plain inputs (when not inside .form-floating) ── */
.account-page .form-control {
    display: block;
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid #c9d7eb;
    border-radius: 10px;
    background: #ffffff;
    color: var(--tr-ink);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.account-page .form-control:focus {
    outline: none;
    border-color: #93b4ff;
    box-shadow: 0 0 0 0.22rem #7c3aed22;
}

.account-page .form-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--tr-ink);
    font-weight: 600;
    font-size: 0.94rem;
}

.account-page .form-check {
    position: relative;
    display: block;
    padding-left: 0;
}

.account-page .form-check-input,
.account-page .checkbox input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid #c9d7eb;
    border-radius: 4px;
    accent-color: var(--tr-accent);
    cursor: pointer;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.account-page .form-check-label {
    color: var(--tr-muted);
    line-height: 1.4;
}

.account-page .checkbox label {
    display: inline-flex;
    align-items: center;
    color: var(--tr-muted);
    cursor: pointer;
}

/* ── Buttons ── */
.account-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.05rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--tr-ink);
    font-family: "Manrope", system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 0.96rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 90ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.account-page .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.22rem #7c3aed33;
}

.account-page .btn-lg {
    padding: 0.85rem 1.2rem;
    font-size: 1.02rem;
    border-radius: 12px;
}

.account-page .btn-sm {
    padding: 0.38rem 0.7rem;
    font-size: 0.86rem;
    border-radius: 8px;
}

.account-page .btn-primary,
.account-page .btn.btn-primary {
    background: linear-gradient(180deg, var(--tr-accent) 0%, var(--tr-accent-2) 100%);
    border-color: var(--tr-accent-2);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.account-page .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.32);
}

.account-page .btn-outline-primary {
    border-color: var(--tr-accent);
    color: var(--tr-accent-2);
    background: #ffffff;
}

.account-page .btn-outline-primary:hover {
    background: #f5f3ff;
}

.account-page .btn-outline-secondary {
    border-color: #c9d7eb;
    color: var(--tr-muted);
    background: #ffffff;
}

.account-page .btn-outline-secondary:hover {
    background: #f1f5f9;
    color: var(--tr-ink);
}

.account-page .btn-outline-danger {
    border-color: #fecaca;
    color: #b91c1c;
    background: #ffffff;
}

.account-page .btn-outline-danger:hover {
    background: #fef2f2;
    border-color: #f87171;
}

.account-page .btn-danger {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    border-color: #dc2626;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.22);
}

.account-page .btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(220, 38, 38, 0.32);
}

.account-page .btn-link {
    color: var(--tr-accent-2);
    background: transparent;
    border-color: transparent;
    padding: 0.2rem 0;
}

.account-page .btn-link:hover {
    text-decoration: underline;
    transform: none;
    box-shadow: none;
}

.account-page a,
.account-page .btn-link {
    color: var(--tr-accent-2);
}

/* ── Alerts ── */
.account-page .alert {
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    line-height: 1.45;
}

.account-page .alert > p { margin: 0; }
.account-page .alert > p + p { margin-top: 0.4rem; }

.account-page .alert-info {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #3b0764;
}

.account-page .alert-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.account-page .alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.account-page .alert-success {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

/* ── Input group (for the verified-email checkmark) ── */
.account-page .input-group {
    display: flex;
    align-items: stretch;
}

.account-page .input-group > .form-control {
    flex: 1 1 auto;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.account-page .input-group > .input-group-text {
    display: inline-flex;
    align-items: center;
    padding: 0 0.95rem;
    background: #f8fbff;
    border: 1px solid #c9d7eb;
    border-left: 0;
    border-radius: 0 10px 10px 0;
    color: var(--tr-muted);
}

.account-page .input-group .text-success {
    color: #16a34a;
}

/* ── Tables ── */
.account-page .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.96rem;
}

.account-page .table th,
.account-page .table td {
    padding: 0.7rem 0.55rem;
    border-bottom: 1px solid #eef1f6;
    text-align: left;
}

.account-page .table.align-middle th,
.account-page .table.align-middle td {
    vertical-align: middle;
}

/* ── Utility classes used across the auth pages ── */
.account-page .w-100 { width: 100%; }
.account-page .p-0 { padding: 0 !important; }
.account-page .ps-3 { padding-left: 1rem; }
.account-page .mb-0 { margin-bottom: 0 !important; }
.account-page .mb-2 { margin-bottom: 0.5rem !important; }
.account-page .mb-3 { margin-bottom: 1rem !important; }
.account-page .mb-4 { margin-bottom: 1.4rem !important; }
.account-page .mt-1 { margin-top: 0.25rem !important; }
.account-page .mt-2 { margin-top: 0.55rem !important; }
.account-page .mt-3 { margin-top: 1rem !important; }
.account-page .mx-auto { margin-left: auto; margin-right: auto; }
.account-page .d-flex { display: flex; }
.account-page .d-block { display: block; }
.account-page .d-inline-flex { display: inline-flex; }
.account-page .flex-column { flex-direction: column; }
.account-page .flex-wrap { flex-wrap: wrap; }
.account-page .gap-2 { gap: 0.6rem; }
.account-page .text-end { text-align: right; }
.account-page .text-secondary { color: var(--tr-muted); }
.account-page .text-success { color: #16a34a; }
.account-page .text-info { color: #6d28d9; }
.account-page .font-weight-bold { font-weight: 700; }
.account-page kbd {
    background: #0f172a;
    color: #f8fafc;
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    font-size: 0.92rem;
}

.validation-message,
.text-danger {
    color: #dc2626 !important;
}

/* ── Account: narrow single-column variant (forgot password, lockout, etc.) ── */
.account-page--narrow {
    max-width: 520px;
}

.account-page--narrow .account-card + .account-card {
    margin-top: 1rem;
}

.account-card h2,
.account-card h3 {
    margin: 0 0 0.4rem;
    color: var(--tr-ink);
    font-size: 1.15rem;
}

.account-card > p:first-of-type,
.account-card > .account-lede {
    color: var(--tr-muted);
    margin: 0 0 1rem;
}

.account-card .form-floating + .form-floating {
    margin-top: 0.1rem;
}

/* ── Account utility links / "back to login" footer ── */
.account-card .account-links {
    margin-top: 0.4rem;
    display: grid;
    gap: 0.25rem;
}

.account-card .account-links p {
    margin: 0;
}

/* ── Manage layout side nav polish ── */
.account-page .nav.nav-pills {
    gap: 0.2rem;
}

.account-page .nav-pills .nav-link {
    color: var(--tr-muted);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-weight: 600;
}

.account-page .nav-pills .nav-link:hover {
    background: #f5f3ff;
    color: #6d28d9;
}

.account-page .nav-pills .nav-link.active {
    background: linear-gradient(180deg, var(--tr-accent) 0%, var(--tr-accent-2) 100%);
    color: #ffffff;
}

/* ── Manage page micro-typography ── */
.account-card .alert {
    border-radius: 10px;
}

.account-card .form-text {
    color: var(--tr-muted);
    font-size: 0.88rem;
}

.account-card .table {
    margin: 0.4rem 0 0.8rem;
}

.account-card .table > :not(caption) > * > * {
    background: transparent;
    border-bottom-color: #eef1f6;
}

.recovery-code-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.55rem;
    padding: 0.85rem;
    background: #f8fbff;
    border: 1px solid #d8e3f3;
    border-radius: 10px;
}

.recovery-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.98rem;
    padding: 0.4rem 0.55rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    text-align: center;
    user-select: all;
}

@media (max-width: 920px) {
    .account-page--narrow {
        max-width: 100%;
    }
}

/* ── Admin layout ──────────────────────────────────── */
.admin-layout-main {
    min-height: 100vh;
}

.admin-drawer .mud-nav-link {
    border-radius: 8px;
    margin-bottom: 2px;
}

.admin-kpi-card {
    min-height: 88px;
}

.admin-kpi-value {
    font-weight: 700;
    line-height: 1.15;
    margin-top: 0.1rem;
}
/* ───────────────────────────────────────────────────── */

.admin-page-header {
    padding: 0.25rem 0 0.6rem;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.admin-panel,
.admin-form-panel {
    border-radius: 8px !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}

.admin-panel {
    padding: 0.75rem 1rem;
}

.admin-form-panel {
    max-width: 920px;
    padding: 1.25rem;
}

.venue-form-panel {
    max-width: 100% !important;
}

.venue-builder-shell {
    display: grid;
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.venue-builder-shell.is-disabled {
    opacity: 0.92;
}

.venue-builder-sidebar,
.venue-builder-main {
    min-width: 0;
}

.venue-builder-panel {
    background:
        radial-gradient(circle at top, #f8fbff 0%, #ffffff 58%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #dbe4f0;
    border-radius: 18px;
    box-shadow: 0 18px 40px #0f172a12;
    padding: 1rem;
}

.venue-builder-panel + .venue-builder-panel {
    margin-top: 1rem;
}

.venue-builder-panel-header {
    margin-bottom: 0.9rem;
}

.venue-builder-panel-header-inline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.venue-builder-tool-grid {
    display: grid;
    gap: 0.65rem;
}

.venue-builder-canvas-size {
    margin-top: 0.75rem;
}

.venue-builder-room-shape {
    margin-top: 0.75rem;
}

.venue-builder-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    color: #334155;
    font-size: 0.84rem;
    font-weight: 700;
}

.venue-color-control {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.venue-color-control-with-favorite {
    gap: 0.3rem;
}

.venue-color-swatch {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    flex: 0 0 auto;
}

.venue-color-input {
    width: 2.4rem;
    height: 2rem;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.venue-builder-stagebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.venue-builder-zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.venue-builder-canvas-wrap {
    overflow: auto;
    border-radius: 24px;
    border: 1px solid #d9e4f4;
    background:
        radial-gradient(circle at top, #f7fbff 0%, #edf4fb 44%, #d9e4ef 100%);
    padding: 1.15rem;
}

.venue-builder-canvas-wrap.is-preview-mode {
    background:
        radial-gradient(circle at top, #f7fbff 0%, #edf4fb 50%, #dbe7f3 100%);
    border-color: #d5e2f1;
}

.venue-builder-canvas {
    --venue-base-cell-size: clamp(24px, 2.15vw, 38px);
    --venue-cell-size: calc(var(--venue-base-cell-size) * var(--venue-builder-zoom, 1));
    --venue-floor-color: #edf4fb;
    display: grid;
    grid-template-columns: repeat(var(--venue-builder-columns), var(--venue-cell-size));
    grid-template-rows: repeat(var(--venue-builder-rows), var(--venue-cell-size));
    gap: 4px;
    position: relative;
    align-content: start;
    justify-content: start;
    width: fit-content;
    min-width: calc(var(--venue-builder-columns) * var(--venue-cell-size));
    background-color: var(--venue-floor-color);
}

.venue-builder-canvas-rectangle {
    border-radius: 18px;
}

.venue-floor-standard {
    background: var(--venue-floor-color);
}

.venue-floor-concrete {
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.18), rgba(15, 23, 42, 0.06)),
        repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.05) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.04) 0 1px, transparent 1px 42px),
        var(--venue-floor-color);
}

.venue-floor-carpet {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 6px),
        repeating-linear-gradient(-45deg, rgba(15, 23, 42, 0.07) 0 1px, transparent 1px 5px),
        var(--venue-floor-color);
}

.venue-builder-canvas-round {
    border-radius: 999rem;
    padding: calc(var(--venue-cell-size) * 0.6);
    background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0.18) 62%, rgba(15, 23, 42, 0.08) 100%),
        var(--venue-floor-color);
}

.venue-builder-canvas-round::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid rgba(31, 41, 55, 0.26);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.venue-grid-cell {
    border: 1px dashed #c8d6e8;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.62);
    transition: background 120ms ease, border-color 120ms ease;
}

.venue-grid-cell:hover {
    background: rgba(37, 99, 235, 0.12);
    border-color: #5b8cff;
}

.venue-builder-canvas-wrap.is-preview-mode .venue-grid-cell,
.venue-builder-canvas-wrap.is-preview-mode .venue-node-toolbar,
.venue-builder-canvas-wrap.is-preview-mode .venue-resize-handle {
    display: none;
}

.venue-builder-canvas-wrap.is-preview-mode .venue-node {
    cursor: default;
    pointer-events: none;
}

.venue-builder-canvas-wrap.is-preview-mode .venue-node.selected {
    outline: none;
}

.venue-builder-canvas-wrap.is-preview-mode .venue-node:hover {
    transform: none;
}

.venue-builder-canvas-wrap.is-dragging,
.venue-builder-canvas-wrap.is-dragging .venue-grid-cell,
.venue-builder-canvas-wrap.is-dragging .venue-node,
.venue-builder-canvas-wrap.is-dragging .venue-layer-item,
.venue-builder-drag-active .venue-builder-canvas-wrap,
.venue-builder-drag-active .venue-grid-cell,
.venue-builder-drag-active .venue-node,
.venue-builder-drag-active .venue-layer-item,
.venue-builder-global-dragging {
    cursor: grabbing;
}

.venue-node {
    z-index: 2;
    border: 0;
    border-radius: 18px;
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.3rem;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 12px 24px #0f172a1a;
    backdrop-filter: blur(6px);
    user-select: none;
    overflow: visible;
    position: relative;
}

.venue-node-toolbar {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.1rem;
    position: relative;
    z-index: 3;
}

.venue-resize-handle {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: transparent;
    touch-action: none;
    user-select: none;
}

.venue-resize-handle:hover {
    color: transparent;
}

.venue-resize-handle .mud-icon-root {
    display: none;
}

.venue-resize-handle::before {
    content: "";
    display: block;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.34);
    transition: background 120ms ease, transform 120ms ease;
}

.venue-resize-handle:hover::before {
    background: rgba(29, 78, 216, 0.55);
}

.venue-node-stage .venue-resize-handle::before {
    background: rgba(255, 255, 255, 0.5);
}

.venue-node-stage .venue-resize-handle:hover::before {
    background: rgba(191, 219, 254, 0.92);
}

.venue-resize-handle-n,
.venue-resize-handle-s {
    left: 50%;
    transform: translate(-50%, 0);
    cursor: ns-resize;
}

.venue-resize-handle-e,
.venue-resize-handle-w {
    top: 50%;
    transform: translate(0, -50%);
    cursor: ew-resize;
}

.venue-resize-handle-n::before,
.venue-resize-handle-s::before {
    width: 1.1rem;
    height: 0.18rem;
}

.venue-resize-handle-e::before,
.venue-resize-handle-w::before {
    width: 0.18rem;
    height: 1.1rem;
}

.venue-resize-handle-n {
    top: 0;
    transform: translate(-50%, -42%);
}

.venue-resize-handle-s {
    bottom: 0;
    transform: translate(-50%, 42%);
}

.venue-resize-handle-e {
    right: 0;
    transform: translate(42%, -50%);
}

.venue-resize-handle-w {
    left: 0;
    transform: translate(-42%, -50%);
}

.venue-node.selected {
    outline: 3px solid #0f172a;
    outline-offset: 2px;
}

.venue-node.selected,
.venue-node:has(.venue-node-action-menu) {
    overflow: visible;
}

.venue-node-stage {
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg, #1e293b) 82%, #ffffff 18%) 0%, var(--venue-node-bg, #1e293b) 100%);
    color: var(--venue-node-fg, #f8fafc);
    isolation: isolate;
}

.venue-node-section {
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg, #bfd6f3) 72%, #ffffff 28%) 0%, var(--venue-node-bg, #bfd6f3) 100%);
    color: var(--venue-node-fg, #0f172a);
    position: relative;
    isolation: isolate;
}

.venue-node-section.is-accessible-section {
    background: linear-gradient(180deg, color-mix(in srgb, #bbdefb 82%, #ffffff 18%) 0%, #bbdefb 100%);
    border: 3px solid #1565c0;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.56),
        0 12px 28px rgba(21, 101, 192, 0.22),
        inset 0 1px 2px rgba(255, 255, 255, 0.48);
    color: #0d47a1;
    min-height: 5rem;
}

.venue-node-stage > .venue-node-title,
.venue-node-stage > .venue-node-subtitle,
.venue-node-area > .venue-node-title,
.venue-node-area > .venue-node-subtitle,
.venue-node-section > .venue-node-title,
.venue-node-section > .venue-node-subtitle,
.venue-node-table > .venue-node-title,
.venue-node-table > .venue-node-subtitle,
.venue-node-floor-zone > .venue-node-title,
.venue-node-floor-zone > .venue-node-subtitle {
    position: absolute;
    z-index: 2;
    left: 1rem;
    margin: 0;
}

.venue-node-stage > .venue-node-toolbar,
.venue-node-area > .venue-node-toolbar,
.venue-node-section > .venue-node-toolbar,
.venue-node-table > .venue-node-toolbar,
.venue-node-floor-zone > .venue-node-toolbar {
    position: absolute;
    top: 0rem;
    right: 0rem;
    width: auto;
    margin: 0;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.venue-node-stage > .venue-node-title,
.venue-node-area > .venue-node-title,
.venue-node-section > .venue-node-title,
.venue-node-table > .venue-node-title,
.venue-node-floor-zone > .venue-node-title {
    top: 0.95rem;
}

.venue-node-stage > .venue-node-subtitle,
.venue-node-area > .venue-node-subtitle,
.venue-node-section > .venue-node-subtitle,
.venue-node-table > .venue-node-subtitle,
.venue-node-floor-zone > .venue-node-subtitle {
    top: 2.5rem;
}

.venue-node-stage > .venue-node-title,
.venue-node-stage > .venue-node-subtitle {
    text-shadow: 0 1px 0 rgba(15, 23, 42, 0.18);
}

.venue-node-area > .venue-node-title,
.venue-node-area > .venue-node-subtitle,
.venue-node-section > .venue-node-title,
.venue-node-table > .venue-node-title,
.venue-node-table > .venue-node-subtitle,
.venue-node-floor-zone > .venue-node-title,
.venue-node-floor-zone > .venue-node-subtitle {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.88);
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    font-weight: 700;
    font-size: 0.85rem;
}

.venue-node-section > .venue-node-subtitle {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
    background: transparent;
    padding: 0.2rem 0.65rem;
    border-radius: 4px;
    border: none;
    font-weight: 500;
    font-size: 0.75rem;
    color: #475569;
}

.venue-node-section-elevated {
    box-shadow:
        0 28px 56px rgba(15, 23, 42, 0.32),
        0 14px 24px rgba(15, 23, 42, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.58);
    transform: translateY(-3px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg, #bfd6f3) 65%, #ffffff 35%) 0%, var(--venue-node-bg, #bfd6f3) 100%) !important;
    perspective: 800px;
}

.venue-node-section-elevated::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 2%;
    height: 0.6rem;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.28) 40%, rgba(15, 23, 42, 0.22) 100%);
    opacity: 0.92;
    pointer-events: none;
    box-shadow:
        0 6px 16px rgba(15, 23, 42, 0.18),
        inset 0 2px 4px rgba(255, 255, 255, 0.32);
}

.venue-node-accessible-badge {
    position: absolute;
    left: 0.75rem;
    bottom: 0.62rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: #1976d2;
    color: #fff;
    box-shadow: 0 8px 18px rgba(25, 118, 210, 0.24);
}

.venue-node-area {
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg, #ffd979) 68%, #ffffff 32%) 0%, var(--venue-node-bg, #ffd979) 100%);
    color: var(--venue-node-fg, #633f00);
    isolation: isolate;
}

.venue-node-floor-zone {
    background: var(--venue-node-bg, #e2e8f0);
    color: var(--venue-node-fg, #334155);
    border: 2px dashed color-mix(in srgb, var(--venue-node-bg, #e2e8f0) 50%, #475569 50%);
    opacity: 0.72;
    isolation: isolate;
}

.venue-node-floor-zone.selected {
    opacity: 1;
    border-style: solid;
}

.venue-node-walkway {
    background:
        linear-gradient(90deg, transparent 0 7%, rgba(255, 255, 255, 0.16) 7% 8%, transparent 8% 92%, rgba(255, 255, 255, 0.16) 92% 93%, transparent 93% 100%),
        repeating-linear-gradient(135deg, color-mix(in srgb, var(--venue-node-bg, #dbeafe) 28%, #ffffff 72%) 0, color-mix(in srgb, var(--venue-node-bg, #dbeafe) 28%, #ffffff 72%) 8px, var(--venue-node-bg, #dbeafe) 8px, var(--venue-node-bg, #dbeafe) 16px);
    color: var(--venue-node-fg, #1e3a8a);
    border: 1px solid color-mix(in srgb, var(--venue-node-bg, #dbeafe) 70%, #0f172a 30%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 10px 20px rgba(30, 64, 175, 0.12);
}

.venue-node-walkway::before {
    content: "";
    position: absolute;
    inset: 16% 42% 16% 42%;
    border-radius: 999px;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0 10px, rgba(255, 255, 255, 0.18) 10px 18px);
    box-shadow: 0 0 0 1px rgba(30, 64, 175, 0.08);
    opacity: 0.9;
    pointer-events: none;
}

.venue-node-walkway::after {
    content: "";
    position: absolute;
    inset: 12% 8%;
    border-top: 1px dashed rgba(30, 64, 175, 0.34);
    border-bottom: 1px dashed rgba(30, 64, 175, 0.34);
    pointer-events: none;
    opacity: 0.78;
}

.venue-node-entrance {
    color: var(--venue-node-fg, #14532d);
}

.venue-node-exit {
    color: var(--venue-node-fg, #7f1d1d);
}

.venue-node-entrance-exit {
    color: var(--venue-node-fg, #064e3b);
}

.venue-node-door {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    padding: 0;
    min-width: 2rem !important;
    width: 2.2rem !important;
    height: 1.8rem !important;
}

.venue-node-door > .venue-node-title,
.venue-node-door > .venue-node-subtitle {
    display: none !important;
}

.venue-node-entrance > .venue-node-title,
.venue-node-exit > .venue-node-title,
.venue-node-entrance-exit > .venue-node-title {
    position: absolute !important;
    bottom: -1.8rem !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    padding: 0.25rem 0.4rem !important;
    border-radius: 4px !important;
    border: 1px solid rgba(15, 23, 42, 0.2) !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: 5rem !important;
    text-align: center !important;
    margin: 0 !important;
}

.venue-node-door::before {
    content: "";
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 20%;
    height: 0.22rem;
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg, #86efac) 72%, #ffffff 28%), color-mix(in srgb, var(--venue-node-bg, #86efac) 72%, #0f172a 28%));
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.08);
}

.venue-door-leaf {
    display: none;
}

.venue-door-swing {
    display: none;
}

.venue-node-support {
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg, #cbd5e1) 65%, #ffffff 35%) 0%, var(--venue-node-bg, #cbd5e1) 100%);
    color: var(--venue-node-fg, #1f2937);
}

.venue-node-table {
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg, #b8ded3) 68%, #ffffff 32%) 0%, var(--venue-node-bg, #b8ded3) 100%);
    color: var(--venue-node-fg, #173b34);
    isolation: isolate;
    position: relative;
}

.venue-node-table.is-round-table {
    border-radius: 999rem;
}

.venue-table-top {
    position: absolute;
    inset: 28% 24%;
    border-radius: 0.55rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-table-top-color, #5e402d) 76%, #ffffff 24%), var(--venue-table-top-color, #5e402d));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 8px 16px rgba(15, 23, 42, 0.18);
    z-index: 1;
}

.venue-node-table.is-round-table .venue-table-top {
    border-radius: 999rem;
}

.venue-node-table-preview {
    position: absolute;
    inset: 0.45rem;
    z-index: 1;
    pointer-events: none;
}

.venue-node-table-seat-dot {
    position: absolute;
    width: clamp(0.44rem, 14%, 0.75rem);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 46%, #ffffff 54%) 0%, var(--venue-seat-color, #607aa0) 100%);
    border: 1px solid rgba(20, 83, 45, 0.18);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.venue-node-title {
    font-family: "Manrope", system-ui, -apple-system, sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.05;
}

.venue-node-subtitle {
    font-size: 0.72rem;
    opacity: 0.86;
}

.venue-node-seat-preview {
    position: absolute;
    inset: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    z-index: 1;
    overflow: hidden;
    opacity: 0.88;
}

.venue-node-seat-preview-row {
    display: grid;
    gap: 0.24rem;
    align-items: stretch;
    flex: 1 1 0;
    min-height: 0;
    transform: translateY(calc(var(--venue-row-lift, 0rem) * -1)) scaleY(var(--venue-row-scale, 1));
    transform-origin: center bottom;
    transition: box-shadow 120ms ease;
    grid-auto-flow: dense;
}

.venue-node-section-elevated .venue-node-seat-preview-row {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(15, 23, 42, 0.04) 100%);
    border-radius: 0.4rem;
    padding: 0.15rem 0.1rem;
    margin-bottom: 0.3rem;
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.venue-node-seat-dot {
    border-radius: 0.66rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 48%, #ffffff 52%) 0%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 68%, #ffffff 32%) 50%, var(--venue-seat-color, #607aa0) 100%);
    border: 1.5px solid rgba(77, 103, 138, 0.36);
    box-shadow:
        inset 0 -2px 3px rgba(15, 23, 42, 0.14),
        inset 0 1px 2px rgba(255, 255, 255, 0.4),
        0 3px 6px rgba(15, 23, 42, 0.18);
}

.venue-node-seat-dot.bleacher {
    border-radius: 0.2rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 56%, #ffffff 44%) 0%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 70%, #ffffff 30%) 50%, var(--venue-seat-color, #607aa0) 100%);
}

.venue-node-seat-dot.vip {
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #d6a42a) 48%, #ffffff 52%) 0%, color-mix(in srgb, var(--venue-seat-color, #d6a42a) 68%, #ffffff 32%) 50%, var(--venue-seat-color, #d6a42a) 100%);
    border-color: rgba(214, 164, 42, 0.42);
}

.venue-node-seat-dot.wheelchair {
    background: #1976d2;
    border-color: rgba(255, 255, 255, 0.68);
    position: relative;
}

.venue-node-seat-dot.wheelchair::after {
    content: "";
    position: absolute;
    inset: 28%;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 999px;
}

.venue-node-seat-dot.companion {
    background: linear-gradient(180deg, color-mix(in srgb, #4f9cec 52%, #ffffff 48%) 0%, #4f9cec 100%);
    border-color: rgba(79, 156, 236, 0.3);
}

.venue-builder-layer-list {
    display: grid;
    gap: 0.55rem;
}

.venue-layer-item {
    width: 100%;
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    background: #fff;
    padding: 0.8rem 0.9rem;
    display: grid;
    gap: 0.1rem;
    text-align: left;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.venue-layer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.venue-layer-item:hover,
.venue-layer-item.selected {
    border-color: #5b8cff;
    transform: translateY(-1px);
    box-shadow: 0 12px 18px #7c3aed14;
}

.venue-layer-kind {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
}

.venue-layer-name {
    font-weight: 700;
    color: #0f172a;
}

.venue-layer-meta {
    font-size: 0.76rem;
    color: #475569;
}

.venue-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0 !important;
    border-radius: 999px;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #466487;
    cursor: grab;
    flex: 0 0 auto;
    touch-action: none;
    user-select: none;
}

.venue-drag-handle:hover,
.venue-drag-handle:active,
.venue-drag-handle:focus,
.venue-drag-handle:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

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

.venue-node-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    color: #334155;
    cursor: pointer;
    user-select: none;
}

.venue-node-stage .venue-node-menu-trigger {
    color: #e2e8f0;
}

.venue-node-menu-trigger:hover,
.venue-node-menu-trigger:focus-visible {
    background: rgba(15, 23, 42, 0.1);
    outline: 0;
}

.venue-node-stage .venue-node-menu-trigger:hover,
.venue-node-stage .venue-node-menu-trigger:focus-visible {
    background: rgba(255, 255, 255, 0.14);
}

.venue-node-action-menu {
    position: absolute;
    top: 2.15rem;
    right: 0.25rem;
    z-index: 20;
    min-width: 14rem;
    display: grid;
    gap: 0.15rem;
    padding: 0.35rem;
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.2);
    color: #0f172a;
}

.venue-node-action-menu-anchor-left {
    left: 0.25rem;
    right: auto;
}

.venue-node-action-menu-anchor-right {
    right: 0.25rem;
    left: auto;
}

.venue-node-action-menu > span {
    display: flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.45rem;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.venue-node-action-menu > span:hover,
.venue-node-action-menu > span:focus-visible {
    background: #f5f3ff;
    outline: 0;
}

.venue-node-action-menu > span.is-danger {
    color: #b91c1c;
}

.venue-node-action-menu > span.is-disabled {
    color: #94a3b8;
    cursor: not-allowed;
    pointer-events: none;
}

.venue-node-action-divider {
    min-height: 0 !important;
    height: 1px;
    padding: 0 !important;
    margin: 0.2rem 0;
    background: #e2e8f0;
    cursor: default !important;
}

.venue-node-action-field {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.45rem;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: default;
}

.venue-node-action-field:hover {
    background: #f8fbff;
}

.venue-node-action-color {
    grid-template-columns: 4.2rem 2.4rem;
    justify-content: space-between;
}

.venue-color-favorite-button {
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #f59e0b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 auto;
}

.venue-color-favorite-button:hover,
.venue-color-favorite-button:focus-visible {
    background: #fff7e1;
    outline: 0;
}

.venue-builder-palette-panel {
    display: grid;
    gap: 0.45rem;
    padding: 0.5rem 0.55rem 0.2rem;
    border: 1px solid #dbe4f0;
    border-radius: 12px;
    background: #f8fbff;
}

.venue-builder-palette-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: #334155;
}

.venue-builder-palette-swatches,
.venue-node-action-palette-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.venue-builder-palette-swatch,
.venue-node-action-palette-swatch {
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 999px;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
    cursor: pointer;
}

.venue-builder-palette-swatch:hover,
.venue-builder-palette-swatch:focus-visible,
.venue-node-action-palette-swatch:hover,
.venue-node-action-palette-swatch:focus-visible {
    outline: 0;
    transform: translateY(-1px);
}

.venue-builder-palette-empty,
.venue-node-action-palette-empty {
    font-size: 0.72rem;
    color: #64748b;
    font-style: italic;
}

.venue-node-action-palette-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.15rem 0.5rem 0;
}

.venue-node-action-palette-toggle {
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    padding: 0.25rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 800;
}

.venue-node-action-palette-toggle:hover,
.venue-node-action-palette-toggle:focus-visible {
    background: #f5f3ff;
    outline: 0;
}

.venue-node-action-palette-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
}

.venue-menu-select {
    min-width: 0;
    width: 100%;
    height: 1.8rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0 0.45rem;
}

.venue-drag-source {
    opacity: 0.24;
}

.venue-drop-footprint {
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(var(--venue-drop-columns), minmax(0, 1fr));
    grid-template-rows: repeat(var(--venue-drop-rows), minmax(0, 1fr));
    pointer-events: none;
}

.venue-drop-footprint-cell {
    border: 1px solid #7c3aed;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.2);
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.18);
}

.venue-drag-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    pointer-events: none;
    opacity: 0.38;
    transform-origin: top left;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
    filter: saturate(1.04);
}

.venue-builder-category-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.venue-builder-inspector-panel {
    background: rgba(255, 255, 255, 0.97);
}

.venue-builder-quick-size {
    display: grid;
    gap: 0.5rem;
}

.venue-builder-quick-size-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    background: #f8fbff;
}

.venue-builder-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.venue-builder-toggle-card {
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem;
    text-align: left;
}

.venue-builder-toggle-card strong,
.venue-builder-toggle-card small {
    display: block;
}

.venue-builder-toggle-card small {
    margin-top: 0.08rem;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.25;
}

.venue-builder-toggle-card.selected {
    border-color: #1976d2;
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px rgba(25, 118, 210, 0.22);
}

.venue-builder-toggle-card:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.venue-builder-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #0f172a;
}

.venue-builder-toggle-card.selected .venue-builder-toggle-icon,
.venue-builder-accessible-card.selected .venue-builder-toggle-icon {
    background: #1976d2;
    color: #fff;
}

.venue-category-chip {
    border: 1px solid #cbd8ea;
    background: #fff;
    border-radius: 999px;
    padding: 0.5rem 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: #0f172a;
}

.venue-category-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 1.45rem;
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 42%, #ffffff 58%), var(--venue-seat-color, #607aa0));
    color: #0f172a;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.mud-table-root .mud-table-head .mud-table-cell {
    font-family: "Manrope", system-ui, -apple-system, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.mud-input-control {
    margin-top: 0;
}

.mud-input-outlined {
    border-radius: 8px !important;
}

.public-event-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem 0.6rem 2.5rem;
}

.public-event-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.public-event-eyebrow,
.public-event-eyebrow a {
    margin: 0 0 0.3rem;
    color: #7c3aed;
    font-weight: 700;
    text-decoration: none;
}

.public-event-title {
    margin: 0;
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    line-height: 0.98;
}

.public-event-description,
.public-event-meta {
    margin: 0.3rem 0 0;
    color: #475569;
}

.public-event-badges {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.public-event-badge {
    border-radius: 999px;
    border: 1px solid #c7d7ef;
    background: rgba(255, 255, 255, 0.86);
    padding: 0.55rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 800;
    color: #0f172a;
}

.public-event-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.58fr);
    gap: 1.2rem;
    align-items: start;
}

.public-event-canvas-panel,
.public-event-summary-panel,
.sales-closed-message {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid #dbe4f0;
    border-radius: 18px;
    box-shadow: 0 18px 40px #0f172a12;
}

.public-event-canvas-panel {
    padding: 1.1rem;
}

.public-event-summary-panel,
.sales-closed-message {
    padding: 1rem 1.1rem;
}

.public-event-stagebar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.95rem;
}

.public-event-section-title {
    margin: 0;
    font-size: 1.2rem;
}

.public-event-section-subtitle {
    margin: 0.35rem 0 0;
    color: #64748b;
}

.public-event-canvas-wrap {
    overflow: auto;
    display: grid;
    place-items: center;
    border-radius: 26px;
    border: 1px solid #d9e4f4;
    background:
        radial-gradient(circle at top, #f7fbff 0%, #edf4fb 50%, #dbe7f3 100%);
    padding: 1.4rem;
    min-height: clamp(28rem, 68vh, 48rem);
}

.public-event-canvas {
    --venue-base-cell-size: clamp(28px, 2vw, 34px);
    min-width: calc(var(--venue-builder-columns) * var(--venue-cell-size));
    min-height: calc(var(--venue-builder-rows) * var(--venue-cell-size));
    margin: auto;
}

.public-venue-node {
    cursor: default;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
}

.public-venue-section {
    padding: 0;
    overflow: visible;
}

.public-venue-section-seat-surface {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    position: absolute;
    inset: 1rem 0.72rem 0.72rem;
    width: 100%;
    box-sizing: border-box;
}

.public-venue-section-seat-row {
    display: grid;
    grid-template-columns: repeat(var(--venue-seat-columns, auto-fit), minmax(0, 1fr));
    gap: 0.24rem;
    align-items: center;
    justify-items: center;
    transform: translateY(calc(var(--venue-row-lift, 0rem) * -1)) scaleY(var(--venue-row-scale, 1));
    transform-origin: center bottom;
}

.public-venue-section::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(84, 116, 161, 0.34);
    border-radius: inherit;
    pointer-events: none;
}

.public-venue-section-label {
    position: absolute;
    top: 0rem;
    left: 0.55rem;
    z-index: 3;
    max-width: calc(100% - 1.1rem);
    pointer-events: none;
}

.public-venue-section-label-text {
    display: inline-flex;
    align-items: center;
    min-height: 1rem;
    max-width: 100%;
    padding: 0.05rem 0.35rem;
    border: 1px solid rgba(84, 116, 161, 0.32);
    border-radius: 999px;
    background: rgba(232, 241, 252, 0.92);
    color: rgba(15, 23, 42, 0.8);
    font-family: "Manrope", system-ui, -apple-system, sans-serif;
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.public-venue-area {
    box-shadow: 0 10px 24px rgba(99, 63, 0, 0.14);
}

.public-venue-table {
    padding: 0;
    overflow: visible;
}

.public-venue-table .venue-node-title,
.public-venue-table .venue-node-subtitle {
    pointer-events: none;
}

.public-venue-table-seat-surface {
    inset: 0.35rem;
    z-index: 3;
    pointer-events: none;
    display: block;
}

.public-venue-table-seat-surface .public-venue-seat {
    position: absolute;
    width: clamp(0.95rem, 18%, 1.35rem);
    height: auto;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    min-width: 0.7rem;
    min-height: 0.7rem;
}

.public-venue-table-seat-surface .public-venue-seat:hover:not(:disabled) {
    transform: translate(-50%, calc(-50% - 1px)) scale(1.03);
}

.public-venue-seat-surface {
    position: absolute;
    inset: 1.3rem 0.72rem 0.72rem;
    display: grid;
    gap: 0.24rem;
    z-index: 1;
    align-items: stretch;
}

.public-venue-seat {
    position: relative;
    z-index: 2;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    min-width: 0;
    min-height: 0;
    background: transparent;
    cursor: pointer;
    transition: transform 120ms ease, opacity 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.public-venue-seat:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.03);
    filter: saturate(1.05);
}

.public-venue-seat:disabled {
    cursor: not-allowed;
}

.public-venue-seat-glyph,
.public-venue-seat-glyph::before,
.public-venue-seat-glyph::after {
    display: block;
}

.public-venue-seat-glyph {
    position: relative;
    width: 100%;
    height: 100%;
}

.public-venue-seat-glyph::before,
.public-venue-seat-glyph::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.public-venue-seat.is-theater .public-venue-seat-glyph::before {
    top: 6%;
    width: 52%;
    height: 50%;
    border-radius: 0.42rem 0.42rem 0.08rem 0.08rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 54%, #ffffff 46%) 0%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 76%, #ffffff 24%) 45%, var(--venue-seat-color, #607aa0) 100%);
    border: 1.5px solid rgba(15, 23, 42, 0.26);
    box-shadow:
        -0.52rem 0.2rem 0 -0.2rem rgba(96, 122, 160, 0.98),
        0.52rem 0.2rem 0 -0.2rem rgba(96, 122, 160, 0.98),
        inset 0 -4px 6px rgba(15, 23, 42, 0.18),
        inset 0 2px 4px rgba(255, 255, 255, 0.32),
        0 8px 16px rgba(15, 23, 42, 0.22);
}

.public-venue-seat.is-theater .public-venue-seat-glyph::after {
    bottom: 8%;
    width: 72%;
    height: 32%;
    border-radius: 0.08rem 0.08rem 0.64rem 0.64rem;
    background: linear-gradient(180deg, var(--venue-seat-color, #607aa0) 0%, var(--venue-seat-color, #607aa0) 40%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 88%, #0f172a 12%) 100%);
    border: 1.5px solid rgba(15, 23, 42, 0.28);
    box-shadow:
        inset 0 4px 6px rgba(255, 255, 255, 0.28),
        inset 0 -2px 4px rgba(15, 23, 42, 0.16),
        0 6px 12px rgba(15, 23, 42, 0.18);
}

.public-venue-seat.is-bleacher .public-venue-seat-glyph::before {
    top: 14%;
    width: 76%;
    height: 22%;
    border-radius: 0.24rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 60%, #ffffff 40%) 0%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 72%, #ffffff 28%) 50%, var(--venue-seat-color, #607aa0) 100%);
    border: 1.5px solid rgba(15, 23, 42, 0.2);
    box-shadow:
        inset 0 -3px 5px rgba(15, 23, 42, 0.12),
        inset 0 2px 3px rgba(255, 255, 255, 0.28),
        0 6px 12px rgba(15, 23, 42, 0.16);
}

.public-venue-seat.is-bleacher .public-venue-seat-glyph::after {
    top: 42%;
    width: 76%;
    height: 22%;
    border-radius: 0.24rem;
    background: linear-gradient(180deg, var(--venue-seat-color, #607aa0) 0%, var(--venue-seat-color, #607aa0) 50%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 88%, #0f172a 12%) 100%);
    border: 1.5px solid rgba(15, 23, 42, 0.22);
    box-shadow:
        inset 0 3px 4px rgba(255, 255, 255, 0.24),
        inset 0 -2px 3px rgba(15, 23, 42, 0.12),
        0 5px 10px rgba(15, 23, 42, 0.14);
}

.public-venue-seat.is-general-admission .public-venue-seat-glyph::before,
.public-venue-seat.is-general-admission .public-venue-seat-glyph::after {
    width: 76%;
    height: 36%;
    border-radius: 0.32rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 62%, #ffffff 38%) 0%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 74%, #ffffff 26%) 50%, var(--venue-seat-color, #607aa0) 100%);
    border: 1.5px solid rgba(15, 23, 42, 0.2);
}

.public-venue-seat.is-general-admission .public-venue-seat-glyph::before {
    top: 10%;
    box-shadow:
        inset 0 -3px 5px rgba(15, 23, 42, 0.12),
        inset 0 2px 3px rgba(255, 255, 255, 0.3),
        0 6px 12px rgba(15, 23, 42, 0.16);
}

.public-venue-seat.is-general-admission .public-venue-seat-glyph::after {
    bottom: 10%;
    box-shadow:
        inset 0 3px 4px rgba(255, 255, 255, 0.26),
        inset 0 -2px 3px rgba(15, 23, 42, 0.12),
        0 5px 10px rgba(15, 23, 42, 0.14);
}

.public-venue-seat.is-standing .public-venue-seat-glyph::before {
    top: 8%;
    width: 38%;
    height: 72%;
    border-radius: 0.66rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 58%, #ffffff 42%) 0%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 72%, #ffffff 28%) 50%, var(--venue-seat-color, #607aa0) 100%);
    border: 1.5px solid rgba(15, 23, 42, 0.22);
    box-shadow:
        inset 0 -4px 6px rgba(15, 23, 42, 0.12),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        0 8px 16px rgba(15, 23, 42, 0.2);
}

.public-venue-seat.is-vip .public-venue-seat-glyph::before {
    top: 6%;
    width: 52%;
    height: 50%;
    border-radius: 0.42rem 0.42rem 0.08rem 0.08rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #d6a42a) 52%, #ffffff 48%) 0%, color-mix(in srgb, var(--venue-seat-color, #d6a42a) 74%, #ffffff 26%) 45%, var(--venue-seat-color, #d6a42a) 100%);
    border: 1.5px solid rgba(15, 23, 42, 0.28);
    box-shadow:
        -0.52rem 0.2rem 0 -0.2rem rgba(214, 164, 42, 0.98),
        0.52rem 0.2rem 0 -0.2rem rgba(214, 164, 42, 0.98),
        inset 0 -4px 6px rgba(15, 23, 42, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        0 10px 18px rgba(214, 164, 42, 0.26);
}

.public-venue-seat.is-vip .public-venue-seat-glyph::after {
    bottom: 8%;
    width: 72%;
    height: 32%;
    border-radius: 0.08rem 0.08rem 0.64rem 0.64rem;
    background: linear-gradient(180deg, var(--venue-seat-color, #d6a42a) 0%, var(--venue-seat-color, #d6a42a) 40%, color-mix(in srgb, var(--venue-seat-color, #d6a42a) 86%, #0f172a 14%) 100%);
    border: 1.5px solid rgba(15, 23, 42, 0.28);
    box-shadow:
        inset 0 4px 6px rgba(255, 255, 255, 0.36),
        inset 0 -2px 4px rgba(15, 23, 42, 0.18),
        0 8px 14px rgba(214, 164, 42, 0.22);
}

.public-venue-seat.is-wheelchair .public-venue-seat-glyph::before {
    top: 10%;
    width: 50%;
    height: 52%;
    border: 4px solid var(--venue-seat-color, #1976d2);
    border-top-color: transparent;
    border-radius: 999px;
    background: transparent;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.32),
        0 6px 14px rgba(25, 118, 210, 0.28);
}

.public-venue-seat.is-wheelchair .public-venue-seat-glyph::after {
    left: 55%;
    top: 14%;
    width: 20%;
    height: 66%;
    border-radius: 0.26rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #1976d2) 60%, #ffffff 40%) 0%, var(--venue-seat-color, #1976d2) 100%);
    transform: rotate(-16deg);
    transform-origin: center top;
    box-shadow:
        -0.64rem 0.24rem 0 -0.26rem var(--venue-seat-color, #1976d2),
        0.36rem 0.76rem 0 -0.16rem var(--venue-seat-color, #1976d2),
        inset 0 2px 3px rgba(255, 255, 255, 0.4),
        inset 0 -2px 3px rgba(15, 23, 42, 0.12),
        0 4px 8px rgba(25, 118, 210, 0.24);
}

.public-venue-seat.is-companion .public-venue-seat-glyph::before {
    top: 6%;
    width: 54%;
    height: 52%;
    border-radius: 0.42rem 0.42rem 0.08rem 0.08rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #4f9cec) 52%, #ffffff 48%) 0%, color-mix(in srgb, var(--venue-seat-color, #4f9cec) 74%, #ffffff 26%) 45%, var(--venue-seat-color, #4f9cec) 100%);
    border: 1.5px solid rgba(15, 23, 42, 0.22);
    box-shadow:
        -0.45rem 0.2rem 0 -0.2rem rgba(79, 156, 236, 0.88),
        0.45rem 0.2rem 0 -0.2rem rgba(79, 156, 236, 0.88),
        inset 0 -4px 6px rgba(15, 23, 42, 0.14),
        inset 0 2px 4px rgba(255, 255, 255, 0.34),
        0 8px 16px rgba(79, 156, 236, 0.24);
}

.public-venue-seat.is-companion .public-venue-seat-glyph::after {
    bottom: 8%;
    width: 64%;
    height: 30%;
    border-radius: 0.08rem 0.08rem 0.6rem 0.6rem;
    background: linear-gradient(180deg, var(--venue-seat-color, #4f9cec) 0%, var(--venue-seat-color, #4f9cec) 40%, color-mix(in srgb, var(--venue-seat-color, #4f9cec) 88%, #0f172a 12%) 100%);
    border: 1.5px solid rgba(15, 23, 42, 0.24);
    box-shadow:
        inset 0 4px 6px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(15, 23, 42, 0.14),
        0 6px 12px rgba(79, 156, 236, 0.2);
}

.public-venue-seat.selected {
    filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.22));
}

.public-venue-seat.selected .public-venue-seat-glyph::before,
.public-venue-seat.selected .public-venue-seat-glyph::after {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.96) 0%, rgba(30, 64, 175, 0.88) 100%);
}

.public-venue-seat.held {
    opacity: 1;
}

.public-venue-seat.held .public-venue-seat-glyph::before,
.public-venue-seat.held .public-venue-seat-glyph::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(226, 232, 240, 0.94) 100%);
    box-shadow:
        0 0 0 1px rgba(59, 130, 246, 0.22),
        0 8px 14px rgba(15, 23, 42, 0.08);
}

.public-venue-seat.sold {
    opacity: 0.62;
}

.public-venue-seat.sold .public-venue-seat-glyph::before,
.public-venue-seat.sold .public-venue-seat-glyph::after {
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.92) 0%, rgba(100, 116, 139, 0.84) 100%);
}

.public-venue-seat.unavailable {
    opacity: 0.3;
}

.public-venue-seat.unavailable .public-venue-seat-glyph::before,
.public-venue-seat.unavailable .public-venue-seat-glyph::after {
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.52) 0%, rgba(100, 116, 139, 0.4) 100%);
}

.summary-panel h2 {
    margin-top: 0;
}

.public-hold-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.18);
    color: #3b0764;
    font-weight: 700;
}

.public-selected-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.9rem;
    display: grid;
    gap: 0.45rem;
}

.public-selected-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid #e6eef8;
}

.summary-total {
    font-weight: 800;
    color: #0f172a;
}

.public-zoom-button,
.public-zoom-reset {
    border: 1px solid #d1ddef;
    background: #fff;
    color: #0f172a;
    border-radius: 999px;
    padding: 0.4rem 0.7rem;
    font: inherit;
    font-weight: 700;
}

.public-zoom-button {
    min-width: 2.3rem;
}

.public-zoom-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.2rem;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    border: 1px solid #bfd2ef;
    background: #fff;
    font-weight: 800;
    color: #7c3aed;
}

.checkout-button {
    width: 100%;
    border: 0;
    border-radius: 14px;
    padding: 0.95rem 1rem;
    background: linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    font-family: "Manrope", system-ui, -apple-system, sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    box-shadow: 0 16px 28px #7c3aed24;
}

.checkout-button:disabled {
    opacity: 0.52;
    cursor: not-allowed;
    box-shadow: none;
}

.field {
    display: grid;
    gap: 0.35rem;
    max-width: 220px;
}

.text-input {
    width: 100%;
    border: 1px solid #c9d7eb;
    border-radius: 12px;
    padding: 0.8rem 0.9rem;
    font: inherit;
    color: #0f172a;
    background: #fff;
}

.text-input:focus {
    outline: 0;
    border-color: #93b4ff;
    box-shadow: 0 0 0 0.22rem #7c3aed22;
}

.error-message {
    color: #dc2626;
}

.mobile-menu-button {
    display: none;
}

.nav-links {
    display: flex;
}

.mobile-nav-menu {
    display: none;
    position: absolute;
    top: 3.5rem;
    left: 0;
    right: 0;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-divider);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.mobile-nav-items {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    color: inherit;
    text-decoration: none;
    transition: background-color 150ms ease;
    border: none;
    font-size: 0.95rem;
    cursor: pointer;
    background: transparent;
}

.mobile-nav-link:hover {
    background-color: rgba(37, 99, 235, 0.08);
}

.mobile-nav-link:active {
    background-color: rgba(37, 99, 235, 0.12);
}

.mobile-nav-divider {
    height: 1px;
    background-color: var(--mud-palette-divider);
    margin: 0.25rem 0;
}

@media (max-width: 920px) {
    .account-grid {
        grid-template-columns: 1fr;
    }

    .admin-form-panel {
        max-width: 100%;
        padding: 1rem;
    }

    .venue-builder-shell {
        grid-template-columns: 1fr;
    }

    .venue-builder-stagebar {
        flex-direction: column;
        align-items: flex-start;
    }

    .venue-builder-canvas {
        width: max-content;
    }

    .venue-builder-canvas-wrap {
        width: 100%;
    }

    .public-event-hero,
    .public-event-layout {
        grid-template-columns: 1fr;
        display: grid;
    }

    .public-event-badges {
        justify-content: flex-start;
    }

    .public-event-canvas-wrap {
        min-height: clamp(22rem, 54vh, 32rem);
        padding: 0.8rem;
    }

    .public-event-canvas {
        --venue-base-cell-size: clamp(20px, 4vw, 28px);
    }

    .public-venue-section-seat-surface {
        gap: 0.16rem;
        inset: 0.8rem 0.5rem 0.5rem;
    }

    .public-venue-section-seat-row {
        gap: 0.16rem;
    }

    .nav-links {
        display: none !important;
    }

    .auth-button {
        display: none !important;
    }

    .mobile-menu-button {
        display: inline-flex !important;
    }

    .mobile-nav-menu {
        display: block !important;
    }
}

@media (max-width: 480px) {
    .public-event-page {
        padding: 1rem 0.4rem 1.5rem;
    }

    .public-event-hero {
        flex-direction: column;
        gap: 0.75rem;
    }

    .public-event-title {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
    }

    .public-event-canvas-wrap {
        min-height: clamp(18rem, 50vh, 24rem);
        padding: 0.6rem;
    }

    .public-event-canvas {
        --venue-base-cell-size: clamp(16px, 3vw, 22px);
    }

    .public-event-summary-panel {
        padding: 0.8rem;
    }
}

/* ── Subscribe widget ──────────────────────────────────── */
.subscribe-widget {
    background: var(--tr-card);
    border: 1px solid var(--tr-line);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    max-width: 560px;
}

.subscribe-widget__heading {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.875rem;
    font-size: 1rem;
    color: var(--tr-ink);
}

.subscribe-widget__sub {
    font-size: 0.875rem;
    color: var(--tr-muted);
    font-weight: 400;
}

.subscribe-widget__form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.subscribe-widget__input {
    flex: 1;
    min-width: 200px;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--tr-line);
    border-radius: 6px;
    font-size: 0.9375rem;
    outline: none;
    background: #f8fafc;
}

.subscribe-widget__input:focus {
    border-color: var(--tr-primary);
    background: #fff;
}

.subscribe-widget__btn {
    padding: 0.5rem 1.25rem;
    background: var(--tr-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.subscribe-widget__btn:hover:not(:disabled) {
    background: var(--tr-primary-dark);
}

.subscribe-widget__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.subscribe-widget__error {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: #dc2626;
}

.subscribe-widget--success {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: #16a34a;
}

.subscribe-widget__check {
    font-size: 1.25rem;
}