/* Google Fonts (Inter + Noto Sans SC) 已迁移至 /css/google-fonts.css 本地加载 */

        * {
            scroll-behavior: smooth;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 99px;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.20);
            border-radius: 99px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.30);
        }

        body {
            color: #ffffff;
            font-family: "Inter", "Noto Sans SC", sans-serif;
            overflow-x: hidden;
            min-height: 100vh;
            transition: background 0.5s ease;
        }

        body.theme-light {
            color: #1f2937;
        }

        /* Ambient background glow orbs */
        .ambient-glow {
            position: fixed;
            border-radius: 50%;
            pointer-events: none;
            filter: blur(120px);
            z-index: 0;
            opacity: 0.4;
        }
        .ambient-glow-cyan {
            width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(6,182,212,0.18), transparent 70%);
            top: -200px; left: -100px;
            animation: ambient-drift 20s ease-in-out infinite alternate;
        }
        .ambient-glow-purple {
            width: 500px; height: 500px;
            background: radial-gradient(circle, rgba(168,85,247,0.15), transparent 70%);
            bottom: -150px; right: -100px;
            animation: ambient-drift 25s ease-in-out infinite alternate-reverse;
        }
        @keyframes ambient-drift {
            0% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(30px, 20px) scale(1.1); }
            100% { transform: translate(-20px, -10px) scale(0.95); }
        }

        #particleCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 0;
            pointer-events: none;
        }

        .glass {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 32px;
            transition: all 0.4s cubic-bezier(0.2, 0, 0.2, 1);
        }
        .glass-2 {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 10px;
            transition: all 0.4s cubic-bezier(0.2, 0, 0.2, 1);
        }
        .glass-2:hover {
            transform: translateY(-4px);
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            transition: all 0.35s cubic-bezier(0.2, 0, 0.2, 1);
        }
        .glass-card:hover {
            border-color: rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.06);
        }

        .glass:hover {
            transform: translateY(-4px);
        }

        .logo-font {
            font-weight: 900;
            font-style: italic;
            letter-spacing: 0.5em;
            white-space: nowrap;
            background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.15));
        }

        .bento-blue,
        .bento-emerald,
        .bento-purple,
        .bento-amber,
        .bento-rose,
        .bento-teal {
            box-shadow: 0 0 30px -10px rgba(255, 255, 255, 0.05);
        }

        .bento-blue {
            border: 1px solid rgba(59, 130, 246, 0.3);
            box-shadow: 0 0 30px -10px rgba(59, 130, 246, 0.2);
        }

        .bento-blue:hover {
            box-shadow: 0 0 45px -5px rgba(59, 130, 246, 0.35);
        }

        .bento-emerald {
            border: 1px solid rgba(16, 185, 129, 0.3);
            box-shadow: 0 0 30px -10px rgba(16, 185, 129, 0.2);
        }

        .bento-emerald:hover {
            box-shadow: 0 0 45px -5px rgba(16, 185, 129, 0.35);
        }

        .bento-purple {
            border: 1px solid rgba(168, 85, 247, 0.3);
            box-shadow: 0 0 30px -10px rgba(168, 85, 247, 0.2);
        }

        .bento-purple:hover {
            box-shadow: 0 0 45px -5px rgba(168, 85, 247, 0.35);
        }

        .bento-amber {
            border: 1px solid rgba(245, 158, 11, 0.3);
            box-shadow: 0 0 30px -10px rgba(245, 158, 11, 0.2);
        }

        .bento-amber:hover {
            box-shadow: 0 0 45px -5px rgba(245, 158, 11, 0.35);
        }

        .bento-rose {
            border: 1px solid rgba(244, 63, 94, 0.3);
            box-shadow: 0 0 30px -10px rgba(244, 63, 94, 0.2);
        }

        .bento-rose:hover {
            box-shadow: 0 0 45px -5px rgba(244, 63, 94, 0.35);
        }

        .bento-teal {
            border: 1px solid rgba(20, 184, 166, 0.3);
            box-shadow: 0 0 30px -10px rgba(20, 184, 166, 0.2);
        }

        .bento-teal:hover {
            box-shadow: 0 0 45px -5px rgba(20, 184, 166, 0.35);
        }

        [v-cloak] {
            display: none;
        }

        .carousel-wrap {
            position: relative;
            overflow: visible;
            padding-bottom: 60px;
        }

        .carousel-track {
            display: flex;
            gap: 1.5rem;
            transition: transform 0.4s ease-out;
            overflow-x: hidden;
            scrollbar-width: none;
        }

        .carousel-track::-webkit-scrollbar {
            display: none;
        }

        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(6px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.2s;
        }

        .carousel-btn:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.3);
        }

        .carousel-btn:disabled {
            opacity: 0.25;
            cursor: not-allowed;
        }

        .btn-prev {
            left: 4px;
        }

        .btn-next {
            right: 4px;
        }

        .safe-bottom {
            padding-bottom: calc(env(safe-area-inset-bottom) + 90px);
        }

        .fade-in {
            animation: fadeIn 0.6s ease-out both;
        }

        .animate-fadeIn {
            animation: fadeIn 0.3s ease-out both;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(16px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-up {
            animation: fadeUp 0.8s ease-out both;
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .delay-100 {
            animation-delay: 0.1s;
        }

        .delay-200 {
            animation-delay: 0.2s;
        }

        .delay-300 {
            animation-delay: 0.3s;
        }

        .auth-wrap {
            background: radial-gradient(circle at center, rgba(30, 41, 59, 0.5) 0%, #0a0f1a 70%);
            animation: loginLight 8s ease-in-out infinite alternate;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @keyframes loginLight {
            0% {
                filter: brightness(1);
            }

            100% {
                filter: brightness(1.15);
            }
        }

        input,
        textarea {
            transition: all 0.3s ease;
        }

        input:focus,
        textarea:focus {
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
        }

        .nav-link {
            position: relative;
            overflow: hidden;
        }

        .nav-link::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #fff, #cbd5e1);
            opacity: 0;
            transition: 0.3s;
            z-index: -1;
            border-radius: inherit;
        }

        .nav-link:hover::after {
            opacity: 1;
        }

        .nav-link:hover {
            color: #000 !important;
        }

        .img-preview-layer {
            z-index: 5000;
            backdrop-filter: blur(20px);
        }

        @keyframes previewFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .img-preview-img {
            max-height: 85vh;
            max-width: 90vw;
        }

        .mobile-swipe-item img,
        .mobile-swipe-item video {
            /* animation removed to prevent ghosting during navigation */
        }

        .notify-pop {
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.3) !important;
            z-index: 999999 !important;
        }

        .notify-triangle {
            background-color: #0b1020;
            border-left: 1px solid rgba(255, 255, 255, 0.08);
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .chart-bar {
            transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .hero-gradient-text {
            background: linear-gradient(90deg, #ffffff, #94a3b8, #38bdf8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .feature-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(56, 189, 248, 0.1);
        }

        .btn-primary {
            background: #fff;
            color: #000;
            font-weight: 700;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: #e2e8f0;
            transform: translateY(-2px);
        }

        .btn-outline {
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            transition: all 0.3s ease;
        }

        .btn-outline:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.4);
        }

        #qrcode-container canvas {
            width: 200px !important;
            height: 200px !important;
        }

        .qrcode-modal-content {
            background-color: rgba(0, 0, 0, 0.8);
        }

        .h-1:hover {
            height: 9px;
        }

        .msg-fade-enter-active,
        .msg-fade-leave-active {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .msg-fade-enter-from,
        .msg-fade-leave-to {
            opacity: 0;
            transform: translateY(-20px) scale(0.9);
            filter: blur(4px);
        }

        /* 歌词滚动隐藏滚动条 */
        .lyric-scroll::-webkit-scrollbar {
            display: none;
        }

        .lyric-scroll {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* 当前歌词行：渐变文字 + 光晕 */
        .lyric-active {
            background-image: linear-gradient(135deg, #c084fc, #67e8f9);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.35));
        }
        .lyric-active::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 12px;
            background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
            pointer-events: none;
        }

        /* 编辑模式卡片标识 */
        .card-editing {
            cursor: grab;
            outline: 1.5px dashed rgba(168, 85, 247, 0.3);
            outline-offset: 2px;
        }
        .card-editing:active { cursor: grabbing; }

        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
/* 卡片横向流光扫边 */
.card-shine {
    position: relative;
    overflow: hidden;
}
.card-shine::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(56,189,248,0.04), transparent);
    animation: shine-sweep 8s infinite linear;
    pointer-events: none;
    z-index: 1;
}
@keyframes shine-sweep {
    0% { left: -120%; }
    100% { left: 120%; }
}

/* 悬浮上浮 + 对应色系外发光 */
.card-hover-lift {
    transition: all 0.5s cubic-bezier(0.2,0,0.2,1);
}
.card-hover-lift:hover {
    transform: translateY(-10px) scale(1.02);
}
/* 分色系悬浮光晕 */
.bento-blue.card-hover-lift:hover {
    box-shadow: 0 0 40px rgba(96, 165, 250, 0.22) !important;
}
.bento-emerald.card-hover-lift:hover {
    box-shadow: 0 0 40px rgba(52, 211, 153, 0.22) !important;
}
.bento-purple.card-hover-lift:hover {
    box-shadow: 0 0 40px rgba(192, 132, 252, 0.22) !important;
}
.bento-amber.card-hover-lift:hover {
    box-shadow: 0 0 40px rgba(251, 191, 36, 0.22) !important;
}
.bento-rose.card-hover-lift:hover {
    box-shadow: 0 0 40px rgba(244, 63, 94, 0.22) !important;
}
.bento-teal.card-hover-lift:hover {
    box-shadow: 0 0 40px rgba(20, 184, 166, 0.22) !important;
}
.bento-purple {
    box-shadow: 0 0 30px rgba(192, 132, 252, 0.12);
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* 渐变标题文字 */
.hero-gradient-text {
    background: linear-gradient(120deg, #ffffff, #94a3b8, #38bdf8, #a78bfa);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
    @keyframes animateCard {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-card { animation: animateCard 0.5s ease both; }
    @keyframes music-bar {
    0% { height: 4px; }
    100% { height: 12px; }
}
/* ── 视图切换动画 ── */
.view-transition {
    animation: viewFadeIn 0.4s ease-out both;
}
@keyframes viewFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── 控制台增强背景 ── */
.logs-bg-grid {
    background-image:
        linear-gradient(rgba(56,189,248,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56,189,248,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ── 控制台扫描线 ── */
@keyframes scanLine {
    0% { top: -2px; }
    100% { top: 100%; }
}

/* ── 影音模块动画与样式 (从 Media.js 模板迁移) ── */
@keyframes shimmer-line {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes vinyl-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes eq-bar {
    0%, 100% { height: 4px; }
    25% { height: 14px; }
    50% { height: 8px; }
    75% { height: 18px; }
}
@keyframes playing-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}
.section-gradient-line {
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, var(--line-color, rgba(168,85,247,0.3)), transparent);
    position: relative;
    overflow: hidden;
}
.section-gradient-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: shimmer-line 3s ease-in-out infinite;
}
.vinyl-disc-sm {
    transition: all 0.3s ease;
}
.vinyl-disc-sm.vinyl-spinning {
    animation: vinyl-spin 3s linear infinite;
}
.eq-bar {
    width: 3px;
    border-radius: 1.5px;
    background: linear-gradient(to top, #a855f7, #c084fc);
    display: inline-block;
    animation: eq-bar 0.8s ease-in-out infinite;
}
.music-card {
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(168,85,247,0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.music-card:hover {
    background: rgba(168,85,247,0.06);
    border-color: rgba(168,85,247,0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(168,85,247,0.1);
}
.music-card.now-playing {
    border-color: rgba(168,85,247,0.3);
    background: rgba(168,85,247,0.06);
}
.playing-dot {
    animation: playing-dot-pulse 1.5s ease-in-out infinite;
}
.section-header-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 12px;
    flex-shrink: 0;
}


@keyframes float-shape{0%,100%{transform:translateY(0) translateX(0) rotate(0deg)}25%{transform:translateY(-25px) translateX(12px) rotate(4deg)}50%{transform:translateY(-8px) translateX(-8px) rotate(-3deg)}75%{transform:translateY(-30px) translateX(6px) rotate(2deg)}}
@keyframes twinkle{0%,100%{opacity:0.02}50%{opacity:0.08}}
@keyframes float-text{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-15px) rotate(var(--r,0deg))}}
@keyframes border-flow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes star-fall{0%{transform:translate3d(0,-8vh,0) rotate(0deg);opacity:0}10%{opacity:1}80%{opacity:1}100%{transform:translate3d(var(--sway,24px),108vh,0) rotate(220deg);opacity:0}}
.star-rain{animation:star-fall var(--dur,2.6s) ease-in var(--del,0s) both;pointer-events:none}
@keyframes cursor-star{0%{opacity:0;transform:scale(0) rotate(0deg)}25%{opacity:1;transform:scale(1) rotate(45deg)}100%{opacity:0;transform:scale(.1) rotate(160deg) translateY(-18px)}}
.cursor-star{position:fixed;pointer-events:none;line-height:1;z-index:9990;animation:cursor-star var(--dur,.9s) ease-out forwards}

.float-shape{animation:float-shape var(--dur,20s) ease-in-out infinite;animation-delay:var(--del,0s);pointer-events:none}
.twinkle-star{animation:twinkle var(--dur,4s) ease-in-out infinite;animation-delay:var(--del,0s);pointer-events:none}
.watermark-text{animation:float-text var(--dur,25s) ease-in-out infinite;animation-delay:var(--del,0s);pointer-events:none;user-select:none}
.ambient-spot { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; }

/* 玻璃拟态面板 */
.glass-panel {
    background: rgba(12, 16, 28, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 40px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* 3D 玻璃窗反光层 */
.mac-glare {
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,0.08) 0%, transparent 50%);
    mix-blend-mode: screen;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 50;
}

/* 流光边框按钮 */
.btn-glow {
    position: relative;
    background: white;
    color: black;
    z-index: 1;
}
.btn-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #a855f7, #34d399, #22d3ee);
    background-size: 200% auto;
    animation: border-flow 3s linear infinite;
    z-index: -1;
    filter: blur(10px);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.btn-glow:hover::before { opacity: 0.8; }

/* ========== 新粒子效果替代雪花 ========== */
.simple-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: float var(--dur) infinite ease-in-out;
    animation-delay: var(--delay);
}
@keyframes float {
    0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
    50% { transform: translateY(-20px) translateX(10px); opacity: 0.8; }
}

/* 全局玻璃通用样式 */
.glass-panel {
    background: rgba(15,18,30,0.65);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.10);
}


.ambient-spot {
    position: fixed;
    border-radius: 999px;
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
}
.twinkle-star {
    animation: twinkle var(--dur)s ease-in-out infinite var(--del)s;
}

/* 入场渐入动画 */
.fade-up {
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 移动端触摸优化 */
@media (max-width:768px) {
    .group:active {
        transform: translateY(-6px) !important;
    }
}
/* 消除移动端点击高亮 */
* {
    -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════
   Light Theme Overrides (toggled by .theme-light on body)
   Text/bg/border scoped to `main` content area.
   Sidebar & bottom nav excluded via .theme-dark-always.
   ═══════════════════════════════════════════ */

/* Smooth transition for theme switch */
body.theme-light,
body.theme-light * {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

body.theme-light {
    color: #1f2937 !important;
    background-color: #f5f5f7 !important;
}

/* ── Text color: white → dark (scoped to main content) ── */
body.theme-light main .text-white { color: #1f2937 !important; }
body.theme-light main .text-white\/90 { color: rgba(17,24,39,0.9) !important; }
body.theme-light main .text-white\/85 { color: rgba(17,24,39,0.85) !important; }
body.theme-light main .text-white\/80 { color: rgba(17,24,39,0.8) !important; }
body.theme-light main .text-white\/70 { color: rgba(55,65,81,0.7) !important; }
body.theme-light main .text-white\/60 { color: rgba(75,85,99,0.6) !important; }
body.theme-light main .text-white\/50 { color: rgba(75,85,99,0.8) !important; }
body.theme-light main .text-white\/40 { color: rgba(107,114,128,0.8) !important; }
body.theme-light main .text-white\/35 { color: rgba(107,114,128,0.7) !important; }
body.theme-light main .text-white\/30 { color: rgba(107,114,128,0.7) !important; }
body.theme-light main .text-white\/25 { color: rgba(156,163,175,0.8) !important; }
body.theme-light main .text-white\/20 { color: rgba(209,213,219,0.8) !important; }
body.theme-light main .text-white\/15 { color: rgba(209,213,219,0.7) !important; }
body.theme-light main .text-white\/10 { color: rgba(229,231,235,0.7) !important; }

/* ── Background: white-alpha → dark-alpha (scoped to main) ── */
body.theme-light main .bg-white\/5 { background: rgba(0,0,0,0.04) !important; }
body.theme-light main .bg-white\/10 { background: rgba(0,0,0,0.06) !important; }
body.theme-light main .bg-white\/20 { background: rgba(0,0,0,0.08) !important; }
body.theme-light main .bg-white\/30 { background: rgba(0,0,0,0.1) !important; }
body.theme-light main .bg-white\/40 { background: rgba(0,0,0,0.12) !important; }

/* ── Border: white-alpha → dark-alpha (scoped to main) ── */
body.theme-light main .border-white\/5 { border-color: rgba(0,0,0,0.06) !important; }
body.theme-light main .border-white\/10 { border-color: rgba(0,0,0,0.08) !important; }
body.theme-light main .border-white\/20 { border-color: rgba(0,0,0,0.12) !important; }
body.theme-light main .border-white\/30 { border-color: rgba(0,0,0,0.18) !important; }
body.theme-light main .border-white\/40 { border-color: rgba(0,0,0,0.22) !important; }

/* ── Glass effects (scoped to main) ── */
body.theme-light main .glass {
    background: rgba(255,255,255,0.60) !important;
    border-color: rgba(0,0,0,0.06) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.04) !important;
}
body.theme-light main .glass-panel {
    background: rgba(255,255,255,0.80) !important;
    border-color: rgba(0,0,0,0.06) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.05) !important;
}

/* ── Logo font for light mode (main content only) ── */
body.theme-light main .logo-font {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: none;
}

/* ── Scrollbar ── */
body.theme-light ::-webkit-scrollbar-track { background: rgba(0,0,0,0.03); }
body.theme-light ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
body.theme-light ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
body.theme-light .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

/* ── Modals: adapt for light mode ── */
body.theme-light .fixed.inset-0.bg-black\/60 .glass,
body.theme-light .fixed.inset-0.bg-black\/60 .glass-panel {
    background: rgba(255,255,255,0.97) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important;
    backdrop-filter: none !important;
}
body.theme-light .fixed.inset-0.bg-black\/60 .text-white { color: #1f2937 !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .text-white\/90 { color: rgba(17,24,39,0.9) !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .text-white\/80 { color: rgba(17,24,39,0.8) !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .text-white\/70 { color: rgba(55,65,81,0.7) !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .text-white\/60 { color: rgba(75,85,99,0.6) !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .text-white\/50 { color: rgba(107,114,128,0.8) !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .text-white\/40 { color: rgba(107,114,128,0.7) !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .text-white\/30 { color: rgba(156,163,175,0.8) !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .text-white\/20 { color: rgba(209,213,219,0.8) !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .bg-white\/5 { background: rgba(0,0,0,0.03) !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .bg-white\/10 { background: rgba(0,0,0,0.05) !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .bg-white\/20 { background: rgba(0,0,0,0.08) !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .bg-black\/20 { background: rgba(0,0,0,0.04) !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .bg-black\/30 { background: rgba(0,0,0,0.06) !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .bg-black\/40 { background: rgba(0,0,0,0.06) !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .border-white\/10 { border-color: rgba(0,0,0,0.08) !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .border-white\/20 { border-color: rgba(0,0,0,0.12) !important; }
body.theme-light .fixed.inset-0.bg-black\/60 .border-white\/30 { border-color: rgba(0,0,0,0.15) !important; }

/* ── Notify popup stays dark ── */
body.theme-light .notify-pop {
    background: rgba(11,16,32,0.97) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
body.theme-light .notify-pop .text-white { color: #ffffff !important; }
body.theme-light .notify-pop .text-white\/90 { color: rgba(255,255,255,0.9) !important; }
body.theme-light .notify-pop .text-white\/50 { color: rgba(255,255,255,0.5) !important; }
body.theme-light .notify-pop .text-white\/40 { color: rgba(255,255,255,0.4) !important; }
body.theme-light .notify-pop .bg-white\/10 { background: rgba(255,255,255,0.1) !important; }
body.theme-light .notify-pop .bg-white\/5 { background: rgba(255,255,255,0.05) !important; }
body.theme-light .notify-triangle {
    background-color: #0b1020 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* ── QR code modal stays dark ── */
body.theme-light .fixed.z-\[4000\] .glass {
    background: rgba(12,16,28,0.95) !important;
    border-color: rgba(255,255,255,0.10) !important;
}
body.theme-light .fixed.z-\[4000\] .text-white { color: #ffffff !important; }
body.theme-light .fixed.z-\[4000\] .text-white\/90 { color: rgba(255,255,255,0.9) !important; }
body.theme-light .fixed.z-\[4000\] .text-white\/30 { color: rgba(255,255,255,0.3) !important; }

/* ── Back to top button (rocket icon) ── */
body.theme-light button.fixed[class*="bottom-"] {
    background: rgba(255,255,255,0.75) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
    color: rgba(55,65,81,0.8) !important;
}
body.theme-light button.fixed[class*="bottom-"]:hover {
    background: rgba(255,255,255,0.9) !important;
    color: #059669 !important;
}

/* ── Focus glow override ── */
body.theme-light input:focus,
body.theme-light textarea:focus {
    box-shadow: 0 0 20px rgba(0,0,0,0.08);
}

/* ── Music card: visible in light mode ── */
body.theme-light .music-card {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(168,85,247,0.12) !important;
    backdrop-filter: none !important;
}
body.theme-light .music-card:hover {
    background: rgba(168,85,247,0.06) !important;
}
body.theme-light .music-card.now-playing {
    border-color: rgba(168,85,247,0.25) !important;
    background: rgba(168,85,247,0.06) !important;
}

/* ── Glass card + glass-2: visible in light mode ── */
body.theme-light .glass-card {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.06) !important;
    backdrop-filter: none !important;
}
body.theme-light .glass-2 {
    background: rgba(255,255,255,0.60) !important;
    border-color: rgba(0,0,0,0.06) !important;
    backdrop-filter: none !important;
}

/* ── Dark bg overrides in main ── */
body.theme-light main .bg-black\/10 { background: rgba(0,0,0,0.03) !important; }
body.theme-light main .bg-black\/20 { background: rgba(0,0,0,0.04) !important; }
body.theme-light main .bg-black\/30 { background: rgba(0,0,0,0.05) !important; }
body.theme-light main .bg-black\/40 { background: rgba(0,0,0,0.06) !important; }

/* ── Reduce all backdrop-blur in light mode ── */
body.theme-light main [class*="backdrop-blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── Notify popup: light mode override ── */
body.theme-light .notify-pop {
    background: rgba(255,255,255,0.98) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
}
body.theme-light .notify-pop .bg-\[\#0b1020\] {
    background: rgba(255,255,255,0.98) !important;
}
body.theme-light .notify-pop .bg-\[\#0e1525\] {
    background: rgba(240,253,244,0.6) !important;
}
body.theme-light .notify-pop .text-white { color: #1f2937 !important; }
body.theme-light .notify-pop .text-white\/90 { color: rgba(17,24,39,0.9) !important; }
body.theme-light .notify-pop .text-white\/50 { color: rgba(107,114,128,0.8) !important; }
body.theme-light .notify-pop .text-white\/40 { color: rgba(107,114,128,0.7) !important; }
body.theme-light .notify-pop .text-white\/30 { color: rgba(156,163,175,0.8) !important; }
body.theme-light .notify-pop .bg-white\/10 { background: rgba(0,0,0,0.04) !important; }
body.theme-light .notify-pop .bg-white\/5 { background: rgba(0,0,0,0.02) !important; }
body.theme-light .notify-pop .border-white\/5 { border-color: rgba(0,0,0,0.06) !important; }
body.theme-light .notify-triangle {
    background-color: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* ── Notes cards: Xiaohongshu-style light mode ── */
body.theme-light main .rounded-xl.bg-white\/45 {
    background: rgba(255,255,255,0.50) !important;
    border-color: rgba(0,0,0,0.04) !important;
}
body.theme-light main .rounded-xl.bg-white\/45:hover {
    background: rgba(255,255,255,0.65) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
body.theme-light main .bg-black\/20 {
    background: rgba(0,0,0,0.03) !important;
}

/* ── Mood editor modal: light mode ── */
body.theme-light .fixed.z-\[1000\] {
    background: rgba(0,0,0,0.15) !important;
    backdrop-filter: blur(4px) !important;
}
body.theme-light .fixed.z-\[1000\] .glass {
    background: rgba(255,255,255,0.98) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important;
    backdrop-filter: none !important;
}
body.theme-light .fixed.z-\[1000\] .text-white { color: #1f2937 !important; }
body.theme-light .fixed.z-\[1000\] .text-white\/90 { color: rgba(17,24,39,0.9) !important; }
body.theme-light .fixed.z-\[1000\] .text-white\/80 { color: rgba(17,24,39,0.8) !important; }
body.theme-light .fixed.z-\[1000\] .text-white\/70 { color: rgba(55,65,81,0.7) !important; }
body.theme-light .fixed.z-\[1000\] .text-white\/60 { color: rgba(75,85,99,0.6) !important; }
body.theme-light .fixed.z-\[1000\] .text-white\/50 { color: rgba(107,114,128,0.8) !important; }
body.theme-light .fixed.z-\[1000\] .text-white\/40 { color: rgba(107,114,128,0.7) !important; }
body.theme-light .fixed.z-\[1000\] .text-white\/30 { color: rgba(156,163,175,0.8) !important; }
body.theme-light .fixed.z-\[1000\] .text-white\/25 { color: rgba(156,163,175,0.7) !important; }
body.theme-light .fixed.z-\[1000\] .bg-white\/5 { background: rgba(0,0,0,0.03) !important; }
body.theme-light .fixed.z-\[1000\] .bg-white\/10 { background: rgba(0,0,0,0.06) !important; }
body.theme-light .fixed.z-\[1000\] .border-white\/10 { border-color: rgba(0,0,0,0.08) !important; }
body.theme-light .fixed.z-\[1000\] .border-white\/20 { border-color: rgba(0,0,0,0.12) !important; }
body.theme-light .fixed.z-\[1000\] textarea {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #1f2937 !important;
}
body.theme-light .fixed.z-\[1000\] textarea::placeholder { color: rgba(156,163,175,0.8) !important; }

/* ── Chat room: light mode — remove dark backgrounds & gradients ── */
body.theme-light main .bg-gradient-to-b.from-transparent.to-black\/20 {
    background: transparent !important;
}
body.theme-light main .bg-black\/40 {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.06) !important;
}
body.theme-light main .bg-black\/20 {
    background: rgba(0,0,0,0.02) !important;
}

/* ── Music player bar: light mode — full adaptation ── */
body.theme-light .fixed.z-\[3001\] {
    background: rgba(255,255,255,0.95) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 -4px 30px rgba(0,0,0,0.06) !important;
    backdrop-filter: none !important;
}
body.theme-light .fixed.z-\[3001\] .glass {
    background: rgba(255,255,255,0.95) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 -4px 30px rgba(0,0,0,0.06) !important;
    backdrop-filter: none !important;
}
body.theme-light .fixed.z-\[3001\] .text-white { color: #1f2937 !important; }
body.theme-light .fixed.z-\[3001\] .text-white\/90 { color: rgba(17,24,39,0.9) !important; }
body.theme-light .fixed.z-\[3001\] .text-white\/80 { color: rgba(17,24,39,0.8) !important; }
body.theme-light .fixed.z-\[3001\] .text-white\/60 { color: rgba(55,65,81,0.9) !important; }
body.theme-light .fixed.z-\[3001\] .text-white\/50 { color: rgba(55,65,81,0.8) !important; }
body.theme-light .fixed.z-\[3001\] .text-white\/40 { color: rgba(107,114,128,0.9) !important; }
body.theme-light .fixed.z-\[3001\] .text-white\/30 { color: rgba(107,114,128,0.8) !important; }
body.theme-light .fixed.z-\[3001\] .text-white\/25 { color: rgba(107,114,128,0.7) !important; }
body.theme-light .fixed.z-\[3001\] .text-white\/15 { color: rgba(107,114,128,0.6) !important; }
body.theme-light .fixed.z-\[3001\] .bg-white\/5 { background: rgba(0,0,0,0.04) !important; }
body.theme-light .fixed.z-\[3001\] .bg-white\/10 { background: rgba(0,0,0,0.06) !important; }
body.theme-light .fixed.z-\[3001\] .bg-black\/60 { background: rgba(0,0,0,0.06) !important; }

/* ── Music full-screen panel: light mode ── */
body.theme-light .fixed.z-\[3000\] {
    background: linear-gradient(160deg, #f5f5f7 0%, #f0f0f2 40%, #e8e8ed 100%) !important;
}
body.theme-light .fixed.z-\[3000\] .text-white { color: #1f2937 !important; }
body.theme-light .fixed.z-\[3000\] .text-white\/90 { color: rgba(17,24,39,0.9) !important; }
body.theme-light .fixed.z-\[3000\] .text-white\/50 { color: rgba(107,114,128,0.8) !important; }
body.theme-light .fixed.z-\[3000\] .text-white\/40 { color: rgba(107,114,128,0.7) !important; }
body.theme-light .fixed.z-\[3000\] .text-white\/30 { color: rgba(156,163,175,0.8) !important; }
body.theme-light .fixed.z-\[3000\] .text-white\/25 { color: rgba(156,163,175,0.7) !important; }
body.theme-light .fixed.z-\[3000\] .text-white\/20 { color: rgba(209,213,219,0.8) !important; }

/* ── Sidebar: light mode icon/text colors ── */
body.theme-light nav.bg-white\/90 .text-white\/20 { color: rgba(156,163,175,1) !important; }
body.theme-light nav.bg-white\/90 .text-white:not(\/20):not(\/30):not(\/40):not(\/50):not(\/60):not(\/70) { color: #1f2937 !important; }
body.theme-light nav.bg-white\/90 .group-hover\:text-white\/70:hover { color: rgba(55,65,81,0.7) !important; }
body.theme-light nav.bg-white\/90 .logo-font {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.theme-light nav.bg-white\/90 .text-white\/20:hover { color: rgba(55,65,81,0.8) !important; }

/* ── Buttons in light mode ── */
body.theme-light main .btn-outline {
    border-color: rgba(16,185,129,0.3);
    color: #059669;
}
body.theme-light main .btn-outline:hover {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.5);
    color: #047857;
}

/* ── Main content: no extra grid background ── */

/* ═══════════════════════════════════════════
   柯基萌宠 — Cute chibi CSS-only animated pet (tech edition)
   ═══════════════════════════════════════════ */
.corgi-pet {
    position: fixed;
    z-index: 888;
    cursor: grab;
    animation: corgiFloat 3s ease-in-out infinite;
    transition: filter 0.3s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    filter: drop-shadow(0 4px 14px rgba(210, 150, 60, 0.3));
    transform-origin: center center;
    transform: scale(0.65);
    touch-action: none;
}
.corgi-pet.dragging {
    cursor: grabbing;
    animation: none !important;
    transition: none;
    filter: drop-shadow(0 8px 20px rgba(210, 150, 60, 0.45));
}
.corgi-pet:hover {
    filter: drop-shadow(0 6px 20px rgba(210, 150, 60, 0.45));
}
.corgi-pet.corgi-bounce {
    animation: corgiJump 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes corgiFloat {
    0%, 100% { transform: scale(0.65) translateY(0); }
    25% { transform: scale(0.65) translateY(-6px); }
    50% { transform: scale(0.65) translateY(-10px); }
    75% { transform: scale(0.65) translateY(-6px); }
}
@keyframes corgiJump {
    0% { transform: scale(0.65) translateY(0) rotate(0deg); }
    15% { transform: scale(0.7) translateY(-8px) rotate(-3deg); }
    35% { transform: scale(0.72) translateY(-36px) rotate(-10deg); }
    50% { transform: scale(0.7) translateY(-40px) rotate(6deg); }
    70% { transform: scale(0.66) translateY(-12px) rotate(-4deg); }
    85% { transform: scale(0.64) translateY(4px) rotate(2deg); }
    100% { transform: scale(0.65) translateY(0) rotate(0deg); }
}

/* Speech bubble */
.corgi-msg-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 999;
    transform: translateX(-50%);
    margin-bottom: 10px;
    background: linear-gradient(135deg, #2d2d4e 0%, #1a1a35 100%);
    color: #fff;
    padding: 5px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 3px 14px rgba(210, 150, 60, 0.2);
    pointer-events: none;
    border: 1.5px solid rgba(0, 200, 220, 0.2);
}
.corgi-msg-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #2d2d4e;
}
.corgi-msg-enter-active { animation: msgPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.corgi-msg-leave-active { animation: msgPop 0.2s ease reverse; }
@keyframes msgPop {
    from { opacity: 0; transform: translateX(-50%) scale(0.4) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}

/* Body wrapper */
.corgi-body {
    position: relative;
    width: 86px;
    height: 54px;
}

/* Torso — elongated corgi body, orange fur */
.corgi-torso {
    position: absolute;
    bottom: 0;
    left: 4px;
    width: 68px;
    height: 34px;
    background: linear-gradient(160deg, #f0a845 0%, #e08a30 50%, #c87620 100%);
    border-radius: 16px 16px 12px 12px;
    box-shadow: inset -2px -2px 0 rgba(160, 90, 20, 0.35), inset 2px 2px 0 rgba(255, 210, 120, 0.3);
}
/* White belly with subtle tech glow */
.corgi-torso::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8px;
    width: 52px;
    height: 14px;
    background: linear-gradient(180deg, #fff8ef 0%, #fff 100%);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 2px 8px rgba(0, 200, 220, 0.08);
}

/* Stubby corgi legs */
.corgi-leg {
    position: absolute;
    bottom: -9px;
    width: 10px;
    height: 13px;
    background: linear-gradient(180deg, #e09030 0%, #c87620 100%);
    border-radius: 4px 4px 6px 6px;
    animation: corgiWalk 0.6s ease-in-out infinite alternate;
}
.corgi-leg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -1px;
    width: 12px;
    height: 5px;
    background: #fff;
    border-radius: 0 0 6px 6px;
}
.corgi-leg-fl { left: 10px; animation-delay: 0s; }
.corgi-leg-fr { left: 22px; animation-delay: 0.15s; }
.corgi-leg-bl { right: 18px; animation-delay: 0.3s; }
.corgi-leg-br { right: 8px; animation-delay: 0.45s; }
@keyframes corgiWalk {
    0% { height: 13px; }
    100% { height: 10px; }
}

/* Fluffy corgi tail */
.corgi-tail {
    position: absolute;
    bottom: 22px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 40% 40%, #f0a845, #c87620);
    border-radius: 50% 50% 50% 20%;
    transform-origin: bottom left;
    animation: corgiWag 0.5s ease-in-out infinite alternate;
    box-shadow: 0 0 6px rgba(0, 200, 220, 0.15);
}
@keyframes corgiWag {
    0% { transform: rotate(-20deg) scale(1); }
    100% { transform: rotate(30deg) scale(1.1); }
}

/* Head — smaller corgi head, rounder */
.corgi-head {
    position: absolute;
    top: -14px;
    left: 3px;
    width: 36px;
    height: 33px;
    background: linear-gradient(150deg, #f5b855 0%, #e09030 60%, #d08025 100%);
    border-radius: 50% 50% 46% 46%;
    z-index: 2;
    box-shadow: inset 1px 1px 0 rgba(255, 210, 120, 0.4);
}

/* Triangle corgi ears — rounded tips */
.corgi-ear {
    position: absolute;
    top: -10px;
    width: 13px;
    height: 15px;
    background: linear-gradient(170deg, #f0a845 0%, #d08025 100%);
    border-radius: 50% 50% 0 0;
    transform-origin: bottom center;
    animation: corgiEarTwitch 4s ease-in-out infinite;
}
.corgi-ear::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 3px;
    width: 7px;
    height: 7px;
    background: #ffb8c6;
    border-radius: 50% 50% 0 0;
    opacity: 0.5;
}
.corgi-ear-l { left: 1px; transform: rotate(-12deg); }
.corgi-ear-r { right: 1px; transform: rotate(12deg); animation-delay: 2s; }
@keyframes corgiEarTwitch {
    0%, 88%, 100% { transform: rotate(-12deg); }
    91% { transform: rotate(-20deg); }
    94% { transform: rotate(-6deg); }
    97% { transform: rotate(-14deg); }
}
.corgi-ear-r { animation-name: corgiEarTwitchR; }
@keyframes corgiEarTwitchR {
    0%, 88%, 100% { transform: rotate(12deg); }
    91% { transform: rotate(20deg); }
    94% { transform: rotate(6deg); }
    97% { transform: rotate(14deg); }
}

/* Face */
.corgi-face {
    position: absolute;
    top: 5px;
    left: 2px;
    width: 32px;
    height: 26px;
}

/* White muzzle — prominent corgi white face */
.corgi-face::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 2px;
    width: 28px;
    height: 16px;
    background: linear-gradient(180deg, #fff 0%, #fff5e8 100%);
    border-radius: 50% 50% 45% 45%;
}

/* Cute eyes */
.corgi-eye {
    position: absolute;
    top: 5px;
    width: 8px;
    height: 9px;
    background: #1a1a2e;
    border-radius: 50%;
    z-index: 1;
    animation: corgiBlink 4s ease-in-out infinite;
}
.corgi-eye-l { left: 5px; }
.corgi-eye-r { right: 5px; }
/* Eye highlight */
.corgi-pupil {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
}
@keyframes corgiBlink {
    0%, 93%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
    97% { transform: scaleY(1); }
}

/* Nose */
.corgi-nose {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 5px;
    background: #1a1a2e;
    border-radius: 50% 50% 50% 50%;
    z-index: 1;
}
.corgi-nose::after {
    content: '';
    position: absolute;
    top: 0.5px;
    left: 2px;
    width: 3px;
    height: 2px;
    background: rgba(255,255,255,0.35);
    border-radius: 50%;
}

/* Mouth — w-shaped smile */
.corgi-mouth {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 4px;
    z-index: 1;
}
.corgi-mouth::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 4px;
    border-bottom: 1.5px solid #c47a20;
    border-radius: 0 0 50% 50%;
}
.corgi-mouth::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 4px;
    border-bottom: 1.5px solid #c47a20;
    border-radius: 0 0 50% 50%;
}

/* Blush */
.corgi-blush {
    position: absolute;
    top: 15px;
    width: 8px;
    height: 5px;
    background: radial-gradient(ellipse, rgba(255, 140, 140, 0.55), rgba(255, 160, 160, 0.2));
    border-radius: 50%;
    z-index: 1;
    animation: corgiBlush 3s ease-in-out infinite alternate;
}
.corgi-blush-l { left: 0px; }
.corgi-blush-r { right: 0px; }
@keyframes corgiBlush {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* Tech visor — small holographic strip on forehead */
.corgi-head::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(0, 220, 240, 0.6), transparent);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(0, 220, 240, 0.4);
    animation: corgiVisorPulse 3s ease-in-out infinite;
    z-index: 3;
}
@keyframes corgiVisorPulse {
    0%, 100% { opacity: 0.5; width: 14px; }
    50% { opacity: 1; width: 18px; }
}

/* Tail glow accent */
.corgi-tail::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 3px;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(0, 220, 240, 0.3), transparent);
    border-radius: 50%;
}

/* Light mode adjustments */
body.theme-light .corgi-pet {
    filter: drop-shadow(0 4px 14px rgba(210, 150, 60, 0.3));
}
body.theme-light .corgi-msg-bubble {
    background: linear-gradient(135deg, #2d2d4e 0%, #1a1a35 100%);
    color: #fff;
    border-color: rgba(255,255,255,0.1);
}
body.theme-light .corgi-msg-bubble::after { border-top-color: #2d2d4e; }

/* ═══════════════════════════════════════════
   Mobile Swipe Photo Viewer — WeChat-style
   ═══════════════════════════════════════════ */
.mobile-swipe-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    touch-action: pan-y;
    display: flex;
    align-items: center;
}
@media (min-width: 768px) {
    .mobile-swipe-container {
        display: none !important;
    }
}
.mobile-swipe-track {
    display: flex;
    align-items: center;
    will-change: transform;
    height: 100%;
}
.mobile-swipe-item {
    width: 100vw;
    min-width: 100vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════
   交互增强 — Micro-interactions
   ═══════════════════════════════════════════ */

/* Buttons: subtle pulse on hover */
main button.glass {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
main button.glass:hover {
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(56,189,248,0.15);
}
main button.glass:active {
    transform: scale(0.95);
}

/* Cards: lift on hover */
main .glass, main .glass-panel, main .glass-card {
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
main .glass:hover, main .glass-panel:hover, main .glass-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

/* Smooth page transitions */
.fade-in {
    animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Input focus glow */
input:focus, textarea:focus {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Scrollbar smooth appearance */
main::-webkit-scrollbar {
    width: 4px;
}
main::-webkit-scrollbar-thumb {
    background: rgba(56,189,248,0.2);
    border-radius: 4px;
}
main::-webkit-scrollbar-thumb:hover {
    background: rgba(56,189,248,0.4);
}
/* 隐藏视频全屏按钮，使用自定义网页内全屏 */
video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}
video::-moz-fullscreen-btn {
    display: none !important;
}

/* ===== Apple-Style Animations ===== */

/* Scroll-triggered reveal */
.apple-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.apple-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
.apple-reveal[data-delay="100"] { transition-delay: 0.1s; }
.apple-reveal[data-delay="200"] { transition-delay: 0.2s; }
.apple-reveal[data-delay="300"] { transition-delay: 0.3s; }
.apple-reveal[data-delay="400"] { transition-delay: 0.4s; }
.apple-reveal[data-delay="500"] { transition-delay: 0.5s; }

.apple-reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.apple-reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.apple-reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.apple-reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.apple-reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.apple-reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Scroll indicator bounce */
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(8px); opacity: 1; }
}
.scroll-indicator {
    animation: scrollBounce 2s ease-in-out infinite;
}

/* Apple glass header */
.apple-glass-nav {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* Feature card tilt container */
.apple-feature-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.4s ease;
    transform-style: preserve-3d;
}
.apple-feature-card:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* Gradient text shimmer */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.text-shimmer {
    background-size: 200% auto;
    animation: gradientShift 6s ease infinite;
}

/* Floating animation for decorative elements */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}
.float-slow { animation: float 6s ease-in-out infinite; }
.float-medium { animation: float 4s ease-in-out infinite; }
.float-fast { animation: float 3s ease-in-out infinite; }

/* Spotlight card */
.spotlight-card {
    --sx: 50%;
    --sy: 50%;
}

/* ========== 刘海屏/挖孔屏兼容 ========== */
/* 安全区域适配 */
@supports (padding: env(safe-area-inset-top)) {
    /* 顶部安全区域 */
    .safe-top {
        padding-top: env(safe-area-inset-top);
    }
    
    /* 底部安全区域 */
    .safe-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* 左右安全区域 */
    .safe-left {
        padding-left: env(safe-area-inset-left);
    }
    
    .safe-right {
        padding-right: env(safe-area-inset-right);
    }
    
    /* 全方位安全区域 */
    .safe-area {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    /* 固定定位元素适配 */
    .fixed-top {
        top: env(safe-area-inset-top);
    }
    
    .fixed-bottom {
        bottom: env(safe-area-inset-bottom);
    }
}

/* iOS Safari 底部安全区域 */
@supports (-webkit-touch-callout: none) {
    .ios-safe-bottom {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    
    /* 底部导航栏适配 */
    .bottom-nav {
        padding-bottom: max(8px, calc(env(safe-area-inset-bottom) - 8px));
    }
}

/* ========== 横屏适配 ========== */
@media screen and (orientation: landscape) and (max-height: 500px) {
    /* 缩小字体 */
    html {
        font-size: 14px;
    }
    
    /* 缩小标题 */
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
    }
    
    /* 减小间距 */
    .landscape-compact {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    
    /* 底部菜单栏缩小 */
    .md\:hidden.fixed {
        height: 48px;
        bottom: 8px !important;
    }
    
    /* 内容区域适配 */
    .landscape-compact .mb-12,
    .landscape-compact .mb-10 {
        margin-bottom: 1rem !important;
    }
    
    /* 卡片缩小 */
    .landscape-compact .p-6 {
        padding: 0.75rem !important;
    }
}

/* 中等高度横屏 */
@media screen and (orientation: landscape) and (min-height: 501px) and (max-height: 700px) {
    html {
        font-size: 15px;
    }
    
    h1 {
        font-size: 1.75rem !important;
    }
}

/* ========== 横屏适配增强 ========== */
@media screen and (orientation: landscape) and (max-height: 500px) {
    /* 聊天室适配 */
    .chat-container {
        height: calc(100vh - 10px) !important;
    }
    
    /* 聊天输入框固定在底部 */
    .chat-input-area {
        position: sticky;
        bottom: 0;
        background: inherit;
    }
    
    /* 笔记卡片缩小 */
    .note-card {
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .note-card img {
        max-height: 120px;
    }
    
    /* 菜单栏更紧凑 */
    .md\:hidden.fixed.bottom-\[12px\] {
        height: 44px !important;
        bottom: 4px !important;
    }
    
    /* 减小所有卡片间距 */
    .grid > div {
        margin-bottom: 0.25rem;
    }
    
    /* 隐藏装饰性元素 */
    .ambient-spot,
    .watermark-text {
        display: none !important;
    }
}

/* 平板横屏 */
@media screen and (orientation: landscape) and (min-height: 501px) and (max-height: 800px) {
    .chat-container {
        height: calc(100vh - 100px) !important;
    }
}

/* ========== 横屏提示 ========== */
.landscape-mode::before {
    content: '请旋转手机至竖屏模式';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

.landscape-mode::after {
    content: '📱';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-40px);
    font-size: 48px;
    z-index: 100000;
    animation: rotatePhone 2s ease-in-out infinite;
}

@keyframes rotatePhone {
    0%, 100% { transform: translate(-50%, -50%) translateY(-40px) rotate(0deg); }
    50% { transform: translate(-50%, -50%) translateY(-40px) rotate(90deg); }
}

/* ========== 聊天弹窗样式 ========== */
.chat-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    backdrop-filter: none;
}

.chat-popup-container {
    width: 90vw;
    max-width: 360px;
    max-height: 70vh;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.chat-popup-container.dark {
    background: #0f1318;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-popup-container.light {
    background: white;
    border: 1px solid #e5e7eb;
}

.chat-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid;
}

.chat-popup-header.dark {
    border-color: rgba(255, 255, 255, 0.1);
}

.chat-popup-header.light {
    border-color: #e5e7eb;
}

.chat-popup-title {
    font-size: 14px;
    font-weight: 700;
}

.chat-popup-title.dark {
    color: rgba(255, 255, 255, 0.9);
}

.chat-popup-title.light {
    color: #1f2937;
}

.chat-popup-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
}

.chat-popup-close.dark {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
}

.chat-popup-close.dark:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.chat-popup-close.light {
    background: #f3f4f6;
    color: #6b7280;
}

.chat-popup-close.light:hover {
    background: #e5e7eb;
    color: #374151;
}

.chat-popup-search {
    padding: 12px;
}

.chat-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.chat-search-icon {
    position: absolute;
    left: 12px;
    font-size: 12px;
}

.chat-search-icon.dark {
    color: rgba(255, 255, 255, 0.3);
}

.chat-search-icon.light {
    color: #9ca3af;
}

.chat-search-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border-radius: 8px;
    font-size: 12px;
    outline: none;
    transition: all 0.2s;
}

.chat-search-input.dark {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.chat-search-input.dark::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.chat-search-input.light {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #1f2937;
}

.chat-search-input.light::placeholder {
    color: #9ca3af;
}

.chat-popup-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 12px;
}

.chat-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin: 2px 0;
}

.chat-user-item.dark:hover {
    background: rgba(255, 255, 255, 0.05);
}

.chat-user-item.light:hover {
    background: #f9fafb;
}

.chat-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-user-avatar.dark {
    background: black;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-user-avatar.light {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

.chat-user-info {
    flex: 1;
    min-width: 0;
}

.chat-user-name {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-user-name.dark {
    color: rgba(255, 255, 255, 0.8);
}

.chat-user-name.light {
    color: #374151;
}

.chat-empty {
    text-align: center;
    padding: 24px;
}

.chat-empty-text {
    font-size: 11px;
}

.chat-empty-text.dark {
    color: rgba(255, 255, 255, 0.2);
}

.chat-empty-text.light {
    color: #9ca3af;
}

/* 音量滑块样式 */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #a855f7;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #a855f7;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

/* 白天模式音量条背景 */
body:not(.theme-dark) input[type="range"] {
    background: #e5e7eb;
}


/* Star floating animation */
@keyframes starFloat {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(15px, -10px);
    }
    50% {
        transform: translate(-10px, 15px);
    }
    75% {
        transform: translate(12px, 8px);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* 3D Photo Ribbon */
.perspective-[1200px] {
    perspective: 1200px;
}

@keyframes ribbonFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.ribbon-float {
    animation: ribbonFloat 4s ease-in-out infinite;
}

/* Photo card hover glow */
.photo-card-glow {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.2);
    transition: box-shadow 0.3s ease;
}

.photo-card-glow:hover {
    box-shadow: 0 0 50px rgba(16, 185, 129, 0.4);
}

/* Image Trail Effect */
.content__img {
    position: absolute;
    width: 180px;
    height: 135px;
    border-radius: 12px;
    overflow: hidden;
    pointer-events: none;
    will-change: transform, opacity;
}

.content__img-inner {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

@media (max-width: 768px) {
    .content__img {
        width: 120px;
        height: 90px;
    }
}
.content {
  position: relative;
  width: 100%;
  height: 100%;
}
.content__img {
  position: absolute;
  width: 180px;
  height: 240px;
  pointer-events: none;
  opacity: 0;
}
.content__img-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
/* ═══════════════════════════════════════════
   Lanyard Card — Three.js 3D physics badge
   ═══════════════════════════════════════════ */
.lanyard-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}
.lanyard-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* 通知定位评论时的高亮闪烁 */
@keyframes commentFlash {
    0%   { background: rgba(52, 211, 153, 0.28); box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.75); }
    55%  { background: rgba(52, 211, 153, 0.16); box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.45); }
    100% { background: transparent; box-shadow: 0 0 0 2px transparent; }
}
.comment-flash {
    animation: commentFlash 2.4s ease-out both;
}

/* 笔记瀑布流 */
.notes-masonry {
    column-gap: 4px;
}
@media (min-width: 768px) {
    .notes-masonry { column-gap: 6px; }
}
.notes-masonry > * {
    break-inside: avoid;
    margin-bottom: 4px;
}
@media (min-width: 768px) {
    .notes-masonry > * { margin-bottom: 6px; }
}

/* 记忆轨迹浮动光点动画 */
@keyframes memoryFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    25% { transform: translateY(-20px) translateX(8px) scale(1.2); opacity: 0.6; }
    50% { transform: translateY(-10px) translateX(-5px) scale(0.9); opacity: 0.4; }
    75% { transform: translateY(-25px) translateX(3px) scale(1.1); opacity: 0.5; }
}
.memory-float-anim {
    animation: memoryFloat 6s ease-in-out infinite;
}

/* ═══ 首页增强动画 ═══ */

/* 标题动态渐变 */
@keyframes heroGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.hero-gradient-animate {
    background-size: 200% 200%;
    animation: heroGradientShift 6s ease infinite;
}

/* CTA 按钮脉冲光晕 */
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
    50% { box-shadow: 0 0 20px 6px rgba(16,185,129,0.25); }
}
.cta-pulse {
    animation: ctaPulse 2.5s ease-in-out infinite;
}

/* Stats 数字发光脉冲 */
@keyframes statsGlow {
    0%, 100% { text-shadow: 0 0 0 transparent; }
    50% { text-shadow: 0 0 20px rgba(16,185,129,0.5), 0 0 40px rgba(16,185,129,0.2); }
}
.stats-glow {
    animation: statsGlow 3s ease-in-out infinite;
}

/* Stats 容器呼吸光边 */
@keyframes statsBorderPulse {
    0%, 100% { border-color: rgba(16,185,129,0.1); }
    50% { border-color: rgba(16,185,129,0.3); }
}
.stats-border-pulse {
    animation: statsBorderPulse 4s ease-in-out infinite;
}

/* 记忆轨迹区域标签弹入 */
@keyframes labelSlideIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.label-slide-in {
    animation: labelSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* 记忆轨迹渐变边框 */
@keyframes memoryBorderFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.memory-section-border {
    position: relative;
}
.memory-section-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: 1px;
    background: linear-gradient(90deg, rgba(16,185,129,0.3), rgba(6,182,212,0.3), rgba(16,185,129,0.3));
    background-size: 200% 100%;
    animation: memoryBorderFlow 4s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Footer 品牌标签动画 */
@keyframes footerBrandFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.footer-brand-float {
    animation: footerBrandFloat 4s ease-in-out infinite;
}

/* Footer 渐变分割线 */
.footer-gradient-line {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(16,185,129,0.4), rgba(6,182,212,0.3), rgba(16,185,129,0.4), transparent);
}

/* 亮点：星星标记动画 */
@keyframes starPop {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    60% { transform: scale(1.3) rotate(180deg); opacity: 1; }
    100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

/* ========== 大屏 / 2K / 4K 高分屏适配 ==========
   视口 ≥1920px 起阶梯放大根字号，全站 rem 单位（Tailwind 文字/间距/rem 制容器宽度）
   随之等比放大，避免 4K 全屏下元素过小、两侧留白过大。
   <1920px 的常规屏幕完全不受影响。 */
@media screen and (min-width: 1920px) {
    html { font-size: 17px; }
}
@media screen and (min-width: 2560px) {
    html { font-size: 19px; }
}
@media screen and (min-width: 3440px) {
    html { font-size: 22px; }
}

/* 共同清单容器：常规屏幕与 max-w-3xl(48rem) 完全一致；
   超宽屏(≥2200px)按比例加宽，避免大屏上清单过窄 */
.shared-list-container {
    max-width: 48rem;
}
@media screen and (min-width: 2200px) {
    .shared-list-container { max-width: 60rem; }
}