/* ==========================================================================
   主题 · 烛光玫瑰  Candlelight & Roses
   共享设计系统：深紫红渐变背景 + 香槟金点缀 + 玻璃拟态 + 光斑粒子 + 星点闪烁
   ========================================================================== */

:root {
    --bg-deep: #1b0d1d;
    --bg-plum: #32172f;
    --bg-wine: #542238;
    --bg-rose: #8a3b52;
    --gold: #e9bd8f;
    --gold-strong: #d69a63;
    --gold-soft: #f6dcc0;
    --text: #fdf5ee;
    --muted: rgba(255, 235, 225, 0.72);
    --glass: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.18);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Segoe UI", sans-serif;
    color: var(--text);
    background:
        radial-gradient(1100px 760px at 12% 8%, rgba(138, 59, 82, 0.62), transparent 60%),
        radial-gradient(900px 700px at 88% 88%, rgba(233, 189, 143, 0.16), transparent 55%),
        radial-gradient(820px 820px at 78% 12%, rgba(84, 34, 56, 0.85), transparent 62%),
        linear-gradient(158deg, #1b0d1d 0%, #2a122c 32%, #451c35 62%, #6b2a41 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 星点闪烁层（位于背景之上、内容之下） */
body::before {
    content: "";
    position: fixed;
    inset: -24px;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.6px 1.6px at 25% 35%, rgba(255, 255, 255, 0.75), transparent 60%),
        radial-gradient(1.1px 1.1px at 62% 18%, rgba(255, 240, 220, 0.7), transparent 60%),
        radial-gradient(1.6px 1.6px at 80% 62%, rgba(255, 255, 255, 0.55), transparent 60%),
        radial-gradient(1.1px 1.1px at 42% 76%, rgba(233, 189, 143, 0.65), transparent 60%),
        radial-gradient(1.5px 1.5px at 10% 80%, rgba(255, 255, 255, 0.5), transparent 60%),
        radial-gradient(1.1px 1.1px at 90% 40%, rgba(255, 255, 255, 0.45), transparent 60%);
    background-size: 260px 260px, 340px 340px, 300px 300px, 280px 280px, 320px 320px, 360px 360px;
    background-repeat: repeat;
    opacity: 0.75;
    animation: twinkle 7s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.95;
    }
}

/* 光斑粒子：把原先的方形气泡升级为柔焦光斑 */
.bg-bubbles li {
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05) 72%);
    box-shadow:
        0 0 26px rgba(255, 220, 190, 0.20),
        inset -6px -6px 18px rgba(138, 59, 82, 0.18);
    filter: blur(1px);
    will-change: transform, opacity;
}

.bg-bubbles li:nth-child(even) {
    background: radial-gradient(circle at 34% 30%, rgba(233, 189, 143, 0.55), rgba(233, 189, 143, 0.05) 72%);
    box-shadow:
        0 0 30px rgba(233, 189, 143, 0.22),
        inset -6px -6px 18px rgba(84, 34, 56, 0.18);
}

.bg-bubbles li:nth-child(3n) {
    filter: blur(2px);
}

/* 文字选中 */
::selection {
    background: rgba(233, 189, 143, 0.35);
    color: #fff;
}

/* 滚动条（桌面端细节） */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(233, 189, 143, 0.4);
}

/* 通用玻璃卡片 */
.glass {
    background: var(--glass);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid var(--glass-border);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* 香槟金文字 */
.gold {
    color: var(--gold);
    text-shadow: 0 0 26px rgba(233, 189, 143, 0.45);
}

/* 尊重系统"减弱动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}