/* Arena CMS styles — the maintained source for panel chrome, typography,
   authentication and custom Filament utilities. Edit this file directly; the panel
   cache-busts it by modification time. Filament's generated CSS is upstream. */

/* Compact headings and form text; keep the root size and preview scale intact. */
.fi-header-heading { font-size: 1.5rem; line-height: 2rem; }
.fi-header-subheading { font-size: .875rem; line-height: 1.5rem; }
.fi-section-header-heading { font-size: .9375rem; line-height: 1.5rem; }
.fi-main :is(.fi-input, .fi-select-input) {
    font-size: .875rem;
    line-height: 1.5rem;
}

/* Panel chrome */
.arena-brand { display: flex; align-items: center; gap: .5rem; }
.arena-brand img { height: 2rem; width: auto; max-width: 200px; }
.arena-brand-name { font-size: 1.5rem; font-weight: 700; }
.arena-brand .fi-logo-light { display: block; }
.arena-brand .fi-logo-dark { display: none; }
html.dark .arena-brand .fi-logo-light { display: none; }
html.dark .arena-brand .fi-logo-dark { display: block; }

/* Override primary palette in dark mode with a darker-bg-safe variant.
   Filament emits the light-mode palette as oklch() via its asset pipeline,
   but our hand-written override needs a directly-usable CSS color value
   (hex) since these vars are consumed as `color: var(--primary-N)`. */
html.dark {
    --primary-400: var(--arena-panel-dark-accent);
    --primary-500: var(--arena-panel-dark-accent);
    --primary-600: var(--arena-panel-dark-accent);
    --primary-700: var(--arena-panel-dark-accent);
}
/* Primary button: text color and hover derived from the per-mode accent. */
.fi-btn.fi-color-primary:not(.fi-btn-outlined),
.fi-btn.fi-color-primary:not(.fi-btn-outlined) .fi-btn-icon,
.fi-btn.fi-color-primary:not(.fi-btn-outlined) .fi-btn-label {
    color: var(--arena-panel-accent-text) !important;
}
html.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined),
html.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined) .fi-btn-icon,
html.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined) .fi-btn-label {
    color: var(--arena-panel-dark-accent-text) !important;
}
.fi-btn.fi-color-primary:not(.fi-btn-outlined):hover {
    background-color: var(--arena-panel-accent-hover) !important;
}
html.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined):hover {
    background-color: var(--arena-panel-dark-accent-hover) !important;
}
.fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}
.fi-sidebar-nav-groups {
    row-gap: 0.5rem;
}
.fi-sidebar-item-btn,
.fi-sidebar-group-btn {
    min-height: 2.75rem;
}
.fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-sidebar-group-label {
    color: var(--arena-panel-accent);
}
html.dark .fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-sidebar-group-label,
html.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label,
html.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: color-mix(in srgb, var(--arena-panel-dark-accent) 55%, white);
}
.fi-sidebar-item-btn:focus-visible,
.fi-sidebar-group-collapse-btn:focus-visible {
    outline: 2px solid var(--arena-panel-accent);
    outline-offset: 2px;
}
html.dark .fi-sidebar-item-btn:focus-visible,
html.dark .fi-sidebar-group-collapse-btn:focus-visible {
    outline-color: color-mix(in srgb, var(--arena-panel-dark-accent) 55%, white);
}

/* Shared login and password recovery appearance. */
/* Light defaults */
.arena-auth-page {
    --arena-page-bg: #F5F5F7;
    --arena-card-bg: #FFFFFF;
    --arena-input-bg: #FFFFFF;
    --arena-stripe: rgba(var(--arena-auth-accent-rgb), 0.06);
    --arena-border: rgba(var(--arena-auth-accent-rgb), 0.25);
    --arena-border-strong: rgba(var(--arena-auth-accent-rgb), 0.45);
    --arena-text-high: #0F0F12;
    --arena-text-mid: #6B6B76;
    --arena-accent: var(--arena-auth-accent);
    --arena-card-shadow: 0 12px 32px rgba(15, 15, 18, 0.08), 0 0 0 1px rgba(var(--arena-auth-accent-rgb), 0.06);
    --arena-google-bg: #FFFFFF;
    --arena-google-bg-hover: #F0EEF7;
}

/* Dark overrides */
html.dark .arena-auth-page {
    --arena-page-bg: #0F0F12;
    --arena-card-bg: #1F1F24;
    --arena-input-bg: #2A2A30;
    --arena-stripe: rgba(var(--arena-auth-accent-rgb), 0.06);
    --arena-border: rgba(var(--arena-auth-accent-rgb), 0.30);
    --arena-border-strong: rgba(var(--arena-auth-accent-rgb), 0.50);
    --arena-text-high: #F5F5F7;
    --arena-text-mid: #B7B7C0;
    --arena-card-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--arena-auth-accent-rgb), 0.08);
    --arena-google-bg: #2A2A30;
    --arena-google-bg-hover: #35353d;
}

.arena-auth-page .fi-simple-layout {
    background-color: var(--arena-page-bg) !important;
    min-height: 100vh !important;
    position: relative;
    transition: background-color 0.2s ease;
}
.arena-auth-page .fi-simple-layout::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 40px, var(--arena-stripe) 40px, var(--arena-stripe) 42px);
    pointer-events: none;
    z-index: 0;
}
.arena-auth-page .fi-simple-layout > * { position: relative; z-index: 1; }
.arena-auth-page .fi-simple-main {
    background-color: var(--arena-card-bg) !important;
    border: 1px solid var(--arena-border) !important;
    border-radius: 12px !important;
    max-width: 420px !important;
    width: 100% !important;
    box-shadow: var(--arena-card-shadow) !important;
    --tw-shadow: none !important;
    --tw-ring-shadow: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.arena-auth-page .fi-simple-header { text-align: center; padding-bottom: 0 !important; margin-bottom: 1.5rem !important; }
.arena-auth-page .fi-simple-header .fi-logo { height: auto; }
.arena-auth-page .fi-simple-header .arena-brand img { height: 40px; }
.arena-auth-page .fi-simple-header-heading { font-size: 1.125rem; line-height: 1.5rem; color: var(--arena-text-high); }
.arena-login-page .fi-logo { display: none !important; }
.arena-auth-page .arena-login-logo-wrap { display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.arena-auth-page .arena-login-logo { height: 40px; width: auto; }
.arena-auth-page .arena-login-logo--light { display: block; }
.arena-auth-page .arena-login-logo--dark { display: none; }
html.dark .arena-auth-page .arena-login-logo--light { display: none; }
html.dark .arena-auth-page .arena-login-logo--dark { display: block; }
.arena-login-page .fi-simple-header-heading {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--arena-text-mid) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.arena-auth-page .fi-input {
    background-color: var(--arena-input-bg) !important;
    border-color: var(--arena-border) !important;
    color: var(--arena-text-high) !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: 6px !important;
}
.arena-auth-page .fi-input:focus, .arena-auth-page .fi-input:focus-within {
    border-color: var(--arena-accent) !important;
    box-shadow: 0 0 0 2px rgba(var(--arena-auth-accent-rgb), 0.25) !important;
    outline: none !important;
}
.arena-auth-page .fi-input-wrp {
    background-color: var(--arena-input-bg) !important;
    border-color: var(--arena-border) !important;
    border-radius: 6px !important;
    --tw-ring-color: rgba(var(--arena-auth-accent-rgb), 0.30) !important;
}
.arena-auth-page .fi-input-wrp:focus-within {
    border-color: var(--arena-accent) !important;
    box-shadow: 0 0 0 2px rgba(var(--arena-auth-accent-rgb), 0.25) !important;
}
.arena-auth-page .fi-input-wrp-suffix { border-color: var(--arena-border) !important; }
.arena-auth-page .fi-icon-btn { color: var(--arena-text-mid) !important; }
.arena-auth-page .fi-icon-btn:hover { color: var(--arena-text-high) !important; }
.arena-auth-page .arena-oauth-wrapper { margin-top: 4px; }
.arena-auth-page .arena-divider { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.arena-auth-page .arena-divider-line { flex: 1; height: 1px; background-color: var(--arena-border); }
.arena-auth-page .arena-divider-text { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400; color: var(--arena-text-mid); white-space: nowrap; }
.arena-auth-page .arena-google-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; background-color: var(--arena-google-bg); color: var(--arena-text-high); text-decoration: none;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500;
    padding: 11px 20px; border-radius: 6px; border: 1px solid var(--arena-border);
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; cursor: pointer;
}
.arena-auth-page .arena-google-btn:hover { background-color: var(--arena-google-bg-hover); border-color: var(--arena-border-strong); transform: translateY(-1px); }
.arena-auth-page .arena-google-btn:active { transform: translateY(0); }
.arena-auth-page .arena-google-logo { width: 18px; height: 18px; flex-shrink: 0; }


/* Standalone organization/plan registration: no Bootstrap or dashboard bundle. */
.arena-registration {
    margin: 0;
    background: #fafafa;
    color: #08192b;
    font: 400 1rem/1.6 Inter, Arial, sans-serif;
}
.arena-registration *, .arena-registration *::before, .arena-registration *::after { box-sizing: border-box; }
.arena-registration :is(input, button, select) { font: inherit; }
.arena-registration button, .arena-registration select { cursor: pointer; }
.arena-registration :focus-visible { outline: 2px solid #7d2dff; outline-offset: 3px; }
.arena-registration .language-selector-auth { display: flex; justify-content: flex-end; padding: 1.5rem 2rem 0; }
.arena-registration .language-selector-auth select { padding: .5rem .75rem; border: 1px solid #e1e1e1; border-radius: .5rem; background: white; }
.arena-registration .step-container { width: min(100% - 2rem, 35rem); margin: 0 auto; padding: 3rem 0; }
.arena-registration .step-plan-container { width: min(100% - 2rem, 87.5rem); margin: 0 auto; padding: 3rem 0; }
.arena-registration .step-label { font-size: .875rem; font-weight: 700; }
.arena-registration .step-title { margin: .5rem 0 1rem; font-size: clamp(1.75rem, 4vw, 2.625rem); line-height: 1.2; font-weight: 600; }
.arena-registration .step-description { font-size: 1rem; }
.arena-registration .text-green { color: #7d2dff; }
.arena-registration .text-grey-dark { color: #717171; }
.arena-registration .organization-input { display: flex; align-items: center; gap: .75rem; border: 2px solid #e1e1e1; border-radius: .625rem; padding: .625rem 1rem; background: white; }
.arena-registration .organization-input input { width: 100%; min-width: 0; border: 0; background: transparent; }
.arena-registration .organization-input span { color: #717171; }
.arena-registration .form-error { color: #e02546; border-color: #e02546; }
.arena-registration .step-btn-container { margin-top: 2rem; }
.arena-registration .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .625rem 1.5rem; border: 1px solid transparent; border-radius: .375rem; text-decoration: none; }
.arena-registration .btn-primary { color: white; background: #08192b; }
.arena-registration .btn-cancel { color: #505050; border-color: #8e8e8e; background: white; }
.arena-registration button:disabled { opacity: .5; cursor: default; }
.arena-registration .buttons-switch-wrapper { display: inline-flex; overflow: hidden; border-radius: 2rem; background: #e1e1e1; }
.arena-registration .buttons-switch-button { min-height: 2.75rem; padding: .625rem 1.5rem; border: 0; border-radius: 2rem; background: transparent; color: #08192b; }
.arena-registration .buttons-switch-button.selected { background: #08192b; color: white; }
.arena-registration .plans-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; }
.arena-registration .plan { min-width: 0; margin: 0; padding: 1.5rem; border: 3px solid transparent; border-radius: .75rem; background: white; box-shadow: 0 .5rem 1.5rem #959da526; cursor: pointer; }
.arena-registration .plan--selected { border-color: #7d2dff; }
.arena-registration .plan-title { font-size: 1.25rem; font-weight: 700; }
.arena-registration .plan-price { margin: .5rem 0 1.25rem; font-size: 1.75rem; font-weight: 700; }
.arena-registration .plan-option { display: flex; align-items: baseline; gap: .5rem; font-size: .875rem; }
.arena-registration .plan-option::before { content: '✓'; color: #7d2dff; }
.arena-registration .registration-alerts { max-width: 50rem; margin: 1rem auto; padding-inline: 1rem; }
.arena-registration .alert { position: relative; padding: 1rem 3rem 1rem 1rem; border: 1px solid currentColor; border-radius: .5rem; }
.arena-registration .alert p { margin: 0; }
.arena-registration .alert-danger { color: #b91c1c; background: #fef2f2; }
.arena-registration .alert-success { color: #166534; background: #f0fdf4; }
.arena-registration .close { position: absolute; top: .5rem; right: .75rem; border: 0; background: transparent; color: inherit; font-size: 1.5rem; }
/* Small compatibility vocabulary used only by the two registration views. */
.arena-registration .d-flex { display: flex; }
.arena-registration .flex-column { flex-direction: column; }
.arena-registration .justify-content-end { justify-content: flex-end; }
.arena-registration .d-none { display: none; }
.arena-registration .w-100 { width: 100%; }
.arena-registration .mt-3 { margin-top: 1rem; }
.arena-registration .mt-5 { margin-top: 3rem; }
.arena-registration .py-1 { padding-block: .25rem; }
.arena-registration .pt-2 { padding-top: .5rem; }
.arena-registration .row { display: flex; flex-wrap: wrap; gap: 1rem; }
.arena-registration .row > div { max-width: 100%; }
.arena-registration .col-md-7 { max-width: 50rem; }

/* Shared components and opt-in utilities for custom Filament pages. */

/* Catalog logos keep a fixed height and their native width. Theme-specific
   marks swap without square cropping; a broken asset exposes neutral initials. */
.arena-integration-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: min(var(--arena-logo-width), 100%);
    min-width: min(var(--arena-logo-height), 100%);
    height: var(--arena-logo-height);
    max-width: 100%;
    vertical-align: middle;
}

.arena-integration-logo__image {
    display: block;
    height: var(--arena-logo-height);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    flex: none;
}

.arena-integration-logo__fallback {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    width: 100%;
    height: var(--arena-logo-height);
    flex: none;
    border-radius: 0.375rem;
    background: #e5e7eb;
    color: #374151;
    font-weight: 600;
}

.arena-integration-logo__fallback--unconfigured,
.arena-integration-logo[data-light-failed="true"] .arena-integration-logo__fallback--light,
.arena-integration-logo[data-dark-failed="true"] .arena-integration-logo__fallback--dark {
    display: inline-flex;
}

.arena-integration-logo__fallback--unconfigured {
    position: relative;
    width: var(--arena-logo-height);
    max-width: var(--arena-logo-height);
}

.arena-integration-logo[data-light-failed="true"] .arena-integration-logo__image.arena-integration-logo__light,
.arena-integration-logo[data-dark-failed="true"] .arena-integration-logo__image.arena-integration-logo__dark {
    visibility: hidden;
}

html:not(.dark) .arena-integration-logo__dark,
html:not(.dark) .arena-integration-logo__fallback--dark,
html.dark .arena-integration-logo__light,
html.dark .arena-integration-logo__fallback--light {
    display: none !important;
}

html.dark .arena-integration-logo__fallback {
    background: #374151;
    color: #f3f4f6;
}

/* Sticky page header on resource create/edit pages, so the title and the form
   actions (Save / Cancel / Delete) stay reachable while scrolling a long form.
   Sits below the topbar, which is sticky at z-index 30. */
.fi-page:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header {
    position: sticky;
    top: 4rem; /* topbar height */
    z-index: 20;
    padding-block: 1rem;
    background-color: oklch(0.984 0.003 247.858);
    /* Bleed over the page gutter so content doesn't show through at the sides. */
    margin-inline: -2rem;
    padding-inline: 2rem;
}
html.dark .fi-page:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header {
    background-color: oklch(0.129 0.042 264.695);
}

/* Rich editors that need real writing room. Filament caps the editable area at
   3rem (~2 lines); opt in per field with
   ->extraInputAttributes(['class' => 'arena-rich-editor-tall']). */
.fi-fo-rich-editor-main.arena-rich-editor-tall .fi-fo-rich-editor-content {
    min-height: 20rem;
}

.arena-helper-text {
    font-size: 0.75rem;
    color: rgb(107, 114, 128);
}
html.dark .arena-helper-text {
    color: rgb(156, 163, 175);
}

.arena-media-preview-placeholder-frame {
    background-color: rgb(243, 244, 246);
}

.arena-media-preview-placeholder {
    color: rgb(107, 114, 128);
}

html.dark .arena-media-preview-placeholder-frame {
    background-color: rgb(31, 41, 55);
}

html.dark .arena-media-preview-placeholder {
    color: rgb(156, 163, 175);
}

/* A full-card button opens the preview without intercepting audio controls. */
.arena-media-inline-preview-row {
    position: relative;
    border: 1px solid rgb(229, 231, 235);
    border-radius: .75rem;
}
.arena-media-inline-preview-row > .fi-sc { gap: 0; }
html.dark .arena-media-inline-preview-row { border-color: rgb(255 255 255 / .1); }
.arena-media-inline-preview-card {
    position: relative;
    padding: .75rem 3.5rem .75rem .75rem;
}
.arena-media-inline-preview-row .arena-media-inline-preview-expand {
    position: absolute;
    top: 50%;
    right: .75rem;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    z-index: 1;
}
.arena-media-inline-preview-card > div { pointer-events: none; }
.arena-media-inline-preview-open {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: .75rem;
    background: transparent;
    cursor: pointer;
}
.arena-media-inline-preview-open:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 3px;
}
.arena-media-inline-preview-card .arena-media-inline-preview-audio {
    position: relative;
    pointer-events: auto;
}

.arena-media-thumbnail-edit {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    cursor: pointer;
    border-radius: .5rem;
}
.arena-media-thumbnail-edit-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    height: 100%;
    background: rgb(0 0 0 / .65);
    color: white;
    font-size: .75rem;
    opacity: 0;
    transition: opacity .15s;
}
.arena-media-thumbnail-edit:hover .arena-media-thumbnail-edit-overlay,
.arena-media-thumbnail-edit:focus-visible .arena-media-thumbnail-edit-overlay { opacity: 1; }
.arena-media-thumbnail-edit:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Shared image, video and audio dialog: contain media and scroll metadata. */
.fi-modal-window.arena-media-preview-modal {
    width: 80vw;
    max-width: 80vw;
    height: 80vh;
    height: 80dvh;
    max-height: 80dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.arena-media-preview-modal > :is(.fi-modal-header, .fi-modal-footer) {
    flex: none;
}
.arena-media-preview-modal > .fi-modal-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
}
.arena-media-preview-modal .fi-modal-content > div {
    width: 100%;
    min-height: 0;
}
.arena-media-preview-modal .arena-media-preview-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.5rem;
    height: 100%;
    min-height: 0;
}
.arena-media-preview-modal .arena-media-preview-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: .75rem;
    background: rgb(243, 244, 246);
}
html.dark .arena-media-preview-modal .arena-media-preview-stage {
    background: rgb(17, 24, 39);
}
.arena-media-preview-modal .arena-media-preview-stage.arena-media-preview-video,
html.dark .arena-media-preview-modal .arena-media-preview-stage.arena-media-preview-video {
    background: black;
}
.arena-media-preview-modal .arena-media-preview-image {
    width: 100%;
    height: 100%;
    min-height: 0;
}
.arena-media-preview-modal .arena-media-preview-stage :is(img, video) {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    object-fit: contain;
}
.arena-media-preview-modal .arena-media-preview-stage > video {
    flex: 1;
    background: black;
}
.arena-media-preview-modal .arena-media-preview-stage > div:not(.arena-media-preview-image) {
    max-width: 100%;
    flex-shrink: 0;
}
.arena-media-preview-modal .arena-media-preview-audio {
    width: calc(100% - 3rem);
    max-height: 100%;
    overflow-y: auto;
    overflow-wrap: anywhere;
}
.arena-media-preview-modal .arena-media-preview-stage > .arena-media-preview-audio {
    flex-shrink: 1;
}
.arena-media-preview-modal .arena-media-preview-sidebar {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid rgb(229, 231, 235);
    border-radius: .75rem;
    overflow-wrap: anywhere;
}
html.dark .arena-media-preview-modal .arena-media-preview-sidebar {
    border-color: rgb(255 255 255 / .1);
}
.arena-media-preview-sidebar dl {
    display: grid;
    grid-template-columns: minmax(5rem, .4fr) minmax(0, 1fr);
    gap: .5rem .75rem;
}
.arena-media-preview-sidebar dd {
    margin: 0;
    min-width: 0;
}
@media (max-width: 767px) {
    .arena-media-preview-modal .arena-media-preview-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        gap: .75rem;
    }
    .arena-media-preview-modal > :is(.fi-modal-header, .fi-modal-content, .fi-modal-footer) {
        padding: .75rem;
    }
}

.arena-media-preview-metadata summary {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(75, 85, 99);
}

.arena-media-preview-metadata summary:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 3px;
}

html.dark .arena-media-preview-metadata summary {
    color: rgb(229, 231, 235);
}

.arena-chip {
    display: inline-block;
    background-color: rgb(243, 244, 246);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
html.dark .arena-chip {
    background-color: rgb(31, 41, 55);
    color: rgb(229, 231, 235);
}

.arena-code-block {
    margin-top: 0.5rem;
    overflow-x: auto;
    background-color: rgb(243, 244, 246);
    padding: 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
html.dark .arena-code-block {
    background-color: rgb(31, 41, 55);
    color: rgb(229, 231, 235);
}

.arena-token-display {
    display: block;
    word-break: break-all;
    background-color: rgb(254, 243, 199);
    color: rgb(120, 53, 15);
    padding: 12px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
}
html.dark .arena-token-display {
    background-color: rgba(120, 53, 15, 0.4);
    color: rgb(254, 243, 199);
}

.arena-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}
@media (min-width: 768px) {
    .arena-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.arena-mt-sm { margin-top: 0.5rem; }
.arena-mt-md { margin-top: 1rem; }

.arena-empty-state {
    padding: 3rem 0;
    text-align: center;
    font-size: 0.875rem;
    color: rgb(107, 114, 128);
}
html.dark .arena-empty-state {
    color: rgb(156, 163, 175);
}

.arena-table-wrap {
    overflow-x: auto;
}
.arena-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.arena-table thead tr,
.arena-table tbody tr {
    border-bottom: 1px solid rgb(229, 231, 235);
}
html.dark .arena-table thead tr,
html.dark .arena-table tbody tr {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
.arena-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(107, 114, 128);
}
.arena-table td {
    padding: 12px 16px;
    color: rgb(55, 65, 81);
    vertical-align: top;
}
html.dark .arena-table th { color: rgb(156, 163, 175); }
html.dark .arena-table td { color: rgb(209, 213, 219); }
.arena-table .arena-align-right { text-align: right; }
.arena-table .arena-cell-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: rgb(107, 114, 128);
}
.arena-table .arena-cell-nowrap { white-space: nowrap; }
.arena-table .arena-cell-clamp-3 { max-width: 20rem; }
.arena-cell-clamp-3 p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.arena-actions {
    display: inline-flex;
    gap: 8px;
    justify-content: flex-end;
}

.arena-media-asset-picker {
    display: grid;
    gap: 0.75rem;
}

/* ============================================================
   Scoped utilities (opt-in via .arena-utilities)
   Filament 4/5 ships only the utilities its own .fi-* components
   use, not the general Tailwind layer that Filament 3 bundled.
   Custom panel blades (Onboarding Designer, Visual Editor, ...)
   are built from generic utilities (bg-white, rounded-xl, h-4,
   ring-1, dark:*, hover:*, ...) which therefore have no backing
   CSS after the upgrade. These rules reproduce the Tailwind v4
   defaults for exactly the classes those pages use — scoped under
   .arena-utilities so they can never override Filament markup on
   core pages (RN-477). A view opts in by putting the
   .arena-utilities class on an ancestor (teleported nodes need it on
   their own wrapper). gray-* = Tailwind default gray; primary-* =
   panel --primary-N vars; .dark lives on <html>.
   ============================================================ */
.arena-utilities .absolute{position:absolute;}
.arena-utilities .arena-media-preview-visually-hidden{border:0;clip:rect(0,0,0,0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;}
.arena-utilities .arena-module-library-overlay{padding:0;}
.arena-utilities .arena-module-library-panel{height:100vh;height:100dvh;max-width:none;overflow:hidden;width:100%;}
.arena-utilities .arena-module-library-actions{align-items:center;display:flex;flex-shrink:0;gap:0.5rem;}
.arena-utilities .arena-module-library-panel [data-module-library-list]{min-height:0;overscroll-behavior:contain;}
.arena-utilities .arena-module-browser-layout{display:grid;grid-template-columns:10rem minmax(18rem,1fr) minmax(18rem,24rem);min-height:0;overflow:hidden;}
.arena-utilities .arena-module-browser-filters,.arena-utilities .arena-module-browser-results,.arena-utilities .arena-module-browser-preview{min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.arena-utilities .arena-module-filter{align-items:center;border-radius:0.5rem;color:#4b5563;display:flex;font-size:0.75rem;font-weight:500;justify-content:space-between;min-height:2.75rem;padding:0.5rem 0.625rem;text-align:left;width:100%;}
.arena-utilities .arena-module-filter:hover{background:#f3f4f6;}
.arena-utilities .arena-module-filter:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px;}
.arena-utilities .arena-module-filter--active{background:color-mix(in srgb,var(--primary-500) 12%,transparent);color:var(--primary-700);}
.arena-utilities .arena-module-card-grid{display:grid;gap:0.75rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr));}
.arena-utilities .arena-module-category-heading{background:#fff;position:sticky;top:0;z-index:2;}
.arena-utilities .arena-module-card{background:#fff;border:1px solid #e5e7eb;border-radius:0.75rem;align-items:stretch;appearance:none;display:flex;flex-direction:column;justify-content:flex-start;min-height:2.75rem;min-width:0;overflow:hidden;padding:12px;text-align:left;white-space:normal;transition:border-color .15s,box-shadow .15s,transform .15s;width:100%;}
.arena-utilities .arena-module-card:hover{border-color:var(--primary-300);box-shadow:0 4px 10px rgb(15 23 42 / .08);transform:translateY(-1px);}
.arena-utilities .arena-module-card:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px;}
.arena-utilities .arena-module-card--selected{border-color:var(--primary-500);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary-500) 22%,transparent);}
.arena-utilities .arena-module-card__media{background:#fff;display:block;flex:none;height:116px;margin-inline:auto;max-width:100%;overflow:hidden;width:205px;}
.arena-utilities .arena-module-card__media img{display:block;height:100%;object-fit:contain;object-position:top center;width:100%;}
.arena-utilities .arena-module-card__body{display:flex;flex:1;flex-direction:column;align-items:flex-start;min-width:0;padding-top:14px;width:100%;}
.arena-utilities .arena-module-card__heading{align-items:flex-start;display:flex;gap:8px;width:100%;}
.arena-utilities .arena-module-card__title{font-size:0.875rem;line-height:1.45;min-height:2.9em;min-width:0;overflow-wrap:anywhere;white-space:normal;}
.arena-utilities .arena-module-preview-title{overflow-wrap:anywhere;white-space:normal;}
.arena-utilities .arena-module-search{display:block;margin-top:12px;position:relative;}
.arena-utilities .arena-module-search__icon{color:#9ca3af;height:18px;left:12px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:18px;}
.arena-utilities .arena-module-search__input{box-sizing:border-box;display:block;height:42px;margin:0;padding:8px 12px 8px 40px;width:100%;}
.arena-utilities .arena-module-visually-hidden{border:0;clip:rect(0,0,0,0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;}
.arena-utilities .arena-module-library-footer{justify-content:flex-end;}
.arena-utilities .arena-module-family-badge{background:#f3f4f6;border-radius:9999px;color:#4b5563;display:inline-flex;font-size:0.6875rem;font-weight:600;line-height:1rem;padding:0.125rem 0.5rem;}
.arena-utilities .arena-module-grid-loading{display:none;gap:0.75rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr));margin-bottom:1rem;}
.arena-utilities .arena-module-card-skeleton{background:linear-gradient(110deg,#e5e7eb 25%,#f3f4f6 45%,#e5e7eb 65%);border-radius:0.75rem;display:block;height:10rem;}
.arena-utilities .arena-module-preview-control{border:1px solid #d1d5db;border-radius:0.5rem;color:#4b5563;font-size:0.75rem;font-weight:600;min-height:2.75rem;padding:0.375rem 0.625rem;}
.arena-utilities .arena-module-preview-control:hover{background:#f9fafb;}
.arena-utilities .arena-module-preview-control:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px;}
.arena-utilities .arena-module-preview-control--active{background:var(--primary-600);border-color:var(--primary-600);color:#fff;}
.arena-utilities .arena-module-browser-preview-stage{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:0.75rem;max-height:24rem;min-height:12rem;overflow:auto;padding:0.75rem;position:relative;}
.arena-utilities .arena-module-browser-preview-stage arena-module-preview{height:auto;min-height:10rem;overflow:visible;width:100%;}
.arena-utilities .arena-module-preview-skeleton{background:linear-gradient(90deg,#e5e7eb 25%,#f3f4f6 50%,#e5e7eb 75%);border-radius:0.5rem;height:10rem;inset:0.75rem;position:absolute;z-index:1;}
.arena-utilities [data-module-library-add],.arena-utilities [data-module-library-done],.arena-utilities [data-locked-module-dialog] button,.arena-utilities [data-locked-module-dialog] a{min-height:2.75rem;}
html.dark .arena-utilities .arena-module-filter{color:#d1d5db;}
html.dark .arena-utilities .arena-module-filter:hover{background:#374151;}
html.dark .arena-utilities .arena-module-filter--active{background:color-mix(in srgb,var(--primary-500) 20%,transparent);color:var(--primary-400);}
html.dark .arena-utilities .arena-module-card{background:#1f2937;border-color:#374151;}
html.dark .arena-utilities .arena-module-category-heading{background:#111827;}
html.dark .arena-utilities .arena-module-card__media,html.dark .arena-utilities .arena-module-browser-preview-stage{background:#111827;border-color:#374151;}
html.dark .arena-utilities .arena-module-family-badge{background:#374151;color:#d1d5db;}
html.dark .arena-utilities .arena-module-preview-control{border-color:#4b5563;color:#d1d5db;}
html.dark .arena-utilities .arena-module-preview-control:hover{background:#374151;}
html.dark .arena-utilities .arena-module-preview-control--active{background:var(--primary-500);border-color:var(--primary-500);color:#fff;}
@media (max-width:1023px){.arena-utilities .arena-module-browser-layout{grid-template-columns:9rem minmax(16rem,1fr);}.arena-utilities .arena-module-browser-preview{border-left:0;border-top:1px solid #e5e7eb;grid-column:1 / -1;max-height:20rem;}}
@media (max-width:639px){.arena-utilities .arena-module-browser-layout{display:block;overflow-y:auto;}.arena-utilities .arena-module-browser-filters,.arena-utilities .arena-module-browser-results,.arena-utilities .arena-module-browser-preview{border-left:0;border-right:0;max-height:none;overflow:visible;}.arena-utilities .arena-module-card-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr));}}
.arena-utilities .bg-amber-50{background-color:#fffbeb;}
.arena-utilities .bg-gray-100{background-color:#f3f4f6;}
.arena-utilities .bg-gray-200{background-color:#e5e7eb;}
.arena-utilities .bg-gray-50{background-color:#f9fafb;}
.arena-utilities .bg-primary-500{background-color:var(--primary-500);}
.arena-utilities .bg-primary-500\/25{background-color:color-mix(in srgb, var(--primary-500) 25%, transparent);}
.arena-utilities .bg-primary-600{background-color:var(--primary-600);}
.arena-utilities .bg-red-50{background-color:#fef2f2;}
.arena-utilities .bg-slate-950{background-color:#020617;}
.arena-utilities .bg-white{background-color:#ffffff;}
.arena-utilities .bg-white\/95{background-color:rgb(255 255 255 / 0.95);}
.arena-utilities .block{display:block;}
.arena-utilities .border{border-width:1px;border-style:solid;}
.arena-utilities .border-b{border-bottom-width:1px;border-bottom-style:solid;}
.arena-utilities .border-dashed{border-style:dashed;}
.arena-utilities .border-gray-100{border-color:#f3f4f6;}
.arena-utilities .border-gray-200{border-color:#e5e7eb;}
.arena-utilities .border-gray-300{border-color:#d1d5db;}
.arena-utilities .border-primary-400{border-color:var(--primary-400);}
.arena-utilities .border-primary-400\/40{border-color:color-mix(in srgb, var(--primary-400) 40%, transparent);}
.arena-utilities .border-primary-500{border-color:var(--primary-500);}
.arena-utilities .border-r{border-right-width:1px;border-right-style:solid;}
.arena-utilities .border-t{border-top-width:1px;border-top-style:solid;}
.arena-utilities .border-white\/10{border-color:rgb(255 255 255 / 0.1);}
.arena-utilities .capitalize{text-transform:capitalize;}
html.dark .arena-utilities .dark\:bg-amber-500\/10{background-color:rgb(245 158 11 / 0.1);}
html.dark .arena-utilities .dark\:bg-gray-700{background-color:#374151;}
html.dark .arena-utilities .dark\:bg-gray-800{background-color:#1f2937;}
html.dark .arena-utilities .dark\:bg-gray-800\/40{background-color:rgb(31 41 55 / 0.4);}
html.dark .arena-utilities .dark\:bg-gray-800\/60{background-color:rgb(31 41 55 / 0.6);}
html.dark .arena-utilities .dark\:bg-gray-900{background-color:#111827;}
html.dark .arena-utilities .dark\:bg-gray-900\/95{background-color:rgb(17 24 39 / 0.95);}
html.dark .arena-utilities .dark\:bg-gray-950{background-color:#030712;}
html.dark .arena-utilities .dark\:bg-red-500\/10{background-color:rgb(239 68 68 / 0.1);}
html.dark .arena-utilities .dark\:border-gray-700{border-color:#374151;}
html.dark .arena-utilities .dark\:border-gray-800{border-color:#1f2937;}
html.dark .arena-utilities .dark\:border-primary-400{border-color:var(--primary-400);}
html.dark .arena-utilities .dark\:file\:bg-primary-500\/20::file-selector-button{background-color:color-mix(in srgb, var(--primary-500) 20%, transparent);}
html.dark .arena-utilities .dark\:file\:text-primary-300::file-selector-button{color:var(--primary-300);}
html.dark .arena-utilities .dark\:focus\:ring-offset-gray-900:focus{--tw-ring-offset-width:2px;--tw-ring-offset-color:#111827;--tw-ring-offset-shadow:0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);}
html.dark .arena-utilities .dark\:hover\:bg-gray-800:hover{background-color:#1f2937;}
html.dark .arena-utilities .dark\:hover\:bg-red-500\/10:hover{background-color:rgb(239 68 68 / 0.1);}
html.dark .arena-utilities .dark\:hover\:bg-white\/5:hover{background-color:rgb(255 255 255 / 0.05);}
html.dark .arena-utilities .dark\:hover\:text-gray-200:hover{color:#e5e7eb;}
html.dark .arena-utilities .dark\:ring-white\/10{--tw-ring-color:rgb(255 255 255 / 0.1);}
html.dark .arena-utilities .dark\:text-amber-300{color:#fcd34d;}
html.dark .arena-utilities .dark\:text-gray-200{color:#e5e7eb;}
html.dark .arena-utilities .dark\:text-gray-300{color:#d1d5db;}
html.dark .arena-utilities .dark\:text-gray-400{color:#9ca3af;}
html.dark .arena-utilities .dark\:text-gray-500{color:#6b7280;}
html.dark .arena-utilities .dark\:text-gray-600{color:#4b5563;}
html.dark .arena-utilities .dark\:text-red-300{color:#fca5a5;}
html.dark .arena-utilities .dark\:text-white{color:#ffffff;}
.arena-utilities .disabled\:cursor-not-allowed:disabled{cursor:not-allowed;}
.arena-utilities .disabled\:opacity-40:disabled{opacity:0.4;}
.arena-utilities .disabled\:opacity-50:disabled{opacity:0.5;}
.arena-utilities .file\:bg-primary-50::file-selector-button{background-color:var(--primary-50);}
.arena-utilities .file\:border-0::file-selector-button{border-width:0;}
.arena-utilities .file\:font-semibold::file-selector-button{font-weight:600;}
.arena-utilities .file\:mr-3::file-selector-button{margin-right:0.75rem;}
.arena-utilities .file\:px-3::file-selector-button{padding-left:0.75rem;padding-right:0.75rem;}
.arena-utilities .file\:py-2::file-selector-button{padding-top:0.5rem;padding-bottom:0.5rem;}
.arena-utilities .file\:rounded-lg::file-selector-button{border-radius:0.5rem;}
.arena-utilities .file\:text-primary-700::file-selector-button{color:var(--primary-700);}
.arena-utilities .file\:text-xs::file-selector-button{font-size:0.75rem;line-height:1rem;}
.arena-utilities .fixed{position:fixed;}
.arena-utilities .flex{display:flex;}
.arena-utilities .flex-1{flex:1 1 0%;}
.arena-utilities .flex-col{flex-direction:column;}
.arena-utilities .flex-wrap{flex-wrap:wrap;}
.arena-utilities .focus\:border-primary-500:focus{border-color:var(--primary-500);}
.arena-utilities .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px;}
.arena-utilities .focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);--tw-ring-shadow:0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, rgb(59 130 246 / 0.5));}
.arena-utilities .focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-color:#ffffff;--tw-ring-offset-shadow:0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);}
.arena-utilities .focus\:ring-primary-500:focus{--tw-ring-color:var(--primary-500);}
.arena-utilities .font-bold{font-weight:700;}
.arena-utilities .font-medium{font-weight:500;}
.arena-utilities .font-semibold{font-weight:600;}
.arena-utilities .gap-1{gap:0.25rem;}
.arena-utilities .gap-1\.5{gap:0.375rem;}
.arena-utilities .gap-2{gap:0.5rem;}
.arena-utilities .gap-3{gap:0.75rem;}
.arena-utilities .gap-4{gap:1rem;}
.arena-utilities .grid{display:grid;}
.arena-utilities .h-1\.5{height:0.375rem;}
.arena-utilities .h-10{height:2.5rem;}
.arena-utilities .h-12{height:3rem;}
.arena-utilities .h-14{height:3.5rem;}
.arena-utilities .h-3\.5{height:0.875rem;}
.arena-utilities .h-4{height:1rem;}
.arena-utilities .h-8{height:2rem;}
.arena-utilities .hidden{display:none;}
.arena-utilities .hover\:bg-gray-100:hover{background-color:#f3f4f6;}
.arena-utilities .hover\:bg-gray-50:hover{background-color:#f9fafb;}
.arena-utilities .hover\:bg-primary-400\/10:hover{background-color:color-mix(in srgb, var(--primary-400) 10%, transparent);}
.arena-utilities .hover\:bg-primary-500:hover{background-color:var(--primary-500);}
.arena-utilities .hover\:bg-red-50:hover{background-color:#fef2f2;}
.arena-utilities .hover\:bg-white\/10:hover{background-color:rgb(255 255 255 / 0.1);}
.arena-utilities .hover\:bg-white\/5:hover{background-color:rgb(255 255 255 / 0.05);}
.arena-utilities .hover\:border-gray-300:hover{border-color:#d1d5db;}
.arena-utilities .hover\:file\:bg-primary-100:hover::file-selector-button{background-color:var(--primary-100);}
.arena-utilities .hover\:shadow-md:hover{box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);}
.arena-utilities .hover\:text-gray-700:hover{color:#374151;}
.arena-utilities .hover\:text-red-600:hover{color:#dc2626;}
.arena-utilities .inline-flex{display:inline-flex;}
.arena-utilities .inset-0{inset:0;}
.arena-utilities .items-center{align-items:center;}
.arena-utilities .items-start{align-items:flex-start;}
.arena-utilities .justify-between{justify-content:space-between;}
.arena-utilities .justify-center{justify-content:center;}
.arena-utilities .leading-6{line-height:1.5rem;}
.arena-utilities .max-w-sm{max-width:24rem;}
.arena-utilities .mb-1{margin-bottom:0.25rem;}
.arena-utilities .min-h-80{min-height:20rem;}
.arena-utilities .min-w-0{min-width:0;}
.arena-utilities .mt-0\.5{margin-top:0.125rem;}
.arena-utilities .mt-1{margin-top:0.25rem;}
.arena-utilities .mt-2{margin-top:0.5rem;}
.arena-utilities .mt-3{margin-top:0.75rem;}
.arena-utilities .mt-4{margin-top:1rem;}
.arena-utilities .object-cover{object-fit:cover;}
.arena-utilities .object-contain{object-fit:contain;}
.arena-utilities .opacity-100{opacity:1;}
.arena-utilities .opacity-60{opacity:0.6;}
.arena-utilities .overflow-auto{overflow:auto;}
.arena-utilities .overflow-hidden{overflow:hidden;}
.arena-utilities .overflow-y-auto{overflow-y:auto;}
.arena-utilities .p-1\.5{padding:0.375rem;}
.arena-utilities .p-2{padding:0.5rem;}
.arena-utilities .p-3{padding:0.75rem;}
.arena-utilities .p-4{padding:1rem;}
.arena-utilities .p-6{padding:1.5rem;}
.arena-utilities .pt-3{padding-top:0.75rem;}
.arena-utilities .pt-4{padding-top:1rem;}
.arena-utilities .px-2{padding-left:0.5rem;padding-right:0.5rem;}
.arena-utilities .px-3{padding-left:0.75rem;padding-right:0.75rem;}
.arena-utilities .px-4{padding-left:1rem;padding-right:1rem;}
.arena-utilities .px-5{padding-left:1.25rem;padding-right:1.25rem;}
.arena-utilities .px-6{padding-left:1.5rem;padding-right:1.5rem;}
.arena-utilities .py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem;}
.arena-utilities .py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
.arena-utilities .py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem;}
.arena-utilities .py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.arena-utilities .py-4{padding-top:1rem;padding-bottom:1rem;}
.arena-utilities .relative{position:relative;}
.arena-utilities .right-0{right:0;}
.arena-utilities .ring-1{box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);--tw-ring-shadow:0 0 0 calc(1px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, rgb(59 130 246 / 0.5));}
.arena-utilities .ring-2{box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);--tw-ring-shadow:0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, rgb(59 130 246 / 0.5));}
.arena-utilities .ring-gray-950\/10{--tw-ring-color:rgb(3 7 18 / 0.1);}
.arena-utilities .ring-gray-950\/5{--tw-ring-color:rgb(3 7 18 / 0.05);}
.arena-utilities .ring-primary-500\/20{--tw-ring-color:color-mix(in srgb, var(--primary-500) 20%, transparent);}
.arena-utilities .rounded{border-radius:0.25rem;}
.arena-utilities .rounded-full{border-radius:9999px;}
.arena-utilities .rounded-lg{border-radius:0.5rem;}
.arena-utilities .rounded-md{border-radius:0.375rem;}
.arena-utilities .rounded-xl{border-radius:0.75rem;}
.arena-utilities .shadow-sm{box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);}
.arena-utilities .shadow-xl{box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);}
.arena-utilities .shrink-0{flex-shrink:0;}
.arena-utilities .space-y-5 > :not([hidden]) ~ :not([hidden]){margin-top:1.25rem;}
.arena-utilities .space-y-6 > :not([hidden]) ~ :not([hidden]){margin-top:1.5rem;}
.arena-utilities .text-amber-700{color:#b45309;}
.arena-utilities .text-center{text-align:center;}
.arena-utilities .text-gray-300{color:#d1d5db;}
.arena-utilities .text-gray-400{color:#9ca3af;}
.arena-utilities .text-gray-500{color:#6b7280;}
.arena-utilities .text-gray-600{color:#4b5563;}
.arena-utilities .text-gray-700{color:#374151;}
.arena-utilities .text-gray-800{color:#1f2937;}
.arena-utilities .text-gray-950{color:#030712;}
.arena-utilities .text-left{text-align:left;}
.arena-utilities .text-lg{font-size:1.125rem;line-height:1.75rem;}
.arena-utilities .text-primary-200{color:var(--primary-200);}
.arena-utilities .text-primary-300{color:var(--primary-300);}
.arena-utilities .text-primary-600{color:var(--primary-600);}
.arena-utilities .text-red-600{color:#dc2626;}
.arena-utilities .text-red-700{color:#b91c1c;}
.arena-utilities .text-slate-200{color:#e2e8f0;}
.arena-utilities .text-slate-300{color:#cbd5e1;}
.arena-utilities .text-slate-400{color:#94a3b8;}
.arena-utilities .text-sm{font-size:0.875rem;line-height:1.25rem;}
.arena-utilities .text-white{color:#ffffff;}
.arena-utilities .text-xs{font-size:0.75rem;line-height:1rem;}
.arena-utilities .tracking-\[0\.2em\]{letter-spacing:0.2em;}
.arena-utilities .tracking-wider{letter-spacing:0.05em;}
.arena-utilities .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms;}
.arena-utilities .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.arena-utilities .uppercase{text-transform:uppercase;}
.arena-utilities .w-10{width:2.5rem;}
.arena-utilities .w-12{width:3rem;}
.arena-utilities .w-14{width:3.5rem;}
.arena-utilities .w-3\.5{width:0.875rem;}
.arena-utilities .w-4{width:1rem;}
.arena-utilities .w-8{width:2rem;}
.arena-utilities .w-80{width:20rem;}
.arena-utilities .w-full{width:100%;}
@media (min-width: 1024px) {
    .arena-utilities .lg\:flex{display:flex;}
    .arena-utilities .lg\:flex-col{flex-direction:column;}
    .arena-utilities .lg\:px-6{padding-left:1.5rem;padding-right:1.5rem;}
}
@media (min-width: 640px) {
    .arena-utilities .sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr));}
    .arena-utilities .group:hover .sm\:group-hover\:opacity-100{opacity:1;}
    .arena-utilities .sm\:opacity-0{opacity:0;}
    .arena-utilities .sm\:transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms;}
}

/* ============================================================
   Presentation Editor utilities
   Used by ui-editor.blade.php and its editor partials. Keep this
   scoped to classes present in those views; structural editor layout
   lives in the page's inline CSS like the onboarding designer.
   ============================================================ */
.arena-utilities .-mb-3{margin-bottom:-0.75rem;}
.arena-utilities .-mt-3{margin-top:-0.75rem;}
.arena-utilities .-mx-3{margin-left:-0.75rem;margin-right:-0.75rem;}
.arena-utilities .-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));}
.arena-utilities .-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x, 0), var(--tw-translate-y)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));}
.arena-utilities .aspect-square{aspect-ratio:1 / 1;}
.arena-utilities .aspect-video{aspect-ratio:16 / 9;}
.arena-utilities .bg-black\/30{background-color:rgb(0 0 0 / 0.3);}
.arena-utilities .bg-black\/50{background-color:rgb(0 0 0 / 0.5);}
.arena-utilities .bg-black\/60{background-color:rgb(0 0 0 / 0.6);}
.arena-utilities .bg-black\/70{background-color:rgb(0 0 0 / 0.7);}
.arena-utilities .bg-blue-50{background-color:#eff6ff;}
.arena-utilities .bg-blue-100{background-color:#dbeafe;}
.arena-utilities .bg-cyan-100{background-color:#cffafe;}
.arena-utilities .bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops));}
.arena-utilities .bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops));}
.arena-utilities .bg-gray-700{background-color:#374151;}
.arena-utilities .bg-gray-800{background-color:#1f2937;}
.arena-utilities .bg-gray-900{background-color:#111827;}
.arena-utilities .bg-green-50{background-color:#f0fdf4;}
.arena-utilities .bg-green-100{background-color:#dcfce7;}
.arena-utilities .bg-green-500{background-color:#22c55e;}
.arena-utilities .bg-orange-100{background-color:#ffedd5;}
.arena-utilities .bg-pink-100{background-color:#fce7f3;}
.arena-utilities .bg-primary-50{background-color:var(--primary-50);}
.arena-utilities .bg-primary-100{background-color:var(--primary-100);}
.arena-utilities .bg-purple-50{background-color:#faf5ff;}
.arena-utilities .bg-purple-100{background-color:#f3e8ff;}
.arena-utilities .bg-red-100{background-color:#fee2e2;}
.arena-utilities .bg-red-600{background-color:#dc2626;}
.arena-utilities .bg-white\/10{background-color:rgb(255 255 255 / 0.1);}
.arena-utilities .bg-white\/20{background-color:rgb(255 255 255 / 0.2);}
.arena-utilities .bg-yellow-100{background-color:#fef3c7;}
.arena-utilities .border-2{border-width:2px;border-style:solid;}
.arena-utilities .border-gray-600{border-color:#4b5563;}
.arena-utilities .border-gray-700{border-color:#374151;}
.arena-utilities .border-gray-800{border-color:#1f2937;}
.arena-utilities .border-green-200{border-color:#bbf7d0;}
.arena-utilities .border-l{border-left-width:1px;border-left-style:solid;}
.arena-utilities .border-primary-200{border-color:var(--primary-200);}
.arena-utilities .border-primary-300{border-color:var(--primary-300);}
.arena-utilities .bottom-5{bottom:1.25rem;}
.arena-utilities .bottom-6{bottom:1.5rem;}
.arena-utilities .bottom-full{bottom:100%;}
.arena-utilities .cursor-pointer{cursor:pointer;}
.arena-utilities .cursor-not-allowed{cursor:not-allowed;}
.arena-utilities .duration-100{transition-duration:100ms;}
.arena-utilities .duration-200{transition-duration:200ms;}
.arena-utilities .duration-300{transition-duration:300ms;}
.arena-utilities .ease-in{transition-timing-function:cubic-bezier(0.4,0,1,1);}
.arena-utilities .ease-out{transition-timing-function:cubic-bezier(0,0,0.2,1);}
.arena-utilities .flex-shrink-0{flex-shrink:0;}
.arena-utilities .font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;}
.arena-utilities .from-gray-50{--tw-gradient-from:#f9fafb;--tw-gradient-to:rgb(249 250 251 / 0);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);}
.arena-utilities .from-primary-300{--tw-gradient-from:var(--primary-300);--tw-gradient-to:color-mix(in srgb, var(--primary-300) 0%, transparent);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);}
.arena-utilities .gap-x-6{column-gap:1.5rem;}
.arena-utilities .gap-y-2{row-gap:0.5rem;}
.arena-utilities .grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr));}
.arena-utilities .grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr));}
.arena-utilities .grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr));}
.arena-utilities .group:hover .group-hover\:bg-blue-100{background-color:#dbeafe;}
.arena-utilities .group:hover .group-hover\:bg-purple-100{background-color:#f3e8ff;}
.arena-utilities .group:hover .group-hover\:block{display:block;}
.arena-utilities .group:hover .group-hover\:opacity-100{opacity:1;}
.arena-utilities .h-2{height:0.5rem;}
.arena-utilities .h-3{height:0.75rem;}
.arena-utilities .h-5{height:1.25rem;}
.arena-utilities .h-6{height:1.5rem;}
.arena-utilities .h-7{height:1.75rem;}
.arena-utilities .h-9{height:2.25rem;}
.arena-utilities .h-11{height:2.75rem;}
.arena-utilities .h-16{height:4rem;}
.arena-utilities .h-20{height:5rem;}
.arena-utilities .h-32{height:8rem;}
.arena-utilities .h-48{height:12rem;}
.arena-utilities .h-64{height:16rem;}
.arena-utilities .h-\[70vh\]{height:70vh;}
.arena-utilities .h-\[calc\(100vh-12rem\)\]{height:calc(100vh - 12rem);}
.arena-utilities .h-full{height:100%;}
.arena-utilities .hover\:bg-gray-200:hover{background-color:#e5e7eb;}
.arena-utilities .hover\:bg-gray-700:hover{background-color:#374151;}
.arena-utilities .hover\:bg-gray-800:hover{background-color:#1f2937;}
.arena-utilities .hover\:bg-primary-50\/40:hover{background-color:color-mix(in srgb, var(--primary-50) 40%, transparent);}
.arena-utilities .hover\:bg-primary-600:hover{background-color:var(--primary-600);}
.arena-utilities .hover\:bg-primary-700:hover{background-color:var(--primary-700);}
.arena-utilities .hover\:bg-red-700:hover{background-color:#b91c1c;}
.arena-utilities .hover\:bg-white\/20:hover{background-color:rgb(255 255 255 / 0.2);}
.arena-utilities .hover\:bg-white\/30:hover{background-color:rgb(255 255 255 / 0.3);}
.arena-utilities .hover\:border-primary-300:hover{border-color:var(--primary-300);}
.arena-utilities .hover\:shadow-lg:hover{box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);}
.arena-utilities .hover\:shadow-sm:hover{box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);}
.arena-utilities .hover\:text-gray-400:hover{color:#9ca3af;}
.arena-utilities .hover\:text-gray-600:hover{color:#4b5563;}
.arena-utilities .hover\:text-gray-900:hover{color:#111827;}
.arena-utilities .hover\:text-primary-600:hover{color:var(--primary-600);}
.arena-utilities .inset-y-0{top:0;bottom:0;}
.arena-utilities .justify-end{justify-content:flex-end;}
.arena-utilities .leading-relaxed{line-height:1.625;}
.arena-utilities .left-0{left:0;}
.arena-utilities .left-1\/2{left:50%;}
.arena-utilities .left-2{left:0.5rem;}
.arena-utilities .left-2\.5{left:0.625rem;}
.arena-utilities .left-3{left:0.75rem;}
.arena-utilities .left-5{left:1.25rem;}
.arena-utilities .line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.arena-utilities .max-w-5xl{max-width:64rem;}
.arena-utilities .max-w-\[1600px\]{max-width:1600px;}
.arena-utilities .max-w-md{max-width:28rem;}
.arena-utilities .mb-0\.5{margin-bottom:0.125rem;}
.arena-utilities .mb-2{margin-bottom:0.5rem;}
.arena-utilities .mb-3{margin-bottom:0.75rem;}
.arena-utilities .mb-4{margin-bottom:1rem;}
.arena-utilities .mb-5{margin-bottom:1.25rem;}
.arena-utilities .min-h-screen{min-height:100vh;}
.arena-utilities .ml-2{margin-left:0.5rem;}
.arena-utilities .ml-auto{margin-left:auto;}
.arena-utilities .mt-1\.5{margin-top:0.375rem;}
.arena-utilities .mt-6{margin-top:1.5rem;}
.arena-utilities .mx-auto{margin-left:auto;margin-right:auto;}
.arena-utilities .my-1{margin-top:0.25rem;margin-bottom:0.25rem;}
.arena-utilities .normal-case{text-transform:none;}
.arena-utilities .object-cover{object-fit:cover;}
.arena-utilities .opacity-0{opacity:0;}
.arena-utilities .p-5{padding:1.25rem;}
.arena-utilities .pb-3{padding-bottom:0.75rem;}
.arena-utilities .pl-8{padding-left:2rem;}
.arena-utilities .pl-10{padding-left:2.5rem;}
.arena-utilities .placeholder-gray-400::placeholder{color:#9ca3af;}
.arena-utilities .pr-3{padding-right:0.75rem;}
.arena-utilities .pt-2{padding-top:0.5rem;}
.arena-utilities .px-1{padding-left:0.25rem;padding-right:0.25rem;}
.arena-utilities .px-1\.5{padding-left:0.375rem;padding-right:0.375rem;}
.arena-utilities .px-2\.5{padding-left:0.625rem;padding-right:0.625rem;}
.arena-utilities .py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
.arena-utilities .py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}
.arena-utilities .py-6{padding-top:1.5rem;padding-bottom:1.5rem;}
.arena-utilities .right-1{right:0.25rem;}
.arena-utilities .right-2{right:0.5rem;}
.arena-utilities .ring-primary-100{--tw-ring-color:var(--primary-100);}
.arena-utilities .ring-primary-200{--tw-ring-color:var(--primary-200);}
.arena-utilities .rounded-2xl{border-radius:1rem;}
.arena-utilities .rounded-t-lg{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;}
.arena-utilities .scale-95{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));}
.arena-utilities .scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));}
.arena-utilities .shadow-2xl{box-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);}
.arena-utilities .shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);}
.arena-utilities .space-y-1 > :not([hidden]) ~ :not([hidden]){margin-top:0.25rem;}
.arena-utilities .space-y-1\.5 > :not([hidden]) ~ :not([hidden]){margin-top:0.375rem;}
.arena-utilities .space-y-2 > :not([hidden]) ~ :not([hidden]){margin-top:0.5rem;}
.arena-utilities .space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:1rem;}
.arena-utilities .tabular-nums{font-variant-numeric:tabular-nums;}
.arena-utilities .text-\[10px\]{font-size:10px;line-height:14px;}
.arena-utilities .text-\[11px\]{font-size:11px;line-height:16px;}
.arena-utilities .text-base{font-size:1rem;line-height:1.5rem;}
.arena-utilities .text-blue-600{color:#2563eb;}
.arena-utilities .text-emerald-500{color:#10b981;}
.arena-utilities .text-gray-900{color:#111827;}
.arena-utilities .text-green-600{color:#16a34a;}
.arena-utilities .text-green-700{color:#15803d;}
.arena-utilities .text-primary-400{color:var(--primary-400);}
.arena-utilities .text-primary-500{color:var(--primary-500);}
.arena-utilities .text-primary-700{color:var(--primary-700);}
.arena-utilities .text-purple-600{color:#9333ea;}
.arena-utilities .text-red-400{color:#f87171;}
.arena-utilities .text-xl{font-size:1.25rem;line-height:1.75rem;}
.arena-utilities .text-yellow-700{color:#a16207;}
.arena-utilities .to-gray-100{--tw-gradient-to:#f3f4f6;}
.arena-utilities .to-primary-500{--tw-gradient-to:var(--primary-500);}
.arena-utilities .top-1{top:0.25rem;}
.arena-utilities .top-1\/2{top:50%;}
.arena-utilities .top-2{top:0.5rem;}
.arena-utilities .transform{transform:translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));}
.arena-utilities .transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms;}
.arena-utilities .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms;}
.arena-utilities .transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms;}
.arena-utilities .underline{text-decoration-line:underline;}
.arena-utilities .w-1\.5{width:0.375rem;}
.arena-utilities .w-1\/2{width:50%;}
.arena-utilities .w-3\/4{width:75%;}
.arena-utilities .w-5{width:1.25rem;}
.arena-utilities .w-6{width:1.5rem;}
.arena-utilities .w-7{width:1.75rem;}
.arena-utilities .w-9{width:2.25rem;}
.arena-utilities .w-11{width:2.75rem;}
.arena-utilities .w-16{width:4rem;}
.arena-utilities .w-32{width:8rem;}
.arena-utilities .w-48{width:12rem;}
.arena-utilities .w-72{width:18rem;}
.arena-utilities .w-96{width:24rem;}
.arena-utilities .w-px{width:1px;}
.arena-utilities .z-10{z-index:10;}
.arena-utilities .z-30{z-index:30;}
.arena-utilities .z-40{z-index:40;}
.arena-utilities .z-50{z-index:50;}

html.dark .arena-utilities .dark\:bg-blue-500\/10{background-color:rgb(59 130 246 / 0.1);}
html.dark .arena-utilities .dark\:bg-blue-500\/20{background-color:rgb(59 130 246 / 0.2);}
html.dark .arena-utilities .dark\:bg-cyan-500\/20{background-color:rgb(6 182 212 / 0.2);}
html.dark .arena-utilities .dark\:bg-gray-600{background-color:#4b5563;}
html.dark .arena-utilities .dark\:bg-gray-700\/50{background-color:rgb(55 65 81 / 0.5);}
html.dark .arena-utilities .dark\:bg-gray-800\/50{background-color:rgb(31 41 55 / 0.5);}
html.dark .arena-utilities .dark\:bg-green-500\/5{background-color:rgb(34 197 94 / 0.05);}
html.dark .arena-utilities .dark\:bg-green-500\/10{background-color:rgb(34 197 94 / 0.1);}
html.dark .arena-utilities .dark\:bg-green-500\/20{background-color:rgb(34 197 94 / 0.2);}
html.dark .arena-utilities .dark\:bg-orange-500\/20{background-color:rgb(249 115 22 / 0.2);}
html.dark .arena-utilities .dark\:bg-pink-500\/20{background-color:rgb(236 72 153 / 0.2);}
html.dark .arena-utilities .dark\:bg-primary-500\/5{background-color:color-mix(in srgb, var(--primary-500) 5%, transparent);}
html.dark .arena-utilities .dark\:bg-primary-500\/10{background-color:color-mix(in srgb, var(--primary-500) 10%, transparent);}
html.dark .arena-utilities .dark\:bg-primary-500\/20{background-color:color-mix(in srgb, var(--primary-500) 20%, transparent);}
html.dark .arena-utilities .dark\:bg-purple-500\/10{background-color:rgb(168 85 247 / 0.1);}
html.dark .arena-utilities .dark\:bg-purple-500\/20{background-color:rgb(168 85 247 / 0.2);}
html.dark .arena-utilities .dark\:bg-red-500\/20{background-color:rgb(239 68 68 / 0.2);}
html.dark .arena-utilities .dark\:bg-yellow-500\/20{background-color:rgb(234 179 8 / 0.2);}
html.dark .arena-utilities .dark\:border-gray-600{border-color:#4b5563;}
html.dark .arena-utilities .dark\:border-gray-800{border-color:#1f2937;}
html.dark .arena-utilities .dark\:border-green-500\/20{border-color:rgb(34 197 94 / 0.2);}
html.dark .arena-utilities .dark\:border-primary-500{border-color:var(--primary-500);}
html.dark .arena-utilities .dark\:border-primary-500\/30{border-color:color-mix(in srgb, var(--primary-500) 30%, transparent);}
html.dark .arena-utilities .dark\:border-primary-500\/50{border-color:color-mix(in srgb, var(--primary-500) 50%, transparent);}
html.dark .arena-utilities .dark\:from-gray-900{--tw-gradient-from:#111827;--tw-gradient-to:rgb(17 24 39 / 0);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);}
html.dark .arena-utilities .dark\:hover\:bg-gray-500:hover{background-color:#6b7280;}
html.dark .arena-utilities .dark\:hover\:bg-gray-600:hover{background-color:#4b5563;}
html.dark .arena-utilities .dark\:hover\:bg-gray-700:hover{background-color:#374151;}
html.dark .arena-utilities .dark\:hover\:bg-primary-500\/5:hover{background-color:color-mix(in srgb, var(--primary-500) 5%, transparent);}
html.dark .arena-utilities .dark\:hover\:bg-primary-500\/10:hover{background-color:color-mix(in srgb, var(--primary-500) 10%, transparent);}
html.dark .arena-utilities .dark\:hover\:border-gray-600:hover{border-color:#4b5563;}
html.dark .arena-utilities .dark\:hover\:border-primary-500:hover{border-color:var(--primary-500);}
html.dark .arena-utilities .dark\:hover\:border-primary-500\/50:hover{border-color:color-mix(in srgb, var(--primary-500) 50%, transparent);}
html.dark .arena-utilities .dark\:hover\:text-gray-300:hover{color:#d1d5db;}
html.dark .arena-utilities .dark\:hover\:text-gray-500:hover{color:#6b7280;}
html.dark .arena-utilities .dark\:hover\:text-white:hover{color:#ffffff;}
html.dark .arena-utilities .dark\:placeholder-gray-400::placeholder{color:#9ca3af;}
html.dark .arena-utilities .dark\:placeholder-gray-500::placeholder{color:#6b7280;}
html.dark .arena-utilities .dark\:ring-primary-500\/20{--tw-ring-color:color-mix(in srgb, var(--primary-500) 20%, transparent);}
html.dark .arena-utilities .dark\:ring-primary-500\/30{--tw-ring-color:color-mix(in srgb, var(--primary-500) 30%, transparent);}
html.dark .arena-utilities .dark\:ring-primary-500\/40{--tw-ring-color:color-mix(in srgb, var(--primary-500) 40%, transparent);}
html.dark .arena-utilities .dark\:text-amber-400{color:#fbbf24;}
html.dark .arena-utilities .dark\:text-blue-400{color:#60a5fa;}
html.dark .arena-utilities .dark\:text-green-400{color:#4ade80;}
html.dark .arena-utilities .dark\:text-primary-400{color:var(--primary-400);}
html.dark .arena-utilities .dark\:text-purple-400{color:#c084fc;}
html.dark .arena-utilities .dark\:text-red-400{color:#f87171;}
html.dark .arena-utilities .dark\:text-yellow-400{color:#facc15;}
html.dark .arena-utilities .dark\:to-gray-800{--tw-gradient-to:#1f2937;}

@media (min-width: 640px) {
    .arena-utilities .sm\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

@media (min-width: 1024px) {
    .arena-utilities .lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

/* Publish readiness keeps large groups bounded without hiding individual issues. */
.arena-utilities [data-publish-readiness] ul{max-height:24rem;overflow-y:auto;}
.arena-utilities [data-publish-readiness] li+li{margin-top:0.75rem;}
.arena-utilities [data-publish-readiness] summary span{font-weight:400;}

/* Integration catalog browse-and-connect (RN-1375): derived connection states, one primary action, responsive category navigation. */
.arena-utilities .arena-connection-state{display:inline-flex;align-items:center;gap:0.25rem;border:1px solid;border-radius:9999px;padding:0.125rem 0.5rem;font-size:0.75rem;line-height:1rem;font-weight:500;white-space:nowrap;}
.arena-utilities .arena-connection-state--connected{color:#15803d;border-color:#16a34a;}
.arena-utilities .arena-connection-state--needs_attention{color:#92400e;border-color:#d97706;}
.arena-utilities .arena-connection-state--not_connected{color:#374151;border-color:#9ca3af;}
html.dark .arena-utilities .arena-connection-state--connected{color:#86efac;border-color:#4ade80;}
html.dark .arena-utilities .arena-connection-state--needs_attention{color:#fcd34d;border-color:#fbbf24;}
html.dark .arena-utilities .arena-connection-state--not_connected{color:#e5e7eb;border-color:#6b7280;}
.arena-utilities .arena-catalog-primary-action{display:inline-flex;align-items:center;border-radius:0.5rem;background:var(--primary-600);color:#ffffff;padding:0.5rem 1rem;font-size:0.875rem;font-weight:600;}
.arena-utilities .arena-catalog-primary-action:hover{background:var(--primary-500);}
.arena-utilities .arena-integration-catalog a:focus-visible,.arena-utilities .arena-integration-catalog button:focus-visible,.arena-utilities .arena-integration-catalog input:focus-visible,.arena-utilities .arena-integration-catalog select:focus-visible,.arena-utilities .arena-integration-catalog summary:focus-visible{outline:2px solid var(--primary-600);outline-offset:2px;}
html.dark .arena-utilities .arena-integration-catalog a:focus-visible,html.dark .arena-utilities .arena-integration-catalog button:focus-visible,html.dark .arena-utilities .arena-integration-catalog input:focus-visible,html.dark .arena-utilities .arena-integration-catalog select:focus-visible,html.dark .arena-utilities .arena-integration-catalog summary:focus-visible{outline-color:var(--primary-400);}
.arena-utilities .arena-catalog-view--active{border-color:var(--primary-600);color:var(--primary-600);font-weight:600;}
html.dark .arena-utilities .arena-catalog-view--active{border-color:var(--primary-400);color:var(--primary-400);}
.arena-utilities .arena-catalog-categories__select{display:block;width:100%;border:1px solid #d1d5db;border-radius:0.5rem;background:#ffffff;padding:0.5rem 0.75rem;font-size:0.875rem;}
html.dark .arena-utilities .arena-catalog-categories__select{border-color:#374151;background:#111827;color:#f3f4f6;}
.arena-utilities .arena-catalog-categories__rail{display:none;flex-wrap:wrap;gap:0.5rem;}
.arena-utilities .arena-catalog-diagnostics{display:grid;grid-template-columns:auto 1fr;gap:0.25rem 1rem;}
.arena-utilities .arena-catalog-loading{font-size:0.875rem;color:#4b5563;}
/* RN-1496: the fixed-Application banner on the catalog opened from Application settings. */
.arena-utilities .arena-catalog-settings-context{border-color:var(--primary-600);background:#eff6ff;color:#1e3a8a;}
html.dark .arena-utilities .arena-catalog-settings-context{border-color:var(--primary-400);background:rgba(30,58,138,0.35);color:#dbeafe;}
html.dark .arena-utilities .arena-catalog-loading{color:#d1d5db;}
.arena-utilities .arena-catalog-card{display:flex;flex-direction:column;gap:0.5rem;}
.arena-utilities .arena-catalog-card__states{display:flex;flex-wrap:wrap;gap:0.5rem;}
@media (min-width: 640px) {
    .arena-utilities .arena-catalog-categories__mobile{display:none;}
    .arena-utilities .arena-catalog-categories__rail{display:flex;}
}

/* End scoped utilities; the footer modal below is outside the opt-in wrapper. */

/* Application Integrations area (RN-1496): the shared connection-state badge and unfinished setups inside Application settings. They render in Filament tables outside .arena-utilities, so they are scoped to their own classes and .fi-ta. */
.fi-ta .arena-connection-state{display:inline-flex;align-items:center;gap:0.25rem;border:1px solid;border-radius:9999px;padding:0.125rem 0.5rem;font-size:0.75rem;line-height:1rem;font-weight:500;white-space:nowrap;}
.fi-ta .arena-connection-state--connected{color:#15803d;border-color:#16a34a;}
.fi-ta .arena-connection-state--needs_attention{color:#92400e;border-color:#d97706;}
.fi-ta .arena-connection-state--not_connected{color:#374151;border-color:#9ca3af;}
html.dark .fi-ta .arena-connection-state--connected{color:#86efac;border-color:#4ade80;}
html.dark .fi-ta .arena-connection-state--needs_attention{color:#fcd34d;border-color:#fbbf24;}
html.dark .fi-ta .arena-connection-state--not_connected{color:#e5e7eb;border-color:#6b7280;}
.arena-pending-setups{margin-top:0.5rem;border:1px solid #d97706;border-radius:0.5rem;background:#fffbeb;color:#1f2937;padding:0.75rem 1rem;font-size:0.875rem;line-height:1.25rem;}
html.dark .arena-pending-setups{border-color:#b45309;background:rgba(120,53,15,0.3);color:#f3f4f6;}
.arena-pending-setups__title{font-weight:600;}
.arena-pending-setups__list{margin-top:0.5rem;display:grid;gap:0.75rem;}
.arena-pending-setups__name{font-weight:600;}
.arena-pending-setups__meta{color:#4b5563;overflow-wrap:anywhere;}
html.dark .arena-pending-setups__meta{color:#d1d5db;}
.arena-pending-setups__summary{margin-top:0.25rem;}
.arena-pending-setups__action{display:inline-block;margin-top:0.25rem;font-weight:600;text-decoration:underline;color:#1e40af;}
html.dark .arena-pending-setups__action{color:#93c5fd;}
.arena-pending-setups__action:focus-visible{outline:2px solid var(--primary-600);outline-offset:2px;}
.arena-pending-setups__action--danger{margin-left:0.75rem;background:none;border:0;padding:0;cursor:pointer;color:#b91c1c;}
html.dark .arena-pending-setups__action--danger{color:#fca5a5;}
.arena-discard-setup{display:inline-block;margin-top:0.5rem;background:none;border:0;padding:0;cursor:pointer;font-weight:600;text-decoration:underline;color:#b91c1c;}
html.dark .arena-discard-setup{color:#fca5a5;}
.arena-discard-setup:focus-visible,.arena-pending-setups__action--danger:focus-visible{outline:2px solid var(--primary-600);outline-offset:2px;}

/* Footer editing shares the Designer's full-screen header/action layout. */
.fi-modal-window[data-footer-editor-fullscreen] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
}
[data-footer-editor-fullscreen] > .fi-modal-header {
    grid-area: 1 / 1;
    position: static;
    border-bottom: 1px solid var(--gray-200);
}
[data-footer-editor-fullscreen] > .fi-modal-footer {
    grid-area: 1 / 2;
    position: static;
    align-self: stretch;
    align-content: center;
    padding: 1rem 3.5rem 1rem 1.5rem;
    border-top: 0;
    border-bottom: 1px solid var(--gray-200);
}
[data-footer-editor-fullscreen] > .fi-modal-content {
    grid-area: 2 / 1 / 3 / 3;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
    padding: 2rem;
}
.dark [data-footer-editor-fullscreen] > :is(.fi-modal-header, .fi-modal-footer) {
    border-bottom-color: var(--gray-800);
}
@media (max-width: 640px) {
    .fi-modal-window[data-footer-editor-fullscreen] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr);
    }
    [data-footer-editor-fullscreen] > .fi-modal-header { grid-area: 1 / 1; border-bottom: 0; }
    [data-footer-editor-fullscreen] > .fi-modal-footer { grid-area: 2 / 1; padding: 0 1.5rem 1rem; }
    [data-footer-editor-fullscreen] > .fi-modal-content { grid-area: 3 / 1; padding: 1.5rem; }
}

/* Side-by-side shell forms and draft previews, stacked on smaller screens. */
.arena-shell-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.arena-shell-editor-preview { position: sticky; top: 0; min-width: 0; border: 1px solid #e5e7eb; border-radius: .5rem; overflow: hidden; }
.arena-shell-preview-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 1rem; background: #fff; color: #111827; }
.arena-shell-preview-toolbar strong { margin-right: auto; }
.arena-shell-preview-toolbar label { display: flex; gap: .3rem; align-items: center; font-size: .75rem; }
.arena-shell-preview-toolbar select { border: 1px solid #d1d5db; border-radius: .25rem; padding: .25rem 1.5rem .25rem .5rem; font-size: .75rem; }
.arena-shell-preview-help { padding: 0 1rem 1rem; margin: 0; background: #fff; color: #64748b; font-size: .75rem; }
.arena-shell-preview-canvas { background: #e5e7eb; padding: 1rem; overflow: auto; max-height: 70dvh; }
.arena-shell-preview-device { background: #fff; min-height: 160px; width: 100%; margin: auto; }
.arena-shell-preview-device[data-device="mobile"] { width: min(375px, 100%); }
.arena-shell-preview-device arena-module-preview { display: block; }
@media (max-width: 1100px) {
    .arena-shell-editor-grid { grid-template-columns: minmax(0, 1fr); }
    .arena-shell-editor-preview { position: static; }
}
/* Filament Grid renders its responsive grid inside the attributes wrapper. */
.arena-shell-editor-grid > .fi-grid { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) {
    .arena-shell-editor-grid > .fi-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Regular DOM controls keep media playback keyboard operable without trapping Escape. */
.arena-media-keyboard-controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    flex-shrink: 0;
    width: 100%;
    color: inherit;
    font-size: 12px;
}
.arena-media-preview-video .arena-media-keyboard-controls { color: white; }
.arena-media-keyboard-controls button,
.arena-media-keyboard-controls input { min-height: 44px; }
.arena-media-keyboard-controls button {
    padding: 0 12px;
    border: 1px solid currentColor;
    border-radius: 6px;
}
.arena-media-keyboard-controls label { display: flex; flex-direction: column; min-width: 0; }
.arena-media-keyboard-controls input { width: 100%; }
.arena-media-keyboard-controls :is(button, input):focus-visible { outline: 2px solid #7d2dff; outline-offset: 2px; }
.arena-media-keyboard-controls p { grid-column: 1 / -1; }

.arena-media-keyboard-controls-container { width: 100%; flex-shrink: 0; }
.arena-media-keyboard-controls-container > summary {
    min-height: 44px;
    padding: 12px;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer;
}
.arena-media-preview-video .arena-media-keyboard-controls-container { color: white; }
.arena-media-preview-modal .arena-media-preview-stage.arena-media-preview-video {
    overflow-y: auto;
    justify-content: flex-start;
}
.arena-media-preview-modal .arena-media-preview-stage.arena-media-preview-video > video {
    min-height: 96px;
    flex: 1 0 96px;
}