/* ================= LOADER ================== */

.creative-loader-inner {
    background: #eee;
}

.creative-loader {
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top-color: #6658ea;
}

/* ================= GENERAL STYLES ================== */

* {
    scrollbar-color: #aaa #fff;
}

*::-webkit-scrollbar-track {
    background: #eee;
}

*::-webkit-scrollbar-thumb {
    background-color: #999;
    border: 4px solid #eee;
}

body {
    background: #eee;
    color: #494949;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #111;
}

.text-danger {
    color: #F44336 !important;
}

.text-success {
    color: #009688 !important;
}

.text-warning {
    color: #FFC107 !important;
}

.text-white {
    color: #111 !important;
}

#creative-icon-panel hr {
    border-bottom: 1px dashed #bcbcbc;
}

.notice {
    color: #494949;
    background: rgba(0, 0, 0, 0.1);
    border-left: 4px solid #6658ea;
}

.notice.notice-danger {
    border-left: 4px solid #F44336;
}

.notice.notice-warning {
    border-left: 4px solid #FFC107;
}

.notice.notice-success {
    border-left: 4px solid #009688;
}

.creative-img-loader {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #6658ea;
}

#creative-overlay-preview {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23FFFFFF'/%3E%3C/svg%3E") left top/contain #ccc;
    background-size: 15px 15px;
}

/* ================= PAGE STRUCTURE ================== */

#creative-toggle-left,
#creative-toggle-right {
    background-color: #fff;
    border: 1px solid #bcbcbc;
}

#creative-toggle-right.closed,
#creative-toggle-left.closed {
    background-color: #fff;
}

#creative-toggle-left .material-icons,
#creative-toggle-right .material-icons {
    color: #111;
}

#creative-toggle-left:hover .material-icons,
#creative-toggle-right:hover .material-icons {
    color: #6658ea;
}

/* ================= TOP BAR ================== */

#creative-top-bar {
    background: #eee;
    border-bottom: 1px solid #bcbcbc;
}

.creative-top-bar-menu .creative-btn-simple {
    color:#111;
}
  
.creative-top-bar-menu .creative-btn-simple:disabled {
    color:#494949
}

/* ================= DROPDOWN ================== */

ul.creative-dropdown {
    background: #fff;
    border: 1px solid #bcbcbc;
}

ul.creative-dropdown li {
    border-bottom: 1px solid #bcbcbc;
}

ul.creative-dropdown li a {
    color: #494949;
}

ul.creative-dropdown li a:hover {
    color: #111;
}

ul.creative-dropdown li a .material-icons {
    color: #6658ea;
}

/* ================= CONTENT BAR ================== */

.creative-content-bar {
    background: #fff;
    border: 1px solid #bcbcbc;
}

.creative-content-bar .creative-img-size {
    border-right: 1px solid #bcbcbc;
}

.creative-content-bar .creative-counter .creative-btn,
.creative-content-bar .creative-counter .creative-btn:hover,
.creative-content-bar .creative-counter .creative-btn:focus {
    background: #fff;
    color: #494949;
}

.creative-content-bar .creative-counter .creative-btn:hover {
    color: #111;
}

.creative-counter .creative-btn:disabled {
    color: rgba(0, 0, 0, 0.3);
}

.creative-content-bar .creative-counter:after {
    background: #eee;
}

#creative-img-drag {
    border-right: 1px solid #bcbcbc;
    background: #fff;
    color: #494949;
}

#creative-img-drag:hover,
#creative-img-drag.active {
    background: #eee;
    color: #111;
}

/* ================= PAGES ================== */

#creative-pages {
    background: #EEEEEE;
}

#creative-pages>div.active>.creative-open-page {
    background: #fff;
    color: #111;
}

#creative-pages>div>.creative-open-page:hover {
    color:#111;
}

#creative-pages>div>.material-icons {
    color:#F44336 !important;
}

/* ================= ICON MENU ================== */

#creative-icon-menu {
    background: #eee;
}

#creative-icon-menu.closed {
    border-right: 1px solid #bcbcbc;
}

button.creative-icon-menu-btn {
    color: #494949;
    background: #eee;
}

button.creative-icon-menu-btn.active,
button.creative-icon-menu-btn:hover {
    color: #000;
    background: #fff;
}

#creative-icon-panel {
    border-right: 1px solid #bcbcbc;
    background: #fff;
}

/* ================= CONTENT ================== */

#creative-content {
    background-color: #fff;
}

#creative-canvas-wrap {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23FFFFFF'/%3E%3C/svg%3E") left top/contain #ccc;
    background-size: 15px 15px;
}

#creative-canvas-loader {
    background: #fff;
}

/* ================= LAYERS ================== */

#creative-right-col {
    border-left: 1px solid #bcbcbc;
    background: #fff;
}

.creative-layers-title {
    background: #eee;
}

#creative-layers li {
    color: #494949;
    border-bottom: 1px solid #bcbcbc;
    background: #fff;
}

#creative-layers li:first-child {
    border-top: 1px solid #bcbcbc;
}

#creative-layers li:hover {
    color: #111;
}

#creative-layers li.active {
    color: #111;
    background: #eee;
}

#creative-layers li .layer-icons {
    background: #eee;
}

#creative-layers li .layer-name {
    color:#494949;
}

#creative-layers li .layer-name:focus {
    color:#111;
}

#creative-layers li .layer-icons .material-icons {
    color: #111;
}

#creative-layers>li>.material-icons {
    color: #6658ea;
}

#creative-layers>li>.material-icons.layer-settings {
    background: #eee;
    color: #494949;
}

#creative-layers>li>.material-icons.layer-settings:hover,
#creative-layers>li>.material-icons.layer-settings.active {
    color: #111;
}

#creative-layers li .layer-icons .layer-visible,
#creative-layers li .layer-icons .layer-unlocked {
    color: #009688;
}

#creative-layers li .layer-icons .layer-hidden,
#creative-layers li .layer-icons .layer-locked {
    color: #FFC107;
}

#creative-no-layer a {
    color: #6658ea;
}

#creative-layer-delete-wrap {
    border-top: 1px dashed #bcbcbc;
}

/* ================= GRID ================== */

.creative-frames-grid .grid-item,
.creative-grid .grid-item {
    background: #eee;
}

.creative-frame {
    border: 1px solid #eee;
    background: #eee;
}

.creative-element {
    border: 1px solid #eee;
    background: #eee;
}

.type-customSVG>a:before {
    color: #4CAF50;
}

.creative-element.light {
    background: #eee;
}

.creative-element.dark {
    background: #303030;
}

#creative-illustrations .creative-element.light {
    background: #F9FAFB;
}
.creative-frame:hover,
.creative-element:hover {
    border: 1px solid #6658ea;
}

.creative-element.dark:hover {
  border-color: #1B1642;
}

.template-favorite,
.creative-frame .frame-favorite,
.creative-element .element-favorite {
    background: #6658ea;
}

.creative-element.dark .element-favorite {
  background: #1B1642;
}


.creative-frames-grid .creative-frame {
    border: 3px solid #eee;
}

.creative-frames-grid .creative-frame:hover {
    border: 3px solid #111;
}

.grid-icon-item {
    color: #494949;
    border: 1px solid #bcbcbc;
}

.grid-icon-item:hover {
    border: 1px solid #6658ea;
    color: #fff;
}

.grid-icon-item .material-icons {
    color: #6658ea;
}

.grid-icon-label {
    border-top: 1px solid #bcbcbc;
}

/* ================= ELEMENTS ================== */

#creative-filters.creative-grid img:hover,
#creative-filter-library.creative-grid img:hover,
#creative-filter-library.creative-grid canvas:hover {
    border: 3px solid #6658ea;
}

#creative-filters.creative-grid div label span {
    background: #eee;
    color: #494949;
}

#creative-filters.creative-grid input[type=checkbox]:checked+label img,
#creative-filters.creative-grid input[type=radio]:checked+label img {
    border: 3px solid #6658ea
}

#creative-filters.creative-grid div:hover span,
#creative-filters.creative-grid input[type=checkbox]:checked+label>span,
#creative-filters.creative-grid input[type=radio]:checked+label>span {
    color: #fff;
    background: #6658ea
}

#creative-filter-library .grid-item.none .material-icons {
    color:#121212;
}

.creative-element>.material-icons {
    color: #494949;
}

#creative-shapes-grid .creative-shape {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23FFFFFF'/%3E%3C/svg%3E") left top/contain #ccc;
    background-size: 10px 10px;
}

#creative-shapes-grid .creative-shape:hover {
    background: #6658ea;
}

#creative-shapes-grid .creative-shape svg * {
    fill: #494949 !important;
}

#creative-shapes-grid .creative-shape:hover svg * {
    fill: #fff !important;
}

/* ================= APPS ================== */

.creative-apps-menu-item {
    background: #eee;
}

.creative-apps-menu-item:hover {
    background: #111;
}

.creative-apps-menu-item-desc {
    background: #eee;
    color: #111;
}

.creative-apps-menu-item:hover .creative-apps-menu-item-desc {
    background: #111;
    color: #fff;
}

.creative-app-peview {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23FFFFFF'/%3E%3C/svg%3E") left top/contain #ccc;
    background-size: 10px 10px;
}

.creative-colorbrewer-item {
    border: 1px solid #bcbcbc;
}

.creative-colorbrewer-item.active,
.creative-colorbrewer-item:hover {
    border: 1px solid #111;
}

/* ================= BUTTONS ================== */

.creative-btn-simple {
    color: #494949;
}

.creative-btn-simple:hover,
.creative-btn-simple.active {
    color: #111;
}

.creative-btn-simple:disabled {
    color: #494949;
}

.creative-btn-simple.star {
    color: #FF9800 !important;
}

.creative-btn {
    background: #eee;
    color: #111;
}

.creative-btn:hover,
.creative-btn.primary:hover {
    background: #1474ea;
    color:#fff;
}

.creative-btn.active,
.creative-btn.active:hover,
.creative-btn.primary {
    background: #1474ea;
    color: #fff;
}

.creative-btn.danger {
    background: #F44336;
    color:#fff;
}

.creative-btn.danger:hover {
    background: #D32F2F;
    color:#fff;
}

.creative-horizontal-center.active,
.creative-vertical-center.active {
    background: #eee !important;
}

/* ================= BLOCKS ================== */

.icon-group {
    border: 1px solid #bcbcbc;
    background: #bcbcbc
}

.icon-group .creative-btn {
    border-right: 1px solid #bcbcbc;
}

.icon-group .creative-btn:hover,
.icon-group .creative-btn.active {
    background: #fff;
  color:#111
}

/* ================= TOOLTIP ================== */

.tooltip:after {
    background-color: #111;
    color: #fff;
}

.tooltip:before {
    border-color: #111 transparent;
}

/* ================= PAGINATION ================== */

.creative-pagination ul li {
    border: 1px solid #bcbcbc;
    color: #494949;
}

.creative-pagination ul li.active,
.creative-pagination ul li.active:hover {
    background: #6658ea;
    border-color: #6658ea;
    color: #fff;
}

.creative-pagination ul li:hover {
    border-color: #6658ea;
}

.creative-pagination ul li a {
    color: #111;
}

.creative-accordion .creative-pagination ul li {
    color: #494949;
    background: #eee;
}

.creative-accordion .creative-pagination ul li.active,
.creative-accordion .creative-pagination ul li.active:hover {
    color: #fff;
    background: #6658ea;
}

.creative-accordion .creative-pagination ul li a,
.creative-accordion .creative-pagination ul li>span {
    color: #494949;
}

.creative-accordion .creative-pagination ul li a:hover {
    color: #111
}

.creative-accordion .creative-pagination ul li.active>span {
    color: #fff
}

/* ================= ACCORDION ================== */

ul.creative-accordion>li {
    border: 1px solid #bcbcbc;
}

ul.creative-accordion>li.opened {
    border-color: #6658ea;
}

ul.creative-accordion>li>a {
    color: #494949;
}

ul.creative-accordion>li>a:hover,
ul.creative-accordion>li.opened>a {
    color: #111;
}

ul.creative-accordion>li.opened>a {
    border-bottom: 1px solid #bcbcbc
}

ul.creative-accordion>li>a>.data-count {
    background: #6658ea;
    color: #fff;
}

.material-icons.my-favorites-star {
    color: #FFC107;
}

/* ================= RANGESLIDER ================== */

.creative-slider {
    background: #bcbcbc;
}

.creative-slider::-webkit-slider-thumb {
    background: #6658ea;
    border: 3px solid #fff;
}

.creative-slider::-moz-range-thumb {
    background: #6658ea;
    border: 3px solid #fff;
}

/* ================= COUNTER ================== */

.creative-counter .creative-btn,
.creative-counter .creative-btn:hover,
.creative-counter .creative-btn:focus {
    background: #bcbcbc;
}

.creative-counter .creative-btn:disabled {
    color: rgba(0, 0, 0, 0.3);
}

/* ================= CONTROLS ================== */

.creative-control-label span {
    background: #eee;
    color: #111;
}

.creative-form-field {
    background: #eee;
    border: 1px solid #bcbcbc;
    color: #494949;
}

.creative-form-field:focus {
    background: #fff;
    border: 1px solid #6658ea;
    color: #111;
}

.creative-search-wrap .material-icons {
    color: #494949;
}

#creative-element-search-icon.cancel,
#creative-iconfinder-search-icon.cancel,
#creative-illustration-search-icon.cancel,
#creative-icon-search-icon.cancel,
#creative-icon-search-icon.cancel {
    color: #F44336;
}

.creative-sub-settings {
    border-top: 1px dashed #bcbcbc;
}

#creative-barcode-wrap {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23FFFFFF'/%3E%3C/svg%3E") left top/contain #ccc;
    background-size: 10px 10px;
}

/* ================= COLORPICKER ================== */

.creative-colorpicker,
.creative-colorpicker:focus,
.creative-form-field {
    background: #eee;
    border: 1px solid #bcbcbc;
    color: #494949;
}

.creative-colorpicker:focus {
    color: #111;
}

.sp-container {
    background: #fff;
    border: 1px solid #bcbcbc;
}

.sp-palette-container {
    border-right: solid 1px #bcbcbc;
}

.sp-container button {
    color: #494949;
}

.sp-container button:hover {
    color: #111;
}

.sp-container button.sp-choose {
    background: #6658ea;
    color: #fff;
}

.sp-container button.sp-choose:hover,
.sp-container button.sp-choose:focus {
    background: #5546e8;
    color: #fff;
}

.sp-clear-display:before {
    color: #111;
}

.sp-colorize-container {
    border-color:#bcbcbc !important;
}

/* ================= SELECT ================== */

.creative-select {
    color: #494949;
    background: #eee url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23aaaaaa' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.1rem center;
    background-size: 20px 10px;
    border: 1px solid #bcbcbc;
}

.creative-select:focus {
    border: 1px solid #6658ea;
}

.creative-select:focus::-ms-value {
    color: #465362;
    background-color: #fff;
}

.select2-container--dark .select2-selection--single {
    background: #eee;
    border: 1px solid #bcbcbc;
}

.select2-container--dark .select2-selection--single .select2-selection__rendered {
    color: #494949;
}

.select2-container--dark .select2-selection--single .select2-selection__arrow b {
    border-color: #bcbcbc transparent transparent transparent;
}

.select2-container--dark .select2-selection--single .select2-selection__placeholder {
    color: #fff;
}

.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
    background: #fff;
    border-color: #bcbcbc;
}

.select2-container--dark .select2-results__option--highlighted[aria-selected] {
    background: #6658ea !important;
    color: #ffffff;
}

.select2-container--dark .select2-results__option[aria-selected=true] {
    background: #6658ea;
    color: #fff;
}

.select2-drop {
    border: 2px solid #bcbcbc;
}

.select2-drop.select2-drop-above {
    border-top: 2px solid #bcbcbc;
}

.select2-container--dark .select2-search input {
    border: 1px solid #bcbcbc;
    background: #eee;
    color: #111
}

.select2-container--dark .select2-search input:focus {
    border: 1px solid #6658ea;
}

.select2-container--dark .select2-results__group {
    border-top: 1px solid #bcbcbc;
}

/* ================= TABS ================== */

.creative-tabs-menu li:hover {
    color: #111;
}

.creative-tabs-menu li.active {
    background: #6658ea;
    color: #fff;
}

/* ================= TOGGLE ================== */

.creative-toggle-switch {
    background: #bcbcbc;
}

.creative-toggle-switch:before {
    background: #fff;
}

.creative-toggle-checkbox:checked+.creative-toggle-switch {
    background: #6658ea;
}

/* ================= CHECKBOX ================== */

.creative-checkmark {
    background-color: #eee;
    border: 1px solid #bcbcbc;
}

.creative-checkbox input:checked~.creative-checkmark {
    background-color: #6658ea;
    border-color: #6658ea;
}

.creative-checkbox .creative-checkmark:after {
    border: solid #111;
    border-width: 0 3px 3px 0;
}

/* ================= CUSTOM CURSOR ================== */

.tm-pointer-simple.tm-cursor {
    background-color: #fff;
}

/* ================= MODAL ================== */

.creative-modal {
    background: rgba(224, 224, 224, 0.9);
}

.creative-modal-inner>.creative-tabs>.creative-tabs-menu>li {
    background: transparent;
  color:#494949;
}

.creative-modal-inner>.creative-tabs>.creative-tabs-menu>li:hover, 
.creative-modal-inner>.creative-tabs>.creative-tabs-menu>li.active {
    background: #fff;
  color:#111;
}

.creative-modal-inner>.creative-tabs>.creative-tab,
.creative-modal-bg {
    background: #fff;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.20), 0 15px 12px rgba(0, 0, 0, 0.12);
}

.creative-modal-close {
    color: #fff;
    background: #F44336;
}

.creative-modal-close:hover {
    color: #fff;
    background: #D32F2F;
}

#creative-modal-onstart {
    color: #fff;
    background: #6658ea;
}

#creative-modal-onstart:hover {
    color: #fff;
    background: #5546e8;
}

#creative-download-as-json,
#creative-save-as-json {
    border-top: 1px dashed #bcbcbc;
}

.creative-select-btn-block>div:first-child {
    border-right: 1px dashed #bcbcbc
}

/* ================= TEMPLATE LIBRARY ================== */

.creative-template-list {
    border: 1px solid #bcbcbc;
}

.creative-template-list li {
    border-bottom: 1px solid #bcbcbc;
}

.creative-template-list li.active {
    background:#eee
}

#creative-history-list li .info .material-icons {
    color: #6658ea;
}

#creative-history-list li .info span.time {
    background: #fff;
    color:#111;
}

/* ================= MASONRY ================== */

.creative-masonry-item .favorite {
    background: #fff;
}

.creative-masonry-item-inner {
    border: 4px solid #eee;
}

.grid-item:hover .creative-masonry-item-inner,
.creative-masonry-item-inner:hover {
    border-color: #6658ea;
}

.creative-masonry-item-desc {
    background: #6658ea;
    color: #fff
}

.creative-svg-library-delete,
.creative-library-delete {
    color: #fff;
    background: #F44336;
}

.creative-svg-library-delete:hover,
.creative-library-delete:hover {
    background: #D32F2F;
}

.creative-grid.svg-library-grid .creative-masonry-item-inner {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23FFFFFF'/%3E%3C/svg%3E") left top/contain #ccc;
    background-size: 15px 15px;
}

a.iconfinder-url,
a.pixabay-url,
a.pexels-url {
    color: #6658ea;
    background: #fff;
}

a.iconfinder-url:hover,
a.pixabay-url:hover,
a.pexels-url:hover {
    color: #544abf;
}

#iconfinder-credit,
#pexels-credit,
#pixabay-credit {
    color: #494949;
}

#creative-iconfinder-grid .creative-element {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='%23FFFFFF'/%3E%3C/svg%3E") left top/contain #ccc;
    background-size: 10px 10px;
}

/* ================= RULER ================== */

.guide.v {
    border-right: 1px solid #6658ea;
}

.guide.h {
    border-bottom: 1px solid #6658ea;
}

.guide .info {
    background-color: #111;
    border: 1px solid #111;
    color: #fff;
}

.ruler {
    background-color:#fff;
}

.ruler .label {
    color: #494949;
}

.ruler.h {
    border-bottom: 1px solid #bcbcbc;
}

.ruler.h span.major {
    border-left: 1px solid #bcbcbc
}

.ruler.h span.milestone {
    border-left: 1px solid #bcbcbc
}

.ruler.v {
    border-right: 1px solid #bcbcbc
}

.ruler.v span.major {
    border-top: 1px solid #bcbcbc;
}

.ruler.v span.milestone {
    border-top: 1px solid #bcbcbc;
}

#creative-ruler-icon {
  background: #fff;
    border-right:1px solid #bcbcbc;
    border-bottom:1px solid #bcbcbc;
}

#creative-ruler-icon.closed {
    background: transparent;
}

.menu-btn {
    background-color: #6658ea;
    color: #fff;
}

.rg-menu {
  border-right: 1px solid #bcbcbc;
}

.rg-menu li {
    border-bottom: 1px solid #bcbcbc;
}

.rg-menu a {
    background-color: #eee;
  color: #494949;
}

.rg-menu a:hover,
.rg-menu a.selected {
    color: #000;
}
/* ---------- Add New Modal - Cleaner Start Layout ---------- */

#modal-add-new .creative-modal-inner.large {
    max-width: 900px;
    border-radius: 16px;
}

/* Tab menu styling: clearer, more button-like tabs */
#modal-add-new .creative-tabs-menu {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: none;
}

#modal-add-new .creative-tabs-menu li {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #f3f4f6;
    color: #374151;
}

#modal-add-new .creative-tabs-menu li span.material-icons {
    font-size: 18px;
}

#modal-add-new .creative-tabs-menu li.active {
    background: #2563eb;
    color: #ffffff;
}

/* Grid of "start" cards */
.creative-start-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 960px) {
    .creative-start-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    .creative-start-grid {
        grid-template-columns: 1fr;
    }
}

.creative-start-card {
    background: #f9fafb;
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}

.creative-start-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5f0ff;
}

.creative-start-icon .material-icons {
    font-size: 22px;
    color: #2563eb;
}

.creative-start-card h3 {
    margin: 0;
    font-size: 16px;
    color: #111827;
}

.creative-start-card p {
    margin: 0;
    font-size: 13px;
    color: #4b5563;
}

/* Drag & Drop area */
#modal-add-new .creative-start-dropzone {
    margin-top: 8px;
    padding: 18px 12px;
    border-radius: 14px;
    border: 2px dashed #d1d5db;
    background: #f9fafb;
    text-align: center;
    color: #4b5563;
}

#modal-add-new .creative-start-dropzone .material-icons {
    font-size: 32px;
    display: block;
    margin-bottom: 4px;
    color: #9ca3af;
}

#modal-add-new .creative-start-dropzone h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

#modal-add-new .creative-start-dropzone p {
    margin: 0;
    font-size: 12px;
}
/* ===== New Image / Drag-drop Layout ===== */

#modal-select-img .creative-newimage-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
}

/* Two-column layout on desktop */
#modal-select-img .creative-newimage-main {
    flex: 2 1 0;
    min-width: 260px;
}

#modal-select-img .creative-newimage-side {
    flex: 1 1 0;
    min-width: 220px;
}

/* Titles and text */
.creative-newimage-title {
    margin-bottom: 16px;
}

.creative-newimage-subtitle {
    margin-bottom: 8px;
}

.creative-newimage-text {
    margin-bottom: 16px;
    font-size: 0.95rem;
}

/* Drag & drop zone */
.creative-dropzone {
    border: 2px dashed #bcbcbc;
    border-radius: 12px;
    padding: 28px 20px;
    background: #fafafa;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out,
        background-color 0.15s ease-in-out;
}

.creative-dropzone:hover {
    border-color: #6658ea;
    background-color: #f5f3ff;
    box-shadow: 0 0 0 2px rgba(102, 88, 234, 0.08);
}

.creative-dropzone-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.creative-dropzone-heading {
    font-weight: 600;
    margin-bottom: 4px;
}

.creative-dropzone-sub {
    font-size: 0.9rem;
    color: #666;
}

/* OR divider */
.creative-or-divider {
    position: relative;
    text-align: center;
    margin: 18px 0 16px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #777;
}

.creative-or-divider::before,
.creative-or-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: #ddd;
}

.creative-or-divider::before {
    left: 0;
}

.creative-or-divider::after {
    right: 0;
}

.creative-or-divider > span {
    background: #fff;
    padding: 0 8px;
}

/* Media library button full width */
.creative-media-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
}

/* JSON upload card */
.creative-json-field {
    margin-top: 8px;
}

.creative-fullwidth-btn {
    width: 100%;
    justify-content: center;
}

.creative-json-help {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #777;
}
/* ===== Classroom-friendly New Image layout ===== */

#modal-select-img .creative-newimage-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-top: 10px;
}

/* Cards */
.creative-newimage-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 16px 16px 18px;
    border: 1px solid #e3e3e3;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.creative-newimage-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

/* Soft classroom colors per card */
.card-upload .creative-newimage-card-icon {
    background: #e3f2fd;   /* light blue */
}

.card-library .creative-newimage-card-icon {
    background: #e8f5e9;   /* light green */
}

.card-template .creative-newimage-card-icon {
    background: #fff8e1;   /* light yellow */
}

.creative-newimage-card-icon .material-icons {
    font-size: 22px;
}

.creative-newimage-card-title {
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.creative-newimage-card-text {
    font-size: 0.9rem;
    margin-bottom: 12px;
}

/* Buttons */
.creative-fullwidth-btn {
    width: 100%;
    justify-content: center;
}

/* Keep current objects – nudge down & soften */
.creative-keep-bottom {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    opacity: 0.9;
}
/* Classroom-style global dropzone under the cards */
#modal-add-new #creative-drag-drop-upload {
    margin-top: 18px;
    border: 2px dashed #d1d5db;
    border-radius: 14px;
    background: #f9fafb;
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    color: #4b5563;
    text-align: center;
}

#modal-add-new #creative-drag-drop-upload .material-icons {
    font-size: 36px;
    margin-bottom: 4px;
    color: #9ca3af;
}

#modal-add-new #creative-drag-drop-upload .creative-drop-hint {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Highlight when dragging over (JS adds .hovered) */
#modal-add-new #creative-drag-drop-upload.hovered {
    border-color: #2563eb;
    background: #eff6ff;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    #modal-select-img .creative-newimage-options {
        grid-template-columns: 1fr;
    }
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 900px) {
    #modal-select-img .creative-newimage-grid {
        flex-direction: column;
    }

    #modal-select-img .creative-newimage-side {
        order: -1; /* JSON section can appear above or below; adjust if desired */
    }
}

/* ================= MEDIA QUERIES ================== */

@media only screen and (max-width: 800px) {
    .creative-modal-inner>.creative-tabs>.creative-tabs-menu>li {
        background: #fff;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
}