/**
 * Skin: Cyberpunk Neon
 * Location: /assets/css/skin-cyberpunk.css
 * Version: 1.0.0
 */

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

:root {
    --card-padding: 20px;

    /* Neon glass */
    --glass-bg: rgba(10, 10, 40, 0.78);
    --glass-z-bg: rgba(5, 5, 20, 0.96);
    --glass-radius: 20px;
    --glass-blur: 18px;
    --glass-shadow: 0 0 0 1px rgba(0, 255, 255, 0.18),
                    0 0 25px rgba(0, 255, 255, 0.28),
                    0 18px 40px rgba(0, 0, 0, 0.8);
    --glass-border: rgba(0, 255, 255, 0.22);
    --glass-z-border: rgba(255, 0, 153, 0.60);
    --glass-transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.18s ease;

    /* Cyberpunk accents */
    --neon-cyan: #00f6ff;
    --neon-pink: #ff00c8;
    --neon-purple: #8b5bff;
    --neon-yellow: #ffe500;

    /* Dùng cho mấy badge đang xài var(--im-theme-glass) */
    --im-theme-glass: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 40%, var(--neon-cyan) 100%);
}

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

body {
    background-color: #020313;
    background-image:
        radial-gradient(circle at 0% 0%, rgba(255, 0, 200, 0.16) 0, transparent 55%),
        radial-gradient(circle at 100% 0%, rgba(0, 255, 255, 0.13) 0, transparent 52%),
        radial-gradient(circle at 0% 100%, rgba(255, 229, 0, 0.11) 0, transparent 55%),
        linear-gradient(135deg, #030318 0%, #05001b 40%, #020313 75%, #03001a 100%),
        url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2300f6ff' stroke-opacity='0.08' stroke-width='1'%3E%3Cpath d='M0 40 H400 M0 80 H400 M0 120 H400 M0 160 H400 M0 200 H400 M0 240 H400 M0 280 H400 M0 320 H400 M0 360 H400'/%3E%3Cpath d='M40 0 V400 M80 0 V400 M120 0 V400 M160 0 V400 M200 0 V400 M240 0 V400 M280 0 V400 M320 0 V400 M360 0 V400'/%3E%3C/g%3E%3Cg stroke='%23ff00c8' stroke-opacity='0.18' stroke-width='1'%3E%3Cpath d='M-40 360 L80 240 L200 360 L320 240 L440 360'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-attachment: fixed;
    color: #e2e5ff;
}

/* Card / block base glass */
#im-header nav,
#im-footer,
.manga-block,
.blog-block,
.comment-block,
.sticker-block,
.author-block,
.publisher-block,
.team-block,
.sticker-card,
.loot-box-card,
.frame-card,
.effect-card,
.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,
.story-cover-wrap,
.sidebar-widget {
    padding: var(--card-padding);
    background: radial-gradient(circle at 0 0, rgba(255, 0, 200, 0.09) 0, transparent 45%),
                radial-gradient(circle at 100% 100%, rgba(0, 255, 255, 0.09) 0, transparent 45%),
                var(--glass-bg);
    border-radius: var(--glass-radius);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* Khu vực nền chính Uikit */
.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-navbar-container:not(.uk-navbar-transparent),
.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: radial-gradient(circle at 0 0, rgba(255, 0, 200, 0.06) 0, transparent 40%),
                radial-gradient(circle at 100% 100%, rgba(0, 255, 255, 0.06) 0, transparent 40%),
                var(--glass-bg);
}

/* Các box nhỏ / score / input */
.uk-light .init-chatbox-message-body,
.uk-light .uk-background-muted,
.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);
    box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.08);
}

/* Badge contest / age */
.uk-label-contest,
.badge-age.badge-novel,
.badge-age.badge-completed {
    background: var(--im-theme-glass);
    color: #050007;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

/* Progress / search / score */
.uk-light .uk-progress,
.uk-light .init-2048__score,
.uk-light .init-2048__best,
.uk-light #chapter-search-input {
    background: rgba(5, 10, 40, 0.9) !important;
}

/* Panel tối hơn (offcanvas, modal, dropdown, sticky, dashboard...) */
.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,
#init-user-engine-login-modal.dark .iue-content,
.iue-dashboard.dark {
    background: radial-gradient(circle at 0 0, rgba(255, 0, 200, 0.12) 0, transparent 52%),
                radial-gradient(circle at 100% 0, rgba(0, 255, 255, 0.12) 0, transparent 52%),
                var(--glass-z-bg);
    border-radius: var(--glass-radius);
    border: 1px solid var(--glass-z-border);
    box-shadow: var(--glass-shadow);
}

/* Blur mạnh cho dropdown, sticky, dashboard */
.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,
.iue-dashboard.dark {
    backdrop-filter: blur(calc(var(--glass-blur) * 1.1));
}

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

/*==============================
=      Buttons & Actions       =
==============================*/

.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),
.uk-light .uk-button-primary,
.uk-light .uk-button-secondary,
.uk-light .uk-button-danger,
.uk-light .uk-button-default {
    background: linear-gradient(135deg, rgba(255, 0, 200, 0.15), rgba(0, 255, 255, 0.12));
    color: #f5f5ff;
    border-radius: 500px;
    border: 1px solid rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.18),
                0 0 14px rgba(0, 255, 255, 0.4);
    transition: var(--glass-transition);
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}

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

/* Hiệu ứng hover riêng */
.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,
.uk-light .uk-button-primary:hover,
.uk-light .uk-button-secondary:hover,
.uk-light .uk-button-danger:hover,
.uk-light .uk-button-default:hover {
    background: linear-gradient(135deg, rgba(255, 0, 200, 0.38), rgba(0, 255, 255, 0.3));
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow:
        0 0 22px rgba(255, 0, 200, 0.75),
        0 0 40px rgba(0, 255, 255, 0.7),
        0 18px 40px rgba(0, 0, 0, 0.9);
    transform: translateY(-1px) scale(1.01);
}

.inline-comment-block:hover {
    background: linear-gradient(135deg, rgba(255, 0, 200, 0.38), rgba(0, 255, 255, 0.3));
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow:
        0 0 22px rgba(255, 0, 200, 0.75),
        0 0 40px rgba(0, 255, 255, 0.7),
        0 18px 40px rgba(0, 0, 0, 0.9);
}

/* Cover bottom gradient */
.uk-light .cover-bottom {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(5, 5, 15, 0.1) 15%,
        rgba(5, 5, 15, 0.55) 60%,
        rgba(5, 5, 15, 0.96) 85%,
        var(--glass-z-bg) 100%
    );
}

/* Blur background generic */
.uk-blur-background {
    opacity: 0.85;
}

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

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

.uk-card-default .uk-card-title {
    color: #f8f0ff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

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

#im-header nav,
#im-footer {
    border-left: none;
    border-right: none;
}

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

/* Tắt background riêng để lộ nền neon/glass phía sau */
#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;
}

#chapter-list .reading-buttons {
    overflow: visible !important;
}