.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 */
    /* NOTE: full-bleed breakout is applied only on mobile (<=1024px), where the page
       uses overlay scrollbars so 100vw doesn't cause horizontal scroll. On desktop/iPad
       the page has a real vertical scrollbar, so 100vw would overflow and create a
       horizontal scrollbar — the container stays in normal flow here instead. */
}

.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: 10px;
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 10px 100px 10px;
    /* Internal padding for alignment (desktop/iPad — mobile uses 6px sides via media query) */
    /* 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: 10px;
}

.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: var(--mtvision-fs-meta, 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: var(--mtvision-fs-heading, 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: var(--mtvision-fs-label, 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: var(--mtvision-fs-button, 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;
}

/* Admin-locked QTY: the non-active buttons are dimmed and non-interactive,
   but still clickable so the lock tooltip can fire. */
.mtvision-qty-btn.mtvision-qty-locked {
    opacity: 0.35;
    cursor: not-allowed;
}

.mtvision-qty-lock-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: var(--mtvision-hover-tip-bg, #1a1a1a);
    color: var(--mtvision-hover-tip-text, #FFFFFF);
    border: 1px solid var(--mtvision-accent);
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0.18s;
    z-index: 10001;
}

.mtvision-qty-lock-tip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.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;
}

/* D / M / T credit read-outs. Sized to their maximum expected digit count so the
   three of them together take about the same room the old "Credits" + "Total"
   pair did. Unlimited is rendered as 99 so it always fits. */
.mtvision-credit-box {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 0 6px;
    flex: 0 0 auto;
}

.mtvision-credit-d {
    width: 38px;
    min-width: 38px;
}

.mtvision-credit-m {
    width: 48px;
    min-width: 48px;
}

.mtvision-credit-t {
    width: 58px;
    min-width: 58px;
}

/* The D/M/T label is a single character — tighten the gap so the pairs read as
   one unit instead of floating apart. */
.mtvision-options-group:has(> .mtvision-credit-box) {
    gap: 6px;
}

.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;
}

/* Aspect Ratio + Resolution mini-pickers (inherit style-slot dropdown colors) */
.mtvision-ar-select-wrapper {
    position: relative;
    min-width: 64px;
    width: 100%;
    height: 32px !important;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Narrower trigger since values are short (16:9 / HD) */
.mtvision-ar-select-wrapper .mtvision-select-trigger {
    padding: 0 10px;
}

.mtvision-ar-select-wrapper .mtvision-trigger-arrow {
    margin-left: 6px;
}

.mtvision-ar-select-wrapper .mtvision-trigger-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Aspect label is a rectangle icon (replaces the words "Aspect Ratio") */
.mtvision-aspect-label-wrap {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
}

.mtvision-aspect-label-wrap .mtvision-ar-rect {
    opacity: 0.75;
}

.mtvision-ar-select-wrapper .mtvision-select-options {
    display: none;
    width: max-content;
    min-width: 96px;
}

.mtvision-ar-select-wrapper.is-open .mtvision-select-options {
    display: block;
}

.mtvision-ar-select-wrapper.is-open .mtvision-trigger-arrow {
    transform: rotate(45deg);
    margin-top: -2px;
}

.mtvision-ar-options .mtvision-select-item {
    gap: 8px;
}

/* No tick in these dropdowns — the active choice is shown by its accent color */
.mtvision-ar-options .mtvision-item-check,
.mtvision-ar-options .mtvision-select-item.active .mtvision-item-check {
    display: none !important;
}

/* Fixed-width icon cell so every ratio label starts at the same x */
.mtvision-ar-rect-cell {
    flex: 0 0 22px;
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fixed-width title so the resolution subs (720p / 1080p / 2160p) line up */
.mtvision-res-item .mtvision-item-title {
    flex: 0 0 auto;
    min-width: 30px;
}

.mtvision-ar-options .mtvision-item-sub {
    font-size: 11px;
    opacity: 0.55;
}

/* Proportional rectangle icon shown per aspect ratio */
.mtvision-ar-rect {
    display: inline-block;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    opacity: 0.85;
    flex: 0 0 auto;
}

.mtvision-ar-rect[data-ratio="16:9"] { width: 18px; height: 10px; }
.mtvision-ar-rect[data-ratio="4:3"]  { width: 16px; height: 12px; }
.mtvision-ar-rect[data-ratio="1:1"]  { width: 13px; height: 13px; }
.mtvision-ar-rect[data-ratio="9:16"] { width: 10px; height: 18px; }

/* Custom width x height inputs (shown only when Resolution = Custom) */
.mtvision-custom-dims {
    display: none;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.mtvision-custom-dims .mtvision-custom-dim {
    width: 100%;
    min-width: 0;
    text-align: center;
}

.mtvision-custom-dim-x {
    color: var(--mtvision-accent);
    font-weight: 700;
    flex: 0 0 auto;
}

/* Hover tooltip (credits / total fields) */
.mtvision-tooltip-host {
    position: relative;
}

.mtvision-tooltip-host[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--mtvision-dropdown-bg, #121212);
    color: #fff;
    border: 1px solid var(--mtvision-border, rgba(255, 255, 255, 0.15));
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10000001;
}

.mtvision-tooltip-host[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 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: var(--mtvision-fs-title, 14px);
    font-weight: 600;
    line-height: 1.25;
    color: var(--mtvision-dropdown-text-color, white);
    margin-bottom: 2px;
}

.mtvision-item-desc {
    font-size: var(--mtvision-fs-desc, 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;
    /* Desktop/iPad side gutters (mobile uses 6px via media query). */
    padding: 0 10px 20px 10px;
}

.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: var(--mtvision-fs-prompt, 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;
}

/* Strength value box (slider LoRAs) — same shell as the ref box, editable number inside */
.mtvision-strength-input {
    width: 46px;
    height: 26px;
    text-align: center;
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px !important;
    color: var(--mtvision-ref-color, #FFFFFF) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 4px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    -moz-appearance: textfield;
}
.mtvision-strength-input::-webkit-outer-spin-button,
.mtvision-strength-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.mtvision-strength-input:focus {
    outline: none !important;
    border-color: var(--mtvision-accent) !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: var(--mtvision-fs-cta, 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;
        /* Full-bleed breakout: the theme wraps this shortcode in a content area
           that has side padding / a max-width, leaving black gaps on the left and
           right. Pull the container out to the full viewport width regardless of
           the parent's padding. calc(50% - 50vw) is negative, so it spans edge to edge. */
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }

    .mtvision-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        /* Base is 20px 20px 100px — the 20px sides waste width on phones.
           Trim to a thin gutter matching the prompt panel; keep ample bottom
           padding for the load-more fade gradient. */
        padding: 10px 6px 90px 6px !important;
    }

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

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

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

    .mtvision-prompt-container {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        transform: none;
        margin-top: auto;
        /* Base is 0 20px 20px — the 20px sides waste screen width on phones.
           Trim to a thin gutter so the prompt panel uses the full width. */
        padding: 0 6px 8px 6px !important;
    }

    .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;
    }

    /* 3-row phone layout — fewer control rows = more room for the prompt:
       Row 1: Style (full width)
       Row 2: QTY (3) | Grid (3) | Aspect (3) | RES (3)
       Row 3: JPG (3) | D (3) | M (3) | T (3) */
    .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),
    .mtvision-controls-left .mtvision-options-group:nth-child(4),
    .mtvision-controls-left .mtvision-options-group:nth-child(5) {
        grid-column: span 3 !important;
    }

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

    /* Let the credit read-outs fill their grid cell on small screens instead of
       holding their fixed desktop width. */
    .mtvision-controls-left .mtvision-credit-box {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !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;
        /* Allow the row to wrap. With 2 reference slots visible the row holds
           IMAGE 1 + IMAGE 2 + the button; without wrapping these nowrap items
           can't shrink past their content and overflow off the right edge. */
        flex-wrap: wrap !important;
    }

    /* flex-basis 120px (not 0) drives the wrap: 1 image -> slot + button stay on
       one row; 2 images -> the two slots share row 1 and the button wraps to a
       full-width row 2. flex-grow lets them expand to fill whichever row. */
    #mtvision-generate-btn {
        flex: 1 1 120px !important;
        min-width: 0 !important;
        /* Desktop uses 0 25px (50px side padding). When the button flexes narrow
           on a phone that padding eats the width and the nowrap "PROCESS EDIT"
           label spills past the edges. Trim padding so the label fits. */
        padding: 0 10px !important;
    }

    .mtvision-image-input-group {
        flex: 1 1 120px !important;
        min-width: 0 !important;
    }

    .mtvision-custom-select-wrapper,
    .mtvision-ar-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;
    }

    /* Aspect/RES rows share space with QTY & Grid — keep triggers tight */
    .mtvision-ar-select-wrapper .mtvision-select-trigger {
        padding: 0 8px;
    }

    .mtvision-ar-select-wrapper .mtvision-trigger-arrow {
        margin-left: 4px;
    }

    .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: 8px 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: 34px !important;
        min-height: 34px !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;
    }

    /* Shrink the "tool" controls so rows are tighter and a uniform 30px tall:
       number inputs, the style/edit-mode dropdown, and the QTY/GRID toggles. */
    .mtvision-number-input,
    .mtvision-select-trigger,
    .mtvision-custom-select-wrapper {
        height: 30px !important;
        min-height: 30px !important;
    }

    .mtvision-qty-options,
    .mtvision-grid-options {
        height: 30px !important;
    }

    /* Tighter pill toggles — less side padding so QTY/GRID segments aren't oversized. */
    .mtvision-qty-btn,
    .mtvision-grid-btn {
        padding: 0 10px !important;
        font-size: 11px !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: Aspect (2) | RES (2) | JPG (2) | D (2) | M (2) | T (2) */
    .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),
    .mtvision-controls-left .mtvision-options-group:nth-child(7),
    .mtvision-controls-left .mtvision-options-group:nth-child(8),
    .mtvision-controls-left .mtvision-options-group:nth-child(9) { grid-column: span 2 !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;
    }
}