#owo-hover-preview {
    position: fixed !important;
    z-index: 999999 !important;
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    padding: 10px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    pointer-events: none !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 80px !important;
    min-height: 80px !important;
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, -85%) scale(0.8);
    margin-top: -15px; 
    transform-origin: bottom center;
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.2s;
}
#owo-hover-preview[data-show="true"] {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
}
.owo-loader {
    width: 26px !important;
    height: 26px !important;
    border: 3px solid #f0f0f0 !important;
    border-top: 3px solid #007bff !important;
    border-radius: 50% !important;
    animation: owo-spin 0.8s linear infinite !important;
    position: absolute !important;
    display: none;
}
#owo-hover-preview[data-state="loading"] .owo-loader { display: block !important; }
#owo-hover-preview[data-state="loading"] img { display: none !important; }
#owo-hover-preview img {
    max-width: 128px !important;
    max-height: 128px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    display: none;
}
#owo-hover-preview[data-state="loaded"] img {
    display: block !important;
    animation: owo-img-fade-in 0.25s ease forwards !important;
}
@keyframes owo-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes owo-img-fade-in { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }

.twikoo { position: relative !important; }
.twikoo .el-loading-mask {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
    background-color: transparent !important; 
}
html[data-owo-theme="dark"] .twikoo .el-loading-mask,
html.dark .twikoo .el-loading-mask {
    background-color: transparent !important;
}
.twikoo .el-loading-spinner {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 42px !important;
    height: 42px !important;
    text-align: center !important;
}
.twikoo .el-loading-spinner .circular {
    width: 100% !important;
    height: 100% !important;
}

.OwO-body {
    background-color: #FFFFFF !important;
    border: 1px solid #eaeaea !important;
}
.OwO-body, .OwO-body * { color: #252525 !important; }
.OwO-body .OwO-bar {
    background-color: #FFFFFF !important;
    border-top: 1px solid #eaeaea !important;
}
.OwO-body .OwO-bar .OwO-packages li:hover,
.OwO-body .OwO-bar .OwO-packages li.OwO-package-active {
    background-color: #f0f0f0 !important;
}
.OwO-body .OwO-items .OwO-item { background-color: transparent !important; }
.OwO-body .OwO-items .OwO-item:hover {
    background-color: #eaeaea !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

html[data-owo-theme="dark"] #owo-hover-preview,
html.dark #owo-hover-preview,
html[data-theme="dark"] #owo-hover-preview {
    background-color: #252525 !important;
    border-color: #3b3b3b !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}
html[data-owo-theme="dark"] .owo-loader,
html.dark .owo-loader {
    border: 3px solid #333333 !important;
    border-top: 3px solid #4ea3ff !important;
}
html[data-owo-theme="dark"] .OwO-body,
html.dark .OwO-body,
html[data-theme="dark"] .OwO-body {
    background-color: #252525 !important;
    border-color: #3b3b3b !important;
}
html[data-owo-theme="dark"] .OwO-body,
html[data-owo-theme="dark"] .OwO-body *,
html.dark .OwO-body,
html.dark .OwO-body *,
html[data-theme="dark"] .OwO-body,
html[data-theme="dark"] .OwO-body * {
     color: #E6E6E6 !important;
}
html[data-owo-theme="dark"] .OwO-body .OwO-items,
html.dark .OwO-body .OwO-items {
    background: transparent !important;
    background-color: transparent !important;
}
html[data-owo-theme="dark"] .OwO-body .OwO-items .OwO-item,
html.dark .OwO-body .OwO-items .OwO-item {
    background-color: transparent !important; 
}
html[data-owo-theme="dark"] .OwO-body .OwO-items .OwO-item:hover,
html.dark .OwO-body .OwO-items .OwO-item:hover {
    background-color: #3b3b3b !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}
html[data-owo-theme="dark"] .OwO-body .OwO-bar,
html.dark .OwO-body .OwO-bar {
    background-color: #252525 !important;
    border-top: 1px solid #3b3b3b !important;
}
html[data-owo-theme="dark"] .OwO-body .OwO-bar .OwO-packages li,
html.dark .OwO-body .OwO-bar .OwO-packages li {
    background-color: transparent !important;
}
html[data-owo-theme="dark"] .OwO-body .OwO-bar .OwO-packages li:hover,
html[data-owo-theme="dark"] .OwO-body .OwO-bar .OwO-packages li.OwO-package-active,
html.dark .OwO-body .OwO-bar .OwO-packages li:hover,
html.dark .OwO-body .OwO-bar .OwO-packages li.OwO-package-active {
    background-color: #3b3b3b !important;
}
html[data-owo-theme="dark"] .OwO-body .OwO-items-image .OwO-item img,
html.dark .OwO-body .OwO-items-image .OwO-item img {
    filter: brightness(0.85) !important;
}