/* ================================================================
   BeatZen — share.css  v10
   Changes from v9:
   - Style tabs: horizontal scroll on mobile, 2-row wrap on desktop
   - Action buttons: always below preview on mobile (body reordered in JS)
   - Button labels fully visible — no truncation, no ellipsis
   - Buttons use height:auto, no fixed height that clips text
   - preview panel: flex:1, min-height:0 — fills remaining space cleanly
   - Reset: box-model only — fill/stroke on SVGs never touched
   ================================================================ */

/* ── Scoped box-model reset — never touches fill/stroke/color ── */
#bz-share-overlay,
#bz-share-overlay *,
#bz-share-overlay *::before,
#bz-share-overlay *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: auto !important;
    border: 0 !important;
    vertical-align: baseline !important;
    text-decoration: none !important;
    list-style: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Font stack restoration */
#bz-share-overlay,
#bz-share-overlay button,
#bz-share-overlay span,
#bz-share-overlay div,
#bz-share-overlay p {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif !important;
}

/* SVG: block display, never clipped, fill/stroke controlled per class only */
#bz-share-overlay svg {
    display: block !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

/* Toast scoped reset */
#bz-share-toast {
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ════════════════════════════════════════════════════════
   OVERLAY — fixed fullscreen backdrop
════════════════════════════════════════════════════════ */
#bz-share-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: rgba(4, 4, 16, 0.92) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    overflow: hidden !important;
    animation: bzFadeIn 0.20s ease !important;
}

#bz-share-overlay.active {
    display: flex !important;
}

@keyframes bzFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ════════════════════════════════════════════════════════
   MODAL SHELL
   Mobile:  column, height = 100vh − 24px, max 440px wide
   Desktop: column wrapper (header) + row body (left+right)
════════════════════════════════════════════════════════ */
.bz-share-modal {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 420px !important;
    height: calc(100dvh - 24px) !important;
    max-height: 820px !important;
    background: #0c0c1e !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.95) !important;
    overflow: hidden !important;
    animation: bzSlideUp 0.28s cubic-bezier(0.34, 1.35, 0.64, 1) !important;
    margin: auto !important;
}

@keyframes bzSlideUp {
    from {
        transform: translateY(28px) scale(0.97);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* ════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════ */
.bz-share-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px 13px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    flex-shrink: 0 !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.bz-share-header-title {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #e2e8f0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;
    line-height: 1 !important;
}

.bz-share-header-title svg {
    width: 16px !important;
    height: 16px !important;
    stroke: rgba(255, 255, 255, 0.55) !important;
    fill: none !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Close button */
.bz-share-close {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.18s, transform 0.14s !important;
}

.bz-share-close:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: scale(1.06) !important;
}

.bz-share-close svg {
    width: 15px !important;
    height: 15px !important;
    stroke: #e2e8f0 !important;
    fill: none !important;
    stroke-width: 2.6 !important;
    stroke-linecap: round !important;
}

/* ════════════════════════════════════════════════════════
   BODY — flex column on mobile, flex row on desktop
   Fills all remaining modal height below header
════════════════════════════════════════════════════════ */
.bz-share-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* ════════════════════════════════════════════════════════
   CONTROLS PANEL
   Mobile: shrinks to fit content, sits at TOP
   Desktop: fixed 270px wide left panel
════════════════════════════════════════════════════════ */
.bz-controls-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px 14px 10px !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ════════════════════════════════════════════════════════
   PREVIEW PANEL
   Mobile: flex:1 fills remaining height — image auto-fits
   Desktop: flex:1 fills right column
════════════════════════════════════════════════════════ */
.bz-preview-panel {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.14) !important;
}

/* Card stage: full size of panel */
#bz-card-stage {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Preview image: always fits without scrolling */
#bz-card-stage img {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.80) !important;
}

/* ════════════════════════════════════════════════════════
   ACTION BUTTONS ROW — below preview on mobile, below controls on desktop
   Single row: Copy Link | Save | More
   Labels always fully visible, no clipping
════════════════════════════════════════════════════════ */
.bz-share-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 7px !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    padding: 10px 12px 12px !important;
    background: rgba(255, 255, 255, 0.015) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Each button: equal width, row layout (icon left, label right) */
.bz-action-btn {
    flex: 1 !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    transition: transform 0.13s, filter 0.13s !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* Button label — always fully visible */
.bz-action-btn span {
    display: inline-block !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1px !important;
    line-height: 1 !important;
    color: inherit !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* Icon sizing */
.bz-action-btn svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* Copy Image — stroke clipboard icon */
.bz-btn-copy svg {
    fill: none !important;
    stroke: #ffffff !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Copy Image — two-line label */
.bz-btn-copy span {
    white-space: normal !important;
    line-height: 1.25 !important;
    text-align: center !important;
    font-size: 11.5px !important;
}

/* Save — stroke icon */
.bz-btn-save svg {
    fill: none !important;
    stroke: #ffffff !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* More — fill icon (three dots) */
.bz-btn-more svg {
    fill: rgba(255, 255, 255, 0.88) !important;
    stroke: none !important;
}

.bz-action-btn:hover {
    filter: brightness(1.12) !important;
}

.bz-action-btn:active {
    transform: scale(0.94) !important;
    filter: brightness(0.88) !important;
}

.bz-action-btn:disabled {
    opacity: 0.45 !important;
    pointer-events: none !important;
}

/* Button colors */
.bz-btn-copy {
    background: linear-gradient(145deg, #4338ca, #7c3aed) !important;
    color: #ffffff !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
}

.bz-btn-save {
    background: linear-gradient(145deg, #15803d, #16a34a) !important;
    color: #ffffff !important;
}

.bz-btn-more {
    background: rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
}

/* ════════════════════════════════════════════════════════
   SECTION LABELS (STYLE / FORMAT)
════════════════════════════════════════════════════════ */
.bz-section-label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.28) !important;
    line-height: 1 !important;
}

/* ════════════════════════════════════════════════════════
   STYLE TABS
   Mobile (<900px): single horizontal scrollable row
   Desktop (>=900px): 2-row wrap grid (3 per row)
════════════════════════════════════════════════════════ */
.bz-style-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
}

/* Hide scrollbar on webkit browsers */
.bz-style-tabs::-webkit-scrollbar {
    display: none !important;
}

.bz-style-tab {
    flex: 0 0 auto !important;
    padding: 7px 14px !important;
    border-radius: 20px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.11) !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.38) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    cursor: pointer !important;
    transition: all 0.16s !important;
    text-transform: uppercase !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.bz-style-tab.active {
    border-color: #a855f7 !important;
    background: rgba(168, 85, 247, 0.22) !important;
    color: #d8a8ff !important;
}

.bz-style-tab:not(.active):hover {
    border-color: rgba(255, 255, 255, 0.26) !important;
    color: rgba(255, 255, 255, 0.70) !important;
}

/* ════════════════════════════════════════════════════════
   RATIO TABS (9:16 and 16:9 — single row, equal width)
════════════════════════════════════════════════════════ */
.bz-ratio-tabs {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
}

.bz-ratio-tab {
    flex: 1 !important;
    padding: 9px 4px !important;
    border-radius: 20px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.11) !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.38) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.16s !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.bz-ratio-tab.active {
    border-color: #22d3ee !important;
    background: rgba(34, 211, 238, 0.15) !important;
    color: #67e8f9 !important;
}

.bz-ratio-tab:not(.active):hover {
    border-color: rgba(255, 255, 255, 0.24) !important;
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ════════════════════════════════════════════════════════
   DUAL ACTIONS PANEL VISIBILITY
   Mobile (<900px): desktop actions hidden, mobile footer shown
   Desktop (>=900px): mobile footer hidden, desktop actions shown
════════════════════════════════════════════════════════ */

/* Mobile: hide the desktop copy inside controls panel */
.bz-desktop-actions {
    display: none !important;
}

/* Mobile: show the footer copy below preview */
.bz-mobile-footer {
    display: flex !important;
    flex-shrink: 0 !important;
    padding: 10px 12px 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.015) !important;
}

/* Mobile footer shares the same action row styles */
.bz-mobile-footer .bz-share-actions {
    padding: 0 !important;
    border-top: none !important;
    background: transparent !important;
    width: 100% !important;
}

/* ════════════════════════════════════════════════════════
   SPINNER
════════════════════════════════════════════════════════ */
.bz-generating {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    width: 100% !important;
    height: 100% !important;
}

.bz-generating span {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

.bz-spinner {
    width: 28px !important;
    height: 28px !important;
    border: 3px solid rgba(168, 85, 247, 0.18) !important;
    border-top-color: #a855f7 !important;
    border-radius: 50% !important;
    animation: bzSpin 0.62s linear infinite !important;
    display: block !important;
}

@keyframes bzSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ════════════════════════════════════════════════════════
   TOAST — fallback pill (used only when global showToast is unavailable)
════════════════════════════════════════════════════════ */
#bz-share-toast {
    position: fixed !important;
    bottom: 130px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(12px) scale(0.96) !important;
    background: linear-gradient(135deg, rgba(20, 10, 45, 0.97) 0%, rgba(10, 10, 30, 0.97) 100%) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 10px 20px !important;
    border-radius: 14px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 100001 !important;
    border: 1px solid rgba(124, 58, 237, 0.45) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 58, 237, 0.12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: opacity 0.28s cubic-bezier(0.34, 1.4, 0.64, 1),
        transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
    white-space: nowrap !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

#bz-share-toast.show {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
}


/* ════════════════════════════════════════════════════════
   DESKTOP  >=900px
   Left controls panel (fixed 270px) | Right preview fills rest
   Buttons sit at bottom of left controls panel
════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

    .bz-share-modal {
        max-width: 820px !important;
        height: calc(100dvh - 48px) !important;
        max-height: 680px !important;
    }

    /* On desktop: show desktop actions inside controls, hide mobile footer */
    .bz-desktop-actions {
        display: flex !important;
        flex-direction: column !important;
        margin-top: auto !important;
    }

    .bz-mobile-footer {
        display: none !important;
    }

    /* Action buttons live inside desktop controls panel */
    .bz-desktop-actions .bz-share-actions {
        padding: 10px 0 14px !important;
        background: transparent !important;
        border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
        gap: 6px !important;
    }

    /* Side-by-side layout */
    .bz-share-body {
        flex-direction: row !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* Left controls: fixed 270px, column, no scroll */
    .bz-controls-panel {
        width: 270px !important;
        min-width: 270px !important;
        max-width: 270px !important;
        flex-shrink: 0 !important;
        border-bottom: none !important;
        border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
        padding: 18px 16px 0 !important;
        gap: 12px !important;
        overflow: hidden !important;
        /* column, with action buttons pinned to bottom */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* Right preview panel */
    .bz-preview-panel {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 18px !important;
        background: rgba(0, 0, 0, 0.18) !important;
        overflow: hidden !important;
    }

    /* Style tabs: 2-row wrap grid on desktop, no horizontal scroll */
    .bz-style-tabs {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    .bz-style-tab {
        flex: 0 0 calc(33.333% - 4.5px) !important;
        padding: 7px 4px !important;
        font-size: 10px !important;
    }

    /* Buttons slightly compact on left panel */
    .bz-action-btn {
        height: 40px !important;
        padding: 0 8px !important;
    }

    .bz-action-btn span {
        font-size: 11.5px !important;
    }

    .bz-action-btn svg {
        width: 15px !important;
        height: 15px !important;
    }
}

/* ════════════════════════════════════════════════════════
   WIDE DESKTOP  >=1100px
════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {

    .bz-share-modal {
        max-width: 940px !important;
        max-height: 720px !important;
    }

    .bz-controls-panel {
        width: 290px !important;
        min-width: 290px !important;
        max-width: 290px !important;
    }
}

/* ════════════════════════════════════════════════════════
   TABLET  600–899px  (stacked, wider modal)
════════════════════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 899px) {

    .bz-share-modal {
        max-width: 500px !important;
        height: calc(100dvh - 24px) !important;
        max-height: 860px !important;
    }

    .bz-controls-panel {
        padding: 12px 14px 10px !important;
    }
}

/* ════════════════════════════════════════════════════════
   SMALL MOBILE  <=380px
════════════════════════════════════════════════════════ */
@media (max-width: 380px) {

    .bz-share-modal {
        border-radius: 16px !important;
        height: calc(100dvh - 16px) !important;
    }

    .bz-controls-panel {
        padding: 10px 12px 8px !important;
        gap: 8px !important;
    }

    .bz-style-tab {
        font-size: 9.5px !important;
        padding: 6px 11px !important;
    }

    .bz-ratio-tab {
        font-size: 11px !important;
        padding: 8px 4px !important;
    }

    .bz-share-actions {
        padding: 8px 10px 10px !important;
        gap: 5px !important;
    }

    .bz-action-btn {
        height: 42px !important;
        padding: 0 6px !important;
        gap: 5px !important;
        border-radius: 10px !important;
    }

    .bz-action-btn span {
        font-size: 11px !important;
    }

    .bz-action-btn svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* ════════════════════════════════════════════════════════
   VERY SMALL  <=300px — icons only, hide labels
════════════════════════════════════════════════════════ */
@media (max-width: 300px) {

    .bz-action-btn span {
        display: none !important;
    }

    .bz-action-btn {
        padding: 0 !important;
        gap: 0 !important;
        justify-content: center !important;
    }
}

/* ════════════════════════════════════════════════════════
   THEME TAB ACTIVE COLORS — 10 plain colours (global)
════════════════════════════════════════════════════════ */

/* Red */
.bz-style-tab[data-style="red"].active {
    border-color: #ef4444 !important;
    background: rgba(220, 38, 38, 0.20) !important;
    color: #fca5a5 !important;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.22), 0 2px 8px rgba(220, 38, 38, 0.28) !important;
}

/* Blue */
.bz-style-tab[data-style="blue"].active {
    border-color: #3b82f6 !important;
    background: rgba(37, 99, 235, 0.20) !important;
    color: #93c5fd !important;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.22), 0 2px 8px rgba(37, 99, 235, 0.28) !important;
}

/* Green */
.bz-style-tab[data-style="green"].active {
    border-color: #22c55e !important;
    background: rgba(22, 163, 74, 0.20) !important;
    color: #86efac !important;
    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.22), 0 2px 8px rgba(22, 163, 74, 0.28) !important;
}

/* Yellow */
.bz-style-tab[data-style="yellow"].active {
    border-color: #eab308 !important;
    background: rgba(202, 138, 4, 0.20) !important;
    color: #fef08a !important;
    box-shadow: 0 0 0 1px rgba(202, 138, 4, 0.22), 0 2px 8px rgba(202, 138, 4, 0.28) !important;
}

/* Orange */
.bz-style-tab[data-style="orange"].active {
    border-color: #f97316 !important;
    background: rgba(194, 65, 12, 0.20) !important;
    color: #fdba74 !important;
    box-shadow: 0 0 0 1px rgba(194, 65, 12, 0.22), 0 2px 8px rgba(194, 65, 12, 0.28) !important;
}

/* Purple */
.bz-style-tab[data-style="purple"].active {
    border-color: #a855f7 !important;
    background: rgba(109, 40, 217, 0.22) !important;
    color: #d8b4fe !important;
    box-shadow: 0 0 0 1px rgba(109, 40, 217, 0.22), 0 2px 8px rgba(109, 40, 217, 0.28) !important;
}

/* Pink */
.bz-style-tab[data-style="pink"].active {
    border-color: #ec4899 !important;
    background: rgba(219, 39, 119, 0.20) !important;
    color: #f9a8d4 !important;
    box-shadow: 0 0 0 1px rgba(219, 39, 119, 0.22), 0 2px 8px rgba(219, 39, 119, 0.28) !important;
}

/* Black */
.bz-style-tab[data-style="black"].active {
    border-color: #a3a3a3 !important;
    background: rgba(80, 80, 80, 0.22) !important;
    color: #d4d4d4 !important;
    box-shadow: 0 0 0 1px rgba(80, 80, 80, 0.20), 0 2px 8px rgba(60, 60, 60, 0.30) !important;
}

/* Brown */
.bz-style-tab[data-style="brown"].active {
    border-color: #d97706 !important;
    background: rgba(146, 64, 14, 0.20) !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 0 1px rgba(146, 64, 14, 0.22), 0 2px 8px rgba(146, 64, 14, 0.28) !important;
}

/* Hover for all inactive tabs */
.bz-style-tab:not(.active):hover {
    border-color: rgba(255, 255, 255, 0.30) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}