/* =============================================================================

   Axium Studio ��� Global Light / Dark theme tokens + overrides

   Driven by html[data-bs-theme="light|dark"] (Bootstrap 5.3) and [data-theme].

   ============================================================================= */



:root,

html[data-bs-theme="light"],

html[data-theme="light"] {

  color-scheme: light;

  --axm-bg: #f4f6f8;

  --axm-bg-elevated: #ffffff;

  --axm-surface: #ffffff;

  --axm-surface-2: #f8f9fa;

  --axm-surface-3: #eef1f4;

  --axm-text: #212529;

  --axm-text-muted: #6c757d;

  --axm-border: #dee2e6;

  --axm-border-strong: #ced4da;

  --axm-navbar-bg: #ffffff;

  --axm-navbar-border: #e0e0e0;

  --axm-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);

  --axm-input-bg: #ffffff;

  --axm-input-border: #ced4da;

  --axm-dropdown-bg: #ffffff;

  --axm-dropdown-hover: #f8f9fa;

  --axm-modal-bg: #ffffff;

  --axm-modal-header: #f8f9fa;

  --axm-table-stripe: #f8f9fa;

  --axm-scrollbar: #c5cdd6;

  --axm-accent: #0d6efd;

  --axm-toggle-track: #e9ecef;

  --axm-toggle-knob: #ffffff;

}



html[data-bs-theme="dark"],

html[data-theme="dark"] {

  color-scheme: dark;

  --axm-bg: #0f1419;

  --axm-bg-elevated: #151b22;

  --axm-surface: #1a222c;

  --axm-surface-2: #222b36;

  --axm-surface-3: #2a3441;

  --axm-text: #8c9299;

  --axm-text-muted: #9aa3af;

  --axm-border: #33404f;

  --axm-border-strong: #3f4d5e;

  --axm-navbar-bg: #151b22;

  --axm-navbar-border: #2a3441;

  --axm-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);

  --axm-input-bg: #1a222c;

  --axm-input-border: #3f4d5e;

  --axm-dropdown-bg: #1a222c;

  --axm-dropdown-hover: #222b36;

  --axm-modal-bg: #1a222c;

  --axm-modal-header: #222b36;

  --axm-table-stripe: #1f2732;

  --axm-scrollbar: #4a5563;

  --axm-accent: #6ea8fe;

  --axm-toggle-track: #2a3441;

  --axm-toggle-knob: #8c9299;



  /* Bootstrap 5.3 token bridge for forms/modals/dropdowns */

  --bs-body-bg: var(--axm-bg);

  --bs-body-color: var(--axm-text);

  --bs-secondary-bg: var(--axm-surface-2);

  --bs-tertiary-bg: var(--axm-surface-3);

  --bs-border-color: var(--axm-border);

  --bs-border-color-translucent: rgba(255, 255, 255, 0.12);

  --bs-heading-color: var(--axm-text);

  --bs-link-color: #8bb4ff;

  --bs-link-hover-color: #b6d0ff;

  --bs-emphasis-color: #fff;

  --bs-secondary-color: var(--axm-text-muted);

  --bs-tertiary-color: var(--axm-text-muted);

  --bs-card-bg: var(--axm-surface);

  --bs-card-cap-bg: var(--axm-surface-2);

  --bs-card-border-color: var(--axm-border);

  --bs-modal-bg: var(--axm-modal-bg);

  --bs-modal-border-color: var(--axm-border);

  --bs-modal-header-border-color: var(--axm-border);

  --bs-modal-footer-border-color: var(--axm-border);

  --bs-dropdown-bg: var(--axm-dropdown-bg);

  --bs-dropdown-link-color: var(--axm-text);

  --bs-dropdown-link-hover-bg: var(--axm-dropdown-hover);

  --bs-dropdown-border-color: var(--axm-border);

  --bs-form-control-bg: var(--axm-input-bg);

  --bs-body-bg-rgb: 15, 20, 25;

  --bs-body-color-rgb: 232, 234, 237;

}



/* ----- Global shell ----- */

html[data-bs-theme] body,

html[data-theme] body {

  background-color: var(--axm-bg) !important;

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .text-muted,

html[data-theme="dark"] .text-muted,

html[data-bs-theme="dark"] .text-secondary,

html[data-theme="dark"] .text-secondary {

  color: var(--axm-text-muted) !important;

}



html[data-bs-theme="dark"] .text-dark,

html[data-theme="dark"] .text-dark {

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .border,

html[data-theme="dark"] .border,

html[data-bs-theme="dark"] .border-bottom,

html[data-theme="dark"] .border-bottom,

html[data-bs-theme="dark"] .border-top,

html[data-theme="dark"] .border-top,

html[data-bs-theme="dark"] .border-start,

html[data-theme="dark"] .border-start,

html[data-bs-theme="dark"] .border-end,

html[data-theme="dark"] .border-end {

  border-color: var(--axm-border) !important;

}



/* Bootstrap utility remaps */

html[data-bs-theme="dark"] .bg-white,

html[data-theme="dark"] .bg-white,

html[data-bs-theme="dark"] .bg-light,

html[data-theme="dark"] .bg-light,

html[data-bs-theme="dark"] .bg-body,

html[data-theme="dark"] .bg-body,

html[data-bs-theme="dark"] .bg-body-tertiary,

html[data-theme="dark"] .bg-body-tertiary {

  background-color: var(--axm-surface) !important;

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .bg-light {

  background-color: var(--axm-surface-2) !important;

}



/* Navbar */

html[data-bs-theme] .navbar,

html[data-theme] .navbar,

html[data-bs-theme] .navbar.navbar-light.bg-white,

html[data-theme] .navbar.navbar-light.bg-white {

  background-color: var(--axm-navbar-bg) !important;

  border-bottom: 1px solid var(--axm-navbar-border) !important;

}



html[data-bs-theme="dark"] .navbar,

html[data-theme="dark"] .navbar {

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .navbar .navbar-brand,

html[data-theme="dark"] .navbar .navbar-brand,

html[data-bs-theme="dark"] #companyTitleDisplay,

html[data-theme="dark"] #companyTitleDisplay {

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link,

html[data-theme="dark"] .navbar-light .navbar-nav .nav-link {

  color: var(--axm-text-muted);

}



/* Cards / panels / editor shells */

html[data-bs-theme] .card,

html[data-theme] .card,

html[data-bs-theme] .test-editor-container,

html[data-theme] .test-editor-container {

  background-color: var(--axm-surface);

  color: var(--axm-text);

  box-shadow: var(--axm-shadow);

  border: 1px solid var(--axm-border);

}



html[data-bs-theme="dark"] .card-header,

html[data-theme="dark"] .card-header,

html[data-bs-theme="dark"] .card-footer,

html[data-theme="dark"] .card-footer {

  background-color: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .test-editor-sidebar,

html[data-bs-theme="dark"] .script-editor-toolbar,

html[data-theme="dark"] .script-editor-toolbar,

html[data-bs-theme="dark"] .test-editor-canvas-area,

html[data-theme="dark"] .test-editor-canvas-area {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text);

}



html[data-bs-theme="dark"] #script-result-area,

html[data-theme="dark"] #script-result-area,

html[data-bs-theme="dark"] #ssml-result-area,

html[data-theme="dark"] #ssml-result-area {

  background-color: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text);

}



html[data-bs-theme="dark"] #script-result-area:focus,

html[data-theme="dark"] #script-result-area:focus,

html[data-bs-theme="dark"] #ssml-result-area:focus,

html[data-theme="dark"] #ssml-result-area:focus {

  background-color: var(--axm-surface) !important;

}



/* Forms */

html[data-bs-theme="dark"] .form-control,

html[data-theme="dark"] .form-control,

html[data-bs-theme="dark"] .form-select,

html[data-theme="dark"] .form-select,

html[data-bs-theme="dark"] textarea,

html[data-theme="dark"] textarea,

html[data-bs-theme="dark"] input[type="text"],

html[data-theme="dark"] input[type="text"],

html[data-bs-theme="dark"] input[type="email"],

html[data-theme="dark"] input[type="email"],

html[data-bs-theme="dark"] input[type="number"],

html[data-theme="dark"] input[type="number"],

html[data-bs-theme="dark"] input[type="search"],

html[data-theme="dark"] input[type="search"],

html[data-bs-theme="dark"] input[type="url"],

html[data-theme="dark"] input[type="url"],

html[data-bs-theme="dark"] input[type="password"],

html[data-theme="dark"] input[type="password"] {

  background-color: var(--axm-input-bg) !important;

  border-color: var(--axm-input-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .form-control::placeholder,

html[data-theme="dark"] .form-control::placeholder,

html[data-bs-theme="dark"] textarea::placeholder,

html[data-theme="dark"] textarea::placeholder {

  color: var(--axm-text-muted);

  opacity: 0.85;

}



html[data-bs-theme="dark"] .form-control:focus,

html[data-theme="dark"] .form-control:focus,

html[data-bs-theme="dark"] .form-select:focus,

html[data-theme="dark"] .form-select:focus {

  background-color: var(--axm-input-bg) !important;

  color: var(--axm-text) !important;

  border-color: var(--axm-accent) !important;

}



html[data-bs-theme="dark"] .form-label,

html[data-theme="dark"] .form-label,

html[data-bs-theme="dark"] label,

html[data-theme="dark"] label {

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .input-group-text,

html[data-theme="dark"] .input-group-text {

  background-color: var(--axm-surface-2) !important;

  border-color: var(--axm-input-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .form-check-input,

html[data-theme="dark"] .form-check-input {

  background-color: var(--axm-surface-2);

  border-color: var(--axm-border-strong);

}



/* Buttons ��� keep primary/success colors; tone neutral chrome */

html[data-bs-theme="dark"] .btn-light,

html[data-theme="dark"] .btn-light,

html[data-bs-theme="dark"] .btn-outline-secondary,

html[data-theme="dark"] .btn-outline-secondary {

  background-color: var(--axm-surface-2);

  border-color: var(--axm-border);

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .btn-outline-dark,

html[data-theme="dark"] .btn-outline-dark {

  color: var(--axm-text);

  border-color: var(--axm-border-strong);

}



html[data-bs-theme="dark"] .btn-close,

html[data-theme="dark"] .btn-close {

  filter: invert(1) grayscale(100%);

  opacity: 0.75;

}



/* Dropdowns / menus */

html[data-bs-theme="dark"] .dropdown-menu,

html[data-theme="dark"] .dropdown-menu,

html[data-bs-theme="dark"] .axm-actions-menu,

html[data-theme="dark"] .axm-actions-menu {

  background-color: var(--axm-dropdown-bg) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text);

  box-shadow: var(--axm-shadow);

}



html[data-bs-theme="dark"] .dropdown-item,

html[data-theme="dark"] .dropdown-item,

html[data-bs-theme="dark"] .axm-actions-item,

html[data-theme="dark"] .axm-actions-item {

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .dropdown-item:hover,

html[data-theme="dark"] .dropdown-item:hover,

html[data-bs-theme="dark"] .dropdown-item:focus,

html[data-theme="dark"] .dropdown-item:focus,

html[data-bs-theme="dark"] .axm-actions-item:hover,

html[data-theme="dark"] .axm-actions-item:hover {

  background-color: var(--axm-dropdown-hover) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .dropdown-divider,

html[data-theme="dark"] .dropdown-divider {

  border-top-color: var(--axm-border) !important;

}



html[data-bs-theme="dark"] .axm-actions-btn,

html[data-theme="dark"] .axm-actions-btn {

  background-color: #f97316 !important;

  border-color: #ea580c !important;

  color: #ffffff !important;

  font-size: 0.8rem !important;

}



html[data-bs-theme="dark"] .axm-actions-btn:hover,

html[data-theme="dark"] .axm-actions-btn:hover,

html[data-bs-theme="dark"] .axm-actions-btn.show,

html[data-theme="dark"] .axm-actions-btn.show {

  background-color: #ea580c !important;

  border-color: #c2410c !important;

  color: #ffffff !important;

}

/*

html[data-bs-theme="dark"] .axm-actions-menu,

html[data-theme="dark"] .axm-actions-menu,

html[data-bs-theme="dark"] .axm-actions-menu .axm-actions-item,

html[data-theme="dark"] .axm-actions-menu .axm-actions-item,

html[data-bs-theme="dark"] .axm-actions-menu .axm-actions-label,

html[data-theme="dark"] .axm-actions-menu .axm-actions-label {

  font-family: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif !important;

}

*/



html[data-bs-theme="dark"] .axm-actions-menu .axm-actions-item,

html[data-theme="dark"] .axm-actions-menu .axm-actions-item {

  background: transparent !important;

  color: var(--axm-text) !important;

  font-size: 0.875rem !important;

  font-weight: 400 !important;

}



html[data-bs-theme="dark"] .axm-actions-menu .axm-actions-item:hover,

html[data-theme="dark"] .axm-actions-menu .axm-actions-item:hover,

html[data-bs-theme="dark"] .axm-actions-menu .axm-actions-item:focus,

html[data-theme="dark"] .axm-actions-menu .axm-actions-item:focus,

html[data-bs-theme="dark"] .axm-actions-menu .axm-actions-item:active,

html[data-theme="dark"] .axm-actions-menu .axm-actions-item:active,

html[data-bs-theme="dark"] .axm-actions-menu .axm-actions-item.active,

html[data-theme="dark"] .axm-actions-menu .axm-actions-item.active {

  background-color: var(--axm-dropdown-hover) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-actions-divider,

html[data-theme="dark"] .axm-actions-divider {

  border-top-color: var(--axm-border) !important;

}



/* ----- Actions dropdown: light + dark (orange trigger, Inter menu, colored icons) ----- */

.navbar .axm-actions-dropdown {

  position: relative;

}



.navbar .axm-actions-dropdown .axm-actions-btn.btn {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  height: 34px !important;

  min-height: 34px !important;

  padding: 0 14px !important;

  gap: 6px;

  background-color: #f97316 !important;

  background-image: none !important;

  border: 1.5px solid #ea580c !important;

  border-radius: 7px !important;

  color: #ffffff !important;

  font-size: 0.8125rem !important;

  line-height: 1 !important;

  box-shadow: none !important;

  transform: none !important;

  white-space: nowrap !important;

  overflow: visible !important;

}



.navbar .axm-actions-dropdown .axm-actions-btn.btn:hover,

.navbar .axm-actions-dropdown .axm-actions-btn.btn:focus,

.navbar .axm-actions-dropdown .axm-actions-btn.btn:focus-visible,

.navbar .axm-actions-dropdown .axm-actions-btn.btn.show,

.navbar .axm-actions-dropdown .axm-actions-btn.btn:active {

  background-color: #ea580c !important;

  border-color: #c2410c !important;

  color: #ffffff !important;

  box-shadow: none !important;

  transform: none !important;

}



.navbar .axm-actions-dropdown .axm-actions-btn.dropdown-toggle::after {

  margin-left: 0.35rem;

  vertical-align: 0.12em;

  border-top-color: currentColor;

  opacity: 0.85;

}



.navbar .axm-actions-menu.dropdown-menu {

  min-width: 210px;

  padding: 8px 6px;

  margin-top: 6px !important;

  inset: auto 0 auto auto !important;

  transform: none !important;

  border-radius: 12px;

  border: 1px solid var(--axm-border, #e5e7eb);

  background: var(--axm-dropdown-bg, #fff) !important;

  box-shadow: var(--axm-shadow, 0 10px 28px rgba(15, 23, 42, 0.12)) !important;

  z-index: 2050 !important;

}



.navbar .axm-actions-menu .dropdown-item.axm-actions-item,

.navbar .axm-actions-menu .axm-actions-item {

  display: flex !important;

  align-items: center !important;

  gap: 12px;

  width: 100%;

  padding: 6px 12px !important;

  border-radius: 8px;

  font-size: 0.875rem !important;

  font-weight: 400 !important;

  line-height: 1.35 !important;

  color: var(--axm-text, #1e293b) !important;

  background: transparent !important;

  white-space: nowrap;

}



.navbar .axm-actions-menu .axm-actions-label {

  font-size: inherit !important;

  font-weight: inherit !important;

  line-height: inherit !important;

  color: inherit !important;

}



/* .navbar .axm-actions-menu .axm-actions-item .axm-actions-icon--blue {

  color: #2563eb !important;

}



.navbar .axm-actions-menu .axm-actions-item .axm-actions-icon--green {

  color: #16a34a !important;

} */



.navbar .axm-actions-menu .axm-actions-item .axm-actions-icon--muted {

  color: var(--axm-text-muted, #94a3b8) !important;

}



.navbar .axm-actions-menu .axm-actions-item:hover,

.navbar .axm-actions-menu .axm-actions-item:focus,

.navbar .axm-actions-menu .axm-actions-item:focus-visible {

  background: var(--axm-dropdown-hover, #f1f5f9) !important;

  color: var(--axm-text, #0f172a) !important;

}



.navbar .axm-actions-menu .axm-actions-item.is-disabled,

.navbar .axm-actions-menu .axm-actions-item:disabled {

  pointer-events: none;

  opacity: 1;

  color: var(--axm-text-muted, #94a3b8) !important;

  background: transparent !important;

}



.navbar .axm-actions-menu .axm-actions-item.is-disabled .axm-actions-label,

.navbar .axm-actions-menu .axm-actions-item:disabled .axm-actions-label,

.navbar .axm-actions-menu .axm-actions-item.is-disabled .axm-actions-icon,

.navbar .axm-actions-menu .axm-actions-item:disabled .axm-actions-icon {

  color: var(--axm-text-muted, #94a3b8) !important;

}



.navbar .axm-actions-divider {

  margin: 6px 8px;

  border-color: var(--axm-border, #e5e7eb);

  opacity: 1;

}



/* Image Composition secondary buttons (Generate Webpage / Create Video) */

html[data-bs-theme="dark"] .ic-btn-secondary,

html[data-theme="dark"] .ic-btn-secondary {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border-strong) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .ic-btn-secondary:hover,

html[data-theme="dark"] .ic-btn-secondary:hover,

html[data-bs-theme="dark"] .ic-btn-secondary:focus,

html[data-theme="dark"] .ic-btn-secondary:focus,

html[data-bs-theme="dark"] .ic-btn-secondary.show,

html[data-theme="dark"] .ic-btn-secondary.show {

  background: var(--axm-surface-3) !important;

  border-color: var(--axm-border-strong) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .ic-btn-ghost,

html[data-theme="dark"] .ic-btn-ghost {

  background: transparent !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text-muted) !important;

}



html[data-bs-theme="dark"] .ic-btn-ghost:hover,

html[data-theme="dark"] .ic-btn-ghost:hover {

  background: var(--axm-surface-2) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .ic-select-wrap,

html[data-theme="dark"] .ic-select-wrap {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border-strong) !important;

}



html[data-bs-theme="dark"] .ic-select-wrap select,

html[data-theme="dark"] .ic-select-wrap select {

  color: var(--axm-text) !important;

  background: transparent !important;

}



/* Modals */

html[data-bs-theme="dark"] .modal-content,

html[data-theme="dark"] .modal-content {

  background-color: var(--axm-modal-bg) !important;

  color: var(--axm-text);

  border-color: var(--axm-border) !important;

}



html[data-bs-theme="dark"] .modal-header,

html[data-theme="dark"] .modal-header,

html[data-bs-theme="dark"] .modal-footer,

html[data-theme="dark"] .modal-footer {

  background-color: var(--axm-modal-header) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .modal-title,

html[data-theme="dark"] .modal-title {

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .modal-backdrop,

html[data-theme="dark"] .modal-backdrop {

  opacity: 0.7;

}



/* Tables / lists */

html[data-bs-theme="dark"] .table,

html[data-theme="dark"] .table {

  --bs-table-bg: var(--axm-surface);

  --bs-table-color: var(--axm-text);

  --bs-table-border-color: var(--axm-border);

  --bs-table-striped-bg: var(--axm-table-stripe);

  --bs-table-hover-bg: var(--axm-surface-3);

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .list-group-item,

html[data-theme="dark"] .list-group-item {

  background-color: var(--axm-surface);

  border-color: var(--axm-border);

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .list-group-item-action:hover,

html[data-theme="dark"] .list-group-item-action:hover {

  background-color: var(--axm-surface-2);

  color: var(--axm-text);

}



/* Tabs / nav pills */

html[data-bs-theme="dark"] .nav-tabs,

html[data-theme="dark"] .nav-tabs {

  border-bottom-color: var(--axm-border);

}



html[data-bs-theme="dark"] .nav-tabs .nav-link,

html[data-theme="dark"] .nav-tabs .nav-link,

html[data-bs-theme="dark"] .script-editor-tabs .nav-link,

html[data-theme="dark"] .script-editor-tabs .nav-link {

  color: var(--axm-text-muted);

}



html[data-bs-theme="dark"] .nav-tabs .nav-link.active,

html[data-theme="dark"] .nav-tabs .nav-link.active {

  background-color: var(--axm-surface);

  border-color: var(--axm-border) var(--axm-border) var(--axm-surface);

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .script-editor-tabs .nav-link.active,

html[data-theme="dark"] .script-editor-tabs .nav-link.active {

  color: var(--axm-accent);

  border-bottom-color: var(--axm-accent);

}



/* Accordion / offcanvas / toast */

html[data-bs-theme="dark"] .accordion-item,

html[data-theme="dark"] .accordion-item,

html[data-bs-theme="dark"] .accordion-button,

html[data-theme="dark"] .accordion-button,

html[data-bs-theme="dark"] .offcanvas,

html[data-theme="dark"] .offcanvas,

html[data-bs-theme="dark"] .toast,

html[data-theme="dark"] .toast {

  background-color: var(--axm-surface);

  color: var(--axm-text);

  border-color: var(--axm-border);

}



html[data-bs-theme="dark"] .accordion-button:not(.collapsed),

html[data-theme="dark"] .accordion-button:not(.collapsed) {

  background-color: var(--axm-surface-2);

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .accordion-button::after,

html[data-theme="dark"] .accordion-button::after {

  filter: invert(1);

}



/* Alerts ��� keep semantic hues, darken surfaces slightly */

html[data-bs-theme="dark"] .alert,

html[data-theme="dark"] .alert {

  border-color: var(--axm-border);

}



/* Project browser / feature panels (common white shells) */

html[data-bs-theme="dark"] #projectBrowserModal .modal-content,

html[data-theme="dark"] #projectBrowserModal .modal-content,

html[data-bs-theme="dark"] .pb-card,

html[data-theme="dark"] .pb-card,

html[data-bs-theme="dark"] .project-browser,

html[data-theme="dark"] .project-browser {

  background-color: var(--axm-surface) !important;

  color: var(--axm-text);

  border-color: var(--axm-border) !important;

}



/* Voice Picker modal ��� ensure shell tracks global theme (tokens in voice-picker-v2.css) */

html[data-bs-theme="dark"] #advancedVoiceSelectorModal .modal-content,

html[data-theme="dark"] #advancedVoiceSelectorModal .modal-content,

html[data-bs-theme="dark"] #advancedVoiceSelectorModal .modal-body,

html[data-theme="dark"] #advancedVoiceSelectorModal .modal-body {

  background-color: var(--axm-modal-bg) !important;

  color: var(--axm-text) !important;

  border-color: var(--axm-border) !important;

}



/* Music mixer / other feature modals with hard light shells */

html[data-bs-theme="dark"] #addMusicModal .modal-content,

html[data-theme="dark"] #addMusicModal .modal-content,

html[data-bs-theme="dark"] #musicMixerModal .modal-content,

html[data-theme="dark"] #musicMixerModal .modal-content,

html[data-bs-theme="dark"] #projectBrowserModal .modal-content,

html[data-theme="dark"] #projectBrowserModal .modal-content,

html[data-bs-theme="dark"] #assetLibraryModal .modal-content,

html[data-theme="dark"] #assetLibraryModal .modal-content,

html[data-bs-theme="dark"] #imageLibraryModal .modal-content,

html[data-theme="dark"] #imageLibraryModal .modal-content,

html[data-bs-theme="dark"] #enlargeImageModal .modal-content,

html[data-theme="dark"] #enlargeImageModal .modal-content,

html[data-bs-theme="dark"] #customImageModal .modal-content,

html[data-theme="dark"] #customImageModal .modal-content {

  background-color: var(--axm-modal-bg) !important;

  color: var(--axm-text) !important;

  border-color: var(--axm-border) !important;

}





html[data-bs-theme="dark"] [style*="background-color: #fff"],

html[data-theme="dark"] [style*="background-color: #fff"],

html[data-bs-theme="dark"] [style*="background-color:#fff"],

html[data-theme="dark"] [style*="background-color:#fff"],

html[data-bs-theme="dark"] [style*="background-color: #ffffff"],

html[data-theme="dark"] [style*="background-color: #ffffff"],

html[data-bs-theme="dark"] [style*="background-color:#ffffff"],

html[data-theme="dark"] [style*="background-color:#ffffff"],

html[data-bs-theme="dark"] [style*="background: #fff"],

html[data-theme="dark"] [style*="background: #fff"],

html[data-bs-theme="dark"] [style*="background:#fff"],

html[data-theme="dark"] [style*="background:#fff"],

html[data-bs-theme="dark"] [style*="background: white"],

html[data-theme="dark"] [style*="background: white"],

html[data-bs-theme="dark"] [style*="background-color: #f8f9fa"],

html[data-theme="dark"] [style*="background-color: #f8f9fa"],

html[data-bs-theme="dark"] [style*="background-color:#f8f9fa"],

html[data-theme="dark"] [style*="background-color:#f8f9fa"] {

  background-color: var(--axm-surface) !important;

  color: var(--axm-text);

}



/* Scrollbars (WebKit) */

html[data-bs-theme="dark"] ::-webkit-scrollbar,

html[data-theme="dark"] ::-webkit-scrollbar {

  width: 10px;

  height: 10px;

}

html[data-bs-theme="dark"] ::-webkit-scrollbar-track,

html[data-theme="dark"] ::-webkit-scrollbar-track {

  background: var(--axm-bg);

}

html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb,

html[data-theme="dark"] ::-webkit-scrollbar-thumb {

  background: var(--axm-scrollbar);

  border-radius: 8px;

}



/* =============================================================================

   Theme toggle control (header)

   ============================================================================= */

.axm-theme-toggle {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  height: 36px;

  padding: 0 0.7rem 0 0.55rem;

  margin-right: 0.5rem;

  border-radius: 999px;

  border: 1px solid var(--axm-border);

  background: var(--axm-surface);

  color: var(--axm-text);

  font-size: 0.8125rem;

  font-weight: 600;

  line-height: 1;

  box-shadow: none;

  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;

}



.axm-theme-toggle:hover,

.axm-theme-toggle:focus-visible {

  background: var(--axm-surface-2);

  border-color: var(--axm-border-strong);

  color: var(--axm-text);

}



.axm-theme-toggle-track {

  position: relative;

  width: 42px;

  height: 22px;

  border-radius: 999px;

  background: var(--axm-toggle-track);

  border: 1px solid var(--axm-border);

  flex-shrink: 0;

}



.axm-theme-toggle-knob {

  position: absolute;

  top: 1px;

  left: 1px;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: var(--axm-toggle-knob);

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);

  transition: transform 0.2s ease;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.65rem;

  color: #6c757d;

}



html[data-bs-theme="dark"] .axm-theme-toggle-knob,

html[data-theme="dark"] .axm-theme-toggle-knob {

  transform: translateX(20px);

  color: #1a222c;

}



.axm-theme-toggle-icons {

  display: inline-flex;

  align-items: center;

  gap: 1rem;

  font-size: 0.9rem;

}



.axm-theme-toggle-icons [data-axm-theme-sun],

.axm-theme-toggle-icons [data-axm-theme-moon] {

  opacity: 0.4;

  transition: opacity 0.2s ease;

}



.axm-theme-toggle-icons .is-active {

  opacity: 1;

}



.axm-theme-toggle-label {

  min-width: 2.4rem;

  text-align: left;

}



@media (max-width: 575.98px) {

  .axm-theme-toggle-label {

    display: none;

  }

  .axm-theme-toggle {

    padding-right: 0.55rem;

  }

}



/* =============================================================================

   Template editor / branding / canvas ��� force dark surfaces

   (style.css + main_content hardcode #fff / #f8f9fa)

   ============================================================================= */

html[data-bs-theme="dark"] .test-editor-container,

html[data-theme="dark"] .test-editor-container {

  background: var(--axm-surface) !important;

  border: 1px solid var(--axm-border);

  box-shadow: var(--axm-shadow) !important;

}



html[data-bs-theme="dark"] .test-editor-sidebar,

html[data-theme="dark"] .test-editor-sidebar {

  background: var(--axm-surface-2) !important;

  border-right-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .test-editor-canvas-area,

html[data-theme="dark"] .test-editor-canvas-area {

  background: var(--axm-bg-elevated) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .test-toolbar,

html[data-theme="dark"] .test-toolbar,

html[data-bs-theme="dark"] .project-toolbar,

html[data-theme="dark"] .project-toolbar,

html[data-bs-theme="dark"] .ic-toolbar,

html[data-theme="dark"] .ic-toolbar {

  background: var(--axm-surface-2) !important;

  border-bottom-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .test-toolbar button,

html[data-theme="dark"] .test-toolbar button,

html[data-bs-theme="dark"] .test-toolbar input,

html[data-theme="dark"] .test-toolbar input,

html[data-bs-theme="dark"] .test-toolbar select,

html[data-theme="dark"] .test-toolbar select {

  background: var(--axm-surface) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .test-toolbar button:hover:not(:disabled),

html[data-theme="dark"] .test-toolbar button:hover:not(:disabled) {

  background: var(--axm-surface-3) !important;

}



html[data-bs-theme="dark"] .test-toolbar button.active,

html[data-theme="dark"] .test-toolbar button.active {

  background: var(--axm-accent) !important;

  color: #0f1419 !important;

  border-color: var(--axm-accent) !important;

}



html[data-bs-theme="dark"] .test-placeholder,

html[data-theme="dark"] .test-placeholder,

html[data-bs-theme="dark"] #test-placeholder,

html[data-theme="dark"] #test-placeholder,

html[data-bs-theme="dark"] #layoutPreviewPlaceholder,

html[data-theme="dark"] #layoutPreviewPlaceholder {

  color: var(--axm-text-muted) !important;

  background: transparent !important;

}



html[data-bs-theme="dark"] .canvas-container,

html[data-theme="dark"] .canvas-container {

  background: var(--axm-bg-elevated) !important;

}



html[data-bs-theme="dark"] .branding-card-box,

html[data-theme="dark"] .branding-card-box {

  background-color: var(--axm-surface) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .branding-label,

html[data-theme="dark"] .branding-label,

html[data-bs-theme="dark"] .title-header,

html[data-theme="dark"] .title-header {

  color: var(--axm-text) !important;

  border-bottom-color: var(--axm-border) !important;

}



html[data-bs-theme="dark"] .branding-sub-label,

html[data-theme="dark"] .branding-sub-label {

  color: var(--axm-text-muted) !important;

}



html[data-bs-theme="dark"] .style-btn-group .btn,

html[data-theme="dark"] .style-btn-group .btn {

  background-color: var(--axm-surface) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .style-btn-group .btn:hover,

html[data-theme="dark"] .style-btn-group .btn:hover {

  background-color: var(--axm-surface-2) !important;

}



html[data-bs-theme="dark"] .style-btn-group .btn-check:checked + .btn,

html[data-theme="dark"] .style-btn-group .btn-check:checked + .btn {

  background-color: var(--axm-surface-3) !important;

  border-color: var(--axm-border-strong) !important;

  color: var(--axm-text) !important;

}





html[data-bs-theme="dark"] .test-editor-sidebar .bg-white,

html[data-theme="dark"] .test-editor-sidebar .bg-white,

html[data-bs-theme="dark"] .test-editor-sidebar .shadow-sm,

html[data-theme="dark"] .test-editor-sidebar .shadow-sm {

  background-color: var(--axm-surface) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

  box-shadow: none !important;

}



html[data-bs-theme="dark"] .test-editor-sidebar .input-group-text,

html[data-theme="dark"] .test-editor-sidebar .input-group-text,

html[data-bs-theme="dark"] .input-group-text.bg-white,

html[data-theme="dark"] .input-group-text.bg-white {

  background-color: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text-muted) !important;

}



html[data-bs-theme="dark"] .image-path-display,

html[data-theme="dark"] .image-path-display,

html[data-bs-theme="dark"] .form-control.bg-white,

html[data-theme="dark"] .form-control.bg-white,

html[data-bs-theme="dark"] .form-select.bg-white,

html[data-theme="dark"] .form-select.bg-white {

  background-color: var(--axm-input-bg) !important;

  color: var(--axm-text) !important;

  border-color: var(--axm-input-border) !important;

}



html[data-bs-theme="dark"] #scriptTabContent,

html[data-theme="dark"] #scriptTabContent,

html[data-bs-theme="dark"] #current-audio-player-wrapper,

html[data-theme="dark"] #current-audio-player-wrapper,

html[data-bs-theme="dark"] #professionalFinishSection,

html[data-theme="dark"] #professionalFinishSection {

  background-color: var(--axm-surface) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .accordion-item,

html[data-theme="dark"] .accordion-item,

html[data-bs-theme="dark"] #shapeAccordion .accordion-item,

html[data-theme="dark"] #shapeAccordion .accordion-item,

html[data-bs-theme="dark"] #shapeAccordion .accordion-button,

html[data-theme="dark"] #shapeAccordion .accordion-button,

html[data-bs-theme="dark"] #shapeAccordion .accordion-body,

html[data-theme="dark"] #shapeAccordion .accordion-body {

  background-color: var(--axm-surface) !important;

  color: var(--axm-text) !important;

  border-color: var(--axm-border) !important;

}



html[data-bs-theme="dark"] #shapeAccordion .accordion-button:not(.collapsed),

html[data-theme="dark"] #shapeAccordion .accordion-button:not(.collapsed) {

  background-color: var(--axm-surface-2) !important;

  color: var(--axm-text) !important;

  box-shadow: none !important;

}



html[data-bs-theme="dark"] .btn-toolbar-secondary,

html[data-theme="dark"] .btn-toolbar-secondary {

  background-color: var(--axm-surface) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .navbar .d-none.d-md-block.me-3,

html[data-theme="dark"] .navbar .d-none.d-md-block.me-3 {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

  box-shadow: none !important;

}



html[data-bs-theme="dark"] .navbar .d-none.d-md-block.me-3 .fw-bold,

html[data-theme="dark"] .navbar .d-none.d-md-block.me-3 .fw-bold {

  color: var(--axm-text) !important;

}



/* Script / audio / branding white utility islands */

html[data-bs-theme="dark"] .border.rounded.bg-white,

html[data-theme="dark"] .border.rounded.bg-white,

html[data-bs-theme="dark"] .card.p-2.mb-3.bg-white,

html[data-theme="dark"] .card.p-2.mb-3.bg-white,

html[data-bs-theme="dark"] .mb-3.p-3.bg-white,

html[data-theme="dark"] .mb-3.p-3.bg-white,

html[data-bs-theme="dark"] .d-flex.align-items-center.gap-2.bg-white,

html[data-theme="dark"] .d-flex.align-items-center.gap-2.bg-white {

  background-color: var(--axm-surface) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



/* Color swatch / preview bars that use white as UI chrome (not product color) */

html[data-bs-theme="dark"] .test-editor-sidebar .rounded.border,

html[data-theme="dark"] .test-editor-sidebar .rounded.border {

  border-color: var(--axm-border) !important;

}



/* Soften Fabric empty canvas feel */

/* html[data-bs-theme="dark"] #aximate-canvas,

html[data-theme="dark"] #aximate-canvas {

  background-color: #121820 !important;

} */



html[data-bs-theme="dark"] .upper-canvas,

html[data-theme="dark"] .upper-canvas,

html[data-bs-theme="dark"] .lower-canvas,

html[data-theme="dark"] .lower-canvas {

  background-color: transparent !important;

}



/* Script + Voice configuration panels (main dashboard) */

html[data-bs-theme="dark"] #scriptTabContent,

html[data-theme="dark"] #scriptTabContent,

html[data-bs-theme="dark"] .axm-script-tab-shell,

html[data-theme="dark"] .axm-script-tab-shell,

html[data-bs-theme="dark"] .axm-script-panel,

html[data-theme="dark"] .axm-script-panel {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-script-panel #script-result-area,

html[data-theme="dark"] .axm-script-panel #script-result-area,

html[data-bs-theme="dark"] #script-result-area,

html[data-theme="dark"] #script-result-area {

  background: var(--axm-surface) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-voice-panel,

html[data-theme="dark"] .axm-voice-panel {

  background: var(--axm-surface) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

  box-shadow: var(--axm-shadow) !important;

}



html[data-bs-theme="dark"] .axm-section-heading,

html[data-theme="dark"] .axm-section-heading,

html[data-bs-theme="dark"] #voice-config-heading,

html[data-theme="dark"] #voice-config-heading {

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-speakers-heading,

html[data-theme="dark"] .axm-speakers-heading {

  color: var(--axm-text-muted) !important;

}



html[data-bs-theme="dark"] .axm-alert-preview,

html[data-theme="dark"] .axm-alert-preview {

  background: linear-gradient(145deg, #1e2a3a 0%, #1a222c 100%) !important;

  color: var(--axm-text) !important;

  box-shadow: inset 0 0 0 1px rgba(110, 168, 254, 0.25) !important;

}



html[data-bs-theme="dark"] .axm-alert-preview strong,

html[data-theme="dark"] .axm-alert-preview strong {

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-alert-tokens,

html[data-theme="dark"] .axm-alert-tokens {

  background: linear-gradient(145deg, #3a2e14 0%, #2a2418 100%) !important;

  color: #fbbf24 !important;

  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.28) !important;

}



html[data-bs-theme="dark"] #voice-config-container .voice-card,

html[data-theme="dark"] #voice-config-container .voice-card,

html[data-bs-theme="dark"] .axm-voice-panel .voice-card,

html[data-theme="dark"] .axm-voice-panel .voice-card {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-voice-panel .form-control,

html[data-theme="dark"] .axm-voice-panel .form-control,

html[data-bs-theme="dark"] .axm-voice-panel .form-select,

html[data-theme="dark"] .axm-voice-panel .form-select,

html[data-bs-theme="dark"] .axm-voice-panel .input-group-text,

html[data-theme="dark"] .axm-voice-panel .input-group-text {

  background-color: var(--axm-input-bg) !important;

  border-color: var(--axm-input-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-voice-panel .btn-light,

html[data-theme="dark"] .axm-voice-panel .btn-light,

html[data-bs-theme="dark"] #script-copy-btn.btn-light,

html[data-theme="dark"] #script-copy-btn.btn-light {

  background-color: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-script-panel .btn-light,

html[data-theme="dark"] .axm-script-panel .btn-light {

  background-color: var(--axm-surface) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] #script-word-count,

html[data-theme="dark"] #script-word-count,

html[data-bs-theme="dark"] #script-char-count,

html[data-theme="dark"] #script-char-count {

  color: var(--axm-text-muted) !important;

}



html[data-bs-theme="dark"] .voice-card-play-btn,

html[data-theme="dark"] .voice-card-play-btn {

  background: var(--axm-surface) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text-muted) !important;

}



html[data-bs-theme="dark"] .voice-card-play-btn:hover,

html[data-theme="dark"] .voice-card-play-btn:hover {

  background: var(--axm-surface-3) !important;

  border-color: var(--axm-border-strong) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-voice-panel .card-header.bg-light,

html[data-theme="dark"] .axm-voice-panel .card-header.bg-light,

html[data-bs-theme="dark"] #current-audio-player-wrapper .card-header,

html[data-theme="dark"] #current-audio-player-wrapper .card-header {

  background-color: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-dsp-chip,

html[data-theme="dark"] .axm-dsp-chip {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

}



html[data-bs-theme="dark"] #dashboardDspSelect,

html[data-theme="dark"] #dashboardDspSelect {

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-alert-preview strong,

html[data-theme="dark"] .axm-alert-preview strong {

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .voice-card-name,

html[data-theme="dark"] .voice-card-name,

html[data-bs-theme="dark"] .voice-card-meta,

html[data-theme="dark"] .voice-card-meta {

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .voice-card-meta,

html[data-theme="dark"] .voice-card-meta {

  color: var(--axm-text-muted) !important;

}



/* Create Video / Generate Webpage dropdown items (hardcoded light colors lost contrast) */

html[data-bs-theme="dark"] .axm-video-tools-menu,

html[data-theme="dark"] .axm-video-tools-menu,

html[data-bs-theme="dark"] .axm-theme-menu,

html[data-theme="dark"] .axm-theme-menu {

  background: var(--axm-dropdown-bg);

  border-color: var(--axm-border);

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .axm-video-tools-heading,

html[data-theme="dark"] .axm-video-tools-heading {

  color: var(--axm-text-muted);

}



html[data-bs-theme="dark"] .axm-video-tool-item,

html[data-theme="dark"] .axm-video-tool-item,

html[data-bs-theme="dark"] .axm-video-tool-title,

html[data-theme="dark"] .axm-video-tool-title,

html[data-bs-theme="dark"] .axm-theme-menu .axm-theme-item,

html[data-theme="dark"] .axm-theme-menu .axm-theme-item {

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .axm-video-tool-desc,

html[data-theme="dark"] .axm-video-tool-desc,

html[data-bs-theme="dark"] .axm-video-tool-glyph,

html[data-theme="dark"] .axm-video-tool-glyph {

  color: var(--axm-text-muted);

}



html[data-bs-theme="dark"] .axm-video-tools-menu .axm-video-tool-item:hover,

html[data-theme="dark"] .axm-video-tools-menu .axm-video-tool-item:hover,

html[data-bs-theme="dark"] .axm-video-tools-menu .axm-video-tool-item:focus,

html[data-theme="dark"] .axm-video-tools-menu .axm-video-tool-item:focus,

html[data-bs-theme="dark"] .axm-theme-menu .axm-theme-item:hover,

html[data-theme="dark"] .axm-theme-menu .axm-theme-item:hover {

  background: var(--axm-dropdown-hover);

  color: var(--axm-text);

}



/* Canvas Basic Shapes ��� white tiles + inherited light icon color = invisible */

html[data-bs-theme="dark"] .test-shape-btn,

html[data-theme="dark"] .test-shape-btn {

  background: var(--axm-surface-2);

  border-color: var(--axm-border);

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .test-shape-btn:hover,

html[data-theme="dark"] .test-shape-btn:hover {

  background: var(--axm-surface-3);

  border-color: var(--axm-accent);

  color: var(--axm-text);

}



html[data-bs-theme="dark"] #shapesControls,

html[data-theme="dark"] #shapesControls {

  background: var(--axm-surface) !important;

  border-color: var(--axm-border) !important;

}



/* Video History drawer */

html[data-bs-theme="dark"] #videoHistoryContainer,

html[data-theme="dark"] #videoHistoryContainer {

  background-color: var(--axm-modal-bg);

  border-left-color: var(--axm-border);

  color: var(--axm-text);

  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.45);

}



html[data-bs-theme="dark"] .video-history-header,

html[data-theme="dark"] .video-history-header {

  background-color: var(--axm-surface-2);

  border-bottom-color: var(--axm-border);

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .video-history-header h5,

html[data-theme="dark"] .video-history-header h5 {

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .video-history-item,

html[data-theme="dark"] .video-history-item {

  border-bottom-color: var(--axm-border);

}



html[data-bs-theme="dark"] .video-history-item:hover,

html[data-theme="dark"] .video-history-item:hover {

  background-color: var(--axm-surface-2);

}



html[data-bs-theme="dark"] .video-history-item .video-name,

html[data-theme="dark"] .video-history-item .video-name {

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .video-metadata,

html[data-theme="dark"] .video-metadata,

html[data-bs-theme="dark"] .video-timestamp,

html[data-theme="dark"] .video-timestamp {

  color: var(--axm-text-muted);

}



html[data-bs-theme="dark"] .video-timestamp,

html[data-theme="dark"] .video-timestamp {

  border-left-color: var(--axm-border);

}



html[data-bs-theme="dark"] #videoHistoryContainer .btn-close,

html[data-theme="dark"] #videoHistoryContainer .btn-close {

  filter: invert(1) grayscale(100%) brightness(200%);

}



/* Voice configuration ��� selected voice trigger (Alex / Select a Voice) */

html[data-bs-theme="dark"] .voice-selector-trigger,

html[data-theme="dark"] .voice-selector-trigger,

html[data-bs-theme="dark"] .axm-voice-panel .voice-selector-trigger,

html[data-theme="dark"] .axm-voice-panel .voice-selector-trigger {

  background-color: var(--axm-input-bg);

  border-color: var(--axm-input-border);

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .voice-selector-label,

html[data-theme="dark"] .voice-selector-label,

html[data-bs-theme="dark"] .axm-voice-panel .voice-selector-label,

html[data-theme="dark"] .axm-voice-panel .voice-selector-label {

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .voice-config-row,

html[data-theme="dark"] .voice-config-row {

  background: var(--axm-surface);

  border-color: var(--axm-border);

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .voice-config-row .form-control,

html[data-theme="dark"] .voice-config-row .form-control {

  background-color: var(--axm-input-bg);

  border-color: var(--axm-input-border);

  color: var(--axm-text);

}



/* Left workflow cards */

html[data-bs-theme="dark"] .axm-workflow-card,

html[data-theme="dark"] .axm-workflow-card {

  background: var(--axm-surface);

  border-color: var(--axm-border);

  color: var(--axm-text);

  box-shadow: none;

}



html[data-bs-theme="dark"] .axm-wf-acc-toggle,

html[data-theme="dark"] .axm-wf-acc-toggle {

  color: var(--axm-text) !important;

  background: var(--axm-surface-2) !important;

}



html[data-bs-theme="dark"] .axm-wf-acc-toggle:hover,

html[data-theme="dark"] .axm-wf-acc-toggle:hover {

  background: var(--axm-surface-3) !important;

}



html[data-bs-theme="dark"] .axm-wf-acc-header-row,

html[data-theme="dark"] .axm-wf-acc-header-row {

  background: var(--axm-surface-2) !important;

}



html[data-bs-theme="dark"] .axm-wf-acc-header-row .axm-wf-acc-toggle,

html[data-theme="dark"] .axm-wf-acc-header-row .axm-wf-acc-toggle,

html[data-bs-theme="dark"] .axm-wf-acc-header-row .axm-wf-acc-toggle:hover,

html[data-theme="dark"] .axm-wf-acc-header-row .axm-wf-acc-toggle:hover {

  background: transparent !important;

}



html[data-bs-theme="dark"] .axm-wf-acc-panel,

html[data-theme="dark"] .axm-wf-acc-panel {

  border-top-color: var(--axm-border) !important;

  background: var(--axm-surface) !important;

}



html[data-bs-theme="dark"] .axm-wf-acc-chevron,

html[data-theme="dark"] .axm-wf-acc-chevron {

  color: var(--axm-text-muted) !important;

}



html[data-bs-theme="dark"] .axm-wf-acc-side-action:hover,

html[data-theme="dark"] .axm-wf-acc-side-action:hover {

  background: rgba(255, 255, 255, 0.06) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-project-toolbar .axm-tool-btn,

html[data-theme="dark"] .axm-project-toolbar .axm-tool-btn {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-project-toolbar .axm-tool-btn:hover,

html[data-theme="dark"] .axm-project-toolbar .axm-tool-btn:hover {

  background: var(--axm-surface-3) !important;

  border-color: var(--axm-border-strong) !important;

}



html[data-bs-theme="dark"] .axm-project-header-row .axm-wf-acc-toggle--chevron,

html[data-theme="dark"] .axm-project-header-row .axm-wf-acc-toggle--chevron {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

}



html[data-bs-theme="dark"] .axm-project-header-row .axm-wf-acc-toggle--chevron:hover,

html[data-theme="dark"] .axm-project-header-row .axm-wf-acc-toggle--chevron:hover {

  background: var(--axm-surface-3) !important;

}



html[data-bs-theme="dark"] .axm-project-toolbar .axm-expr-toolbar-btn,

html[data-theme="dark"] .axm-project-toolbar .axm-expr-toolbar-btn {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-project-toolbar .axm-expr-toolbar-btn:hover,

html[data-theme="dark"] .axm-project-toolbar .axm-expr-toolbar-btn:hover {

  background: var(--axm-surface-3) !important;

  border-color: var(--axm-border-strong) !important;

}



html[data-bs-theme="dark"] .axm-wf-acc,

html[data-theme="dark"] .axm-wf-acc {

  background: var(--axm-surface) !important;

  border-color: var(--axm-border) !important;

  box-shadow: none !important;

}



html[data-bs-theme="dark"] .axm-workflow-card-title,

html[data-theme="dark"] .axm-workflow-card-title {

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .axm-workflow-card-sub,

html[data-theme="dark"] .axm-workflow-card-sub,

html[data-bs-theme="dark"] .axm-voice-note,

html[data-theme="dark"] .axm-voice-note {

  color: var(--axm-text-muted);

}



html[data-bs-theme="dark"] .axm-wf-btn-secondary,

html[data-theme="dark"] .axm-wf-btn-secondary {

  background: var(--axm-surface-2);

  border-color: var(--axm-border);

  color: var(--axm-text);

}



html[data-bs-theme="dark"] .axm-script-panel,

html[data-theme="dark"] .axm-script-panel {

  background: var(--axm-surface);

  border-color: var(--axm-border);

}



html[data-bs-theme="dark"] .axm-script-editor,

html[data-theme="dark"] .axm-script-editor,

html[data-bs-theme="dark"] .axm-script-panel #script-result-area,

html[data-theme="dark"] .axm-script-panel #script-result-area {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-script-panel #script-result-area strong,

html[data-theme="dark"] .axm-script-panel #script-result-area strong,

html[data-bs-theme="dark"] .axm-script-panel #script-result-area b,

html[data-theme="dark"] .axm-script-panel #script-result-area b {

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-audio-player-shell,

html[data-theme="dark"] .axm-audio-player-shell {

  background: var(--axm-surface-2);

  border-color: var(--axm-border);

}



html[data-bs-theme="dark"] .axm-audio-toolbar,

html[data-theme="dark"] .axm-audio-toolbar {

  background: var(--axm-surface);

  border-bottom-color: var(--axm-border);

}



html[data-bs-theme="dark"] .axm-btn-music,

html[data-theme="dark"] .axm-btn-music {

  border-color: #4caf50;

  color: #86efac;

}



html[data-bs-theme="dark"] .axm-btn-music:hover,

html[data-theme="dark"] .axm-btn-music:hover {

  background: #4caf50;

  color: #0f1419;

}



html[data-bs-theme="dark"] .axm-history-select,

html[data-theme="dark"] .axm-history-select {

  background: var(--axm-input-bg);

  border-color: var(--axm-input-border);

  color: var(--axm-text);

}



/* =============================================================================

   Dark mode fixes: Video Format modal, branding color swatches, composition borders

   ============================================================================= */



/* Video Format Explorer ��� divider / sidebar contrast / cards */

html[data-bs-theme="dark"] #socialVideoModal .modal-content,

html[data-theme="dark"] #socialVideoModal .modal-content {

  background: var(--axm-modal-bg) !important;

  color: var(--axm-text) !important;

  border-color: var(--axm-border) !important;

}



html[data-bs-theme="dark"] #socialVideoModal .modal-header,

html[data-theme="dark"] #socialVideoModal .modal-header {

  background: var(--axm-modal-header) !important;

  border-bottom-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] #socialVideoModal .modal-body,

html[data-theme="dark"] #socialVideoModal .modal-body {

  background: var(--axm-modal-bg) !important;

}



html[data-bs-theme="dark"] #format-category-sidebar,

html[data-theme="dark"] #format-category-sidebar {

  border-right-color: var(--axm-border) !important;

  scrollbar-color: var(--axm-scrollbar) var(--axm-surface-2);

}



html[data-bs-theme="dark"] #format-category-sidebar::-webkit-scrollbar-track,

html[data-theme="dark"] #format-category-sidebar::-webkit-scrollbar-track {

  background: var(--axm-surface-2);

}



html[data-bs-theme="dark"] #format-category-sidebar::-webkit-scrollbar-thumb,

html[data-theme="dark"] #format-category-sidebar::-webkit-scrollbar-thumb {

  background: var(--axm-scrollbar);

}



html[data-bs-theme="dark"] #format-category-sidebar .list-group-item,

html[data-theme="dark"] #format-category-sidebar .list-group-item {

  color: var(--axm-text-muted) !important;

  background: transparent !important;

}



html[data-bs-theme="dark"] #format-category-sidebar .list-group-item:hover,

html[data-theme="dark"] #format-category-sidebar .list-group-item:hover {

  background: var(--axm-surface-2) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] #format-category-sidebar .list-group-item.active,

html[data-theme="dark"] #format-category-sidebar .list-group-item.active {

  background: var(--axm-accent) !important;

  color: #0f1419 !important;

}



html[data-bs-theme="dark"] #socialVideoModal .input-group-text,

html[data-theme="dark"] #socialVideoModal .input-group-text {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-input-border) !important;

  color: var(--axm-text-muted) !important;

}



html[data-bs-theme="dark"] .format-card,

html[data-theme="dark"] .format-card {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .format-card:hover,

html[data-theme="dark"] .format-card:hover {

  border-color: var(--axm-accent) !important;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);

}



html[data-bs-theme="dark"] .format-card .card-title,

html[data-theme="dark"] .format-card .card-title {

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .format-card .card-text,

html[data-theme="dark"] .format-card .card-text,

html[data-bs-theme="dark"] .format-card .text-muted,

html[data-theme="dark"] .format-card .text-muted,

html[data-bs-theme="dark"] .format-card .fa-3x,

html[data-theme="dark"] .format-card .fa-3x {

  color: var(--axm-text-muted) !important;

}



/* Branding color pickers ��� themed chrome (swatch still shows real color value) */

.axm-color-swatch,

.form-control-color {

  max-width: 48px;

  min-width: 42px;

  padding: 0.28rem !important;

  border: 1px solid var(--axm-input-border, #ced4da) !important;

  background-color: var(--axm-input-bg, #fff) !important;

  border-radius: 0.375rem;

  cursor: pointer;

}



.form-control-color::-webkit-color-swatch-wrapper {

  padding: 2px;

}



.form-control-color::-webkit-color-swatch {

  border-radius: 4px;

  border: 1px solid rgba(0, 0, 0, 0.15);

}



html[data-bs-theme="dark"] .form-control-color,

html[data-theme="dark"] .form-control-color,

html[data-bs-theme="dark"] .axm-color-swatch,

html[data-theme="dark"] .axm-color-swatch,

html[data-bs-theme="dark"] input[type="color"].form-control,

html[data-theme="dark"] input[type="color"].form-control {

  background-color: var(--axm-input-bg) !important;

  border-color: var(--axm-input-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .form-control-color::-webkit-color-swatch,

html[data-theme="dark"] .form-control-color::-webkit-color-swatch {

  border-color: var(--axm-border-strong);

}



html[data-bs-theme="dark"] #websiteBrandingCard,

html[data-theme="dark"] #websiteBrandingCard {

  background: var(--axm-surface) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



/* Website Branding accordion */

.axm-branding-card.axm-wf-acc {

  overflow: hidden;

}



.axm-branding-header-row {

  background: var(--axm-surface-2, #f4f6f8);

  border-radius: 12px 12px 0 0;

}



.axm-branding-card.axm-wf-acc:not(.is-open) .axm-branding-header-row {

  border-radius: 12px;

}



.axm-left-accordions {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.axm-left-accordions > #websiteBrandingCard {

  margin-top: 0 !important;

}



.axm-branding-accordions {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.axm-brand-acc {

  border: 1px solid var(--axm-border, #e5e7eb);

  border-radius: 10px;

  background: var(--axm-surface-2, #f8fafc);

  overflow: hidden;

}



.axm-brand-acc-toggle {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 12px 14px;

  border: none;

  background: transparent;

  color: var(--axm-text, #111827);

  font-size: 0.92rem;

  font-weight: 600;

  text-align: left;

  cursor: pointer;

}



.axm-brand-acc-toggle:hover {

  background: rgba(0, 0, 0, 0.03);

}



.axm-brand-acc-left {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  min-width: 0;

}



.axm-brand-acc-icon {

  width: 28px;

  height: 28px;

  border-radius: 8px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  font-size: 0.85rem;

}



.axm-brand-acc-icon--company {

  background: rgba(59, 130, 246, 0.18);

  color: #60a5fa;

}



.axm-brand-acc-icon--audio {

  background: rgba(245, 158, 11, 0.18);

  color: #f59e0b;

}



.axm-brand-acc-icon--btn {

  background: rgba(148, 163, 184, 0.2);

  color: var(--axm-text, #e5e7eb);

}



.axm-brand-acc-chevron {

  font-size: 0.75rem;

  color: var(--axm-text-muted, #9ca3af);

  transition: transform 0.18s ease;

}



.axm-brand-acc-toggle.is-open .axm-brand-acc-chevron {

  transform: rotate(180deg);

}



.axm-brand-acc-chevron--sm {

  font-size: 0.65rem;

  margin-left: 4px;

}



.axm-brand-acc-panel {

  padding: 0 14px 14px;

  border-top: 1px solid var(--axm-border, #e5e7eb);

  background: var(--axm-surface, #fff);

}



.axm-brand-acc-panel[hidden],

.axm-brand-acc-panel:not(.is-open) {

  display: none !important;

}



.axm-brand-acc-panel.is-open {

  display: block !important;

}



.axm-brand-acc-title {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.axm-brand-acc-head {

  display: flex;

  align-items: center;

  gap: 8px;

  width: 100%;

  min-width: 0;

  padding-right: 10px;

}



.axm-brand-acc-head .axm-brand-acc-toggle {

  flex: 1 1 auto;

  min-width: 0;

}



.axm-brand-acc-head .axm-brand-show-switch {

  flex: 0 0 auto;

  margin-right: 4px !important;

}



.axm-brand-acc--buttons {

  padding: 0;

  overflow: visible;

}



.axm-brand-btn-row {

  display: flex;

  flex-direction: row;

  align-items: center;

  gap: 0;

  min-height: 48px;

  padding: 4px 4px 4px 6px;

  overflow: hidden;

  width: 100%;

  max-width: 100%;

}



.axm-brand-btn-row-toggle {

  flex: 0 0 auto;

  width: 34px;

  height: 34px;

  margin-left: 2px;

  padding: 0;

  border: none;

  border-radius: 8px;

  background: transparent;

  color: var(--axm-text-muted, #9ca3af);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

}



.axm-brand-btn-row-toggle:hover {

  background: rgba(0, 0, 0, 0.04);

  color: var(--axm-text, #111);

}



.axm-brand-btn-row-toggle .axm-brand-acc-chevron {

  transition: transform 0.18s ease;

}



.axm-brand-btn-row-toggle.is-open .axm-brand-acc-chevron {

  transform: rotate(180deg);

}



html[data-bs-theme="dark"] .axm-brand-btn-row-toggle:hover,

html[data-theme="dark"] .axm-brand-btn-row-toggle:hover {

  background: rgba(255, 255, 255, 0.06);

  color: var(--axm-text);

}



.axm-brand-btn-half {

  flex: 1 1 0;

  display: flex;

  align-items: center;

  justify-content: stretch;

  gap: 0;

  min-width: 0;

  padding: 4px 6px;

  overflow: hidden;

}



.axm-brand-btn-half .axm-brand-btn-toggle {

  width: 100%;

  flex: 1 1 auto;

  min-width: 0;

  max-width: 100%;

  padding: 6px 4px;

  justify-content: space-between;

  overflow: hidden;

}



.axm-brand-btn-half .axm-brand-acc-left {

  min-width: 0;

  overflow: hidden;

  gap: 8px;

  flex-wrap: nowrap;

  flex: 1 1 auto;

}



.axm-brand-btn-half .axm-brand-acc-title {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  font-size: 0.875rem;

  font-weight: 600;

}



.axm-brand-btn-half .axm-brand-acc-chevron--sm {

  display: inline-block;

  flex: 0 0 auto;

  margin-left: 6px;

  font-size: 0.7rem;

}



.axm-brand-btn-half .axm-brand-acc-toggle.is-open .axm-brand-acc-chevron--sm {

  transform: rotate(180deg);

}



.axm-brand-btn-half .axm-brand-acc-icon {

  width: 24px;

  height: 24px;

  font-size: 0.72rem;

}



.axm-brand-btn-divider {

  width: 1px;

  height: auto;

  align-self: stretch;

  background: var(--axm-border, #e5e7eb);

  margin: 8px 4px;

  flex: 0 0 1px;

}



.axm-brand-show-switch {

  display: inline-flex !important;

  align-items: center;

  flex: 0 0 auto !important;

  flex-shrink: 0 !important;

  gap: 0.35rem;

  margin: 0 !important;

  padding-left: 2.2em !important;

  min-width: max-content;

  white-space: nowrap;

  overflow: visible;

}



.axm-brand-show-switch .form-check-input {

  margin-top: 0;

  margin-left: -2.2em;

  cursor: pointer;

  flex-shrink: 0;

  float: none;

  width: 2em;

  height: 1.1em;

}



.axm-brand-show-switch .form-check-label {

  margin: 0;

  padding: 0;

  white-space: nowrap;

  font-size: 0.75rem;

  font-weight: 600;

  line-height: 1.2;

  color: var(--axm-text, inherit);

}



@media (max-width: 575.98px) {

  /* Keep Image-1 horizontal Primary | Secondary row ��� do not stack */

  .axm-brand-btn-row {

    flex-direction: row !important;

    align-items: center !important;

    padding: 2px 4px;

    min-height: 44px;

    overflow: hidden;

  }

  .axm-brand-btn-divider {

    width: 1px !important;

    height: auto !important;

    margin: 6px 1px;

    align-self: stretch;

  }

  .axm-brand-btn-half {

    padding: 4px 4px;

    gap: 4px;

  }

  .axm-brand-btn-half .axm-brand-acc-title {

    font-size: 0.78rem;

    overflow: hidden;

    text-overflow: ellipsis;

  }

  .axm-brand-btn-half .axm-brand-acc-icon {

    width: 22px;

    height: 22px;

    font-size: 0.65rem;

  }

  .axm-brand-show-switch {

    padding-left: 1.9em !important;

  }

  .axm-brand-show-switch .form-check-input {

    margin-left: -1.9em;

    width: 1.75em;

    height: 1em;

  }

  .axm-brand-show-switch .form-check-label {

    font-size: 0.65rem;

  }

  .axm-brand-btn-half .axm-brand-acc-chevron--sm {

    display: inline-block;

    margin-left: 4px;

  }

}



.axm-brand-acc--buttons > .axm-brand-acc-panel {

  border-top: 1px solid var(--axm-border, #e5e7eb);

  padding: 12px 12px 14px;

  background: var(--axm-surface-2, #f8fafc);

}



.axm-brand-fields {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.axm-brand-field-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 0.35rem;

  min-height: 1.5rem;

}



.axm-brand-field-head .branding-sub-label {

  margin-bottom: 0 !important;

}



.axm-brand-field-head .axm-brand-show-switch {

  margin-left: auto;

}



.axm-brand-field {

  display: flex;

  flex-direction: column;

  gap: 6px;

  min-width: 0;

}



.axm-brand-field .branding-sub-label,

.axm-brand-style-item .branding-sub-label {

  margin: 0;

  font-size: 0.72rem;

  font-weight: 600;

  color: var(--axm-text-muted, #6b7280);

}



.axm-brand-field .form-control,

.axm-brand-field .form-select,

.axm-brand-style-item .form-control {

  min-height: 38px;

  border-radius: 8px;

}



.axm-brand-check {

  padding: 2px 0 2px;

}



.axm-brand-check .form-check-label {

  font-size: 0.82rem;

  color: var(--axm-text-muted, #6b7280);

}



.axm-brand-style-row {

  display: grid;

  grid-template-columns: 56px 56px minmax(72px, 1fr) minmax(110px, 1.2fr);

  gap: 10px;

  align-items: end;

}



.axm-brand-style-item {

  display: flex;

  flex-direction: column;

  gap: 6px;

  min-width: 0;

}



.axm-brand-style-item--swatch .form-control-color {

  width: 100%;

  max-width: 56px;

  height: 38px;

  padding: 4px;

  border-radius: 8px;

}



.axm-brand-style-item--size .form-control {

  text-align: center;

}



.axm-brand-style-item--style .style-btn-group .btn {

  min-height: 38px;

  padding: 0.35rem 0.45rem;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}



@media (max-width: 420px) {

  .axm-brand-style-row {

    grid-template-columns: 1fr 1fr;

  }

  .axm-brand-style-item--swatch .form-control-color {

    max-width: none;

  }

}



html[data-bs-theme="dark"] .axm-brand-acc--buttons > .axm-brand-acc-panel,

html[data-theme="dark"] .axm-brand-acc--buttons > .axm-brand-acc-panel {

  background: var(--axm-surface-2) !important;

  border-top-color: var(--axm-border) !important;

}



html[data-bs-theme="dark"] .axm-brand-acc,

html[data-theme="dark"] .axm-brand-acc {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

}



html[data-bs-theme="dark"] .axm-brand-acc-toggle,

html[data-theme="dark"] .axm-brand-acc-toggle {

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-brand-acc-toggle:hover,

html[data-theme="dark"] .axm-brand-acc-toggle:hover {

  background: rgba(255, 255, 255, 0.04);

}



html[data-bs-theme="dark"] .axm-brand-acc-panel,

html[data-theme="dark"] .axm-brand-acc-panel {

  background: var(--axm-surface) !important;

  border-top-color: var(--axm-border) !important;

}



html[data-bs-theme="dark"] .axm-branding-reset-btn,

html[data-theme="dark"] .axm-branding-reset-btn {

  border-color: #f87171 !important;

  color: #f87171 !important;

  background: transparent !important;

}



html[data-bs-theme="dark"] .axm-brand-btn-divider,

html[data-theme="dark"] .axm-brand-btn-divider {

  background: var(--axm-border) !important;

}



/* Image Composition ��� soften outer + canvas borders */

html[data-bs-theme="dark"] #image-composition-section,

html[data-theme="dark"] #image-composition-section {

  border-color: var(--axm-border) !important;

}



html[data-bs-theme="dark"] .ic-toolbar,

html[data-theme="dark"] .ic-toolbar {

  background: var(--axm-surface-2) !important;

  border: 1px solid var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .col-lg-8 > .card,

html[data-theme="dark"] .col-lg-8 > .card,

html[data-bs-theme="dark"] .test-editor-container,

html[data-theme="dark"] .test-editor-container {

  border-color: var(--axm-border) !important;

  background: var(--axm-surface) !important;

}



/* html[data-bs-theme="dark"] #aximate-canvas,

html[data-theme="dark"] #aximate-canvas {

  background-color: #121820 !important;

  border: 1px solid var(--axm-border) !important;

} */



html[data-bs-theme="dark"] .test-canvas-wrapper,

html[data-theme="dark"] .test-canvas-wrapper,

html[data-bs-theme="dark"] .test-canvas-container,

html[data-theme="dark"] .test-canvas-container {

  background: var(--axm-bg-elevated) !important;

  border-color: var(--axm-border) !important;

}



html[data-bs-theme="dark"] .canvas-container,

html[data-theme="dark"] .canvas-container {

  border-color: var(--axm-border) !important;

}



html[data-bs-theme="dark"] .upper-canvas,

html[data-theme="dark"] .upper-canvas,

html[data-bs-theme="dark"] .lower-canvas,

html[data-theme="dark"] .lower-canvas {

  border-color: var(--axm-border) !important;

}



/* =============================================================================

   Script Expression picker + in-editor marks

   ============================================================================= */



.axm-expr-toolbar-btn {

  display: inline-flex !important;

  align-items: center;

  gap: 0.35rem;

  font-size: 0.78rem;

  font-weight: 600;

  white-space: nowrap;

}



.axm-expr-toolbar-btn.has-expression {

  border-color: var(--axm-accent, #0d6efd) !important;

  color: var(--axm-accent, #0d6efd);

}



.axm-expr-btn-check {

  font-weight: 700;

  color: var(--axm-accent, #0d6efd);

}



.axm-expr-hint {

  font-size: 0.72rem;

  max-width: 100%;

  line-height: 1.35;

  overflow: visible;

}



.axm-expr-hint kbd,

.axm-script-meta .axm-expr-hint kbd,

.axm-script-meta kbd {

  font-size: 0.68rem;

  padding: 0.05rem 0.3rem;

  border: 1px solid var(--axm-border, #d1d5db);

  border-radius: 4px;

  background: #f1f5f9 !important;

  color: #111827 !important;

  font-weight: 600;

}



.axm-expr-pending {

  background: rgba(250, 204, 21, 0.45);

  border-radius: 2px;

  box-shadow: inset 0 -1px 0 rgba(202, 138, 4, 0.35);

}



.axm-expr-mark {

  background: rgba(250, 204, 21, 0.55);

  border-bottom: none;

  border-radius: 2px;

  padding: 0 1px;

  cursor: pointer;

  box-decoration-break: clone;

  -webkit-box-decoration-break: clone;

}



.axm-expr-mark[data-expression="happy"],

.axm-expr-mark[data-expression="neutral"],

.axm-expr-mark[data-expression="sad"],

.axm-expr-mark[data-expression="angry"],

.axm-expr-mark[data-expression="surprised"],

.axm-expr-mark[data-expression="excited"],

.axm-expr-mark[data-expression="confident"],

.axm-expr-mark[data-expression="fearful"] {

  background: rgba(250, 204, 21, 0.55);

  border-bottom-color: transparent;

}



.axm-expr-modal .modal-title {

  font-size: 1.05rem;

  font-weight: 600;

}



.axm-expr-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 10px;

}



.axm-expr-card {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  min-height: 76px;

  padding: 10px 6px;

  border: 1.5px solid var(--axm-border, #e5e7eb);

  border-radius: 10px;

  background: var(--axm-surface, #fff);

  color: var(--axm-text, #111827);

  cursor: pointer;

  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;

}



.axm-expr-card:hover {

  border-color: var(--axm-accent, #0d6efd);

  background: var(--axm-surface-2, #f8fafc);

}



.axm-expr-card.is-active {

  border-color: var(--axm-accent, #0d6efd);

  background: rgba(13, 110, 253, 0.12);

  box-shadow: 0 0 0 1px var(--axm-accent, #0d6efd);

}



.axm-expr-card-icon {

  font-size: 1.35rem;

  line-height: 1;

  color: var(--axm-text-muted, #6b7280);

}



.axm-expr-card.is-active .axm-expr-card-icon {

  color: var(--axm-accent, #0d6efd);

}



.axm-expr-card-label {

  font-size: 0.68rem;

  font-weight: 700;

}



.axm-expr-intensity-label {

  font-size: 0.9rem;

  font-weight: 600;

  color: var(--axm-text, #111);

}



.axm-expr-slider {

  accent-color: var(--axm-accent, #0d6efd);

}



.axm-expr-fewer {

  color: var(--axm-accent, #0d6efd);

  text-decoration: none;

}



.axm-expr-fewer:hover {

  text-decoration: underline;

}



html[data-bs-theme="dark"] .axm-expr-modal .modal-content,

html[data-theme="dark"] .axm-expr-modal .modal-content {

  background: var(--axm-modal-bg) !important;

  color: var(--axm-text) !important;

  border-color: var(--axm-border) !important;

}



html[data-bs-theme="dark"] .axm-expr-card,

html[data-theme="dark"] .axm-expr-card {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-expr-card:hover,

html[data-theme="dark"] .axm-expr-card:hover {

  background: var(--axm-surface-3) !important;

  border-color: var(--axm-accent) !important;

}



html[data-bs-theme="dark"] .axm-expr-card.is-active,

html[data-theme="dark"] .axm-expr-card.is-active {

  background: rgba(110, 168, 254, 0.16) !important;

  border-color: var(--axm-accent) !important;

}



html[data-bs-theme="dark"] .axm-expr-mark,

html[data-theme="dark"] .axm-expr-mark,

html[data-bs-theme="dark"] .axm-expr-mark[data-expression],

html[data-theme="dark"] .axm-expr-mark[data-expression] {

  background: rgba(250, 204, 21, 0.4) !important;

  color: inherit;

}



html[data-bs-theme="dark"] .axm-project-header-actions .btn-light,

html[data-theme="dark"] .axm-project-header-actions .btn-light {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-expr-toolbar-btn,

html[data-theme="dark"] .axm-expr-toolbar-btn {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border-strong) !important;

  color: var(--axm-text) !important;

}



html[data-bs-theme="dark"] .axm-expr-hint kbd,

html[data-theme="dark"] .axm-expr-hint kbd,

html[data-bs-theme="dark"] .axm-script-meta kbd,

html[data-theme="dark"] .axm-script-meta kbd {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

  color: var(--axm-text, #e6edf3) !important;

}



/* Prevent left workflow column from stretching to match tall right column */

.axm-studio-shell > .axm-studio-row,

.container-fluid.mt-4 > .row,

.container-fluid.axm-studio-shell > .row {

  align-items: flex-start !important;

}



.axm-workflow-col {

  align-self: flex-start !important;

  height: auto !important;

  max-width: 100%;

}



/* ===== Studio dashboard shell (full-width, matches reference Image 1) ===== */

.axm-studio-shell {

  max-width: none !important;

  width: 100% !important;

  margin-left: 0 !important;

  margin-right: 0 !important;

  padding-left: 12px !important;

  padding-right: 12px !important;

}



@media (min-width: 1200px) {

  .axm-studio-shell {

    padding-left: 16px !important;

    padding-right: 16px !important;

  }

}



.axm-studio-row {

  --bs-gutter-x: 12px;

  --bs-gutter-y: 12px;

  margin-left: 0 !important;

  margin-right: 0 !important;

  width: 100%;

  max-width: none;

}



.axm-workflow-col {

  flex: 0 0 auto;

  align-self: flex-start !important;

  height: auto !important;

  max-width: 100%;

  min-width: 0;

  padding-left: 0 !important;

  padding-right: calc(var(--bs-gutter-x) * 0.5) !important;

}



.axm-workspace-col {

  min-width: 0 !important;

  display: flex;

  flex-direction: column;

  gap: 12px;

  padding-left: calc(var(--bs-gutter-x) * 0.5) !important;

  padding-right: 0 !important;

}



@media (min-width: 992px) {

  .axm-studio-shell > .axm-studio-row {

    display: flex;

    flex-wrap: nowrap;

    align-items: flex-start;

  }



  .axm-workflow-col.col-lg-4 {

    flex: 0 0 30% !important;

    width: 30% !important;

    max-width: 30% !important;

  }



  .axm-workspace-col.col-lg-8 {

    flex: 0 0 70% !important;

    width: 70% !important;

    max-width: 70% !important;

    min-width: 0 !important;

  }

}



@media (min-width: 1400px) {

  .axm-workflow-col.col-lg-4 {

    flex: 0 0 30% !important;

    width: 30% !important;

    max-width: 30% !important;

  }

}



/* Left: standalone Get Started button */
.axm-get-started-cta.btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem;
  min-height: 44px;
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.5;
  white-space: normal;
  text-align: center;
  position: relative;
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-hover-border-color: #ff6405;
  --bs-btn-active-border-color: #ff6405;
  --bs-btn-hover-color: #c8cdd3;
  --bs-btn-active-color: #c8cdd3;
  /* Dark: outlined CTA — orange border, no solid hover fill */
  background: transparent !important;
  background-image: none !important;
  border: 1px solid #ff6405 !important;
  color: #c8cdd3 !important;
  box-shadow: none;
  transition: color 120ms ease, border-color 120ms ease;
}

.axm-get-started-cta.btn:hover,
.axm-get-started-cta.btn:focus,
.axm-get-started-cta.btn:focus-visible,
.axm-get-started-cta.btn:active {
  /* Keep default — border only, no hover background */
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 1px solid #ff6405 !important;
  border-color: #ff6405 !important;
  color: #c8cdd3 !important;
  box-shadow: none !important;
  transform: none;
}
.axm-get-started-cta {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: visible;
}
.axm-get-started-cta::before,
.axm-get-started-cta::after {
  content: none !important;
  display: none !important;
}
.axm-get-started-cta__icon {
  flex-shrink: 0;
  font-size: 1rem;
  /* color: #c8cdd3; */
}

html[data-bs-theme="light"] .axm-get-started-cta.btn,
html[data-theme="light"] .axm-get-started-cta.btn {
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-hover-border-color: #ff6405;
  --bs-btn-active-border-color: #ff6405;
  --bs-btn-hover-color: #312e81;
  --bs-btn-active-color: #312e81;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 1px solid #ff6405 !important;
  color: #212121!important;
  box-shadow: none;
}
/* html[data-bs-theme="light"] .axm-get-started-cta.btn:hover, */
html[data-theme="light"] .axm-get-started-cta.btn:hover,
html[data-bs-theme="light"] .axm-get-started-cta.btn:focus,
html[data-theme="light"] .axm-get-started-cta.btn:focus,
html[data-bs-theme="light"] .axm-get-started-cta.btn:focus-visible,
html[data-theme="light"] .axm-get-started-cta.btn:focus-visible,
html[data-bs-theme="light"] .axm-get-started-cta.btn:active,
html[data-theme="light"] .axm-get-started-cta.btn:active {
  /* No hover fill � keep orange border only */
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 1px solid #ff6405 !important;
  border-color: #ff6405 !important;
  color: #312e81 !important;
  box-shadow: none !important;
  transform: none;
}
/* html[data-bs-theme="light"] .axm-get-started-cta__icon,
html[data-theme="light"] .axm-get-started-cta__icon {
  color: #4338ca;
} */



/* Keep composition Add Image aligned with Generate Webpage / Create Video (no blue fill) */

.axm-studio-shell #image-composition-section .ic-btn-secondary,

.axm-studio-shell #image-composition-section .ic-btn-secondary.dropdown-toggle,

.axm-studio-shell #image-composition-section .source-dropdown .ic-btn {

  background: var(--axm-surface-2, #1e2128) !important;

  border: 1.5px solid var(--axm-border-strong, #3d4450) !important;

  color: var(--axm-text, #e6edf3) !important;

  box-shadow: none !important;

}



.axm-studio-shell #image-composition-section .ic-btn-secondary:hover,

.axm-studio-shell #image-composition-section .ic-btn-secondary:focus,

.axm-studio-shell #image-composition-section .ic-btn-secondary.show,

.axm-studio-shell #image-composition-section .source-dropdown .ic-btn:hover,

.axm-studio-shell #image-composition-section .source-dropdown .ic-btn:focus,

.axm-studio-shell #image-composition-section .source-dropdown .ic-btn.show {

  background: var(--axm-surface-3, #252a33) !important;

  border-color: var(--axm-border-strong, #4b5563) !important;

  color: var(--axm-text, #ffffff) !important;

}



html[data-bs-theme="light"] .axm-studio-shell #image-composition-section .ic-btn-secondary,

html[data-theme="light"] .axm-studio-shell #image-composition-section .ic-btn-secondary,

html[data-bs-theme="light"] .axm-studio-shell #image-composition-section .source-dropdown .ic-btn,

html[data-theme="light"] .axm-studio-shell #image-composition-section .source-dropdown .ic-btn {

  background: var(--axm-surface, #fff) !important;

  border-color: var(--axm-border-strong, #d1d5db) !important;

  color: var(--axm-text, #374151) !important;

}



/* Generate Script lives on the standalone Get Started button */

.axm-left-accordions #openScriptGeneratorBtn {

  display: none !important;

}



/* Visual Effects sidebar rows (Audio Visualizer, Atmosphere, etc.) */

#effectsControlsContainer .fx-row {

  display: flex;

  flex-wrap: nowrap;

  align-items: center;

  gap: 6px;

  margin-bottom: 10px;

  min-width: 0;

}



#effectsControlsContainer .fx-label {

  flex: 0 0 96px;

  font-size: 0.68rem;

  font-weight: 600;

  line-height: 1.25;

  color: var(--axm-text-muted, #9ca3af);

  margin: 0;

  white-space: normal;

}



#effectsControlsContainer select.fx-ctrl {

  flex: 1 1 auto;

  min-width: 0;

  height: 30px;

  padding-top: 0.2rem;

  padding-bottom: 0.2rem;

  font-size: 0.78rem;

}



#effectsControlsContainer button.fx-ctrl {

  flex: 0 0 auto;

  min-width: 0;

  height: 30px;

  padding: 0 0.65rem;

  font-size: 0.78rem;

  line-height: 1;

  white-space: nowrap;

}



#effectsControlsContainer .fx-row-tail {

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  gap: 4px;

}



#effectsControlsContainer .fx-depth-stack {

  display: flex;

  flex-direction: column;

  gap: 1px;

  flex-shrink: 0;

}



#effectsControlsContainer .effects-depth-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 24px;

  height: 14px;

  padding: 0;

  margin: 0;

  border: 1px solid var(--axm-border-strong, #3d4450);

  background: var(--axm-surface-2, #1e2128);

  color: var(--axm-text-muted, #9ca3af);

  font-size: 0.5rem;

  line-height: 1;

  cursor: pointer;

  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;

}



#effectsControlsContainer .effects-depth-btn:first-child {

  border-radius: 4px 4px 0 0;

}



#effectsControlsContainer .effects-depth-btn:last-child {

  border-radius: 0 0 4px 4px;

  border-top: none;

}



#effectsControlsContainer .effects-depth-btn:hover {

  background: var(--axm-surface-3, #252a33);

  color: var(--axm-text, #e6edf3);

}



#effectsControlsContainer .effects-depth-btn.active {

  background: var(--axm-accent, #388bfd);

  border-color: var(--axm-accent, #388bfd);

  color: #fff;

}



#effectsControlsContainer .fx-gear {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 28px;

  width: 28px;

  height: 28px;

  padding: 0;

  margin: 0;

  border: 1px solid var(--axm-border-strong, #3d4450);

  border-radius: 6px;

  background: var(--axm-surface-2, #1e2128);

  color: var(--axm-text-muted, #9ca3af);

  font-size: 0.72rem;

  line-height: 1;

  cursor: pointer;

  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;

}



#effectsControlsContainer .fx-gear:hover,

#effectsControlsContainer .fx-gear:focus-visible {

  background: var(--axm-surface-3, #252a33);

  color: var(--axm-text, #e6edf3);

  border-color: var(--axm-border-strong, #4b5563);

  outline: none;

}



#effectsControlsContainer .fx-gear[aria-expanded="true"] {

  background: rgba(56, 139, 253, 0.15);

  border-color: var(--axm-accent, #388bfd);

  color: var(--axm-accent, #388bfd);

}



#effectsControlsContainer .fx-row--atmosphere {

  flex-wrap: nowrap;

}



#effectsControlsContainer .fx-row--atmosphere #btn-select-atmosphere-sidebar {

  flex: 1 1 auto;

  min-width: 0;

  max-width: 100%;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  text-align: left;

  justify-content: flex-start;

  display: inline-flex;

  align-items: center;

}



#effectsControlsContainer .fx-row--atmosphere #btn-select-atmosphere-sidebar .fx-atmo-btn-text {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  min-width: 0;

}



#effectsControlsContainer #btn-select-atmosphere-sidebar {

  background: transparent !important;

  border-color: var(--axm-accent, #388bfd) !important;

  color: var(--axm-accent, #388bfd) !important;

  box-shadow: none !important;

}



#effectsControlsContainer #btn-select-atmosphere-sidebar:hover {

  background: rgba(56, 139, 253, 0.12) !important;

  color: #79b8ff !important;

}



#effectsControlsContainer .form-select.fx-ctrl {

  background-color: var(--axm-input-bg, var(--axm-surface-2, #1e2128));

  border-color: var(--axm-input-border, var(--axm-border-strong, #3d4450));

  color: var(--axm-text, #e6edf3);

}



#effectsControlsContainer .collapse .row {

  margin-left: 0;

  margin-right: 0;

}



#effectsControlsContainer .collapse {

  margin-bottom: 8px;

  padding-left: 102px;

}



html[data-bs-theme="light"] #effectsControlsContainer .fx-label,

html[data-theme="light"] #effectsControlsContainer .fx-label {

  color: #6b7280;

}



html[data-bs-theme="light"] #effectsControlsContainer .fx-gear,

html[data-theme="light"] #effectsControlsContainer .fx-gear,

html[data-bs-theme="light"] #effectsControlsContainer .effects-depth-btn,

html[data-theme="light"] #effectsControlsContainer .effects-depth-btn {

  background: #fff;

  border-color: #d1d5db;

  color: #6b7280;

}



html[data-bs-theme="light"] #effectsControlsContainer .form-select.fx-ctrl,

html[data-theme="light"] #effectsControlsContainer .form-select.fx-ctrl {

  background-color: #fff;

  border-color: #d1d5db;

  color: #374151;

}



/* Website Branding under main studio (Live Preview opens in modal after Generate Webpage) */

.axm-branding-preview-row {

  --bs-gutter-x: 12px;

  margin-left: 0 !important;

  margin-right: 0 !important;

  margin-top: 12px;

  width: 100%;

  align-items: flex-start;

}



.axm-branding-col {

  min-width: 0;

  width: 100%;

  max-width: 100%;

  flex: 0 0 100%;

  padding-left: 0 !important;

  padding-right: 0 !important;

}



.axm-branding-col #websiteBrandingCard {

  margin: 0 !important;

  height: 100%;

  border-radius: 12px !important;

  border: 1px solid var(--axm-border, #30363d) !important;

  background: var(--axm-surface, #1e2128) !important;

  overflow: hidden;

}



.axm-preview-col .axm-live-preview {

  margin-top: 0 !important;

  height: 100%;

}



.axm-workspace-card {

  border-radius: 12px !important;

  border: 1px solid var(--axm-border, #e5e7eb) !important;

  background: var(--axm-surface, #fff) !important;

  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;

  overflow: hidden;

  width: 100%;

  min-width: 0;

}



.axm-workspace-card > #image-composition-section {

  margin-bottom: 0.65rem;

  width: 100%;

  min-width: 0;

  z-index: 99;

    position: relative;

}



.axm-workspace-card .test-editor-container {

  margin-bottom: 0 !important;

  box-shadow: none !important;

  border: 1px solid var(--axm-border, #e5e7eb);

  border-radius: 10px;

  overflow: hidden;

}



.axm-workspace-card .test-editor-sidebar {

  padding: 10px 12px !important;

  background: var(--axm-surface-2, #f8f9fa);

}



.axm-workspace-card .test-toolbar {

  padding: 8px 10px;

  gap: 6px;

  flex-wrap: wrap;

  align-items: center;

  background: var(--axm-surface-3, #e9ecef);

  border-bottom: 1px solid var(--axm-border, #dee2e6);

}



.axm-workspace-card .test-editor-canvas-area {

  min-height: 420px;

  background: var(--axm-bg-elevated, #0f1218);

}



html[data-bs-theme="light"] .axm-workspace-card .test-editor-canvas-area,

html[data-theme="light"] .axm-workspace-card .test-editor-canvas-area {

  background: var(--axm-bg-elevated, #f3f4f6);

}



.axm-studio-shell .ic-toolbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  flex-wrap: wrap;

  padding: 10px 12px;

  margin-bottom: 10px;

  border-radius: 10px;

  border: 1px solid var(--axm-border, #e2e6ea);

  background: var(--axm-surface-2, #f8f9fa);

}



.axm-studio-shell .ic-toolbar-label {

  font-weight:500;

  color: var(--axm-text-muted, #9ca3af);

}



.axm-studio-shell .ic-toolbar-actions {

  display: flex;

  align-items: center;

  gap: 6px;

  flex-wrap: nowrap;

  margin-left: auto;

}



.axm-studio-shell .ic-controls {

  display: flex;

  align-items: center;

  gap: 6px;

  flex-wrap: wrap;

  justify-content: flex-end;

  margin-left: auto;

}



.axm-live-preview {

  width: 100%;

  clear: none;

  margin-top: 0 !important;

  padding: 0;

  border-radius: 0;

  border: none;

  background: transparent;

  box-shadow: none;

}



.axm-live-preview > .d-flex {

  margin-bottom: 0.65rem !important;

}



.axm-live-preview > .d-flex h6 {

  font-size: 0.7rem !important;

  font-weight: 700 !important;

  color: var(--axm-text-muted, #9ca3af) !important;

}



.axm-live-preview-stage,

.axm-live-preview > .position-relative.border.rounded,

.axm-live-preview > .position-relative {

  border-radius: 10px !important;

  border: 1px solid var(--axm-border, #e5e7eb) !important;

  background: var(--axm-surface-2, #0b0e14) !important;

  overflow: hidden;

  min-height: 280px;

  height: 100%;

}



.axm-live-preview #layoutPreviewFrame,

.axm-live-preview-frame {

  min-height: 360px !important;

  max-height: none !important;

  width: 100%;

  background: transparent;

}



/* Live Preview modal ��� full viewport */

.axm-live-preview-modal-dialog {

  width: 100vw !important;

  max-width: 100vw !important;

  height: 100vh !important;

  margin: 0 !important;

  padding: 0 !important;

}



.axm-live-preview-modal-content {

  height: 100%;

  max-height: 100vh;

  display: flex;

  flex-direction: column;

  border-radius: 0;

  overflow: hidden;

  background: var(--axm-surface, #fff);

  border: none;

  color: var(--axm-text, #212529);

  box-shadow: none;

}



.axm-live-preview-modal-header {

  flex-shrink: 0;

  padding: 0.85rem 1.1rem;

  border-bottom: 1px solid var(--axm-border, #e5e7eb);

}



.axm-live-preview-modal-header .modal-title {

  font-size: 0.95rem;

  font-weight: 700;

  text-transform: uppercase;

  color: var(--axm-text, #111827);

}



.axm-live-preview-header-actions {

  flex-wrap: wrap;

  justify-content: flex-end;

}



.axm-live-preview-theme-btn {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  font-size: 0.78rem;

  font-weight: 600;

  white-space: nowrap;

  border-color: var(--axm-border, #33404f) !important;

  color: var(--axm-text-muted, #9aa3af) !important;

  background: transparent !important;

  padding: 0.28rem 0.65rem !important;

}



.axm-live-preview-theme-btn:hover,

.axm-live-preview-theme-btn:focus,

.axm-live-preview-theme-btn.show {

  color: var(--axm-text, #e5e7eb) !important;

  background: var(--axm-surface-2, #222b36) !important;

  border-color: var(--axm-border, #33404f) !important;

}



#livePreviewModal .axm-live-preview-theme-menu {

  min-width: 220px;

  max-height: min(420px, 60vh);

  overflow-y: auto;

}



#livePreviewModal .axm-live-preview-fullsize-link {

  white-space: nowrap;

  font-size: 0.78rem;

  font-weight: 600;

}



@media (max-width: 575.98px) {

  .axm-live-preview-header-actions {

    gap: 0.45rem !important;

  }

  .axm-live-preview-theme-btn .axm-live-preview-theme-btn-label {

    display: none;

  }

  .axm-live-preview-fullsize-link span,

  .axm-live-preview-fullsize-link {

    font-size: 0.72rem;

  }

}



.axm-live-preview-modal-body {

  flex: 1 1 auto;

  min-height: 0;

  padding: 0.75rem;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  pointer-events: auto;

}



.axm-live-preview-modal-layout {

  display: flex;

  gap: 0.75rem;

  flex: 1 1 auto;

  min-height: 0;

  height: 100%;

  align-items: stretch;

}



.axm-live-preview-branding-pane {

  flex: 0 0 30% !important;

  width: 30% !important;

  max-width: 30% !important;

  min-width: 260px;

  overflow: hidden;

  min-height: 0;

  position: relative;

  z-index: 5;

  pointer-events: auto !important;

  display: flex;

  flex-direction: column;

}



#livePreviewModal,

#livePreviewModal .modal-dialog,

#livePreviewModal .modal-content,

#livePreviewModal .axm-live-preview-modal-body,

#livePreviewModal .axm-live-preview-modal-layout,

#livePreviewModal .axm-live-preview-branding-pane,

#livePreviewModal #websiteBrandingCard {

  pointer-events: auto !important;

}



#livePreviewModal .axm-brand-acc-toggle,

#livePreviewModal .axm-wf-acc-toggle,

#livePreviewModal .axm-brand-btn-row-toggle {

  cursor: pointer;

  pointer-events: auto !important;

  position: relative;

  z-index: 6;

}



/* Branding accordion panels inside Webpage Preview modal */

#livePreviewModal .axm-brand-acc-panel[hidden],

#livePreviewModal .axm-brand-acc-panel:not(.is-open) {

  display: none !important;

}

#livePreviewModal .axm-brand-acc-panel.is-open {

  display: block !important;

  height: auto !important;

  max-height: none !important;

  overflow: visible !important;

  visibility: visible !important;

}



/* Accordion toggles must stay clickable */

#livePreviewModal .axm-brand-acc-toggle {

  display: flex !important;

  pointer-events: auto !important;

  visibility: visible !important;

  cursor: pointer;

}

#livePreviewModal .axm-brand-acc-chevron {

  display: inline-block !important;

  visibility: visible !important;

  pointer-events: none;

}



#livePreviewModal #axmBrandTabBar,

#livePreviewModal .axm-brand-tab-bar {

  display: none !important;

}



/* Professional branding sidebar chrome */

#livePreviewModal .axm-live-preview-branding-pane #websiteBrandingCard {

  margin: 0 !important;

  height: 100%;

  min-height: 100%;

  display: flex !important;

  flex-direction: column;

  overflow: hidden !important;

  border: 1px solid var(--axm-border, #33404f) !important;

  border-radius: 12px !important;

  background: var(--axm-surface, #1a222c) !important;

  box-shadow: none !important;

  pointer-events: auto;

}



#livePreviewModal .axm-live-preview-branding-pane .axm-branding-header-row {

  flex: 0 0 auto;

  flex-wrap: nowrap !important;

  align-items: center;

  gap: 8px;

  padding: 12px 14px !important;

  min-height: 56px;

  border-bottom: 1px solid var(--axm-border, #33404f);

  border-radius: 12px 12px 0 0 !important;

  background: var(--axm-surface-2, #222b36) !important;

}



#livePreviewModal .axm-live-preview-branding-pane .axm-wf-acc-toggle--title {

  flex: 1 1 auto;

  min-width: 0;

  pointer-events: none; /* shell stays open in modal */

}



#livePreviewModal .axm-live-preview-branding-pane .axm-wf-acc-toggle--chevron {

  display: none !important;

}



#livePreviewModal .axm-live-preview-branding-pane .axm-wf-acc-title {

  white-space: nowrap !important;

  overflow: hidden;

  text-overflow: ellipsis;

  font-size: 0.92rem !important;

  font-weight: 700 !important;

  margin: 0 !important;

}



#livePreviewModal .axm-live-preview-branding-pane .axm-branding-reset-btn {

  flex: 0 0 auto;

  white-space: nowrap;

  font-size: 0.72rem !important;

  padding: 0.28rem 0.7rem !important;

  border-radius: 8px !important;

}



#livePreviewModal .axm-live-preview-branding-pane #axmWfAccBranding,

#livePreviewModal .axm-live-preview-branding-pane #axmWfAccBranding[hidden] {

  display: block !important;

  flex: 1 1 auto;

  min-height: 0;

  overflow-x: hidden;

  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch;

  padding: 0 !important;

  visibility: visible !important;

  height: auto !important;

  max-height: none !important;

}



#livePreviewModal .axm-live-preview-branding-pane #axmWfAccBranding > .p-3,

#livePreviewModal .axm-live-preview-branding-pane #axmWfAccBranding > .p-lg-4 {

  padding: 12px !important;

}



#livePreviewModal .axm-live-preview-branding-pane .axm-branding-accordions {

  display: flex;

  flex-direction: column;

  gap: 10px;

  min-height: 0;

}



#livePreviewModal .axm-live-preview-branding-pane .axm-brand-acc {

  overflow: visible;

}



#livePreviewModal .axm-live-preview-branding-pane .axm-brand-acc--buttons {

  border: 1px solid var(--axm-border, #33404f);

  border-radius: 10px;

  background: var(--axm-surface-2, #222b36);

}



#livePreviewModal .axm-live-preview-branding-pane .axm-brand-btn-row {

  min-height: 44px;

}



#livePreviewModal .axm-live-preview-branding-pane .axm-brand-acc-head {

  display: flex;

  align-items: center;

  gap: 6px;

  min-width: 0;

  background: transparent;

}



#livePreviewModal .axm-live-preview-branding-pane .axm-brand-acc-head .axm-brand-acc-toggle {

  flex: 1 1 auto;

  min-width: 0;

}



#livePreviewModal .axm-live-preview-branding-pane .axm-brand-acc-title {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



#livePreviewModal #axmBrandTabBar,

#livePreviewModal .axm-brand-tab-bar {

  display: none !important;

}



#livePreviewModal .axm-live-preview-branding-pane .branding-label,

#livePreviewModal .axm-live-preview-branding-pane .branding-sub-label {

  color: var(--axm-text-muted, #9aa3af);

  font-size: 0.75rem;

  font-weight: 600;

}



.axm-live-preview-preview-pane {

  flex: 0 0 70% !important;

  width: 70% !important;

  max-width: 70% !important;

  min-width: 0;

  min-height: 0;

  display: flex;

  flex-direction: column;

  position: relative;

  z-index: 1;

}



.axm-live-preview-modal-body .axm-live-preview {

  flex: 1 1 auto;

  display: flex;

  flex-direction: column;

  min-height: 0;

  height: 100%;

}



.axm-live-preview-modal-body .axm-live-preview-stage {

  flex: 1 1 auto;

  min-height: 0;

  height: 100%;

  overflow-x: hidden !important;

  overflow-y: scroll !important; /* always show scroller for full page detail */

  -webkit-overflow-scrolling: touch;

  display: block;

  position: relative;

}



.axm-live-preview-modal-body #layoutPreviewFrame,

.axm-live-preview-modal-body .axm-live-preview-frame {

  display: block;

  flex: none !important;

  width: 100% !important;

  height: auto !important;

  min-height: 100% !important;

  max-height: none !important;

  border: 0;

  background: #0b0e14;

  overflow: visible !important;

}



@media (max-width: 991.98px) {

  .axm-live-preview-modal-layout {

    flex-direction: column;

    overflow: auto;

  }



  .axm-live-preview-branding-pane {

    flex: 0 0 auto !important;

    max-width: 100% !important;

    width: 100% !important;

    min-width: 0;

    max-height: 40vh;

  }



  .axm-live-preview-preview-pane {

    flex: 1 1 auto !important;

    width: 100% !important;

    max-width: 100% !important;

    min-height: 50vh;

  }



  .axm-live-preview-modal-body .axm-live-preview-stage {

    min-height: 50vh;

    height: 100%;

  }



  .axm-live-preview-modal-body #layoutPreviewFrame {

    height: auto !important;

    min-height: 50vh !important;

  }

}



html[data-bs-theme="dark"] .axm-live-preview-modal-content,

html[data-theme="dark"] .axm-live-preview-modal-content {

  background: var(--axm-surface, #1a222c) !important;

  border-color: var(--axm-border, #33404f) !important;

  color: var(--axm-text, #8c9299) !important;

}



html[data-bs-theme="dark"] .axm-live-preview-modal-header,

html[data-theme="dark"] .axm-live-preview-modal-header {

  border-bottom-color: var(--axm-border, #33404f) !important;

}



html[data-bs-theme="dark"] .axm-live-preview-modal-header .modal-title,

html[data-theme="dark"] .axm-live-preview-modal-header .modal-title {

  color: var(--axm-text, #8c9299) !important;

}



html[data-bs-theme="dark"] .axm-live-preview-modal-header .btn-close,

html[data-theme="dark"] .axm-live-preview-modal-header .btn-close {

  filter: invert(1) grayscale(100%) brightness(200%);

}



@media (max-width: 575.98px) {

  .axm-live-preview-modal-dialog {

    width: 100vw !important;

    max-width: 100vw !important;

    height: 100vh !important;

    margin: 0 !important;

  }



  .axm-live-preview-modal-content {

    max-height: 100vh;

    border-radius: 0;

  }



  .axm-live-preview-modal-body .axm-live-preview-stage {

    min-height: calc(100vh - 280px);

    height: 100%;

  }



  .axm-live-preview-modal-body #layoutPreviewFrame {

    height: auto !important;

    min-height: calc(100vh - 280px) !important;

  }



  .axm-live-preview-branding-pane,

  .axm-live-preview-preview-pane {

    flex: 0 0 100% !important;

    width: 100% !important;

    max-width: 100% !important;

  }

}



/* Safety: never show Website Branding on the main studio page ��� only inside preview modal */

.axm-branding-preview-row,

.axm-studio-shell #websiteBrandingCard,

.axm-studio-shell .axm-branding-col,

body > #websiteBrandingCard {

  display: none !important;

}



#livePreviewModal #websiteBrandingCard,

#livePreviewModal .axm-live-preview-branding-pane #websiteBrandingCard {

  display: flex !important;

}



html[data-bs-theme="dark"] .axm-live-preview,

html[data-theme="dark"] .axm-live-preview,

html[data-bs-theme="dark"] .axm-workspace-card,

html[data-theme="dark"] .axm-workspace-card {

  background: var(--axm-surface) !important;

  border-color: var(--axm-border) !important;

}



html[data-bs-theme="dark"] .axm-studio-shell .ic-toolbar,

html[data-theme="dark"] .axm-studio-shell .ic-toolbar {

  background: var(--axm-surface-2) !important;

  border-color: var(--axm-border) !important;

}



html[data-bs-theme="dark"] .axm-workspace-card .test-editor-container,

html[data-theme="dark"] .axm-workspace-card .test-editor-container {

  border-color: var(--axm-border) !important;

  background: var(--axm-surface) !important;

}



html[data-bs-theme="dark"] .axm-live-preview > .position-relative.border.rounded,

html[data-theme="dark"] .axm-live-preview > .position-relative.border.rounded {

  background: #0b0e14 !important;

  border-color: var(--axm-border) !important;

}



/* Script Forge: Advanced Settings bar must not stay light-lavender in dark mode */

html[data-bs-theme="dark"] #aiScriptGeneratorModal button.cp-dashed-btn,

html[data-theme="dark"] #aiScriptGeneratorModal button.cp-dashed-btn,

html[data-bs-theme="dark"] #aiScriptGeneratorModal .cp-dashed-btn.w-100,

html[data-theme="dark"] #aiScriptGeneratorModal .cp-dashed-btn.w-100 {

  border: 1px dashed var(--axm-border, #30363d) !important;

  background: var(--axm-surface-2, #161b22) !important;

  color: var(--axm-text, #e6edf3) !important;

}



html[data-bs-theme="dark"] #aiScriptGeneratorModal button.cp-dashed-btn:hover,

html[data-theme="dark"] #aiScriptGeneratorModal button.cp-dashed-btn:hover {

  border-color: #388bfd !important;

  background: var(--axm-surface-3, #1c2128) !important;

  color: #f0f6fc !important;

}



.navbar {

  padding-top: 0.4rem !important;

  padding-bottom: 0.4rem !important;

  min-height: 50px;

}



.navbar .navbar-brand,

.navbar .axm-product-brand {

  font-size: 1.2rem;

  font-weight: 700;

  color: var(--axm-text, #111827) !important;

}



/* Stock PitchForge mark is a wordmark ��� avoid "PitchForge PitchForge" with text brand */

.navbar .navbar-brand #customerLogoPreview[data-axm-brand-stock="1"] {

  display: none !important;

}



html[data-bs-theme="dark"] .navbar .axm-product-brand,

html[data-theme="dark"] .navbar .axm-product-brand {

  color: #ffffff !important;

}



.navbar .axm-theme-toggle {

  margin-right: 0.5rem;

}



.axm-left-accordions {

  gap: 12px;

}



.axm-workflow-card {

  border-radius: 12px;

}



.axm-left-accordions > #websiteBrandingCard {

  margin-top: 0 !important;

  border-radius: 12px !important;

  border: 1px solid var(--axm-border, #30363d) !important;

  background: var(--axm-surface, #1e2128) !important;

  overflow: hidden;

}



html[data-bs-theme="light"] .axm-left-accordions > #websiteBrandingCard,

html[data-theme="light"] .axm-left-accordions > #websiteBrandingCard {

  background: var(--axm-surface, #fff) !important;

  border-color: var(--axm-border, #e5e7eb) !important;

}



/* Tool panel (left of canvas) ��� compact accordion list like reference */

.axm-workspace-card .test-editor-sidebar .title-header,

.axm-workspace-card #shapeAccordion .title-header,

.axm-workspace-card #shapeAccordion .axm-tool-acc-btn {

  padding: 10px 10px !important;

  font-size: 0.78rem !important;

  font-weight: 600;

  border-radius: 8px !important;

  margin-bottom: 4px !important;

  border: 1px solid var(--axm-border, #30363d) !important;

  background: var(--axm-surface-2, #1b2128) !important;

  color: var(--axm-text, #e6edf3) !important;

  box-shadow: none !important;

  outline: none !important;

}



.axm-workspace-card #shapeAccordion .title-header:hover,

.axm-workspace-card #shapeAccordion .axm-tool-acc-btn:hover {

  background: var(--axm-surface-3, #242b36) !important;

  border-color: var(--axm-border-strong, #3d4450) !important;

  color: var(--axm-text, #e6edf3) !important;

}



.axm-workspace-card #shapeAccordion .title-header:focus,

.axm-workspace-card #shapeAccordion .title-header:focus-visible,

.axm-workspace-card #shapeAccordion .axm-tool-acc-btn:focus,

.axm-workspace-card #shapeAccordion .axm-tool-acc-btn:focus-visible,

.axm-workspace-card #shapeAccordion .title-header:active {

  outline: none !important;

  box-shadow: none !important;

  border-color: var(--axm-border, #30363d) !important;

}



html[data-bs-theme="light"] .axm-workspace-card #shapeAccordion .title-header,

html[data-theme="light"] .axm-workspace-card #shapeAccordion .title-header,

html[data-bs-theme="light"] .axm-workspace-card #shapeAccordion .axm-tool-acc-btn,

html[data-theme="light"] .axm-workspace-card #shapeAccordion .axm-tool-acc-btn {

  background: var(--axm-surface-2, #f8fafc) !important;

  border-color: var(--axm-border, #e5e7eb) !important;

  color: var(--axm-text, #111827) !important;

}



.axm-workspace-card .test-editor-sidebar .card,

.axm-workspace-card #shapeAccordion .accordion-item {

  border: none !important;

  box-shadow: none !important;

  background: transparent !important;

  margin-bottom: 0 !important;

}



.axm-workspace-card #shapeAccordion {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.axm-script-meta .axm-script-counts {

  gap: 0.35rem;

  align-items: center;

}



@media (min-width: 992px) {

  .axm-workspace-card .test-editor-container > .row.g-0 {

    display: flex;

    flex-wrap: nowrap;

    align-items: stretch;

  }



  .axm-workspace-card .test-editor-sidebar.col-md-3 {

    flex: 0 0 26%;

    max-width: 26%;

    width: 26%;

  }



  .axm-workspace-card .test-editor-canvas-area.col-md-9 {

    flex: 0 0 74%;

    max-width: 74%;

    width: 74%;

  }

}



/* Legacy full-width preview helper (kept for safety) */

.final-outputs-preview {

  width: 100%;

}



@media (max-width: 991.98px) {

  .axm-workflow-col.col-lg-4,

  .axm-workspace-col.col-lg-8 {

    width: 100% !important;

    max-width: 100% !important;

    flex: 0 0 100% !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

  }



  .axm-branding-preview-row .axm-branding-col.col-lg-4,

  .axm-branding-preview-row .axm-preview-col.col-lg-8 {

    width: 100% !important;

    max-width: 100% !important;

    flex: 0 0 100% !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

  }



  .axm-workspace-col {

    gap: 0.75rem;

  }



  .axm-live-preview #layoutPreviewFrame {

    min-height: 320px !important;

    max-height: 700px !important;

  }



  .axm-studio-shell {

    padding-left: 0.75rem !important;

    padding-right: 0.75rem !important;

  }

}



@media (max-width: 575.98px) {

  .axm-expr-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .axm-expr-toolbar-label {

    display: none;

  }



  .axm-studio-shell .ic-controls {

    width: 100%;

    justify-content: flex-start;

  }



  .axm-workspace-card .test-toolbar {

    gap: 4px;

  }

}



/* ===== Mobile / tablet full-width studio layout ===== */

@media (max-width: 991.98px) {

  body {

    overflow-x: hidden;

    max-width: 100vw;

  }



  .container-fluid {

    width: 100% !important;

    max-width: 100vw !important;

    padding-left: 0.75rem !important;

    padding-right: 0.75rem !important;

  }



  .container-fluid > .row {

    margin-left: 0 !important;

    margin-right: 0 !important;

    max-width: 100%;

  }



  .axm-workflow-col,

  .col-12.col-lg-4,

  .col-12.col-lg-8 {

    width: 100% !important;

    max-width: 100% !important;

    flex: 0 0 100% !important;

    padding-left: 0.5rem !important;

    padding-right: 0.5rem !important;

  }



  .axm-left-accordions,

  .axm-workflow-stack,

  #websiteBrandingCard,

  .axm-wf-acc,

  .axm-branding-accordions {

    max-width: 100%;

    min-width: 0;

  }



  .axm-brand-acc--buttons,

  .axm-brand-btn-row {

    max-width: 100%;

  }



  /* Image composition toolbar: allow wrap so it doesn't force page width */

  .ic-toolbar {

    flex-wrap: wrap !important;

    gap: 8px !important;

  }



  .ic-controls {

    flex-wrap: wrap !important;

    width: 100%;

    justify-content: flex-start !important;

  }



  .ic-select-wrap {

    min-width: 0 !important;

    max-width: 100% !important;

    flex: 1 1 160px;

  }



  /* Editor sidebar + canvas stack full width below md */

  .test-editor-container > .row {

    margin-left: 0;

    margin-right: 0;

  }



  .test-editor-sidebar,

  .test-editor-canvas-area,

  .test-editor-container .col-md-3,

  .test-editor-container .col-md-9 {

    width: 100% !important;

    max-width: 100% !important;

    flex: 0 0 100% !important;

  }



  .test-editor-sidebar {

    border-right: none;

    border-bottom: 1px solid var(--axm-border, #dee2e6);

    padding: 12px !important;

  }



  .test-editor-sidebar .btn:not(.fx-gear):not(.effects-depth-btn),

  .test-editor-sidebar button:not(.fx-gear):not(.effects-depth-btn) {

    max-width: 100% !important;

    min-width: 0 !important;

  }



  #aximate-canvas {

    max-width: 100% !important;

    width: 100% !important;

  }



  .axm-project-header-row {

    flex-wrap: wrap;

  }



  .axm-project-header-row .axm-wf-acc-toggle--title {

    max-width: none;

  }

}



@media (max-width: 575.98px) {

  .container-fluid {

    padding-left: 0.5rem !important;

    padding-right: 0.5rem !important;

  }



  .card.p-3,

  .card.p-lg-4 {

    padding: 0.75rem !important;

  }



  #websiteBrandingCard.card {

    padding: 0 !important;

  }



  .axm-wf-acc-header-row {

    padding-left: 4px;

    padding-right: 4px;

  }

}



/* Atmosphere picker ��������������� theme-aware Apply (layout in atmosphere-modal-layout.css) */

html[data-bs-theme="dark"] #atmosphereModal,

html[data-theme="dark"] #atmosphereModal {

  --axm-atmo-apply-bg: var(--axm-accent, #6ea8fe);

  --axm-atmo-apply-border: var(--axm-accent, #6ea8fe);

  --axm-atmo-apply-fg: #0f1419;

  --axm-atmo-apply-hover-bg: #8bb8fe;

  --axm-atmo-apply-hover-border: #8bb8fe;

}



html[data-bs-theme="dark"] #atmosphereModal button#atmo-apply-btn.axm-atmo-apply-btn,

html[data-theme="dark"] #atmosphereModal button#atmo-apply-btn.axm-atmo-apply-btn {

  background: var(--axm-atmo-apply-bg) !important;

  background-color: var(--axm-atmo-apply-bg) !important;

  background-image: none !important;

  border-color: var(--axm-atmo-apply-border) !important;

  color: var(--axm-atmo-apply-fg) !important;

}



html[data-bs-theme="dark"] #atmosphereModal button#atmo-apply-btn.axm-atmo-apply-btn i,

html[data-theme="dark"] #atmosphereModal button#atmo-apply-btn.axm-atmo-apply-btn i {

  color: var(--axm-atmo-apply-fg) !important;

}



html[data-bs-theme="dark"] #atmosphereModal button#atmo-apply-btn.axm-atmo-apply-btn:hover:not(:disabled),

html[data-theme="dark"] #atmosphereModal button#atmo-apply-btn.axm-atmo-apply-btn:hover:not(:disabled),

html[data-bs-theme="dark"] #atmosphereModal button#atmo-apply-btn.axm-atmo-apply-btn:focus-visible:not(:disabled),

html[data-theme="dark"] #atmosphereModal button#atmo-apply-btn.axm-atmo-apply-btn:focus-visible:not(:disabled) {

  background: var(--axm-atmo-apply-hover-bg) !important;

  background-color: var(--axm-atmo-apply-hover-bg) !important;

  border-color: var(--axm-atmo-apply-hover-border) !important;

  color: var(--axm-atmo-apply-fg) !important;

}



html[data-bs-theme="dark"] #atmosphereModal button#atmo-apply-btn.axm-atmo-apply-btn:disabled,

html[data-theme="dark"] #atmosphereModal button#atmo-apply-btn.axm-atmo-apply-btn:disabled {

  background: var(--axm-atmo-apply-bg) !important;

  background-color: var(--axm-atmo-apply-bg) !important;

  border-color: var(--axm-atmo-apply-border) !important;

  color: var(--axm-atmo-apply-fg) !important;

  opacity: 0.5;

  cursor: not-allowed;

}

/* ============================================================

   FX PANEL RESTYLE ��������������� Opacity sliders + Color swatches

   Scope: Visual Effects panel ONLY ��������������� the two gear popups

   (#audioVisualizerAdvanced / #atmosphereAdvanced) inside

   #effectsControlsContainer. Deliberately does NOT touch global

   .form-range / .form-control-color, and structurally cannot hit

   #tintOpacityRange (it is not inside either collapse).

   Added: task-fx-restyle

   ============================================================ */



/* --- Opacity sliders: thinner track, slimmer thumb --- */

#effectsControlsContainer #audioVisualizerAdvanced input[type="range"].form-range,

#effectsControlsContainer #atmosphereAdvanced input[type="range"].form-range {

  height: 18px;

  padding: 0;

  margin: 0;

  background-color: transparent;

  -webkit-appearance: none;

  appearance: none;

}

#effectsControlsContainer #audioVisualizerAdvanced input[type="range"].form-range:focus,

#effectsControlsContainer #atmosphereAdvanced input[type="range"].form-range:focus {

  box-shadow: none;

  outline: none;

}

#effectsControlsContainer #audioVisualizerAdvanced input[type="range"].form-range::-webkit-slider-runnable-track,

#effectsControlsContainer #atmosphereAdvanced input[type="range"].form-range::-webkit-slider-runnable-track {

  height: 3px;

  border-radius: 2px;

  background: var(--axm-border, rgba(255, 255, 255, 0.18));

}

#effectsControlsContainer #audioVisualizerAdvanced input[type="range"].form-range::-webkit-slider-thumb,

#effectsControlsContainer #atmosphereAdvanced input[type="range"].form-range::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 11px;

  height: 11px;

  margin-top: -4px; /* -(thumb 11px - track 3px) / 2 = -4 ������� ����������� centered */

  border-radius: 50%;

  background: #4ade80;

  border: none;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);

}

#effectsControlsContainer #audioVisualizerAdvanced input[type="range"].form-range::-moz-range-track,

#effectsControlsContainer #atmosphereAdvanced input[type="range"].form-range::-moz-range-track {

  height: 3px;

  border-radius: 2px;

  background: var(--axm-border, rgba(255, 255, 255, 0.18));

}

#effectsControlsContainer #audioVisualizerAdvanced input[type="range"].form-range::-moz-range-thumb,

#effectsControlsContainer #atmosphereAdvanced input[type="range"].form-range::-moz-range-thumb {

  width: 11px;

  height: 11px;

  border-radius: 50%;

  background: #4ade80;

  border: none;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);

}



/* Longer rail: bleed 4px into the column gutter on each side */

#effectsControlsContainer #audioVisualizerAdvanced .col-9 input[type="range"].form-range,

#effectsControlsContainer #atmosphereAdvanced .col-9 input[type="range"].form-range {

  width: calc(100% + 8px);

  margin-left: -4px;

  margin-right: -4px;

}



/* --- "Color" / "Opacity" labels above the controls: smaller font --- */

#effectsControlsContainer #audioVisualizerAdvanced .col-6 > label.small.text-muted,

#effectsControlsContainer #atmosphereAdvanced .col-6 > label.small.text-muted {

  font-size: 0.62rem !important;

}



/* --- Color swatch: smaller square --- */

#effectsControlsContainer #audioVisualizerAdvanced .form-control-color,

#effectsControlsContainer #atmosphereAdvanced .form-control-color {

  min-width: 28px !important;

  max-width: 28px !important;

  width: 28px !important;

  height: 28px !important;

  padding: 3px !important;

  border-radius: 6px !important;

}

#effectsControlsContainer #audioVisualizerAdvanced .form-control-color::-webkit-color-swatch-wrapper,

#effectsControlsContainer #atmosphereAdvanced .form-control-color::-webkit-color-swatch-wrapper {

  padding: 0;

}

#effectsControlsContainer #audioVisualizerAdvanced .form-control-color::-webkit-color-swatch,

#effectsControlsContainer #atmosphereAdvanced .form-control-color::-webkit-color-swatch {

  border: 1px solid rgba(255, 255, 255, 0.25);

  border-radius: 4px;

}

#effectsControlsContainer #audioVisualizerAdvanced .form-control-color::-moz-color-swatch,

#effectsControlsContainer #atmosphereAdvanced .form-control-color::-moz-color-swatch {

  border: 1px solid rgba(255, 255, 255, 0.25);

  border-radius: 4px;

}



/* --- Live opacity value labels (Audio Visualizer + Atmosphere) --- */

#effectsControlsContainer .visualizer-op-live {

  font-size: 0.62rem !important;

}



/* ============================================================

   ADD IMAGE PANEL RESTYLE ��������������� task-addimage

   Scope: #addimage-panel only (the Add Image accordion panel).

   NOTE: the redesign classes used here (.image-action-row,

   .image-action-btn, .opacity-row, .opacity-slider, .transform-*,

   .aspect-toggle, .field-label) had NO pre-existing styles anywhere

   in the project ��������������� they were rendering with browser defaults. This

   block supplies the intended compact layout and reuses the

   task-fx-restyle slider technique (3px track, 11px round thumb).

   Added: task-addimage

   ============================================================ */



/* --- Icon action row: compact toolbar (was unstyled) --- */

#addimage-panel .image-action-row {

  display: flex;

  align-items: center;

  gap: 6px;

  margin-bottom: 10px;

}

#addimage-panel .image-action-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  padding: 0;

  border: 1px solid var(--axm-input-border, #ced4da);

  border-radius: 6px;

  background: transparent;

  color: var(--axm-text, inherit);

  cursor: pointer;

  flex: 0 0 auto;

}

#addimage-panel .image-action-btn:hover {

  background: var(--axm-border, rgba(0, 0, 0, 0.06));

}

#addimage-panel .image-action-btn .tooltip {

  display: none; /* button already carries a native title tooltip */

}



/* --- Opacity row: labels + slider on one line --- */

#addimage-panel .opacity-row {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 10px;

}

#addimage-panel .opacity-label {

  font-size: 0.62rem;

  color: var(--axm-text-muted, #6c757d);

  flex-shrink: 0;

}

#addimage-panel label.field-label {

  margin-top: 6px !important; /* override inline margin-top:14px (tighter) */

  font-size: 0.62rem;

  font-weight: 600;

  color: var(--axm-text-muted, #6c757d);

}



/* --- Opacity slider: reuse task-fx-restyle technique (3px / 11px) --- */

#addimage-panel .opacity-slider {

  flex: 1 1 auto;

  height: 18px;

  padding: 0;

  margin: 0;

  background: transparent;

  -webkit-appearance: none;

  appearance: none;

  cursor: pointer;

}

#addimage-panel .opacity-slider::-webkit-slider-runnable-track {

  height: 3px;

  border-radius: 2px;

  background: var(--axm-border, rgba(0, 0, 0, 0.18));

}

#addimage-panel .opacity-slider::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 11px;

  height: 11px;

  margin-top: -4px; /* (thumb 11px - track 3px) / 2 = -4 ������� ����������� centered */

  border-radius: 50%;

  background: #4ade80;

  border: none;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);

}

#addimage-panel .opacity-slider::-moz-range-track {

  height: 3px;

  border-radius: 2px;

  background: var(--axm-border, rgba(0, 0, 0, 0.18));

}

#addimage-panel .opacity-slider::-moz-range-thumb {

  width: 11px;

  height: 11px;

  border-radius: 50%;

  background: #4ade80;

  border: none;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);

}



/* --- Position & Size: compact toggle + field grid --- */

#addimage-panel .transform-toggle {

  display: flex;

  align-items: center;

  gap: 6px;

  width: 100%;

  margin: 4px 0 8px;

  padding: 6px 8px;

  font-size: 0.78rem;

  font-weight: 600;

  text-align: left;

  background: transparent;

  border: 1px solid transparent;

  border-radius: 6px;

  cursor: pointer;

  color: var(--axm-text, inherit);

}

#addimage-panel .transform-toggle:hover {

  background: var(--axm-border, rgba(0, 0, 0, 0.06));

}

#addimage-panel .transform-panel {

  margin-top: 2px;

}

#addimage-panel .transform-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 6px;

  margin-bottom: 6px;

}

#addimage-panel .transform-grid--size {

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

}

#addimage-panel .transform-field {

  display: flex;

  align-items: center;

  gap: 4px;

}

#addimage-panel .transform-field label {

  font-size: 0.62rem;

  font-weight: 700;

  color: var(--axm-text-muted, #6c757d);

  flex-shrink: 0;

}

#addimage-panel .transform-field input {

  width: 100%;

  min-width: 0;

  padding: 3px 6px;

  font-size: 0.78rem;

  border: 1px solid var(--axm-input-border, #ced4da);

  border-radius: 4px;

  background: var(--axm-input-bg, #fff);

  color: var(--axm-text, inherit);

}

#addimage-panel .aspect-toggle {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 26px;

  height: 26px;

  padding: 0;

  border: 1px solid var(--axm-input-border, #ced4da);

  border-radius: 4px;

  background: transparent;

  color: var(--axm-text, inherit);

  cursor: pointer;

}