.mtvision-container {
    /* Glassmorphism gradient overlay on top of the admin-set background colour.
       Light-from-above-left feel (135°): brighter top-left, neutral middle, slightly darker bottom-right. */
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.01) 35%,
            rgba(0, 0, 0, 0) 60%,
            rgba(0, 0, 0, 0.08) 100%
        ),
        var(--mtvision-bg);
    color: var(--mtvision-text);
    font-family: var(--mtvision-font, 'Roboto Mono', monospace);
    height: var(--mtvision-height, 700px) !important;
    max-height: 90vh;
    padding: 0;
    /* Remove padding to let children control alignment */
    position: relative;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box !important;
    overflow: hidden !important;
    /* Contain everything */
}

.mtvision-gallery-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    margin-bottom: 0;
    width: 100% !important;
    /* Force full width alignment */
    box-sizing: border-box !important;
}

/* Gallery Grid */
.mtvision-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: min-content;
    gap: 15px;
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 20px 100px 20px;
    /* Internal padding for alignment */
    /* Add 100px bottom padding to match the load-more gradient height */
    transition: grid-template-columns 0.3s ease;
    /* Only transition columns, not all */

    /* Dark Mode Scrollbar for Firefox */
    scrollbar-width: thin;
    scrollbar-color: #333 #0F0F0F;
}

/* Dark Mode Scrollbar for Webkit (Chrome, Safari, Edge) */
.mtvision-gallery::-webkit-scrollbar {
    width: 10px;
}

.mtvision-gallery::-webkit-scrollbar-track {
    background: #0F0F0F;
}

.mtvision-gallery::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 5px !important;
    border: 2px solid #0F0F0F;
}

.mtvision-gallery::-webkit-scrollbar-thumb:hover {
    background: var(--mtvision-accent);
}

.mtvision-gallery.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.mtvision-gallery.cols-8 {
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}

.mtvision-gallery.cols-12 {
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
}

.mtvision-item {
    position: relative;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    background: #1a1a1a;
    border-radius: 5px !important;
    overflow: hidden;
    cursor: zoom-in;
    transition: transform 0.2s;
    /* Always 2px (transparent on hover) so layout doesn't shift when the rim engages */
    border: 2px solid var(--mtvision-border, rgba(255, 255, 255, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Shiny-CTA rim on hover — bright span = 4 × 22% = 88% of the perimeter.
   The image fills the content-box; the conic is only visible through the 2px transparent border. */
.mtvision-item:hover {
    --mtv-photo-rim-percent: 22%;
    background:
        linear-gradient(#1a1a1a, #1a1a1a) padding-box,
        conic-gradient(
            from calc(var(--mtv-rim-angle) - 158deg),
            transparent 0%,
            var(--mtvision-gallery-hover, #50FA7B) var(--mtv-photo-rim-percent),
            #ffffff calc(var(--mtv-photo-rim-percent) * 2),
            var(--mtvision-gallery-hover, #50FA7B) calc(var(--mtv-photo-rim-percent) * 3),
            transparent calc(var(--mtv-photo-rim-percent) * 4)
        ) border-box !important;
    border-color: transparent !important;
    outline: none !important;
    animation: mtv-rim-rotate 3s linear infinite;
}

/* Suppress theme-injected hover icons/magnifiers */
.mtvision-item::before,
.mtvision-item::after,
.mtvision-item *:before,
.mtvision-item *:after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

/* Hide theme-injected links/icons */
.mtvision-item a,
.mtvision-item i,
.mtvision-item .zoom,
.mtvision-item .lightbox,
.mtvision-item .prettyPhoto {
    display: none !important;
}

.mtvision-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mtv-controls-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 55%) !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease-in-out !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 8px !important;
    gap: 5px !important;
    pointer-events: none !important;
    z-index: 10 !important;
    /* Absolute top */
    visibility: visible !important;
}

.mtvision-item:hover .mtv-controls-layer {
    opacity: 1 !important;
}

.mtv-action-btn svg {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    stroke: #FFFFFF !important;
    fill: none !important;
    stroke-width: 1.9 !important;
    position: relative !important;
    z-index: 100000 !important;
}

/* Scaling down for 12 columns */
.mtvision-gallery.cols-12 .mtv-action-btn svg {
    width: 11px !important;
    height: 11px !important;
    stroke-width: 1.7 !important;
}

.mtv-action-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50% !important;
    background: rgba(20, 20, 20, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.18s !important;
    backdrop-filter: blur(4px) !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
}

/* Scaling down for 12 columns */
.mtvision-gallery.cols-12 .mtv-action-btn {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

.mtvision-gallery.cols-12 .mtv-controls-layer {
    padding: 4px !important;
    gap: 2px !important;
}

.mtv-action-btn:hover {
    background: var(--mtvision-accent) !important;
    color: black !important;
    /* No transform — keeps the icon in place on hover (no scale-up shift) */
}

.mtv-action-btn:hover svg {
    stroke: #000000 !important;
}

.mtv-action-btn.delete:hover {
    background: #FF5555 !important;
    color: #000000 !important;
}

.mtv-action-btn.delete:hover svg {
    stroke: #000000 !important;
}


/* Modal Styling */
.mtvision-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    /* 50% Transparent background */
    z-index: 2000000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.mtvision-modal.active {
    display: flex;
}

.mtvision-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: inline-block;
    background: transparent;
    padding: 0;
    line-height: 0;
    /* Ensure content shrinks to fit image */
    width: auto;
}

.mtvision-modal-img-wrap {
    position: relative;
    display: block;
    line-height: 0;
}

.mtvision-modal-img {
    max-width: 100%;
    max-height: 70vh;
    height: auto;
    object-fit: contain;
    border: 1px solid var(--mtvision-border);
    border-radius: 0 !important;
    background: #000;
    display: block;
}

.mtvision-modal-close {
    position: absolute !important;
    top: 12px;
    right: 12px;
    left: auto !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    /* Lit-edge glassmorphism (subtler 2-layer for small surface) */
    background:
        linear-gradient(rgba(20, 20, 20, 0.7), rgba(20, 20, 20, 0.7)) padding-box,
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.06) 100%
        ) border-box !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid transparent !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    z-index: 2000010;
    transition: all 0.18s;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.mtvision-modal-close svg {
    width: 15px !important;
    height: 15px !important;
    stroke-width: 1.9 !important;
}

@media (min-width: 481px) and (max-width: 1024px) {
    .mtvision-modal-close {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
    }
    .mtvision-modal-close svg {
        width: 14px !important;
        height: 14px !important;
        stroke-width: 1.8 !important;
    }
}

@media (max-width: 480px) {
    .mtvision-modal-close {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }
    .mtvision-modal-close svg {
        width: 12px !important;
        height: 12px !important;
        stroke-width: 1.7 !important;
    }
}

.mtvision-modal-close:hover {
    background:
        linear-gradient(var(--mtvision-accent), var(--mtvision-accent)) padding-box,
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.18) 50%,
            rgba(255, 255, 255, 0.08) 100%
        ) border-box !important;
    color: black !important;
    transform: scale(1.1);
}

.mtvision-modal-close:hover svg {
    stroke: black !important;
}

@media (max-width: 768px) {
    .mtvision-modal-close {
        top: 10px;
        right: 10px;
        left: auto !important;
    }

    .mtvision-modal-content {
        max-width: 95vw;
    }
}

.mtvision-modal-actions {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    z-index: 2000010;
    line-height: normal;
    /* Lit-edge glassmorphism (subtler 2-layer pill) */
    background:
        linear-gradient(rgba(20, 20, 20, 0.55), rgba(20, 20, 20, 0.55)) padding-box,
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.18) 50%,
            rgba(255, 255, 255, 0.08) 100%
        ) border-box;
    padding: 10px 18px;
    border-radius: 40px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid transparent;
}

/* Old text buttons styles removed or kept if needed else where? */
/* .mtvision-modal-btn { ... } */

/* === Lightbox prompt block === */
.mtvision-modal-prompt {
    position: static;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 0;
    min-width: 100%;
    box-sizing: border-box;
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid var(--mtvision-border);
    border-top: none;
    color: #fff;
    padding: 12px 16px;
    border-radius: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    line-height: normal;
}

.mtvision-modal-prompt[hidden] {
    display: none;
}

.mtvision-modal-prompt-text {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-height: 4.2em;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    flex: 1;
    min-width: 0;
    font-family: inherit;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mtvision-modal-prompt-text::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.mtvision-copy-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px !important;
    color: #fff;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.mtvision-copy-btn:hover {
    background: var(--mtvision-accent);
    color: #000;
}

.mtvision-copy-btn svg {
    display: block;
}

.mtvision-copy-btn .mtvision-check-icon svg {
    stroke: var(--mtvision-accent);
}

.mtvision-copy-btn:hover .mtvision-check-icon svg {
    stroke: #000;
}

/* === Inline prompt caption on gallery thumbs (4-col only) === */
.mtvision-inline-prompt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 60%);
    color: #fff;
    z-index: 11;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.mtvision-gallery.cols-4 .mtvision-item:hover .mtvision-inline-prompt {
    display: flex;
    opacity: 1;
}

.mtvision-inline-prompt-text {
    flex: 1;
    font-size: 8px;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    font-family: inherit;
    pointer-events: none;
}

.mtvision-inline-copy-btn {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 4px !important;
    padding: 0;
    pointer-events: auto;
}

.mtvision-inline-copy-btn svg {
    width: 12px;
    height: 12px;
}

.mtvision-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: var(--mtvision-text-dim, #888);
    font-size: 14px;
    line-height: 1.7;
}

.mtvision-empty-state strong {
    color: var(--mtvision-accent, #50FA7B);
    font-weight: 700;
}

/* Generic styled dialog (replaces native alert/confirm) — lit-edge glassmorphism.
   Colors mirror the prompt-glass box: --mtvision-panel for the body, --mtvision-accent
   for highlights, --mtvision-prompt-color for text. This keeps the dialog readable on
   both dark and light sites (set per-site via admin Color settings). */
.mtvision-dialog-content {
    font-family: var(--mtvision-font, 'Roboto Mono', monospace) !important;
    /* 3-layer stack: depth overlay + admin panel color + lit rim */
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0.05) 35%,
            rgba(0, 0, 0, 0)          60%,
            rgba(0, 0, 0, 0.22)       100%
        ) padding-box,
        linear-gradient(var(--mtvision-panel, rgba(20, 20, 20, 0.78)), var(--mtvision-panel, rgba(20, 20, 20, 0.78))) padding-box,
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.22) 35%,
            rgba(255, 255, 255, 0.06) 70%,
            rgba(255, 255, 255, 0.12) 100%
        ) border-box !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 2px solid transparent !important;
    border-radius: 14px !important;
    padding: 26px 28px !important;
    max-width: 420px !important;
    width: 90% !important;
    text-align: center !important;
    color: var(--mtvision-prompt-color, #fff) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    line-height: 1.4 !important;
}

.mtvision-dialog-title {
    color: var(--mtvision-accent, #50FA7B) !important;
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
}

.mtvision-dialog-message {
    color: var(--mtvision-prompt-color, #fff) !important;
    margin: 0 0 6px 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.mtvision-dialog-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    flex-wrap: wrap;
    margin: 0 !important;
}

.mtvision-dialog-actions button {
    min-width: 110px !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em;
}

.mtvision-dialog-ok {
    background: var(--mtvision-accent, #50FA7B) !important;
    color: var(--mtvision-panel, #000) !important;
    border: none !important;
}

.mtvision-dialog-ok:hover {
    filter: brightness(1.1);
}

.mtvision-dialog-cancel {
    background: transparent !important;
    color: var(--mtvision-prompt-color, #fff) !important;
    border: 1px solid currentColor !important;
    opacity: 0.85;
}

.mtvision-dialog-cancel:hover {
    opacity: 1;
    background: rgba(127, 127, 127, 0.08) !important;
}

.mtvision-btn-secondary {
    background: transparent !important;
    color: var(--mtvision-accent) !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.23s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: auto;
    text-decoration: none;
}

.mtvision-btn-secondary:hover {
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.mtvision-btn-secondary:active {
    transform: none !important;
    box-shadow: none !important;
    filter: brightness(0.8) !important;
}

.mtvision-btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

    .mtvision-load-more-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        z-index: 100;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        padding-bottom: 25px;
        padding-right: 25px;
        margin: 0;
        background: linear-gradient(to top, var(--mtvision-load-more-fade) 0%, transparent 100%) !important;
        pointer-events: none;
        /* Let clicks pass through except for the button */
    }

    .mtvision-load-more-container .mtvision-load-more-btn {
        pointer-events: auto;
        /* Ensure button is clickable */
        background: transparent !important;
        color: var(--mtvision-load-more-text) !important;
        border: none !important;
        padding: 8px 20px 2px 20px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        height: auto !important;
        min-height: 0 !important;
        cursor: pointer !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }

    .mtvision-load-more-container .mtvision-load-more-btn:hover {
        filter: brightness(0.8);
    }

/* Prompt Box */
.mtvision-prompt-container {
    flex-shrink: 0;
    z-index: 1000000;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 20px 20px 20px;
    /* Padding to match gallery */
}

.mtvision-prompt-glass {
    background: var(--mtvision-panel);
    border: 1px solid var(--mtvision-border);
    border-top: 2px solid var(--mtvision-accent);
    /* 2px thick green accent line */
    border-radius: 5px !important;
    /* 5px rounded corners as requested */
    padding: 12px 20px;
    box-shadow: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

.mtvision-controls-top {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    /* Reduced gap */
}

.mtvision-controls-left {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.mtvision-options-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mtvision-option-label {
    font-size: 11px;
    color: var(--mtvision-label-color, var(--mtvision-text-dim));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mtvision-id-style .mtvision-option-label,
.mtvision-options-group:first-child .mtvision-option-label {
    margin-top: 3px;
    /* Align "Style" better with dropdown */
}

.mtvision-aspect-options,
.mtvision-width-options,
.mtvision-qty-options,
.mtvision-grid-options {
    display: flex;
    /* Gradient border (glass border) — same technique as the prompt panel,
       slightly subtler stops because the elements are smaller. */
    background:
        linear-gradient(var(--mtvision-tools-slider-bg, rgba(40, 40, 40, 0.6)), var(--mtvision-tools-slider-bg, rgba(40, 40, 40, 0.6))) padding-box,
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0.15) 35%,
            rgba(255, 255, 255, 0.04) 70%,
            rgba(255, 255, 255, 0.10) 100%
        ) border-box;
    border: 1.5px solid transparent;
    padding: 3px;
    border-radius: 5px !important;
    gap: 2px;
    height: 32px !important;
    box-sizing: border-box !important;
    align-items: center;
}

.mtvision-ratio-btn,
.mtvision-width-btn,
.mtvision-qty-btn,
.mtvision-grid-btn {
    background: transparent;
    border: none;
    color: var(--mtvision-unselected-btn, var(--mtvision-text-dim)) !important;
    padding: 0 14px;
    border-radius: 5px !important;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
    font-weight: 600;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mtvision-ratio-btn.active,
.mtvision-width-btn.active,
.mtvision-qty-btn.active,
.mtvision-grid-btn.active {
    background: var(--mtvision-selected-btn, var(--mtvision-accent)) !important;
    color: black !important;
}

.mtvision-number-input {
    /* Gradient border (glass border) */
    background:
        linear-gradient(var(--mtvision-tools-slider-bg, rgba(40, 40, 40, 0.6)), var(--mtvision-tools-slider-bg, rgba(40, 40, 40, 0.6))) padding-box,
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0.15) 35%,
            rgba(255, 255, 255, 0.04) 70%,
            rgba(255, 255, 255, 0.10) 100%
        ) border-box;
    border: 1.5px solid transparent;
    color: white;
    padding: 0 10px;
    width: 60px;
    border-radius: 5px !important;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
    height: 32px !important;
    box-sizing: border-box !important;
}

.mtvision-unlimited {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tighter font + truncation on tablet/phone so "Unlimited" doesn't push the box wider than its grid cell */
@media (max-width: 1024px) {
    .mtvision-unlimited {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .mtvision-unlimited {
        font-size: 9px;
    }
}

.mtvision-number-input:focus {
    /* On focus, replace the white gradient border with solid accent (preserves original cue) */
    background:
        linear-gradient(var(--mtvision-input-focus-bg, rgba(60, 60, 60, 0.8)), var(--mtvision-input-focus-bg, rgba(60, 60, 60, 0.8))) padding-box,
        linear-gradient(var(--mtvision-accent), var(--mtvision-accent)) border-box;
}

.mtvision-number-input::-webkit-inner-spin-button,
.mtvision-number-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mtvision-number-input {
    -moz-appearance: textfield;
    appearance: none;
}

/* Custom Select Styles */
.mtvision-custom-select-wrapper {
    position: relative;
    min-width: 200px;
    height: 32px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex;
    align-items: center;
}

.mtvision-select-trigger {
    /* Gradient border (glass border) */
    background:
        linear-gradient(var(--mtvision-slot-bg, rgba(40, 40, 40, 0.6)), var(--mtvision-slot-bg, rgba(40, 40, 40, 0.6))) padding-box,
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0.15) 35%,
            rgba(255, 255, 255, 0.04) 70%,
            rgba(255, 255, 255, 0.10) 100%
        ) border-box;
    border: 1.5px solid transparent;
    border-radius: 5px !important;
    color: white;
    padding: 0 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
    outline: none !important;
    user-select: none;
    overflow: hidden;
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.mtvision-trigger-content {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 10px;
}

.mtvision-selected-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtvision-select-trigger:hover {
    /* On hover, swap the inner colour to the focus-bg AND replace the gradient border with solid accent */
    background:
        linear-gradient(var(--mtvision-input-focus-bg, rgba(60, 60, 60, 0.8)), var(--mtvision-input-focus-bg, rgba(60, 60, 60, 0.8))) padding-box,
        linear-gradient(var(--mtvision-accent), var(--mtvision-accent)) border-box;
}

.mtvision-trigger-arrow {
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--mtvision-accent);
    border-bottom: 2px solid var(--mtvision-accent);
    transform: rotate(-135deg);
    /* Point UP by default */
    margin-top: 4px;
    margin-left: 10px;
    transition: transform 0.2s;
}

.mtvision-custom-select-wrapper.is-open .mtvision-trigger-arrow {
    transform: rotate(45deg);
    /* Point DOWN when open */
    margin-top: -2px;
}

.mtvision-select-options {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    width: 320px;
    max-width: calc(100vw - 60px);
    background: var(--mtvision-dropdown-bg, #121212) !important;
    border: 1px solid var(--mtvision-border);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.8) !important;
    display: none;
    z-index: 10000000 !important;
    max-height: calc(50vh - 100px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #333 var(--mtvision-dropdown-bg, #121212);
    box-sizing: border-box;
    border-radius: 8px;
}

@media (max-width: 1024px) {
    .mtvision-select-options {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 120px !important;
        width: auto !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        /* Center by margin */
        max-height: calc(45vh - 50px) !important;
        z-index: 10000000 !important;
        border-radius: 12px !important;
        background: var(--mtvision-dropdown-bg, #121212) !important;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.9) !important;
    }

    .mtvision-custom-select-wrapper {
        min-width: 100px;
        /* Allow more shrinking */
        flex: 1;
        /* Take remaining space */
        max-width: calc(100% - 60px);
        /* Leave room for label */
        height: 38px !important;
    }

    .mtvision-select-trigger {
        padding: 8px 10px;
        font-size: 11px;
        /* Smaller font on mobile */
        border-radius: 5px !important;
        height: 38px !important;
    }

    .mtvision-trigger-content {
        margin-right: 5px;
    }
}

@media (min-width: 1025px) {
    .mtvision-select-options {
        max-height: 600px;
    }
}

.mtvision-select-options::-webkit-scrollbar {
    width: 6px;
}

.mtvision-select-options::-webkit-scrollbar-track {
    background: var(--mtvision-dropdown-bg, #121212) !important;
}

.mtvision-select-options::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px !important;
}

.mtvision-select-options::-webkit-scrollbar-thumb:hover {
    background: var(--mtvision-accent);
}

.mtvision-custom-select-wrapper.is-open .mtvision-select-options {
    display: block;
    animation: mtv-fade-up 0.18s ease-out;
}

@keyframes mtv-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mtvision-options-header {
    padding: 15px 20px;
    font-size: 11px;
    /* Slightly smaller for cleaner uppercase look */
    color: var(--mtvision-text-dim);
    border-bottom: 1px solid var(--mtvision-border);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.mtvision-select-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    gap: 15px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}

.mtvision-select-item:hover {
    background: var(--mtvision-dropdown-hover-bg, rgba(255, 255, 255, 0.05));
}

.mtvision-select-item.active {
    background: var(--mtvision-dropdown-hover-bg, rgba(80, 250, 123, 0.05));
}

.mtvision-item-icon {
    width: 44px;
    height: 44px;
    background: #1E1E1E;
    border: 1px solid var(--mtvision-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--mtvision-accent);
}

.mtvision-item-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.mtvision-item-info {
    flex-grow: 1;
}

.mtvision-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mtvision-dropdown-text-color, white);
    margin-bottom: 2px;
}

.mtvision-item-desc {
    font-size: 11px;
    color: var(--mtvision-slot-desc, #666666) !important;
    line-height: 1.2;
}

.mtvision-floating-instruction {
    position: absolute;
    left: 320px;
    width: 260px;
    background: var(--mtvision-hover-tip-bg, #1a1a1a);
    border: 1px solid var(--mtvision-accent);
    padding: 10px;
    font-size: 11px;
    color: var(--mtvision-hover-tip-text, #FFFFFF);
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    cursor: copy;
    transform: translateY(6px);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0.18s;
    z-index: 10001;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-radius: 0 8px 8px 0;
}

.mtvision-floating-instruction.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.mtvision-item-instruction {
    display: none;
    /* Hide the old ones inside the list */
}

.mtvision-item-check {
    width: 18px;
    height: 18px;
    display: none;
    position: relative;
}

.mtvision-select-item.active .mtvision-item-check {
    display: block;
}

.mtvision-select-item.active .mtvision-item-check::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0px;
    width: 6px;
    height: 12px;
    border-right: 2.5px solid var(--mtvision-accent);
    border-bottom: 2.5px solid var(--mtvision-accent);
    transform: rotate(45deg);
}

.mtvision-select-item.active .mtvision-item-title {
    color: var(--mtvision-accent);
}

/* Reduced padding for prompt container glass */
/* Prompt Box */
.mtvision-prompt-container {
    flex-shrink: 0;
    z-index: 1000000;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 20px 20px 20px;
}

.mtvision-prompt-glass {
    /* Layered glass effect (more visible — bumped opacities):
       1. TOP padding-box   — white→transparent→black glassmorphism overlay (depth)
       2. MID padding-box   — solid admin-set panel colour underneath
       3. BOT border-box    — bright white→subtle white gradient (the lit edge).
          Bottom-right keeps a 12% white trace so all 4 sides catch light. */
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0.05) 35%,
            rgba(0, 0, 0, 0) 60%,
            rgba(0, 0, 0, 0.22) 100%
        ) padding-box,
        linear-gradient(var(--mtvision-panel), var(--mtvision-panel)) padding-box,
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.22) 35%,
            rgba(255, 255, 255, 0.06) 70%,
            rgba(255, 255, 255, 0.12) 100%
        ) border-box;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* 2px transparent on left/right/bottom so the gradient shows through on those sides;
       2px solid accent on TOP to restore the original green accent line. */
    border: 2px solid transparent;
    border-top: 2px solid var(--mtvision-accent);
    border-radius: 5px !important;
    padding: 15px 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

.mtvision-prompt-wrapper {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    width: 100% !important;
    gap: 15px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

/* Use ID for maximum priority to override theme constraints */
#mtvision-prompt-input {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    color: var(--mtvision-prompt-color, white) !important;
    font-size: 14px !important;
    resize: none !important;
    padding: 8px 20px !important;
    margin: 0 !important;
    outline: none !important;
    font-family: inherit !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    overflow-y: auto !important;
    line-height: 1.4 !important;
    text-align: left !important;
    box-sizing: border-box !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
    display: block !important;
    box-shadow: none !important;
}

#mtvision-prompt-input::-webkit-scrollbar {
    display: none !important;
}

.mtvision-prompt-actions {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-right: 0 !important;
}

/* Image input styles */
.mtvision-image-input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 !important;
    background: var(--mtvision-ref-box-color, rgba(40, 40, 40, 0.3)) !important;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 5px !important;
    height: 42px;
    box-sizing: border-box !important;
    min-height: 42px;
}

/* Override the inline margin-right: 8px that PHP renders on the label.
   With gap: 8px on the parent flex AND margin-right: 8px on the label, the
   spacing on the right of the label is doubled (16px), pushing the whole
   group visually left of true center. Remove the margin so gap handles it. */
.mtvision-image-input-group .mtvision-option-label {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.mtvision-icon-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 5px !important;
    color: var(--mtvision-ref-icon-color, var(--mtvision-accent)) !important;
    padding: 0 !important; /* Force no padding */
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex !important; /* Match the JS forced state */
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    margin-top: 3px !important; /* Consistently pushed down */
    align-self: center;
}

.mtvision-icon-btn:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: scale(1.1) !important;
}

.mtvision-image-preview {
    position: relative;
    width: 32px;
    height: 32px;
    border: 1px solid var(--mtvision-accent);
    background: #1a1a1a;
    border-radius: 3px;
    overflow: visible !important;
    display: none; /* Default to hidden, JS will show/hide */
}

.mtvision-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 3px;
}

.mtvision-prompt-wrapper .mtvision-option-label {
    margin-top: 1px !important;
    color: var(--mtvision-ref-color, #FFFFFF) !important;
}

.mtvision-remove-image {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    bottom: auto !important;
    left: auto !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    background: #ff0000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
    text-indent: 0 !important;
}

/* Animatable angle for the conic-gradient rim. Without @property the browser
   can't interpolate between values and the gradient would jump 0→360, not rotate. */
@property --mtv-rim-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.mtvision-btn-primary {
    --mtv-rim-angle: 0deg;
    --mtv-rim-percent: 12%;
    --mtv-rim-offset: 60deg;
    --mtv-rim-bg: var(--mtvision-gen-btn-bg, var(--mtvision-accent));
    --mtv-rim-highlight: var(--mtvision-accent, #50FA7B);
    --mtv-rim-shine: #ffffff;

    /* Three-layer background:
       1. Top: transparent→black overlay (left clear, right dimmed) — creates the visible gradient
       2. Middle: solid accent (your admin Generate-button color)
       3. Bottom: conic-gradient on border-box = the rim light
       Layered overlay (instead of color-mix) ensures the gradient is visible in every browser
       and against any base color, not just opaque hex values. */
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 100%) padding-box,
        linear-gradient(var(--mtv-rim-bg), var(--mtv-rim-bg)) padding-box,
        conic-gradient(
            from calc(var(--mtv-rim-angle) - var(--mtv-rim-offset)),
            transparent 0%,
            var(--mtv-rim-highlight) var(--mtv-rim-percent),
            var(--mtv-rim-shine) calc(var(--mtv-rim-percent) * 2),
            var(--mtv-rim-highlight) calc(var(--mtv-rim-percent) * 3),
            transparent calc(var(--mtv-rim-percent) * 4)
        ) border-box !important;

    color: var(--mtvision-gen-btn-text, #000000) !important;
    border: 2px solid transparent !important;
    padding: 0 25px !important;
    border-radius: 5px !important;
    font-family: inherit !important;
    font-weight: 700;
    cursor: pointer;
    transition: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    text-transform: uppercase !important;
    min-width: 120px;
    flex-shrink: 0;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    flex-wrap: nowrap;
    font-size: 14px !important;
    line-height: 1 !important;
    position: relative !important;
    animation: mtv-rim-rotate 3s linear infinite;
}

@keyframes mtv-rim-rotate {
    to { --mtv-rim-angle: 360deg; }
}

.mtvision-btn-primary .mtvision-spinner {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%); /* Removed !important to allow animation to work */
    margin: 0 !important;
}


/* Primary Button Hover — only swap the inner bg + glow; rim keeps cycling */
.mtvision-btn-primary:hover {
    --mtv-rim-bg: var(--mtvision-gen-btn-hover-bg, var(--mtvision-accent));
    box-shadow: 0 0 15px 2px var(--mtvision-btn-glow, rgba(68, 214, 44, 0.8)) !important;
    color: var(--mtvision-gen-btn-hover-text, #ffffff) !important;
    transform: scale(1.05);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    filter: none !important;
    text-shadow: none !important;
}

/* Primary Button Active/Generating — admin-configurable flat fill (no darkening overlay), rim still cycling */
.mtvision-btn-primary:active,
.mtvision-btn-primary.is-generating {
    --mtv-rim-bg: var(--mtvision-gen-btn-generating-bg, #000000);
    background:
        linear-gradient(var(--mtv-rim-bg), var(--mtv-rim-bg)) padding-box,
        conic-gradient(
            from calc(var(--mtv-rim-angle) - var(--mtv-rim-offset)),
            transparent 0%,
            var(--mtv-rim-highlight) var(--mtv-rim-percent),
            var(--mtv-rim-shine) calc(var(--mtv-rim-percent) * 2),
            var(--mtv-rim-highlight) calc(var(--mtv-rim-percent) * 3),
            transparent calc(var(--mtv-rim-percent) * 4)
        ) border-box !important;
    color: var(--mtvision-gen-btn-bg, var(--mtvision-accent)) !important;
    transform: scale(0.95);
    box-shadow: 0 0 5px 1px var(--mtvision-btn-glow, rgba(68, 214, 44, 0.4)) !important;
    transition: transform 0.05s ease-in-out;
}

/* Disabled State (but not while generating — .is-generating handles that) */
.mtvision-btn-primary:disabled:not(.is-generating) {
    opacity: 0.6;
    cursor: not-allowed;
    background: #444 !important;
    color: #888 !important;
}


/* Lightbox */
.mtvision-lightbox {
    position: fixed;
    z-index: 1000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}

.mtvision-lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh;
    border-radius: 0 !important;
}

.mtvision-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.mtvision-download-link {
    display: block;
    width: fit-content;
    margin: 20px auto;
    background: var(--mtvision-accent);
    color: black;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px !important;
    font-weight: 600;
}

.mtvision-btn-primary.is-generating .mtvision-spinner {
    border-color: rgba(255, 255, 255, 0.2) !important;
    border-top-color: var(--mtvision-spinner-color, var(--mtvision-gen-btn-bg, var(--mtvision-accent))) !important;
}

/* Spinner - Windows Style */
.mtvision-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top: 3px solid currentColor;
    border-radius: 50% !important;
    animation: spin 1s ease-in-out infinite;
    flex-shrink: 0;
    margin: 0;
    display: inline-block;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Generating-status text overlay (cycles while .is-generating) */
.mtvision-status-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.3px;
    color: var(--mtvision-status-text-color, #ffffff);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    transition: opacity 0.35s ease;
}

.mtvision-btn-primary.is-generating .mtvision-status-text {
    opacity: 0.55;
}

@media (max-width: 1024px) {
    .mtvision-floating-instruction,
    .mtvision-item-instruction {
        display: none !important;
    }

    .mtvision-container {
        padding: 0;
        /* Match desktop remove padding */
        height: var(--mtvision-height, 85vh) !important;
        max-height: 900px;
        min-height: 600px;
        border-radius: 0 !important;
    }

    .mtvision-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .mtvision-gallery.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .mtvision-gallery.cols-8 {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .mtvision-gallery.cols-12 {
        grid-template-columns: repeat(6, 1fr);
        gap: 5px;
    }

    .mtvision-prompt-container {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        transform: none;
        margin-top: auto;
    }

    .mtvision-prompt-glass {
        padding: 15px 20px !important;
        border-radius: 0 !important;
        border-bottom: none;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .mtvision-controls-left {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 4px 0 !important;
    }

    /* 4-row phone layout — roomier cells so values never clip:
       Row 1: Style (full width)
       Row 2: QTY (6) | Grid (6)        — button groups need width for 3 buttons
       Row 3: Width (4) | Height (4) | Quality (4)
       Row 4: Credits (6) | Total (6)   — room for "Unlimited" without truncation */
    .mtvision-controls-left .mtvision-options-group:nth-child(1) {
        grid-column: span 12 !important;
    }

    .mtvision-controls-left .mtvision-options-group:nth-child(2),
    .mtvision-controls-left .mtvision-options-group:nth-child(3) {
        grid-column: span 6 !important;
    }

    .mtvision-controls-left .mtvision-options-group:nth-child(4),
    .mtvision-controls-left .mtvision-options-group:nth-child(5),
    .mtvision-controls-left .mtvision-options-group:nth-child(6) {
        grid-column: span 4 !important;
    }

    .mtvision-controls-left .mtvision-options-group:nth-child(7),
    .mtvision-controls-left .mtvision-options-group:nth-child(8) {
        grid-column: span 6 !important;
    }

    .mtvision-options-group {
        width: 100% !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .mtvision-options-group .mtvision-option-label {
        margin-bottom: 0 !important;
        font-size: 10px !important;
        text-align: left !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .mtvision-number-input {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 !important;
        padding: 0 8px !important;
        font-size: 12px !important;
        height: 32px !important;
        border-radius: 5px !important;
    }

    .mtvision-prompt-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .mtvision-prompt-wrapper textarea,
    #mtvision-prompt-input {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-left: 0 !important;
        padding: 6px 12px !important;
        order: 1 !important; /* Move text prompt to the top */
        background: rgba(0, 0, 0, 0.03) !important;
        border-radius: 8px !important;
    }

    .mtvision-prompt-actions {
        order: 2 !important; /* Move buttons below the prompt */
        width: 100% !important;
        padding: 0 !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    #mtvision-generate-btn {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .mtvision-image-input-group {
        flex: 1 !important;
    }

    .mtvision-custom-select-wrapper {
        min-width: 0;
        flex: 1;
        max-width: none;
        height: 32px !important;
    }

    .mtvision-select-trigger {
        padding: 0 10px;
        font-size: 11px;
        border-radius: 5px !important;
        height: 32px !important;
    }

    .mtvision-trigger-content {
        margin-right: 5px;
    }
}

@media (max-width: 480px) {
    .mtv-controls-layer {
        gap: 4px !important;
        padding: 5px !important;
    }

    .mtvision-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .mtvision-gallery.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .mtvision-gallery.cols-8 {
        grid-template-columns: repeat(3, 1fr);
    }

    .mtvision-gallery.cols-12 {
        grid-template-columns: repeat(4, 1fr);
    }

    .mtvision-modal-btn {
        flex: 1 1 100%;
    }

    .mtvision-suggestion-chip {
        width: 100% !important;
    }
}

/* Compact Prompt for Tablet/Mobile to prevent covering gallery */
@media (max-width: 1024px) {
    .mtvision-prompt-glass {
        padding: 10px !important;
    }

    .mtvision-prompt-wrapper {
        gap: 6px !important;
    }

    .mtvision-prompt-wrapper textarea,
    #mtvision-prompt-input {
        min-height: 52px !important;
        height: 52px !important;
        max-height: 52px !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        /* Zero horizontal padding so the prompt text's left edge aligns with the
           leftmost label (Width/QTY/Quality) in the controls grid directly above. */
        padding: 0 !important;
        overflow-y: auto !important;
    }

    .mtvision-image-input-group,
    #mtvision-generate-btn {
        height: 38px !important;
        min-height: 38px !important;
    }

    .mtvision-options-group {
        gap: 6px !important;
    }

    .mtvision-option-label {
        font-size: 10px !important;
        color: var(--mtvision-label-color, var(--mtvision-text-dim)) !important;
    }

    .mtvision-controls-left {
        gap: 8px !important;
    }
}

/* Tablet (769-1399px): 2-row 12-col grid, horizontal label-input pairs */
@media (min-width: 769px) and (max-width: 1399px) {
    .mtvision-controls-left {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr) !important;
        gap: 10px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 4px 0 !important;
        flex-wrap: nowrap !important;
        justify-content: stretch !important;
    }

    .mtvision-controls-left .mtvision-options-group {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .mtvision-controls-left .mtvision-options-group .mtvision-option-label {
        margin-bottom: 0 !important;
        font-size: 11px !important;
        text-align: left !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Row 1: Style (6) | QTY (3) | Grid (3) */
    .mtvision-controls-left .mtvision-options-group:nth-child(1) { grid-column: span 6 !important; }
    .mtvision-controls-left .mtvision-options-group:nth-child(2),
    .mtvision-controls-left .mtvision-options-group:nth-child(3) { grid-column: span 3 !important; }

    /* Row 2: Width (2) | Height (2) | Quality (2) | Credits (3) | Total (3) */
    .mtvision-controls-left .mtvision-options-group:nth-child(4),
    .mtvision-controls-left .mtvision-options-group:nth-child(5),
    .mtvision-controls-left .mtvision-options-group:nth-child(6) { grid-column: span 2 !important; }
    .mtvision-controls-left .mtvision-options-group:nth-child(7),
    .mtvision-controls-left .mtvision-options-group:nth-child(8) { grid-column: span 3 !important; }

    /* Make controls fill their grid cell */
    .mtvision-controls-left .mtvision-custom-select-wrapper {
        min-width: 0 !important;
        flex: 1 !important;
        max-width: none !important;
    }

    .mtvision-controls-left .mtvision-number-input {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .mtvision-controls-left .mtvision-qty-options,
    .mtvision-controls-left .mtvision-grid-options {
        flex: 1 !important;
    }
}

.mtvision-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0px;
    /* Pushes the input down */
    font-size: 13px;
    justify-content: flex-start;
    align-items: center;
    padding-left: 2px;
    width: 100%;
}

.mtvision-suggestion-label {
    color: var(--mt-sugg-color);
    font-size: 13px;
    font-family: inherit;
    opacity: 0.8;
    margin-right: 5px;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .mtvision-suggestions {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 5px 0 15px 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 12px;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mtvision-suggestions::-webkit-scrollbar {
        display: none !important;
    }

    .mtvision-suggestion-label {
        white-space: nowrap;
        font-size: 11px;
    }

    .mtvision-suggestion-chip {
        flex-shrink: 0;
        width: auto !important;
        background: rgba(255, 255, 255, 0.05);
        padding: 8px 14px;
        border-radius: 5px !important;
        /* Updated to 5px */
        border: 1px solid var(--mtvision-border);
        font-size: 12px;
        max-width: 250px;
        color: var(--mt-sugg-color, var(--mtvision-text-dim));
    }
}

.mtvision-suggestion-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--mt-sugg-hover, #ffffff);
    border: 1px solid var(--mtvision-accent);
    transform: translateY(-2px);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Responsive: When space is tight, stack label and make chips 2 columns */
@media (max-width: 1200px) and (min-width: 769px) {
    .mtvision-suggestion-label {
        width: 100%;
        margin-bottom: 5px;
        white-space: normal;
    }

    .mtvision-suggestion-chip {
        width: calc(50% - 6px);
        /* 2 columns accounting for gap */
        max-width: none;
    }
}

/* Restricted Access Styling - Consistent with MTAIChat */
.mtvision-container.mtvision-restricted {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 400px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 20px 0 !important;
}

.mtvision-restricted-overlay {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    padding: 40px !important;
    box-sizing: border-box !important;
}

.mtvision-restriction-message {
    max-width: 450px !important;
}

.mtvision-restriction-message h3 {
    font-size: 28px !important;
    margin-bottom: 20px !important;
    color: var(--mtvision-accent, #50FA7B) !important;
    font-weight: 700 !important;
    font-family: var(--mtvision-font, 'Roboto Mono', monospace) !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    background: transparent !important;
}

.mtvision-restriction-message p {
    font-size: 18px !important;
    color: #ffffff !important;
    margin-bottom: 25px !important;
    line-height: 1.6 !important;
    font-family: var(--mtvision-font, 'Roboto Mono', monospace) !important;
    background: transparent !important;
}

.mtvision-restriction-message p strong {
    color: var(--mtvision-accent, #50FA7B) !important;
}

.mtvision-restriction-login-btn {
    display: inline-block !important;
    color: var(--mtvision-accent, #50FA7B) !important;
    text-decoration: underline !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    font-family: var(--mtvision-font, 'Roboto Mono', monospace) !important;
}

.mtvision-restriction-login-btn:hover {
    color: #44d62c !important;
    transform: translateY(-1px) !important;
    background: transparent !important;
}

@media (max-width: 768px) {
    .mtvision-container.mtvision-restricted {
        height: auto !important;
        min-height: 60vh !important;
        margin: 10px 0 !important;
    }

    .mtvision-restriction-message h3 {
        font-size: 24px !important;
    }

    .mtvision-restriction-message p {
        font-size: 16px !important;
    }
}

/* Tablet action button sizes (481-1024) — slightly smaller than desktop */
@media (min-width: 481px) and (max-width: 1024px) {
    .mtv-action-btn {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        padding: 0 !important;
    }

    .mtv-action-btn svg {
        width: 14px !important;
        height: 14px !important;
        stroke-width: 1.8 !important;
    }

    .mtv-controls-layer {
        padding: 6px !important;
        gap: 4px !important;
    }
}

/* Phone action button sizes (≤480) — smallest */
@media (max-width: 480px) {
    .mtv-action-btn {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        padding: 0 !important;
    }

    .mtv-action-btn svg {
        width: 12px !important;
        height: 12px !important;
        stroke-width: 1.7 !important;
    }

    .mtv-controls-layer {
        padding: 5px !important;
        gap: 3px !important;
    }
}

/* Light Scrollbar Theme */
.mtvision-container.light-scrollbar .mtvision-gallery,
.mtvision-container.light-scrollbar .mtvision-select-options,
.mtvision-container.light-scrollbar .mtvision-suggestions {
    scrollbar-color: #ccc #f5f5f5;
}

.mtvision-container.light-scrollbar .mtvision-gallery::-webkit-scrollbar,
.mtvision-container.light-scrollbar .mtvision-select-options::-webkit-scrollbar,
.mtvision-container.light-scrollbar .mtvision-suggestions::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.mtvision-container.light-scrollbar .mtvision-gallery::-webkit-scrollbar-track,
.mtvision-container.light-scrollbar .mtvision-select-options::-webkit-scrollbar-track,
.mtvision-container.light-scrollbar .mtvision-suggestions::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
}

.mtvision-container.light-scrollbar .mtvision-gallery::-webkit-scrollbar-thumb,
.mtvision-container.light-scrollbar .mtvision-select-options::-webkit-scrollbar-thumb,
.mtvision-container.light-scrollbar .mtvision-suggestions::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
    border: 2px solid #f5f5f5;
}

.mtvision-container.light-scrollbar .mtvision-gallery::-webkit-scrollbar-thumb:hover,
.mtvision-container.light-scrollbar .mtvision-select-options::-webkit-scrollbar-thumb:hover,
.mtvision-container.light-scrollbar .mtvision-suggestions::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

/* Brief flash after tapping an inline instruction to paste */
.mtvision-item-instruction.mtvision-just-pasted {
    background: rgba(80, 250, 123, 0.28) !important;
}

/* Phone (<=768px): compact dropdown items + reveal instruction inline */
@media (max-width: 768px) {
    /* Compact controls for the 4-row phone layout (spans defined in the ≤1024 block) */
    .mtvision-controls-left {
        gap: 6px !important;
    }

    .mtvision-controls-left .mtvision-option-label {
        font-size: 10px !important;
    }

    .mtvision-controls-left .mtvision-options-group {
        gap: 5px !important;
    }

    .mtvision-controls-left .mtvision-qty-options,
    .mtvision-controls-left .mtvision-grid-options {
        padding: 2px !important;
        gap: 1px !important;
    }

    .mtvision-controls-left .mtvision-qty-btn,
    .mtvision-controls-left .mtvision-grid-btn {
        padding: 0 6px !important;
        font-size: 11px !important;
    }

    .mtvision-options-header {
        padding: 10px 14px !important;
        font-size: 10px !important;
    }

    .mtvision-select-item {
        padding: 8px 12px !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }

    .mtvision-item-icon {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0;
    }

    .mtvision-item-icon img {
        width: 36px !important;
        height: 36px !important;
    }

    .mtvision-item-title {
        font-size: 13px !important;
        margin-bottom: 1px !important;
    }

    .mtvision-item-desc {
        font-size: 10px !important;
        line-height: 1.25 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Show per-item instruction inline (desktop hides it; on phone hover doesn't exist) */
    .mtvision-select-item .mtvision-item-info .mtvision-item-instruction {
        display: block !important;
        position: static !important;
        background: none !important;
        border: none !important;
        padding: 4px 6px 5px 6px !important;
        margin: 4px -6px 0 -6px !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 10px !important;
        line-height: 1.45 !important;
        font-style: italic;
        color: var(--mtvision-accent, #50FA7B) !important;
        white-space: normal;
        overflow: visible !important;
        word-break: break-word;
        cursor: pointer;
        border-radius: 4px;
        transition: background 0.15s;
    }

    .mtvision-select-item .mtvision-item-info .mtvision-item-instruction:active {
        background: rgba(80, 250, 123, 0.18) !important;
    }

    .mtvision-item-check {
        width: 14px !important;
        height: 14px !important;
        margin-top: 4px !important;
        flex-shrink: 0;
    }
}