/**
 * Skin: Glassmorphism
 * Location: /assets/css/skin-glass.css
 * Version: 1.0.4
 */

/*==============================
=        Global Variables      =
==============================*/

:root {
    --card-padding: 20px;
    --glass-bg: rgba(85, 85, 85, 0.25);
    --glass-z-bg: rgba(12, 12, 12, 0.85);
    --glass-radius: 22px;
    --glass-blur: 4px;
    --glass-shadow: 0 12px 28px rgba(0,0,0,0.35);
    --glass-border: rgba(255,255,255,0.06);
    --glass-z-border: rgba(255,255,255,0.10);
    --glass-transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/*==============================
=          Base Styles         =
==============================*/

body {
    background-color: #000022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='2000' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke-opacity='0.15'%3E%3Cg stroke='%23026' stroke-width='17'%3E%3Cline x1='-8' y1='-8' x2='808' y2='808'/%3E%3Cline x1='-8' y1='792' x2='808' y2='1608'/%3E%3Cline x1='-8' y1='-808' x2='808' y2='8'/%3E%3C/g%3E%3Cg stroke='%23002163' stroke-width='16'%3E%3Cline x1='-8' y1='767' x2='808' y2='1583'/%3E%3Cline x1='-8' y1='17' x2='808' y2='833'/%3E%3Cline x1='-8' y1='-33' x2='808' y2='783'/%3E%3Cline x1='-8' y1='-783' x2='808' y2='33'/%3E%3C/g%3E%3Cg stroke='%23002060' stroke-width='15'%3E%3Cline x1='-8' y1='742' x2='808' y2='1558'/%3E%3Cline x1='-8' y1='42' x2='808' y2='858'/%3E%3Cline x1='-8' y1='-58' x2='808' y2='758'/%3E%3Cline x1='-8' y1='-758' x2='808' y2='58'/%3E%3C/g%3E%3Cg stroke='%23001f5c' stroke-width='14'%3E%3Cline x1='-8' y1='67' x2='808' y2='883'/%3E%3Cline x1='-8' y1='717' x2='808' y2='1533'/%3E%3Cline x1='-8' y1='-733' x2='808' y2='83'/%3E%3Cline x1='-8' y1='-83' x2='808' y2='733'/%3E%3C/g%3E%3Cg stroke='%23001e59' stroke-width='13'%3E%3Cline x1='-8' y1='92' x2='808' y2='908'/%3E%3Cline x1='-8' y1='692' x2='808' y2='1508'/%3E%3Cline x1='-8' y1='-108' x2='808' y2='708'/%3E%3Cline x1='-8' y1='-708' x2='808' y2='108'/%3E%3C/g%3E%3Cg stroke='%23001d56' stroke-width='12'%3E%3Cline x1='-8' y1='667' x2='808' y2='1483'/%3E%3Cline x1='-8' y1='117' x2='808' y2='933'/%3E%3Cline x1='-8' y1='-133' x2='808' y2='683'/%3E%3Cline x1='-8' y1='-683' x2='808' y2='133'/%3E%3C/g%3E%3Cg stroke='%23001c53' stroke-width='11'%3E%3Cline x1='-8' y1='642' x2='808' y2='1458'/%3E%3Cline x1='-8' y1='142' x2='808' y2='958'/%3E%3Cline x1='-8' y1='-158' x2='808' y2='658'/%3E%3Cline x1='-8' y1='-658' x2='808' y2='158'/%3E%3C/g%3E%3Cg stroke='%23001b4f' stroke-width='10'%3E%3Cline x1='-8' y1='167' x2='808' y2='983'/%3E%3Cline x1='-8' y1='617' x2='808' y2='1433'/%3E%3Cline x1='-8' y1='-633' x2='808' y2='183'/%3E%3Cline x1='-8' y1='-183' x2='808' y2='633'/%3E%3C/g%3E%3Cg stroke='%23001a4c' stroke-width='9'%3E%3Cline x1='-8' y1='592' x2='808' y2='1408'/%3E%3Cline x1='-8' y1='192' x2='808' y2='1008'/%3E%3Cline x1='-8' y1='-608' x2='808' y2='208'/%3E%3Cline x1='-8' y1='-208' x2='808' y2='608'/%3E%3C/g%3E%3Cg stroke='%23001949' stroke-width='8'%3E%3Cline x1='-8' y1='567' x2='808' y2='1383'/%3E%3Cline x1='-8' y1='217' x2='808' y2='1033'/%3E%3Cline x1='-8' y1='-233' x2='808' y2='583'/%3E%3Cline x1='-8' y1='-583' x2='808' y2='233'/%3E%3C/g%3E%3Cg stroke='%23001846' stroke-width='7'%3E%3Cline x1='-8' y1='242' x2='808' y2='1058'/%3E%3Cline x1='-8' y1='542' x2='808' y2='1358'/%3E%3Cline x1='-8' y1='-558' x2='808' y2='258'/%3E%3Cline x1='-8' y1='-258' x2='808' y2='558'/%3E%3C/g%3E%3Cg stroke='%23001743' stroke-width='6'%3E%3Cline x1='-8' y1='267' x2='808' y2='1083'/%3E%3Cline x1='-8' y1='517' x2='808' y2='1333'/%3E%3Cline x1='-8' y1='-533' x2='808' y2='283'/%3E%3Cline x1='-8' y1='-283' x2='808' y2='533'/%3E%3C/g%3E%3Cg stroke='%2300163f' stroke-width='5'%3E%3Cline x1='-8' y1='292' x2='808' y2='1108'/%3E%3Cline x1='-8' y1='492' x2='808' y2='1308'/%3E%3Cline x1='-8' y1='-308' x2='808' y2='508'/%3E%3Cline x1='-8' y1='-508' x2='808' y2='308'/%3E%3C/g%3E%3Cg stroke='%2300153c' stroke-width='4'%3E%3Cline x1='-8' y1='467' x2='808' y2='1283'/%3E%3Cline x1='-8' y1='317' x2='808' y2='1133'/%3E%3Cline x1='-8' y1='-333' x2='808' y2='483'/%3E%3Cline x1='-8' y1='-483' x2='808' y2='333'/%3E%3C/g%3E%3Cg stroke='%23001439' stroke-width='3'%3E%3Cline x1='-8' y1='342' x2='808' y2='1158'/%3E%3Cline x1='-8' y1='442' x2='808' y2='1258'/%3E%3Cline x1='-8' y1='-458' x2='808' y2='358'/%3E%3Cline x1='-8' y1='-358' x2='808' y2='458'/%3E%3C/g%3E%3Cg stroke='%23001336' stroke-width='2'%3E%3Cline x1='-8' y1='367' x2='808' y2='1183'/%3E%3Cline x1='-8' y1='417' x2='808' y2='1233'/%3E%3Cline x1='-8' y1='-433' x2='808' y2='383'/%3E%3Cline x1='-8' y1='-383' x2='808' y2='433'/%3E%3C/g%3E%3Cg stroke='%23013' stroke-width='1'%3E%3Cline x1='-8' y1='392' x2='808' y2='1208'/%3E%3Cline x1='-8' y1='-408' x2='808' y2='408'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-y;
}

#im-header nav,
#im-footer,
.manga-block,
.blog-block,
.comment-block,
.sticker-block,
.author-block,
.publisher-block,
.team-block,
.guild-block,
.uk-card-default.uk-card-hover,
.init-chatbox-wrapper,
.uk-light #im-slider .uk-alert,
.uk-light #signup-notice-bar .uk-card-default,
#iue-modal.dark .iue-inbox-item,
#featured-slider .uk-card-secondary,
.story-cover-wrap,
.sidebar-widget {
    padding: var(--card-padding);
    background: var(--glass-bg);
    border-radius: var(--glass-radius);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.sticker-card,
.loot-box-card,
.frame-card,
.effect-card {
    background: var(--glass-bg);
    border-radius: var(--glass-radius);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.uk-light .uk-card-primary,
.uk-light .init-chatbox-pinned-banner {
    background: var(--glass-bg);
    border-radius: var(--glass-radius);
    border: 1px solid var(--glass-border);
}

.uk-light .uk-alert,
.uk-light .uk-section-default,
.uk-light .uk-section-muted,
.uk-light .uk-comment-primary,
.uk-light .uk-card-default,
.uk-light .uk-modal-dialog .uk-card-default,
.uk-light .uk-modal-dialog .uk-card-secondary,
.uk-light .uk-navbar-container:not(.uk-navbar-transparent),
.uk-light .uk-background-muted,
.uk-light .uk-card-secondary,
.uk-light .uk-card-secondary.uk-card-hover:hover,
.uk-light .uk-modal-header,
.uk-light .uk-modal-footer {
    background: var(--glass-bg);
}

#iue-modal.dark .iue-inbox-tabs button,
#iue-modal.dark .iue-inbox-actions button {
    background: var(--glass-bg);
}

#iue-modal.dark .iue-inbox-tabs button:hover,
#iue-modal.dark .iue-inbox-actions button:hover {
    background: rgba(255, 255, 255, 0.12);
}

#iue-modal.dark .iue-inbox-menu {
    box-shadow: none;
    padding: 0;
    overflow: hidden;
}

.uk-light .init-chatbox-message-body,
.uk-light #init-manga-assistant-messages .uk-background-muted,
.uk-light .init-2048__score,
.uk-light .init-2048__best,
#iep-modal.iep-dark #iep-code,
#iue-modal.dark .iue-referral-benefits,
#iue-modal.dark .iue-vip-current,
#iue-modal.dark .iue-vip-card,
#iue-modal.dark #iue-referral-link {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}

.uk-label-contest,
.badge-age.badge-novel,
.badge-age.badge-completed {
    background: var(--im-theme-glass);
}

.uk-light .uk-progress,
.uk-light .init-2048__score,
.uk-light .init-2048__best,
.uk-light #chapter-search-input {
    background: var(--glass-bg) !important;
}

.uk-offcanvas-bar,
#ils-modal .ils-content,
.uk-light .uk-navbar-dropdown,
.uk-light .uk-dropdown,
.uk-light .uk-drop.uk-card-default,
.uk-light .uk-modal-dialog,
.uk-light .continue-reading.uk-alert,
#iue-modal.dark .iue-modal-content,
#iep-modal.iep-dark .iep-modal-content,
#init-review-modal.dark .init-review-modal-content,
.imc-sticky.uk-background-muted,
.imc-tts-bar.uk-background-muted,
#init-user-engine-login-modal.dark .iue-content,
.uk-light #im-bell-dropdown.uk-dropdown,
.iue-dashboard.dark {
    background: var(--glass-z-bg);
    border-radius: var(--glass-radius);
    border: 1px solid var(--glass-z-border);
    box-shadow: var(--glass-shadow);
}

.uk-light .uk-navbar-dropdown,
.uk-light .uk-dropdown,
.uk-light .uk-drop.uk-card-default,
.uk-light .continue-reading.uk-alert,
.imc-sticky.uk-background-muted,
.imc-tts-bar.uk-background-muted,
.uk-light #im-bell-dropdown.uk-dropdown,
.iue-dashboard.dark,
.uk-light .init-chatbox-pinned-banner {
    backdrop-filter: blur(var(--glass-blur));
}

.uk-light .continue-reading.uk-alert,
.uk-light .init-chatbox-pinned-banner {
    background: var(--glass-z-bg) !important;
}

.continue-reading {
    max-width: calc(100% - 45px);
}

.inline-comment-block,
#ils-modal.dark .ils-suggestions .ils-suggest-pill,
#init-review-modal.dark button[type="submit"],
#iep-modal.iep-dark button[type="button"]:not(.iep-modal-close),
#iue-modal.dark .iue-vip-buy-btn,
#iue-modal.dark .iue-inbox-controls button,
.uk-light .uk-button-primary,
.uk-light .uk-card-primary .uk-button-secondary,
.uk-light .uk-button-secondary,
.uk-light .uk-button-danger,
.uk-light .uk-button-default {
    background: var(--glass-bg);
    color: #fff;
    border-radius: 500px;
    border: 1px solid var(--glass-border);
    transition: var(--glass-transition);
}

#iue-modal.dark .iue-streak-restore-actions .iue-btn {
    background: var(--glass-bg) !important;
    color: #fff !important;
    border: 1px solid var(--glass-border) !important;
}

.uk-card-default.uk-card-hover {
    transition: var(--glass-transition);
}

/* Hiệu ứng hover riêng */
.inline-comment-block:hover,
.uk-card-default.uk-card-hover:hover,
#ils-modal.dark .ils-suggestions .ils-suggest-pill:hover,
#init-review-modal.dark button[type="submit"]:hover,
#iep-modal.iep-dark button[type="button"]:not(.iep-modal-close):hover,
#iue-modal.dark .iue-vip-buy-btn:hover,
#iue-modal.dark .iue-inbox-controls button:hover,
.uk-light .uk-button-primary:hover,
.uk-light .uk-card-primary .uk-button-secondary:hover,
.uk-light .uk-button-secondary:hover,
.uk-light .uk-button-danger:hover,
.uk-light .uk-button-default:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

#iue-modal.dark .iue-streak-restore-actions .iue-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.uk-light .cover-bottom {
    background: linear-gradient(transparent 0%, rgba(12, 12, 12, 0.05) 15%, rgba(12, 12, 12, 0.55) 80%, var(--glass-z-bg) 100%);
}

.uk-blur-background {
    opacity: .8;
}

.uk-light #imc-filter-by-type .uk-button-primary {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.uk-light #imc-filter-by-type .uk-button-primary:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.65);
}

/*==============================
=          Reset Styles        =
==============================*/

#im-header nav,
.uk-card-default.uk-card-hover,
.story-cover-wrap {
    padding: 0;
}

.dark .iue-form-actions .iue-btn,
.uk-card-default .uk-card-title {
    color: #fff;
}

.imc-sticky.uk-background-muted,
#im-header nav,
#im-footer {
    border-radius: 0;
}

#iue-modal.dark .iue-modal-header {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
}

.story-cover-wrap {
    box-shadow: none;
}

.uk-alert {
    padding: 15px 29px 15px 15px !important;
}

#announcement-bar .uk-alert {
    background: none !important;
}

#init-user-engine-login-modal.dark .iue-header,
#iue-modal.dark .iue-referral-container,
#iue-modal.dark .iue-modal-header,
#ils-modal.dark .ils-results {
    background: none;
}

#im-main .latest-updated .uk-text-center.uk-margin-medium-top {
    margin-top: 20px !important;
}

@media (min-width: 390px) and (max-width: 767px) {
    .uk-navbar-left.has-bell .uk-navbar-nav > li.uk-navbar-item-first > a {
        max-width: clamp(100px, 28vw, 180px);
    }
}

/* =============================================
   Sticker Picker — Skin: Glassmorphism
   ============================================= */

.sticker-more-menu {
    background: var(--glass-z-bg);
    border: 1px solid var(--glass-z-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur));
}

/* Không cần override uk-light vì skin glass luôn dark */
.uk-light .sticker-more-menu {
    background: var(--glass-z-bg);
}

/* =============================================
   Login Form
   ============================================= */

#init-user-engine-login-modal.dark .iue-login-form input[type="submit"],
#init-user-engine-login-modal.dark .iue-register-form button.iue-submit,
#init-user-engine-login-modal.dark .iue-lostpassword-form button.iue-submit {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--iue-theme-color) 45%, transparent),
            color-mix(in srgb, var(--iue-theme-active-color) 45%, transparent)
        );
    color: #fff;

    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 500px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 4px 18px color-mix(in srgb, var(--iue-theme-color) 25%, transparent);

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .2s ease,
        box-shadow .25s ease;
}

#init-user-engine-login-modal.dark .iue-login-form input[type="submit"]:hover,
#init-user-engine-login-modal.dark .iue-register-form button.iue-submit:hover,
#init-user-engine-login-modal.dark .iue-lostpassword-form button.iue-submit:hover {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--iue-theme-color) 60%, transparent),
            color-mix(in srgb, var(--iue-theme-active-color) 60%, transparent)
        );

    border-color: rgba(255,255,255,0.22);

    transform: translateY(-1px);
}
/*==============================
=   Reduce Effects on Mobile   =
==============================*/

/*
 * --glass-shadow gốc có blur 28px + opacity cao, tốn compositing khi có
 * nhiều .manga-block/.blog-block/... cùng lúc trong grid. Giảm blur/spread
 * trên mobile khi bật tuỳ chọn "Reduce Effects on Mobile", vẫn giữ chút độ
 * nổi khối để không phá vỡ hiệu ứng kính mờ (glassmorphism).
 */
@media (max-width: 767px) {
    body.im-reduce-mobile-fx {
        --glass-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    }
}