/* 0. DEFENSIVE CSS (Strict Isolation from Global Themes) */
#o-pan, #o-pan *, #o-con, #o-con * {
    box-sizing: border-box !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    line-height: 1.5 !important;
    text-shadow: none !important;
}

/* Restore FontAwesome for icons */
#o-pan i, #o-pan .fa, #o-con i, #o-con .fa {
    font-family: FontAwesome !important;
}

#o-pan ul, #o-pan li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
#o-pan button, #o-con button {
    appearance: none !important;
    -webkit-appearance: none !important;
    margin: 0 !important;
    text-decoration: none !important;
}

/* 1. Floating Button Container */
#o-con {
    position: fixed !important;
    z-index: 999997 !important;
    display: flex !important;
    align-items: flex-start !important;
    top: var(--omnibutton-btn-top, 50%) !important;
    transition: top .3s, left .3s, right .3s, opacity .3s ease, visibility .3s, transform .3s ease !important;
    font-size: 15px !important;
}

/* Dynamic size for Desktop */
#o-tog {
    background: var(--omnibutton-btn-color-rgba, rgba(26, 66, 138, 1)) !important;
    backdrop-filter: blur(8px) !important;
    border: none !important;
    cursor: grab !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.2) !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--omnibutton-btn-size-desktop, 50px) !important;
    height: var(--omnibutton-btn-size-desktop, 50px) !important;
    transition: .2s !important;
    border-radius: var(--omnibutton-btn-shape-radius, 8px) !important;
}
#o-tog svg {
    width: 24px !important;
    height: 24px !important; 
    fill: #ffffff !important;
} 
#o-tog:active {
    cursor: grabbing !important;
} 
#o-tog:hover {
    transform: scale(1.05) !important;
}

.o-l {
    left: 0 !important;
    right: auto !important;
}
.o-r {
    right: 0 !important;
    left: auto !important;
}
.o-drag {
    transition: none !important;
} 
.o-drag #o-tog {
    border-radius: 8px !important;
    transform: scale(1.1) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,.3) !important;
}

/* 2. Overlay (Transparent for Live Preview) */
#o-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: transparent !important;
    z-index: 999998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
#o-overlay.act {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. Off-Canvas Sidebar (Dynamic Width - Hug Content) */
#o-pan {
    position: fixed !important;
    top: 0 !important;
    width: max-content !important;
    min-width: auto !important;
    max-width: 100vw !important;
    height: 100vh !important;
    background: var(--omnibutton-panel-bg-rgba, rgba(255, 255, 255, 1)) !important;
    color: var(--omnibutton-panel-color, #333333) !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform .4s cubic-bezier(0.25,0.8,0.25,1) !important;
    box-shadow: 0 0 50px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05) !important;
}

/* Panel transitions based on position classes */
#o-pan.o-pan-left {
    left: 0 !important;
    transform: translateX(-100%) !important;
}
#o-pan.o-pan-right {
    right: 0 !important;
    transform: translateX(100%) !important;
}
#o-pan.act {
    transform: translateX(0) !important;
}

/* Sidebar Inner Elements */
.o-hdr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px !important;
    border-bottom: 1px solid rgba(128,128,128,0.2) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    background: var(--omnibutton-panel-bg-rgba, rgba(255, 255, 255, 1)) !important;
    gap: 20px !important;
}
#o-cls {
    background: transparent !important;
    border: none !important;
    color: var(--omnibutton-panel-color, #333333) !important;
    opacity: 0.6 !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 28px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: .2s !important;
} 
#o-cls:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    color: #d9534f !important;
}

.o-tls-wrap {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    padding: 10px 0 !important;
}
.o-tls button {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--omnibutton-panel-color, #333333) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    transition: .2s !important;
    white-space: nowrap !important;
}
.o-tls button:hover, .o-tls button.act-t {
    background: rgba(128,128,128,0.15) !important;
} 
.o-tls button i {
    width: 24px !important;
    text-align: center !important;
    font-size: 18px !important;
    color: var(--omnibutton-btn-color-solid, #1a428a) !important;
}
.o-rst {
    border-top: 1px solid rgba(128,128,128,0.2) !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
}

/* Mobile Adjustments */
@media (max-width: 768px) { 
    #o-tog {
        width: var(--omnibutton-btn-size-mobile, 40px) !important;
        height: var(--omnibutton-btn-size-mobile, 40px) !important;
        padding: 8px !important;
    } 
}

/* Optical lens for visual filters */
:root {
    --o-flt-g: 0%;
    --o-flt-c: 100%;
    --o-flt-i: 0%;
    --o-flt-h: 0deg;
}
html.a11y-grayscale { --o-flt-g: 100%; }
html.a11y-high-contrast { --o-flt-c: 150%; }
html.a11y-negative { --o-flt-i: 100%; --o-flt-h: 180deg; }

#o-v-filt {
    position: fixed !important;
    top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important;
    pointer-events: none !important;
    z-index: 999995 !important;
    display: none !important;
    backdrop-filter: grayscale(var(--o-flt-g)) contrast(var(--o-flt-c)) invert(var(--o-flt-i)) hue-rotate(var(--o-flt-h)) !important;
    -webkit-backdrop-filter: grayscale(var(--o-flt-g)) contrast(var(--o-flt-c)) invert(var(--o-flt-i)) hue-rotate(var(--o-flt-h)) !important;
}
html.a11y-grayscale #o-v-filt,
html.a11y-high-contrast #o-v-filt,
html.a11y-negative #o-v-filt {
    display: block !important;
}

/* Fallback */
@supports not (backdrop-filter: grayscale(100%)) {
    html.a11y-grayscale body { filter: grayscale(100%) !important; }
    html.a11y-high-contrast body { filter: contrast(150%) !important; }
    html.a11y-negative body { filter: invert(100%) hue-rotate(180deg) !important; background: #111 !important; }
}

/* Ultimate Light Background */
html.a11y-light-bg, html.a11y-light-bg body { background: #ffffff !important; }
html.a11y-light-bg body *:not(#o-pan):not(#o-pan *):not(#o-con):not(#o-con *) { 
    background-color: transparent !important; 
    background-image: none !important; 
    color: #000000 !important; 
}
html.a11y-light-bg body *:not(#o-pan):not(#o-pan *):not(#o-con):not(#o-con *)::before, 
html.a11y-light-bg body *:not(#o-pan):not(#o-pan *):not(#o-con):not(#o-con *)::after { 
    background-color: transparent !important; 
    background-image: none !important; 
}
html.a11y-light-bg button:not(#o-pan *):not(#o-con *), 
html.a11y-light-bg input, 
html.a11y-light-bg textarea, 
html.a11y-light-bg select { 
    background-color: #ffffff !important; 
    border: 1px solid #000000 !important; 
    color: #000000 !important;
}

/* Other filters */
html.a11y-underline a,html.a11y-underline a *{text-decoration:underline!important;}

html.a11y-readable-font body, html.a11y-readable-font body *:not(i):not(.fa):not([class*="icon"]):not(#o-pan):not(#o-pan *):not(#o-con):not(#o-con *) {font-family:Arial,sans-serif!important;} 
html.a11y-readable-font .fa {font-family:FontAwesome!important;}

html.a11y-highlight-links a{background:#ffeb3b!important;color:#000!important;font-weight:bold!important;text-decoration:underline!important;padding:2px 4px!important;}
html.a11y-highlight-headers h1,html.a11y-highlight-headers h2,html.a11y-highlight-headers h3,html.a11y-highlight-headers h4,html.a11y-highlight-headers h5,html.a11y-highlight-headers h6{border:2px dashed var(--omnibutton-btn-color-solid, #1a428a)!important;padding:5px!important;}
html.a11y-stop-animations *,html.a11y-stop-animations *:before,html.a11y-stop-animations *:after{animation-play-state:paused!important;transition:none!important;scroll-behavior:auto!important;}
html.a11y-text-to-speech,html.a11y-text-to-speech *{cursor:help!important;} html.a11y-text-to-speech ::selection{background:#ffeb3b!important;color:#000!important;}

/* Unified Big Cursor */
html.a11y-big-cursor,html.a11y-big-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M2 2v24l6-6 5 9 4-2-5-9h8z' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 2 2,auto!important;}

#o-mask{position:fixed !important;left:0 !important;right:0 !important;height:120px !important;box-shadow:0 0 0 9999px rgba(0,0,0,.6) !important;pointer-events:none !important;z-index:999998 !important;display:none !important;transform:translateY(-50%) !important;transition:top .1s !important;}
html.a11y-reading-mask #o-mask{display:block !important;} 

/* Strict WCAG Focus Outline */
#o-pan button:focus-visible, #o-tog:focus-visible {outline:3px solid #ffeb3b!important;outline-offset:2px!important; background:rgba(128,128,128,0.2) !important;}

.omni-premium-trigger:hover {
    background-color: #ffffff !important;
    color: #111111 !important;
    border-color: #111111 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}
.omni-premium-trigger:focus-visible {
    outline: 2px solid #111111 !important;
    outline-offset: 4px !important;
}