/**
 * Ns Liquid Soft — Apple Liquid Glass × HyperOS
 * Inspired by liquid-glass-react press/elasticity + HyperOS dense cards.
 * Load AFTER style.css + ns-ui.css.
 */
:root {
    /* HyperOS-ish cool system paper + Apple glass */
    --paper: #f2f3f5;
    --bg-soft: #e8eaed;
    --sheet: rgba(255, 255, 255, 0.72);
    --sheet-solid: #ffffff;
    --ink: #1a1a1c;
    --plate: #1a1a1c;
    --stamp: #8a6b2f;
    --stamp-hover: #6f5524;
    --stamp-soft: rgba(138, 107, 47, 0.12);
    --brand: var(--stamp);
    --brand-hover: var(--stamp-hover);
    --brand-soft: var(--stamp-soft);
    --danger: #c41e3a;
    --text-secondary: #5c5c62;
    --text-muted: #8e8e93;
    --fill-tertiary: rgba(120, 120, 128, 0.14);

    --glass-bg: rgba(255, 255, 255, 0.42);
    --glass-bg-strong: rgba(255, 255, 255, 0.62);
    --glass-bg-weak: rgba(255, 255, 255, 0.28);
    --glass-border: rgba(255, 255, 255, 0.58);
    --glass-border-dark: rgba(0, 0, 0, 0.06);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    --glass-shadow: 0 8px 28px rgba(26, 26, 28, 0.08), 0 1px 2px rgba(26, 26, 28, 0.04);
    --glass-shadow-press: 0 2px 10px rgba(26, 26, 28, 0.1), 0 1px 1px rgba(26, 26, 28, 0.05);
    --glass-blur: 28px;
    --glass-sat: 190%;

    --radius: 18px;
    --radius-sm: 12px;
    --radius-lg: 24px;
    --radius-pill: 980px;

    --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-liquid: cubic-bezier(0.22, 1, 0.36, 1);
    --press-scale: 0.965;
    --press-lift: 1.02;
    --elasticity: 0.35;
}

::selection {
    background: rgba(138, 107, 47, 0.18);
    color: var(--ink);
}

/* —— Atmosphere (HyperOS soft mesh, not purple) —— */
body,
body.theme-gallery,
body.ns-ink-stamp {
    background-color: var(--paper) !important;
    background-image:
        radial-gradient(920px 480px at 8% -8%, rgba(138, 107, 47, 0.06), transparent 55%),
        radial-gradient(720px 400px at 96% 8%, rgba(90, 110, 140, 0.05), transparent 50%),
        linear-gradient(180deg, #e9ebef 0%, var(--paper) 28%, #f7f8fa 100%) !important;
    /* fixed 背景在滚动时强制重绘，改为 scroll 降卡 */
    background-attachment: scroll !important;
    color: var(--ink);
}

/* —— Liquid glass primitive —— */
.ns-glass,
.ns-liquid {
    background: var(--glass-bg) !important;
    backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-highlight), var(--glass-shadow) !important;
    border-radius: var(--radius) !important;
}

.ns-glass--strong {
    background: var(--glass-bg-strong) !important;
    --glass-blur: 36px;
}

.ns-glass--pill {
    border-radius: var(--radius-pill) !important;
}

/* —— Universal press (Apple liquid elasticity) —— */
.ns-press,
.btn,
.resource-card,
.mbn-item,
.home-custom-btn,
.home-seg-item,
.profile-menu-row,
.type-chip,
.page-btn,
.lottery-float,
.detail-btn-main,
.detail-btn-sub,
.detail-btn-act,
.card.clickable {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transform: translateZ(0) scale(1);
    transition:
        transform 0.42s var(--ease-spring),
        box-shadow 0.28s var(--ease-liquid),
        background 0.22s var(--ease-liquid),
        border-color 0.22s var(--ease-liquid),
        filter 0.22s var(--ease-liquid);
}

.ns-press.is-pressed,
.btn.is-pressed,
.resource-card.is-pressed,
.mbn-item.is-pressed,
.home-custom-btn.is-pressed,
.home-seg-item.is-pressed,
.profile-menu-row.is-pressed,
.lottery-float.is-pressed {
    transform: translateZ(0) scale(var(--press-scale)) !important;
    box-shadow: var(--glass-highlight), var(--glass-shadow-press) !important;
    filter: brightness(0.97);
}

.ns-press.is-hovering:not(.is-pressed),
.btn:hover:not(:disabled):not(.is-pressed),
.resource-card:hover:not(.is-pressed),
.home-custom-btn:hover:not(.is-pressed) {
    transform: translateZ(0) scale(var(--press-lift));
}

@media (hover: none) {
    .ns-press.is-hovering:not(.is-pressed),
    .btn:hover:not(:disabled):not(.is-pressed),
    .resource-card:hover:not(.is-pressed),
    .home-custom-btn:hover:not(.is-pressed) {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ns-press, .btn, .resource-card, .mbn-item, .home-custom-btn,
    .home-seg-item, .profile-menu-row, .lottery-float {
        transition: none !important;
        transform: none !important;
    }
}

/* —— Header glass —— */
.header {
    background: rgba(242, 243, 245, 0.55) !important;
    backdrop-filter: saturate(220%) blur(40px) !important;
    -webkit-backdrop-filter: saturate(220%) blur(40px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.62) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5),
        0 10px 32px rgba(26, 26, 28, 0.04) !important;
}

.header .btn-outline,
.header .btn-ghost {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
}

.header .btn-primary {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent),
        var(--plate) !important;
}

/* —— Buttons —— */
.btn {
    border-radius: var(--radius-pill) !important;
}

.btn-primary {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent),
        var(--plate) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 8px 22px rgba(26, 26, 28, 0.18) !important;
}

.btn-outline,
.btn-ghost {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--ink) !important;
    box-shadow: var(--glass-highlight), 0 4px 16px rgba(26, 26, 28, 0.06) !important;
}

.btn-danger {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent),
        var(--danger) !important;
}

/* —— Search / segment (HyperOS density) —— */
.search-bar,
.home-search {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: saturate(var(--glass-sat)) blur(20px) !important;
    -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(20px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--glass-highlight), 0 2px 12px rgba(26, 26, 28, 0.05) !important;
}

.home-seg,
.home-type-seg {
    background: var(--fill-tertiary) !important;
    border-radius: 12px !important;
    padding: 3px !important;
}

.home-seg-item.active,
.home-type-seg .type-chip.active {
    background: var(--sheet-solid) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border-radius: 10px !important;
    color: var(--ink) !important;
}

.home-custom-btn {
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--glass-highlight) !important;
}

/* —— Resource cards：保留玻璃质感描边/高光，去掉列表项实时 blur（滚动主因） —— */
.resource-card {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: var(--radius) !important;
    box-shadow:
        var(--glass-highlight),
        0 6px 20px rgba(26, 26, 28, 0.06) !important;
    overflow: hidden;
}

.resource-card:hover {
    box-shadow:
        var(--glass-highlight),
        0 14px 36px rgba(26, 26, 28, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}

.resource-card .resource-cover {
    border-radius: 14px 14px 0 0 !important;
}

.resource-title {
    font-weight: 650 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink) !important;
}

/* —— Cards / sheets / modals —— */
/* 静态卡片用半透明实色；半框/弹层仍用真毛玻璃 */
.card,
.auth-card,
.profile-menu-card,
.announcement-box {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    box-shadow:
        var(--glass-highlight),
        0 10px 28px rgba(26, 26, 28, 0.06) !important;
    border-radius: var(--radius-lg) !important;
}

.buy-sheet,
.tip-sheet,
.modal-box,
.ns-pay-panel {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: saturate(200%) blur(32px) !important;
    -webkit-backdrop-filter: saturate(200%) blur(32px) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow:
        var(--glass-highlight),
        0 18px 48px rgba(26, 26, 28, 0.14) !important;
    border-radius: var(--radius-lg) !important;
}

/* —— Mobile bottom nav liquid capsule —— */
.mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.48) !important;
    backdrop-filter: saturate(230%) blur(40px) !important;
    -webkit-backdrop-filter: saturate(230%) blur(40px) !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    box-shadow:
        var(--glass-highlight),
        0 12px 40px rgba(26, 26, 28, 0.12) !important;
    border-radius: var(--radius-pill) !important;
}

.mbn-item.active .mbn-icon {
    background: rgba(138, 107, 47, 0.14) !important;
    color: var(--stamp) !important;
}

.mbn-item.active .mbn-label {
    color: var(--ink) !important;
    font-weight: 650 !important;
}

.mbn-liquid-blob {
    background: rgba(138, 107, 47, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* —— Profile list (settings-like Hyper density) —— */
.profile-menu-row {
    border-radius: 12px !important;
}
.profile-menu-row:hover {
    background: rgba(120, 120, 128, 0.1) !important;
}
.profile-menu-row:active,
.profile-menu-row.is-pressed {
    background: rgba(120, 120, 128, 0.16) !important;
}

/* —— Detail sticky buy —— */
.detail-buy-sticky {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: saturate(220%) blur(36px) !important;
    -webkit-backdrop-filter: saturate(220%) blur(36px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
}

/* 仅主按钮用深色底；outline（赠送好友 / 收集激活码）保持浅底深字，避免文字被背景盖住 */
.btn-primary.detail-btn-main,
.btn-primary.detail-btn-act,
.btn-primary.detail-buy-sticky-cta {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent),
        var(--plate) !important;
    color: #fff !important;
    border-radius: var(--radius-pill) !important;
}

.btn-outline.detail-btn-main,
.btn-outline.detail-btn-act,
.btn-outline.detail-btn-sub,
.btn-outline.detail-buy-sticky-cta {
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: var(--glass-highlight), 0 4px 14px rgba(26, 26, 28, 0.06) !important;
}

/* —— Links accent —— */
a:hover { color: var(--stamp); }

.logo-mark,
.ns-stamp-dot {
    background: var(--stamp) !important;
}