/* Visual layer only: retain the editor's existing columns, sizing and behavior. */
/* The workspace consumes the height left by the toolbar; only its panes scroll. */
html { height: 100%; overflow: hidden; }
body { height: 100vh; height: 100dvh; min-height: 0 !important; overflow: hidden; }
body > div:first-child { flex-shrink: 0; }
#editor-body { flex: 1 1 0% !important; min-height: 0; overflow: hidden; }
#editor-body > .row { min-height: 0; height: 100%; flex-wrap: nowrap; }
#editor-body > .row > .col-3,
#editor-body > .row > .col-4 { min-height: 0; height: 100%; }
#editor-body > .row > .col-4 { display: flex; flex-direction: column; padding-bottom: 12px; }
#brand-playables-select { flex-shrink: 0; }
#editor-body > .row > .col-3 > .bg-dark { display: flex; flex-direction: column; min-height: 0; }
#editor-body > .row > .col-3 > .bg-dark > .d-flex { flex-shrink: 0; }
#editor-body .scroll { height: auto; min-height: 0; flex: 1 1 0%; overflow-y: auto; }
#editor-body .settings-scroll { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.preview-stage { flex: 1 1 0%; min-height: 0; width: 100%; display: grid; place-items: center; container-type: size; }
.preview-stage .p-9-16 { height: min(100cqh, calc(100cqw * 16 / 9)); width: auto; max-width: 100%; aspect-ratio: 9 / 16; }
.preview-stage .l-16-9 { width: min(100cqw, calc(100cqh * 16 / 9)); height: auto; max-height: 100%; margin-top: 0; aspect-ratio: 16 / 9; }
#change-user, #site-loader { min-height: 0; overflow-y: auto; }
#login-content { overflow-y: auto; }
:root {
    --studio-ink: #202536;
    --studio-muted: #697386;
    --studio-border: #e2e5ed;
    --studio-accent: #6554c0;
    --studio-accent-hover: #5140a6;
    --studio-chrome: #1c2130;
    --bs-primary: #6554c0;
    --bs-primary-rgb: 101, 84, 192;
    --bs-link-color: #6554c0;
    --bs-link-hover-color: #5140a6;
    --bs-body-color: #202536;
    --bs-border-color: #e2e5ed;
    --bs-border-radius: .625rem;
}
body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--studio-ink);
    background: #f4f5f9;
    -webkit-font-smoothing: antialiased;
}
button { color: inherit; }
h1, h2, h3, h4, .modal-title { font-weight: 650; letter-spacing: -.025em; }
.navbar.bg-dark {
    background: var(--studio-chrome) !important;
    background-image: none !important;
    border-color: #33394b !important;
}
.navbar-brand { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
.brand-title { color: #edf0fa; }
.navbar-brand small { font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.navbar .btn-link { color: #b9c0d4; text-decoration: none; border-radius: 8px !important; }
.navbar .btn-link:hover, .navbar .btn-link:focus-visible { color: #fff; background: #343b50; }
.navbar .btn-group { gap: 4px; }
.navbar .form-select { background-color: #2a3042; border-color: #424a60; color: #eef0f7; }
#editor-body > .row {
    background: radial-gradient(ellipse at 50% 25%, #eef0f7, #dfe3ed) !important;
}
#editor-body > .row > .col-3 > .bg-dark { background: #252b3b !important; }
#select-environment { color-scheme: dark; background-color: #252b3b; color: #e2e6f2; border-color: #41495e; }
#button-new { color: #c9bfff; text-decoration: none; }
#button-new:hover { color: #fff; background: #373d53; border-radius: 10px; }
.templates-container, .template-instances-container { box-shadow: none; }
#list-group-brands { gap: 6px; }
#list-group-brands .list-group-item {
    background: #2e3548; color: #e3e7f2; border: 1px solid #40485e;
    border-radius: 10px; text-align: left;
    transition: background-color .15s, border-color .15s;
}
#list-group-brands .list-group-item:hover { background: #394157; border-color: #77809a; }
#list-group-brands .list-group-item.active {
    background: #454066; border-color: #ad9df4;
    box-shadow: inset 3px 0 #baaaff;
}
#brand-playables-select { border-color: #cdd3e0; box-shadow: 0 2px 5px #20253608; }
#game-iframe {
    border: 1px solid #c5cad8;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 45px #20253624, 0 3px 8px #20253612;
}
.settings-container {
    background: #fff; border: 1px solid var(--studio-border);
    border-radius: 14px; box-shadow: 0 4px 24px #20253608;
}
.settings-container > h2 { font-size: 1.2rem; }
.settings-container label, .form-label { color: #465065; font-size: .85rem; font-weight: 600; }
.text-muted { color: var(--studio-muted) !important; }
.form-control, .form-select {
    font-size: .875rem; border-color: #d8dce6; border-radius: 8px;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:hover:not(:disabled), .form-select:hover:not(:disabled) { border-color: #a5aec1; }
.form-control:focus, .form-select:focus {
    border-color: #8a79db; box-shadow: 0 0 0 3px #6554c021;
}
.form-control:disabled, .form-select:disabled { background-color: #f0f2f7; color: #737d90; }
input[type="color"] { border: 1px solid #d8dce6; border-radius: 8px; padding: 3px; cursor: pointer; }
input[type="range"], input[type="checkbox"] { accent-color: var(--studio-accent); }
.form-check-input:checked { background-color: var(--studio-accent); border-color: var(--studio-accent); }
.form-check-input:focus { border-color: #8a79db; box-shadow: 0 0 0 3px #6554c021; }
.btn { font-weight: 600; font-size: .875rem; border-radius: 8px; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.btn-primary {
    --bs-btn-bg: #6554c0; --bs-btn-border-color: #6554c0;
    --bs-btn-hover-bg: #5140a6; --bs-btn-hover-border-color: #5140a6;
    --bs-btn-active-bg: #453591; --bs-btn-active-border-color: #453591;
    --bs-btn-disabled-bg: #6554c0; --bs-btn-disabled-border-color: #6554c0;
    --bs-btn-focus-shadow-rgb: 101, 84, 192;
}
.btn-outline-primary { --bs-btn-color: #6554c0; --bs-btn-border-color: #a99ddd; --bs-btn-hover-bg: #6554c0; --bs-btn-hover-border-color: #6554c0; --bs-btn-active-bg: #5140a6; --bs-btn-active-border-color: #5140a6; }
.btn-light { --bs-btn-bg: #f5f6fa; --bs-btn-border-color: #dfe3ec; --bs-btn-hover-bg: #e9ecf4; --bs-btn-hover-border-color: #b9c2d4; }
.btn-secondary { --bs-btn-bg: #596479; --bs-btn-border-color: #596479; }
.btn-link { text-decoration: none; }
.btn:disabled { opacity: .5; }
:is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #9380ed; outline-offset: 3px; }
.nav-tabs { border-color: var(--studio-border); gap: 2px; }
.nav-tabs .nav-link { color: #697386; font-size: .85rem; font-weight: 600; border-radius: 8px 8px 0 0; }
.nav-tabs .nav-link:hover { color: var(--studio-accent); background: #f6f4fc; }
.nav-tabs .nav-link.active { color: #5140a6; background: #f4f1fc; border-color: #e2dcef #e2dcef #f4f1fc; }
.accordion { --bs-accordion-border-color: #e3e6ee; --bs-accordion-active-bg: #f3f0fb; --bs-accordion-active-color: #5140a6; --bs-accordion-btn-focus-box-shadow: 0 0 0 3px #6554c021; }
.accordion-button { font-size: .875rem; font-weight: 600; color: #364057; }
.accordion-body { background: #fafbfe; }
.accordion-with-identifier .accordion-identifier { color: #727d92; font-size: .75rem; font-variant-numeric: tabular-nums; }
.container-border { border: 1px solid #e2e5ed; border-radius: 12px; }
.upload-box, .brand-asset-dropoff { border: 1px dashed #aeb8cc; border-radius: 12px; background: #f8f9fd; color: #647089; }
.upload-box:hover, .upload-box.dragover, .brand-asset-dropoff:hover { background: #f2effc; border-color: #8d7bd5; transform: none; }
.brand-asset-icon { color: #8370cf; }
.brand-asset-title { color: #303950; }
.brand-asset-subtitle { color: #6f7990; }
.brand-asset-dropoff.uploaded { background: #f0faf5; border-color: #72b893; }
.modal { --bs-modal-border-radius: 16px; --bs-modal-border-color: #e2e5ed; --bs-modal-header-border-color: #edf0f5; --bs-modal-footer-border-color: #edf0f5; }
.modal-content { box-shadow: 0 24px 80px #10172733; }
.modal-title { font-size: 1.15rem; }
.modal-header, .modal-footer { background: #fafbfe; }
.modal-backdrop { --bs-backdrop-bg: #161c2e; --bs-backdrop-opacity: .55; }
.dropdown-menu { border: 1px solid #e2e5ed; border-radius: 10px; padding: 6px; box-shadow: 0 10px 32px #2025361a; font-size: .875rem; }
.dropdown-item { border-radius: 6px; }
.dropdown-item:hover, .dropdown-item:focus { background: #f1eefb; color: #5140a6; }
.dropdown-item.active, .dropdown-item:active { background: #6554c0; color: #fff; }
.card { border-color: #e2e5ed; border-radius: 12px; }
.card-header { background: #f5f6fa; border-color: #e2e5ed; }
.table { --bs-table-border-color: #e8ebf2; font-size: .875rem; }
.tooltip { --bs-tooltip-bg: #252b3b; --bs-tooltip-border-radius: 7px; }
.scroll, .settings-scroll { scrollbar-width: thin; scrollbar-color: #8792aa55 transparent; }
.scroll::-webkit-scrollbar, .settings-scroll::-webkit-scrollbar { display: block; width: 6px; }
.scroll::-webkit-scrollbar-thumb, .settings-scroll::-webkit-scrollbar-thumb { background: #8792aa66; border-radius: 6px; }
#login-overlay { background: radial-gradient(ellipse at top, #383150, #1c2130 65%); }
#login-box { border: 1px solid #e5e3ee; border-radius: 16px; box-shadow: 0 24px 64px #0003; }
#login-content h1, #login-content h2 { letter-spacing: -.035em; }
#loader-message { font-weight: 600; color: #303950; }
#loader > div { border: 1px solid #e2e5ed; border-radius: 16px !important; box-shadow: 0 24px 64px #10172733 !important; }
@media (prefers-reduced-motion: reduce) {
    .btn, .form-control, .form-select, .upload-box, .brand-asset-dropoff, .list-group-item { transition: none !important; }
}

/* Preserve the original centers until measured sections need more room. */
#editor-buttons { min-height: 40px; }
.editor-user-actions { min-width: 0; }
.editor-user-actions #username { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-user-actions #user-metrics-cog, #status-icon { flex-shrink: 0; }
#editor-buttons .editor-tool-actions { left: var(--tools-center, 50%) !important; }
#editor-buttons #button-status { left: var(--status-left, calc(50% + 260px)) !important; }
#editor-buttons #status-text { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#warning-popup { max-width: calc(100vw - 24px); }
#warning-popup-body { max-height: min(55vh, 420px); overflow-y: auto; overflow-wrap: anywhere; }
#editor-buttons.toolbar-constrained #warning-popup { left: auto !important; right: 12px; top: calc(100% + 8px) !important; }
.toolbar-constrained #warning-popup > div:first-child { display: none; }
#editor-buttons.toolbar-stacked { flex-wrap: wrap; gap: 8px 12px; }
#editor-buttons.toolbar-stacked .editor-tool-actions { position: static !important; transform: none !important; flex: 0 0 100%; text-align: center; }
#editor-buttons.toolbar-stacked #button-status { position: static !important; transform: none !important; min-width: 0; flex: 0 1 auto; }
#editor-buttons.toolbar-stacked .editor-user-actions { max-width: 45% !important; margin-right: 0 !important; }
@media (max-width: 575.98px) {
    #editor-buttons .editor-tool-actions .btn { padding-left: 10px; padding-right: 10px; }
    #editor-buttons .editor-tool-actions .btn-group { gap: 2px; }
    #editor-buttons #status-text { max-width: 110px; font-size: .8rem; }
}