.crevixo-page-container {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: #f4f6f8;
    color: #333;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.crevixo-page-header-container {
    background: linear-gradient(90deg, #23272f 0%, #3b82f6 60%, #06b6d4 100%);
    padding: 0 15px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 18px 0 rgba(35, 40, 80, 0.10), 0 1.5px 0 #37e4d933;
    position: relative;
    z-index: 5;
    border-bottom: 1px solid #2d3442;
    user-select: none;
}

.crevixo-page-header-left-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.crevixo-page-logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
}

.crevixo-page-logo {
    height: 36px;
    max-height: 36px;
    max-width: 138px;
    object-fit: contain;
}

.crevixo-page-default-logo {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    padding: 0 12px;
}

.crevixo-header-left-menu-wrapper {
    color: #fff;
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid #9d9d9d;
}

.crevixo-header-left-menu {
    display: flex;
    gap: 25px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.crevixo-header-menu-item {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    position: relative;
    cursor: pointer;
}

.crevixo-file-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 8px 0;
    list-style: none;
    min-width: 200px;
    z-index: 10000;
    margin: 10px 0 0 0;
}

.crevixo-file-dropdown .crevixo-file-action {
    padding: 10px 20px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
    margin: 0;
}

.crevixo-file-dropdown .crevixo-file-action:hover {
    background: #f5f5f5;
}

.crevixo-file-dropdown .shortcut {
    color: #999;
    font-size: 12px;
    font-weight: 400;
}

.crevixo-page-header-right-container {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
}

.crevixo-page-product-price {
    font-size: 17px;
    font-weight: 600;
    background: linear-gradient(90deg, #38e7dc 35%, #2e97ff 90%);
    color: #fff;
    padding: 4px 20px;
    border-radius: 20px;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(56,231,220,0.11);
    margin-right: 18px;
    border: none;
}

.crevixo-page-header-right-container .button {
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    font-weight: 600;
    text-transform: capitalize;
    transition: background 0.23s, color 0.18s, box-shadow 0.18s;
    min-height: 38px;
    padding: 0 28px;
    box-shadow: 0 2px 7px rgba(0,0,0,0.07);
}

.crevixo-page-header-right-container .crevixo-page-add-to-cart-button {
    background: linear-gradient(90deg, #06b6d4 70%, #67e8f9 100%);
    color: #202c3a;
    font-weight: 700;
    margin-right: 7px;
}

.crevixo-page-header-right-container .crevixo-page-add-to-cart-button:hover {
    background: linear-gradient(90deg, #4f46e5 40%, #3b82f6 100%);
    color: #fff;
}

.crevixo-page-header-right-container .crevixo-page-back-to-shop-button {
    background: #22242a;
    color: #fff;
    font-weight: 500;
    border: 1.5px solid #32363f;
}

.crevixo-page-header-right-container .crevixo-page-back-to-shop-button:hover {
    background: #3b4252;
    color: #38e7dc;
    border-color: #38e7dc99;
}

.crevixo-page-main-container {
    display: flex;
    flex-grow: 1;
    min-height: 600px;
    background: #f0f1f5;
}

.crevixo-page-main-left-wrapper {
    width: 400px;
    min-width: 300px;
    max-width: 400px;
    background: #23272f;
    height: calc(100vh - 54px);
    box-shadow: 2px 0 10px 0 rgba(0,0,0,0.04);
    padding: 0;
    position: relative;
    display: block;
    overflow: hidden;
}

.crevixo-page-main-tabs-row {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
}

.crevixo-page-main-navigation-tabs-container {
    width: 78px;
    min-width: 78px;
    background: #1c2027;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    padding: 0;
}

.crevixo-page-main-navigation-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #23272f;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.crevixo-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 52px;
    min-height: 54px;
    cursor: pointer;
    background: #1c2027;
    border: none;
    outline: none;
    padding: 15px 0;
    margin: 0;
    transition: background 0.18s, color 0.15s;
    color: #b3b8c7;
    font-size: 14px;
    font-weight: 500;
    position: relative;
}

.crevixo-tab.active,
.crevixo-tab:hover {
    background: #23272f;
    color: #37e4d9;
}

.crevixo-tab i {
    font-size: 20px;
    margin-bottom: 4px;
    color: inherit;
    transition: color 0.18s;
}

.crevixo-tab-text {
    font-size: 12px;
    color: inherit;
    text-align: center;
}

.crevixo-tab.preactive {
    border-bottom-right-radius: 10px;
}

.crevixo-tab.nextactive {
    border-top-right-radius: 10px;
}

.crevixo-page-main-tabs-info-container {
    flex: 1 1 auto;
    padding: 18px;
    overflow-y: auto;
    box-sizing: border-box;
    border-top: none;
    min-height: 0;
    min-width: 0;
}

.crevixo-tab-content {
    display: none;
    animation: fadein 0.22s cubic-bezier(.4,0,.2,1);
}
.crevixo-tab-content.active {
    display: block;
}

@keyframes fadein {
    0% { opacity: 0; transform: translateY(8px);}
    100% { opacity: 1; transform: none;}
}

.crevixo-page-product-info {
    margin-bottom: 16px;
}

.crevixo-page-product-name-price-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.crevixo-page-product-name {
    font-size: 17px;
    font-weight: 600;
    color: #f9fafb;
    flex: 1;
    word-break: break-word;
}
.crevixo-page-product-price-container {
    background: linear-gradient(90deg, #38e7dc 35%, #2e97ff 90%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 2px 14px;
    border-radius: 6px;
    min-width: 75px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(99,102,241,0.12);
}

.crevixo-page-mockup-description-container {
    background: #202227;
    border-radius: 8px;
    padding: 14px 13px;
    margin-bottom: 12px;
}
.crevixo-page-mockup-description {
    color: #b4bad6;
    font-size: 14px;
    line-height: 1.6;
}

.crevixo-page-main-right-wrapper {
    flex: 1;
    position: relative;
}

.crevixo-mockup-navigation-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f4f6fa;
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
}

.crevixo-page-mockup-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.crevixo-page-mockup-zoom-canvas-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s cubic-bezier(.4,0,.2,1);
    width: 100%;
    height: 100%;
}

.crevixo-selection-overlay{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
}

.crevixo-selection-box{
  position: absolute;
  display: none;
  pointer-events: auto;
}

.crevixo-selection-dimensions {
    position: absolute;
    left: 0;
    top: -26px;
    font-size: 10px;
    font-weight: 600;
    color: #333;
    background: rgba(255,255,255,0.85);
    padding: 2px 5px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    white-space: nowrap;
}

.crevixo-selection-border {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 2px dashed rgba(40,40,40,0.55);
  box-sizing: border-box;
  cursor: move;
}

.crevixo-selection-box .crevixo-selection-remove,
.crevixo-selection-box .crevixo-selection-rotate,
.crevixo-selection-box .crevixo-selection-copy {
  position: absolute;
  width: 20px;
  height: 20px;
  min-height: fit-content;
  border: none;
  border-radius: 2px;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  pointer-events: auto;
  text-align: center;
  padding: 0;
  font-size: 11px;
}

.crevixo-selection-box .crevixo-selection-remove{
  left: -10px;
  top: -10px;
  background: #ef4444;
}

.crevixo-selection-box .crevixo-selection-rotate{
  right: -10px;
  top: -10px;
  background: #64748b;
  cursor: grab;
}

.crevixo-selection-box .crevixo-selection-copy{
  left: -10px;
  bottom: -10px;
  background: #334155;
}

.crevixo-selection-box .crevixo-selection-resize{
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 2px;
  background: #475569;
  color: #fff;
  font-weight: 800;
  cursor: nwse-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  font-size: 11px;
}

.crevixo-selection-handle{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(40,40,40,0.9);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  pointer-events: auto;
  z-index: 5;
}

.crevixo-selection-handle.is-top{
  left: 50%; top: 0;
  transform: translate(-50%, -50%);
  cursor: ns-resize;
}
.crevixo-selection-handle.is-bottom{
  left: 50%; bottom: 0;
  transform: translate(-50%, 50%);
  cursor: ns-resize;
}
.crevixo-selection-handle.is-left{
  left: 0; top: 50%;
  transform: translate(-50%, -50%);
  cursor: ew-resize;
}
.crevixo-selection-handle.is-right{
  right: 0; top: 50%;
  transform: translate(50%, -50%);
  cursor: ew-resize;
}

.crevixo-selection-handle.is-tl{
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  cursor: nwse-resize;
}
.crevixo-selection-handle.is-tr{
  right: 0; top: 0;
  transform: translate(50%, -50%);
  cursor: nesw-resize;
}
.crevixo-selection-handle.is-br{
  right: 0; bottom: 0;
  transform: translate(50%, 50%);
  cursor: nwse-resize;
}
.crevixo-selection-handle.is-bl{
  left: 0; bottom: 0;
  transform: translate(-50%, 50%);
  cursor: nesw-resize;
}

#crevixo-page-mockup-canvas {
    display: block;
    margin: 0 auto;
    max-width: 650px;
    max-height: 70vh;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 6px 1px rgba(72,89,130,0.07);
}

.crevixo-page-mockup-navigation-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    gap: 24px;
    height: 100%;
    padding-top: 22px;
    margin-left: 0;
    margin-right: 12px;
}

.crevixo-page-mockup-gallery-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: 10px;
}

.crevixo-page-mockup-gallery-rail button {
    background: transparent;
    border: none;
    font-size: 2rem;
    color: #b8bac4;
    cursor: pointer;
    margin: 0 0 8px 0;
    transition: color 0.2s;
}
.crevixo-page-mockup-gallery-rail button:last-child {
    margin: 8px 0 0 0;
}
.crevixo-page-mockup-gallery-rail button:hover {
    color: #3b82f6;
}

.crevixo-page-gallery-images {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.crevixo-page-mockup-gallery-image {
    max-width: 58px;
    max-height: 58px;
    border-radius: 7px;
    box-shadow: 0 1px 5px rgba(40,50,80,0.10);
    border: 2px solid transparent;
    cursor: pointer;
    background: #fff;
    transition: border 0.19s, box-shadow 0.19s;
}
.crevixo-page-mockup-gallery-image.active {
    border: 2px solid #38e7dc;
    box-shadow: 0 0 10px #38e7dc80;
}

.crevixo-page-zoom-bar {
    position: fixed;
    z-index: 99;
    right: 32px;
    bottom: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #23272f;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(30,40,60,0.13);
    min-width: 220px;
    min-height: fit-content;
    padding: 0 18px;
}

.crevixo-page-zoom-bar button {
    background: none;
    border: none;
    color: #fff;
    font-size: 23px;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crevixo-page-zoom-bar button:hover {
    background: #2a2e38;
    color: #37e4d9;
}

.crevixo-page-zoom-bar input[type="range"] {
    -webkit-appearance: none;
    width: 110px;
    height: 18px;
    background: transparent;
    outline: none;
    margin: 0 8px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
    padding: 0;
}
.crevixo-page-zoom-bar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #25cdc7;
    box-shadow: 0 0 0 3px rgba(37,205,199,0.15);
    cursor: pointer;
    border: 2px solid #fff;
    transition: background 0.3s;
    margin-top: -7px;
}
.crevixo-page-zoom-bar input[type="range"]:focus::-webkit-slider-thumb {
    background: #1baca9;
}
.crevixo-page-zoom-bar input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: #fff;
    border-radius: 2px;
}

.crevixo-page-zoom-bar #crevixo-page-zoom-label {
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    min-width: 48px;
    text-align: center;
    letter-spacing: 0.5px;
    font-family: inherit;
    padding-left: 6px;
    padding-right: 6px;
}

.mockup-customizer-variations-container {
    margin: 18px 0 22px 0;
}
.mockup-customizer-label {
    font-weight: 500;
    font-size: 1rem;
    color: #f3f6fa;
    margin-right: 13px;
    display: inline-block;
}
.mockup-customizer-required {
    color: #fb4257;
    margin-left: 2px;
}

.mockup-customizer-color-dot.clear-dot {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e55353;
}

.mockup-customizer-clear-swatch.selected .clear-dot {
    border-color: #e55353;
}

.mockup-customizer-field-row {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.mockup-customizer-color-swatches {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}
.mockup-customizer-color-swatches .mockup-customizer-color-swatch {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    transition: box-shadow 0.18s;
    outline: none;
}
.mockup-customizer-color-dot {
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(20,20,20,0.14);
    transition: border 0.18s;
    background: #fff;
    position: relative;
}
.mockup-customizer-color-swatch.selected .mockup-customizer-color-dot {
    border: 2px solid #41a742;
    box-shadow: 0 0 0 2px #41a742;
}
.mockup-customizer-color-swatch .mockup-customizer-color-checkmark {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: #1111118a;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    z-index: 2;
    justify-content: center; align-items: center;
    box-shadow: 0 2px 6px #0002;
    padding: 3px;
    pointer-events: none;
}
.mockup-customizer-color-swatch .mockup-customizer-color-checkmark {
    display: flex;
}
.mockup-customizer-color-swatch .mockup-customizer-color-checkmark::before {
    content: '';
    display: inline-block;
    width: 16px; height: 16px;
    background: url('data:image/svg+xml;utf8,<svg fill="none" stroke="white" stroke-width="3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 10.7l3.8 3.8 6-6"/></svg>') no-repeat center/contain;
}

.mockup-customizer-color-swatch:not(.selected) .mockup-customizer-color-dot {
    background: #fff;
}

.mockup-customizer-color-swatch:focus .mockup-customizer-color-dot,
.mockup-customizer-color-swatch:hover .mockup-customizer-color-dot {
    border: 2px solid #41a742;
    box-shadow: 0 0 0 1.5px #41a742;
}

.mockup-customizer-color-swatch:focus-visible {
    outline: 2px solid #41a742;
}

.mockup-customizer-dropdown-row .mockup-customizer-dropdown-select {
    min-width: 120px;
    min-height: 36px;
    padding: 5px 13px;
    border-radius: 7px;
    font-size: 1rem;
    background: #fff;
    border: 1.5px solid #5a5d6b;
    outline: none;
    margin-left: 2px;
    box-shadow: 0 2px 6px rgba(20,20,20,0.11);
    transition: border-color 0.15s, background 0.13s;
}
.mockup-customizer-dropdown-select:focus {
    border-color: #41a742;
    background: #fff;
}
.mockup-customizer-color-swatch:hover .mockup-customizer-color-dot,
.mockup-customizer-color-swatch:focus .mockup-customizer-color-dot {
    border: 2px solid #41a742;
}

@media (max-width: 1200px) {
    .crevixo-page-main-left-wrapper {
        width: 238px;
        min-width: 200px;
    }
    .crevixo-page-mockup-canva-container {
        min-width: 260px;
        padding: 14px;
    }
}
@media (max-width: 900px) {
    .crevixo-page-main-container {
        flex-direction: column;
    }
    .crevixo-page-main-right-wrapper {
        padding: 12px 0;
    }
    .crevixo-page-main-left-wrapper {
        width: 100vw;
        max-width: 100vw;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid #23252b;
        height: auto;
    }
    .crevixo-page-mockup-canva-container {
        margin: 24px auto;
        min-width: 0;
        max-width: 98vw;
    }
    
    .crevixo-page-header-container {
        padding: 0 10px;
        height: 50px;
    }
    .crevixo-page-logo {
        height: 27px;
        max-width: 100px;
        padding: 0 3px;
    }
    .crevixo-page-default-logo {
        font-size: 17px;
        padding: 0 5px;
    }
    .crevixo-page-header-right-container .button {
        font-size: 13px;
        min-height: 32px;
        padding: 0 15px;
    }
    .crevixo-page-product-price {
        font-size: 13px;
        padding: 2px 10px;
        margin-right: 7px;
    }
    .crevixo-page-header-right-container {
        gap: 10px;
    }
}

@media (max-width: 600px) {
    .crevixo-page-main-container {
        flex-direction: column;
    }
    .crevixo-page-main-left-wrapper {
        width: 100vw;
        max-width: 100vw;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid #23252b;
        height: auto;
        min-height: unset;
    }
    .crevixo-page-main-tabs-info-container {
        padding: 12px 6px 6px 6px;
    }
    .crevixo-page-mockup-canva-container {
        padding: 8px;
        min-width: 0;
        max-width: 99vw;
    }
}

.crevixo-page-main-tabs-info-container {
    scrollbar-width: thin;
    scrollbar-color: #2e3340 #23272f;
}
.crevixo-page-main-tabs-info-container::-webkit-scrollbar {
    width: 8px;
}
.crevixo-page-main-tabs-info-container::-webkit-scrollbar-thumb {
    background: #2e3340;
    border-radius: 4px;
}
.crevixo-page-main-tabs-info-container::-webkit-scrollbar-track {
    background: #23272f;
}


#tab-images .crevixo-images-subtabs{
    width: 100%;
}

#tab-images .crevixo-images-subtab-buttons{
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
}

#tab-images .crevixo-images-subtab-btn{
    appearance: none;
    border: 1px solid #2e3340;
    background: #1c2027;
    color: #b3b8c7;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}

#tab-images .crevixo-images-subtab-btn:hover{
    background: #23272f;
    border-color: #3b82f6;
    color: #e7f0ff;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

#tab-images .crevixo-images-subtab-btn.active{
    background: linear-gradient(90deg, #06b6d4 0%, #3b82f6 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(56,231,220,0.10);
}

#tab-images .crevixo-images-subtab-content{
    width: 100%;
}

#tab-images .crevixo-images-subtab-panel{
    display: none;
    animation: fadein 0.18s cubic-bezier(.4,0,.2,1);
}

#tab-images .crevixo-images-subtab-panel.active{
    display: block;
}

#tab-images .crevixo-images-upload-dropzone{
    border: 2px dashed #3a4152;
    background: #1c2027;
    border-radius: 14px;
    padding: 18px 14px;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    user-select: none;
}

#tab-images .crevixo-images-upload-dropzone:hover{
    border-color: #37e4d9;
    box-shadow: 0 0 0 3px rgba(55,228,217,0.10);
    background: #202631;
}

#tab-images .crevixo-images-upload-dropzone.dragover{
    border-color: #38e7dc;
    background: rgba(56,231,220,0.08);
    box-shadow: 0 0 0 4px rgba(56,231,220,0.12);
}

#tab-images .crevixo-images-upload-dropzone-inner{
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    text-align: center;
    min-height: 72px;
}

#tab-images .crevixo-images-upload-icon{
    font-size: 22px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

#tab-images .crevixo-images-upload-text{
    color: #c8cedd;
    font-size: 14px;
    font-weight: 600;
}

#tab-images .crevixo-images-upload-thumbs{
    margin-top: 14px;
}

#tab-images .crevixo-images-thumbs-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 420px){
    #tab-images .crevixo-images-thumbs-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#tab-images .crevixo-images-thumb{
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    background: #1c2027;
    box-shadow: 0 1px 6px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: transform 0.14s, border-color 0.14s, box-shadow 0.14s;
    position: relative;
}

#tab-images .crevixo-images-thumb:hover{
    transform: translateY(-2px);
    border-color: rgba(59,130,246,0.6);
    box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}

#tab-images .crevixo-images-thumb.active{
    border-color: #38e7dc;
    box-shadow: 0 0 0 3px rgba(56,231,220,0.18), 0 10px 22px rgba(0,0,0,0.22);
}

#tab-images .crevixo-images-thumb-img{
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.crevixo-images-free-search-select-option{
    display: flex;
}

#tab-images .crevixo-images-free-topbar {
    display: flex;
    gap: 10px;
    align-items: center;
}

#tab-images .crevixo-images-free-provider{
    min-height: 36px;
    padding: 5px 13px;
    border-radius: 7px;
    font-size: 1rem;
    background: #fff;
    border: 1.5px solid #5a5d6b;
    outline: none;
    box-shadow: 0 2px 6px rgba(20,20,20,0.11);
    transition: border-color 0.15s, background 0.13s;
}

#tab-images .crevixo-images-free-search {
    flex: 1;
    min-height: 38px;
    border-radius: 10px;
    border: 1px solid #3a4152;
    background: #1c2027;
    color: #e9ecf5;
    padding: 0 12px;
    outline: none;
    width: auto;
}

#tab-images .crevixo-images-free-search::placeholder{
    color: #8891a6;
}

#tab-images .crevixo-images-thumb-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  min-height: fit-content;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  padding: 0;
  background: rgba(0,0,0,0.65);
  color: #fff;
  z-index: 3;
}

#tab-images .crevixo-images-thumb-remove:hover {
  background: rgba(0,0,0,0.85);
}

.crevixo-top-tool-bar-left-right-section {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 14px;
  background:#fff;
  border-bottom:1px solid #e6e6e6;
  user-select:none;
}

.crevixo-top-tools-bar-left,
.crevixo-top-tools-bar-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.crevixo-main-top-tools-bar .woo-toptool-btn{
  appearance:none;
  border:1px solid #e5e7eb;
  background:#fff;
  height:38px;
  min-width:38px;
  min-height: fit-content;
  padding:0 8px;
  border-radius:10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform .12s, box-shadow .12s, border-color .12s, opacity .12s;
  color:#0f172a;
  font-weight:700;
}

.crevixo-main-top-tools-bar .woo-toptool-btn:hover{
  border-color:#38e7dc;
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}

.woo-toptool-btn:disabled,
.woo-toptool-btn.is-disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.woo-toptool-btn .woo-toptool-icon{
  width:18px;
  height:18px;
  display:inline-block;
}

.woo-toptool-popover{
  position:absolute;
  top: calc(100% + 10px);
  right:0;
  width: 260px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow: 0 16px 38px rgba(0,0,0,0.16);
  padding: 10px;
  z-index: 999;
  display:none;
}

.woo-toptool-popover.is-open{ display:block; }

.woo-toptool-popover-title{
  font-size:13px;
  font-weight:800;
  color:#0f172a;
  padding: 6px 6px 10px 6px;
}

.woo-layer-actions{
  display:flex;
  gap:10px;
}

.woo-layer-actions .woo-layer-action{
  flex:1;
  appearance:none;
  border:0;
  border-radius:10px;
  height:38px;
  cursor:pointer;
  font-weight:800;
  background:#06b6d4;
  color:#fff;
  box-shadow: 0 8px 18px rgba(6,182,212,0.18);
  transition: transform .12s, opacity .12s, box-shadow .12s;
}

.woo-layer-actions .woo-layer-action:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 26px rgba(6,182,212,0.24);
}

.woo-layer-action:disabled{
  opacity:.35;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
  color: #000;
  background: #ddd;
}

.woo-toptool-wrap{
  position:relative;
  display:flex;
  align-items:center;
}

.woo-fill-popover .woo-fill-picker-row{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 0 6px 10px 6px;
}

.woo-fill-popover .woo-fill-input,
.woo-fill-popover .woo-stroke-input{
  flex:1;
  height:38px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:0 12px;
  font-weight:700;
  outline:none;
  background:#fff;
  color:#0f172a;
}

.woo-fill-popover .woo-fill-add-btn{
  width:44px;
  height:38px;
  border-radius:10px;
  border:0;
  background:#06b6d4;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(6,182,212,0.18);
}

.woo-fill-popover .woo-fill-swatches{
  padding: 0 6px 10px 6px;
}

.woo-fill-popover .woo-fill-swatches-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:8px;
  max-height: 138px;
  overflow:auto;
  padding-right: 4px;
}

.woo-fill-popover .woo-fill-swatch {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 10px;
    height: 34px;
    width: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    min-height: fit-content;
    justify-content: center;
    padding: 0;
}

.woo-fill-popover .woo-fill-swatch span{
  width:100%;
  height:100%;
  border-radius:9px;
  display:block;
}

.woo-fill-popover .woo-fill-controls{
  padding: 0 6px 8px 6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.woo-fill-popover .woo-fill-control-label{
  font-size:12px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:6px;
}

.woo-fill-control input[type="range"]{
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 28px;
  background: transparent;
  outline: none;
  cursor: pointer;
}

.woo-fill-control input[type="range"]::-webkit-slider-runnable-track{
  height: 8px;
  background: #e7eef5;
  border-radius: 999px;
}
.woo-fill-control input[type="range"]::-moz-range-track{
  height: 8px;
  background: #e7eef5;
  border-radius: 999px;
}

.woo-fill-control input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #0b74d1;
  border: 3px solid #ffffff;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  margin-top: -5px; /* center thumb */
}
.woo-fill-control input[type="range"]::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #0b74d1;
  border: 3px solid #ffffff;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

.woo-fill-control input[type="range"]:focus::-webkit-slider-thumb{
  box-shadow: 0 0 0 6px rgba(11,116,209,.18), 0 6px 14px rgba(0,0,0,.18);
}
.woo-fill-control input[type="range"]:focus::-moz-range-thumb{
  box-shadow: 0 0 0 6px rgba(11,116,209,.18), 0 6px 14px rgba(0,0,0,.18);
}

.woo-color-panel{
  position: fixed;
  z-index: 999999;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: #23272f;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  color: #fff;
  display: none;
  user-select: none;
  left: 120px;
  top: 120px;
}
.woo-color-panel.is-open{ display:block; }

.woo-color-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  cursor:move;
  border-bottom:1px solid rgba(255,255,255,0.08);
  border-radius:12px 12px 0 0;
  background:#24262b;
}

.woo-color-panel-title{
  font-size:13px;
  font-weight:600;
  letter-spacing:0.2px;
  line-height:1;
}

.woo-color-panel .woo-color-panel-close{
  width:28px;
  height:28px;
  border:0;
  border-radius:8px;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:18px;
  line-height:28px;
  cursor:pointer;
}
.woo-color-panel .woo-color-panel-close:hover{
  background:rgba(255,255,255,0.14);
}

.woo-color-panel-body{
  padding:10px 12px 12px;
}

.woo-color-panel-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
}

.woo-color-panel-current{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.woo-color-panel-current-swatch {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.woo-color-panel-current-swatch i{
  display:block;
  width:100%;
  height:100%;
  background:transparent;
}

.woo-color-panel-current-hex{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.4px;
  opacity:0.95;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:110px;
}

.woo-color-panel-actions-right{
  display:flex;
  align-items:center;
  gap:8px;
}

.woo-color-panel .woo-color-panel-save, .woo-color-panel .woo-color-panel-clear {
    border: 0;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.10);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    height: 35px;
    white-space: nowrap;
    min-height: fit-content;
}
.woo-color-panel .woo-color-panel-save:hover,
.woo-color-panel .woo-color-panel-clear:hover{
  background:rgba(255,255,255,0.16);
}

#wooNativeColor{
  width:100%;
  height:38px;
  border:0;
  background:transparent;
  padding:0;
}

.woo-color-panel .woo-color-panel-swatches{
  display:grid;
  grid-template-columns:repeat(10, 1fr);
  gap:6px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.08);
}

.woo-color-panel .woo-color-panel-swatch {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 7px;
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    height: 20px;
    width: 20px;
    min-height: fit-content;
}
.woo-color-panel .woo-color-panel-swatch span{
  display:block;
  width:100%;
  height:100%;
  border-radius:7px;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25);
}
.woo-color-panel .woo-color-panel-swatch:hover span{
  border-color:rgba(255,255,255,0.28);
}
.woo-color-panel .woo-color-panel-swatch:focus{ outline:none; }
.woo-color-panel .woo-color-panel-swatch:focus span{
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.25),
    0 0 0 2px rgba(255,255,255,0.22);
}

.woo-color-panel .pcr-app{
  background:transparent;
  box-shadow:none;
  border:0;
  padding:0;
}

.woo-color-panel .pcr-interaction{
  display:none;
}

.woo-color-panel .pcr-color-palette{
  border-radius:10px;
  overflow:hidden;
}
.woo-color-panel .pcr-slider{
  border-radius:10px;
}

.woo-color-panel .pcr-picker{
  width:100%;
}

.woo-color-panel .pcr-app[data-theme="classic"]{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
}

.woo-color-panel .pcr-app,
.woo-color-panel .pcr-app *{
  box-sizing: border-box;
}

.woo-color-panel .pcr-selection{
  width: 100%;
  max-width: 100%;
}

.woo-color-panel .pcr-color-palette,
.woo-color-panel .pcr-slider{
  max-width: 100%;
}

.crevixo-qr-left-icon-text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crevixo-qr-icon-left {
    height: 32px;
    width: 32px;
}

.woo-qr-left-input {
  font-size: 14px;
}

.crevixo-text-fonts {
    color: #fff;
}

.crevixo-text-fonts-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 6px;
}
.crevixo-text-fonts-title{
  font-size:16px;
  font-weight:700;
}
.crevixo-text-fonts .crevixo-text-fonts-add-btn{
  border:none;
  background:linear-gradient(90deg, #06b6d4 0%, #3b82f6 100%);
  color:#fff;
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
}
.crevixo-text-fonts-section-title{
  font-size:13px;
  font-weight:700;
  padding:8px 6px;
  opacity:.9;
}
.crevixo-text-fonts-divider{
  border-bottom:1px solid #5b5b5b;
  margin:10px 0;
}
.crevixo-text-fonts-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  padding:0 6px 12px;
}

.crevixo-text-fonts .crevixo-text-font-card {
    color: #fff;
    cursor: pointer;
    background-color: transparent;
    min-height: fit-content;
}
.crevixo-text-fonts .crevixo-text-font-preview{
  font-size:23px;
  line-height:1.2;
}
.crevixo-text-fonts .crevixo-text-font-meta{
  margin-top:6px;
  font-size:12px;
  opacity:.7;
}

/* Modal (frontend) */
#tab-text .crevixo-fonts-modal{
  position:fixed;
  inset:0;
  z-index:999999;
}
#tab-text .crevixo-fonts-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
}
#tab-text .crevixo-fonts-modal-dialog{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(980px, calc(100vw - 24px));
  height:min(700px, calc(100vh - 24px));
  background:#fff;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  color: #111;
}
#tab-text .crevixo-fonts-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,0.08);
}
#tab-text .crevixo-fonts-modal-title{
  font-size:18px;
  font-weight:700;
}
#tab-text .crevixo-fonts-modal-close{
  border:0;
  background:transparent;
  font-size:22px;
  cursor:pointer;
}
#tab-text .crevixo-fonts-modal-toolbar{
  padding:12px 16px;
  border-bottom:1px solid rgba(0,0,0,0.08);
}
#tab-text .crevixo-fonts-modal-search{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,0.15);
  border-radius:10px;
  outline:none;
}
#tab-text .crevixo-fonts-modal-body,
#tab-text .crevixo-fonts-modal-dialog {
  overflow: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#tab-text .crevixo-fonts-modal-body::-webkit-scrollbar,
#tab-text .crevixo-fonts-modal-dialog::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.crevixo-fonts-modal .crevixo-font-add-btn {
    height: 28px;
    min-height: fit-content;
    border-radius: 8px;
    text-transform: capitalize;
    padding: 5px 15px;
}

#tab-text .crevixo-fonts-modal-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 900px){
  #tab-text .crevixo-fonts-modal-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
#tab-text .crevixo-font-card{
  border:1px solid rgba(0,0,0,0.08);
  border-radius:12px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#tab-text .crevixo-font-card-preview{
  font-size:18px;
}

.crevixo-text-left-wrap{
    position:relative;
}

.crevixo-text-left-group{
  display:flex;
  align-items:center;
  gap:8px;
}

.crevixo-text-font-btn{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  cursor:pointer;
}
.crevixo-text-caret{ opacity:.7; }

.crevixo-text-color-btn{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.crevixo-text-color-dot{
  width:16px;
  height:16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.18);
  background:#000;
  display:inline-block;
}

.crevixo-text-font-dropdown{
  position:absolute;
  margin-top:6px;
  width:260px;
  max-height:320px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,0.18);
  display:none;
  z-index:999999;
}
.crevixo-text-font-dropdown.is-open{ display:block; }

.crevixo-text-font-dropdown-head{
  padding:10px;
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.crevixo-text-font-search{
  width:100%;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.12);
  padding:0 10px;
  outline:none;
}

.crevixo-text-font-dropdown-list{
  max-height:260px;
  overflow:auto;
  padding:8px;
}
.crevixo-text-font-item{
  width:100%;
  text-align:left;
  padding:8px 10px;
  border-radius:10px;
  border:0;
  background:transparent;
  cursor:pointer;
}
.crevixo-text-font-item:hover{
  background:rgba(0,0,0,0.06);
}
.crevixo-text-font-empty{
  padding:14px;
  opacity:.7;
}

.crevixo-main-top-tools-bar .crevixo-text-font-chip{
  display:flex;
  align-items:center;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  max-width:200px;
  height:38px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.crevixo-text-font-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:180px;
}

.crevixo-main-top-tools-bar .crevixo-text-btn{
  appearance:none;
  border:1px solid #e5e7eb;
  background:#fff;
  height:38px;
  min-width:38px;
  min-height: fit-content;
  padding:0;
  border-radius:10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform .12s, box-shadow .12s, border-color .12s, opacity .12s;
  color:#0f172a;
  font-weight:700;
}

.crevixo-main-top-tools-bar .crevixo-text-btn:hover{
  border-color:#38e7dc;
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}

.crevixo-main-top-tools-bar .crevixo-text-btn.is-active{
  border:none;
  background: linear-gradient(90deg, #06b6d4 0%, #3b82f6 100%);
  color: #fff;
}

.crevixo-text-size-wrap{
  display:flex;
  align-items:center;
  border:1px solid rgba(0,0,0,0.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}

.crevixo-main-top-tools-bar .crevixo-text-size-minus,
.crevixo-main-top-tools-bar .crevixo-text-size-plus{
  width:32px;
  height:38px;
  min-height: fit-content;
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.crevixo-main-top-tools-bar .crevixo-text-size-input{
  width:56px;
  height:38px;
  border:0;
  text-align:center;
  outline:none;
}

.crevixo-inline-text-editor{
  position:absolute;
  display:none;
  background:transparent;
  border:none;
  outline:none;
  padding:0;
  margin:0;
  resize:none;
  overflow:hidden;
  white-space:pre-wrap;
  word-break:break-word;
  caret-color:#111;
  z-index:999999;
}

.crevixo-text-align-btn svg {
  fill: #222;
}

.crevixo-text-align-btn.is-active svg {
  fill: #111;
}

.crevixo-text-btn svg,
.crevixo-text-btn svg * {
  pointer-events: none;
}

.crevixo-text-spacing-panel{
  width: 280px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,.20);
  padding: 14px 14px 12px;
}

.crevixo-move-module {
    cursor: move;
}

.crevixo-text-spacing-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
}

.crevixo-text-spacing-row + .crevixo-text-spacing-row{
  border-top: 1px solid rgba(0,0,0,.06);
}

.crevixo-text-spacing-label{
  width: auto;
  color:#555;
  font-weight:600;
  font-size:13px;
  white-space:nowrap;
}

.crevixo-text-spacing-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.crevixo-text-spacing-controls input[type="range"]{
  width:100%;
  min-width:0;
  -webkit-appearance:none;
  appearance:none;
  height: 28px;
  background: transparent;
  outline: none;
  cursor: pointer;
}

.crevixo-text-spacing-controls input[type="range"]::-webkit-slider-runnable-track{
  height: 8px;
  background: #e7eef5;
  border-radius: 999px;
}
.crevixo-text-spacing-controls input[type="range"]::-moz-range-track{
  height: 8px;
  background: #e7eef5;
  border-radius: 999px;
}

.crevixo-text-spacing-controls input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #0b74d1;
  border: 3px solid #ffffff;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  margin-top: -5px;
}
.crevixo-text-spacing-controls input[type="range"]::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #0b74d1;
  border: 3px solid #ffffff;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

.crevixo-text-spacing-controls input[type="range"]:focus::-webkit-slider-thumb{
  box-shadow: 0 0 0 6px rgba(11,116,209,.18), 0 6px 14px rgba(0,0,0,.18);
}
.crevixo-text-spacing-controls input[type="range"]:focus::-moz-range-thumb{
  box-shadow: 0 0 0 6px rgba(11,116,209,.18), 0 6px 14px rgba(0,0,0,.18);
}

.crevixo-text-spacing-controls input[type="number"] {
    width: 45px;
    height: 34px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 0 10px;
    text-align: right;
    color: #333;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 13px;
    background: #fff;
    outline: none;
}
.crevixo-text-spacing-controls input[type="number"]:focus{
  border-color: rgba(11,116,209,.55);
  box-shadow: 0 0 0 4px rgba(11,116,209,.14);
}

.crevixo-text-spacing-controls input[type="number"]::-webkit-outer-spin-button,
.crevixo-text-spacing-controls input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.crevixo-text-spacing-controls input[type="number"]{
  -moz-appearance: textfield;
}

#tab-shapes .crevixo-shapes-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px;
}

#tab-shapes .crevixo-shape-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  padding: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}

#tab-shapes .crevixo-shape-card:hover{
  border-color:#37e4d9;
}

#tab-shapes .crevixo-shape-thumb{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

#tab-shapes .crevixo-shape-thumb svg{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
  fill:#fff;
}

#tab-shapes .crevixo-shape-card:hover .crevixo-shape-thumb svg{
  fill:#37e4d9;
}

#tab-shapes .crevixo-shape-thumb img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
}

#tab-cliparts .crevixo-cliparts-wrap{
  display:block;
}

#tab-cliparts .crevixo-cliparts-section{
  margin-bottom: 14px;
}

#tab-cliparts .crevixo-cliparts-title{
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

#tab-cliparts .crevixo-cliparts-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#tab-cliparts .crevixo-clipart-card {
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    background: #1c2027;
    box-shadow: 0 1px 6px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: transform 0.14s, border-color 0.14s, box-shadow 0.14s;
    position: relative;
}

#tab-cliparts .crevixo-clipart-card:hover{
    transform: translateY(-2px);
    border-color: rgba(59,130,246,0.6);
    box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}

#tab-cliparts .crevixo-clipart-card img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#tab-cliparts .crevixo-clipart-empty{
  grid-column: 1 / -1;
  opacity: 0.7;
  font-size: 13px;
  padding: 8px 0;
}

#tab-cliparts .crevixo-clipart-price-tag{
  position: absolute;
  right: 3px;
  bottom: 3px;
  font-size: 11px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 7px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-weight: 600;
  pointer-events: none;
  backdrop-filter: blur(2px);
}

#tab-cliparts .crevixo-clipart-price-tag.is-free{
  background: rgba(0,0,0,0.35);
  opacity: 0.9;
}

.crevixo-main-top-tools-bar .crevixo-svg-bubble {
    padding: 0;
    height: 34px;
    width: 34px;
    min-height: fit-content;
    border-radius: 50px;
    border: 2px solid rgba(221,221,221,0.5);
}

.crevixo-svg-color-updator {
    height: 100%;
    width: 100%;
    border-radius: 50px;
}

.crevixo-price-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
}

.crevixo-price-modal {
    background: #fff;
    width: 100%;
    max-width: 600px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    margin: 20px;
    animation: crevixoModalPop 0.2s ease-out;
}

@keyframes crevixoModalPop {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.crevixo-price-modal-header {
    background: #f5f5f5;
    padding: 7px 15px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px 4px 0 0;
}

.crevixo-price-modal-title {
    font-size: 16px;
    color: #333;
    margin: 0;
}

.crevixo-price-modal .crevixo-price-modal-close {
    border: none;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    height: 38px;
    width: 38px;
    min-height: fit-content;
    border-radius: 50%;
}

.crevixo-price-modal .crevixo-price-modal-close:hover {
    color: #555;
}

.crevixo-price-modal-body {
    padding: 5px 15px 5px 15px;
}

.crevixo-price-modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: #555;
    margin-bottom: 0;
}

.crevixo-price-modal-table td {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.crevixo-price-modal-table td:last-child {
    text-align: right;
}

.crevixo-price-modal-table tr.crevixo-total-row td {
    border-bottom: none;
    padding-top: 15px;
    font-size: 15px;
    color: #333;
}

.crevixo-price-calc-toggle {
    font-size: 14px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
    border-top: 1px solid #464646;
    padding: 10px 0;
    margin-top: 20px;
}

.crevixo-price-calc-toggle:hover {
    color: #666;
}