:root { color-scheme: dark; }
body { min-height: 100vh; background: radial-gradient(circle at top, #172554 0, #0b1220 42rem); }
.content-card { max-width: 44rem; margin-inline: auto; }
.widget-stage { min-height: 16rem; border: 1px dashed var(--bs-border-color); border-radius: 1rem; background: rgba(0, 0, 0, .18); }
.table > :not(caption) > * > * { vertical-align: middle; }
.widget-preview-frame { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: repeating-conic-gradient(#334155 0 25%, #1e293b 0 50%) 50% / 24px 24px; }
.widget-preview-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.widget-config-scroll { scrollbar-gutter: stable; }
.widget-color-control .clr-field { display: block; width: 100%; }
.widget-color-control .clr-field input { width: 100%; padding-right: 3rem; font-family: var(--bs-font-monospace); }
.widget-color-control .clr-field button { width: 2.5rem; border-left: 1px solid var(--bs-border-color); border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; pointer-events: auto; }
.message-inbox-message { min-width: 18rem; max-width: 52rem; overflow-wrap: anywhere; white-space: normal; }
.card[data-widget-error-target].is-invalid { border-color: var(--bs-form-invalid-border-color); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-form-invalid-border-color) 24%, transparent); }
.local-time--compact { white-space: pre-line; }
.clr-picker { z-index: 1090; font-family: var(--bs-body-font-family); }
.clr-picker.clr-dark { border: 1px solid var(--bs-border-color); background-color: var(--bs-tertiary-bg); }
.clr-picker input.clr-color { font-family: var(--bs-font-monospace); }
@media (min-width: 992px) {
    .widget-editor-preview { position: sticky; top: 1rem; }
    .widget-config-scroll { max-height: calc(100vh - 7rem); overflow-y: auto; padding-right: .4rem; }
}