/* ===== Cartoon theme polish (fk.ccccyun.cn) — additive overrides only ===== */

/* 1. Pastel accent + softer glass tokens (light theme only) */
:root[data-theme="light"] {
    --md-primary: #4a5ad4;
    --md-primary-rgb: 74, 90, 212;
    --uc-primary-deep: #37429b;
    --uc-focus: #6b7cf0;
    --uc-focus-rgb: 107, 124, 240;
    --glass-radius: 18px;
    --glass-radius-sm: 14px;
    --glass-shadow: 0 12px 34px rgba(80, 96, 170, .12);
    --glass-shadow-lg: 0 18px 46px rgba(80, 96, 170, .18);
}

/* 2. Background overlay: softer veil + soft aurora glows matching the pastel sky */
body.uc-body::before {
    background:
        radial-gradient(880px 420px at 10% -10%, rgba(150, 180, 255, .22), transparent 70%),
        radial-gradient(720px 380px at 94% 4%, rgba(255, 182, 222, .20), transparent 72%),
        linear-gradient(180deg, rgba(255, 255, 255, .20) 0, rgba(255, 255, 255, .14) 42%, rgba(255, 255, 255, .30) 100%);
}

:root[data-theme="dark"] body.uc-body::before {
    background:
        radial-gradient(880px 420px at 10% -10%, rgba(96, 112, 200, .22), transparent 70%),
        radial-gradient(720px 380px at 94% 4%, rgba(150, 100, 150, .18), transparent 72%),
        linear-gradient(180deg, rgba(10, 12, 20, .60) 0, rgba(10, 12, 20, .52) 42%, rgba(10, 12, 20, .68) 100%);
}

/* 3. Mobile: use the vertical background, and drop fixed attachment (avoids mobile jank) */
@media (max-width: 900px) {
    body.uc-body {
        background-image: url('/assets/user/images/theme/bg-mobile.jpg') !important;
        background-attachment: scroll;
        background-position: center top;
        background-size: cover;
    }
}

/* 4. Nav bar: brighter glass, softer shadow */
body.uc-body .shop-nav {
    background: rgba(255, 255, 255, .62);
    border-color: rgba(255, 255, 255, .76);
    box-shadow: 0 10px 28px rgba(80, 96, 170, .14), inset 0 1px 0 rgba(255, 255, 255, .9);
}

body.uc-body .shop-nav__item.active,
body.uc-body .chip.is-primary {
    background: linear-gradient(135deg, #5b6cf0, #7f8df6);
    box-shadow: 0 6px 16px rgba(91, 108, 240, .30);
}

body.uc-body .shop-search__box {
    background: rgba(255, 255, 255, .55);
    border-color: rgba(255, 255, 255, .72);
}

body.uc-body .shop-search__box:focus-within {
    border-color: rgba(107, 124, 240, .60);
    box-shadow: 0 0 0 3px rgba(107, 124, 240, .16);
}

/* 5. Buttons */
body.uc-body .shop-btn--primary {
    background: linear-gradient(135deg, #5b6cf0, #7f8df6);
    box-shadow: 0 6px 18px rgba(91, 108, 240, .30);
}

body.uc-body .shop-btn--primary:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

body.uc-body .shop-btn--ghost {
    background: rgba(255, 255, 255, .50);
    border-color: rgba(255, 255, 255, .72);
}

/* 6. Cards & panels: lighter glass, matching shadows, friendly hover */
body.uc-body .panel {
    background: rgba(255, 255, 255, .70);
    border-color: rgba(255, 255, 255, .74);
    box-shadow: 0 12px 34px rgba(80, 96, 170, .12), inset 0 1px 0 rgba(255, 255, 255, .85);
}

body.uc-body .panel-header .icon {
    background: linear-gradient(135deg, rgba(91, 108, 240, .16), rgba(127, 141, 246, .10));
    color: #4a5ad4;
}

body.uc-body .acg-card {
    background: rgba(255, 255, 255, .62);
    border-color: rgba(255, 255, 255, .72);
    box-shadow: 0 6px 18px rgba(80, 96, 170, .10);
}

body.uc-body .item-card-cell:hover .acg-card {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(80, 96, 170, .18);
    border-color: rgba(107, 124, 240, .55);
}

body.uc-body .acg-thumb {
    background-color: rgba(107, 124, 240, .08);
}

body.uc-body .acg-tag {
    border-radius: 999px;
}

body.uc-body .chip {
    background: rgba(255, 255, 255, .55);
}

body.uc-body .uc-subhead::before {
    background: linear-gradient(180deg, #5b6cf0, #8f9bf7);
}

/* 7. Dark theme: keep readability against the same background art */
:root[data-theme="dark"] body.uc-body .shop-nav {
    background: rgba(24, 27, 36, .66);
    border-color: rgba(255, 255, 255, .10);
}

:root[data-theme="dark"] body.uc-body .panel {
    background: rgba(24, 27, 36, .62);
    border-color: rgba(255, 255, 255, .10);
}

:root[data-theme="dark"] body.uc-body .acg-card {
    background: rgba(24, 27, 36, .55);
    border-color: rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] body.uc-body .shop-btn--ghost,
:root[data-theme="dark"] body.uc-body .chip {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
}