:root {
            --bg-warm: #fdf6f0;
            --bg-pink: #fef5f5;
            --rose-gold: #c8977a;
            --rose-gold-light: #e0b9a3;
            --golden: #d4a574;
            --golden-light: #f0d5b8;
            --card-bg: #fffdfb;
            --text-primary: #4a3728;
            --text-secondary: #7a6455;
            --text-muted: #a89484;
            --shadow-soft: 0 4px 20px rgba(180, 150, 130, 0.18);
            --shadow-medium: 0 8px 32px rgba(160, 120, 90, 0.22);
            --shadow-card: 0 2px 16px rgba(160, 130, 100, 0.12);
            --border-warm: #e8d5c8;
            --accent-pink: #f2c4c4;
            --accent-rose: #e8b8b0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(175deg,
                    #fdf7f2 0%,
                    #fef5f0 15%,
                    #fff7f4 30%,
                    #fef6f2 45%,
                    #fdf5f1 60%,
                    #fef8f5 75%,
                    #fdf6f3 90%,
                    #fef7f3 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-x: hidden;
            position: relative;
            cursor: default;
        }

        /* ============ 背景装饰光斑 ============ */
        .bg-orb {
            position: fixed;
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
            filter: blur(60px);
            opacity: 0.35;
            animation: orbFloat 12s ease-in-out infinite;
        }
        .bg-orb.orb-1 {
            width: 320px;
            height: 320px;
            background: radial-gradient(circle, #fce4d8 0%, transparent 70%);
            top: -8%;
            left: -6%;
            animation-delay: 0s;
            animation-duration: 14s;
        }
        .bg-orb.orb-2 {
            width: 260px;
            height: 260px;
            background: radial-gradient(circle, #fde8e0 0%, transparent 70%);
            top: 55%;
            right: -8%;
            animation-delay: -4s;
            animation-duration: 16s;
        }
        .bg-orb.orb-3 {
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, #fef0e8 0%, transparent 70%);
            bottom: -5%;
            left: 25%;
            animation-delay: -8s;
            animation-duration: 13s;
        }
        .bg-orb.orb-4 {
            width: 180px;
            height: 180px;
            background: radial-gradient(circle, #ffe8da 0%, transparent 70%);
            top: 25%;
            right: 18%;
            animation-delay: -6s;
            animation-duration: 15s;
        }

        @keyframes orbFloat {
            0%,
            100% {
                transform: translate(0, 0) scale(1);
            }
            25% {
                transform: translate(30px, -25px) scale(1.12);
            }
            50% {
                transform: translate(-15px, -40px) scale(0.94);
            }
            75% {
                transform: translate(-28px, 15px) scale(1.08);
            }
        }

        /* ============ Canvas花瓣层 ============ */
        #petalCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        /* ============ 主容器 ============ */
        .main-container {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 580px;
            padding: 30px 24px 36px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 28px;
        }

        /* ============ 照片区域 ============ */
        .photo-wrapper {
            position: relative;
            /* 用 backwards 而不是 both：动画结束后回归元素自身样式，
               transform 才不会被动画永久锁死（动画优先级高于 hover 与内联样式） */
            animation: photoFadeIn 1s ease-out 0.2s backwards;
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* 上浮效果放在外层容器上：相框自身的 transform 被 frameGentleFloat 常驻动画占用了 */
        .photo-wrapper:hover {
            transform: translateY(-10px) scale(1.02);
        }

        @keyframes photoFadeIn {
            from {
                opacity: 0;
                transform: translateY(25px) scale(0.94);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* 外层相框装饰 */
        .photo-frame-outer {
            position: relative;
            padding: 8px;
            background: linear-gradient(145deg, #f5e6d8, #e8d5c0, #f0ddd0, #e5cfb8);
            border-radius: 18px;
            box-shadow:
                0 6px 30px rgba(160, 120, 85, 0.25),
                0 2px 8px rgba(140, 100, 65, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.5s ease;
            animation: frameGentleFloat 5s ease-in-out infinite;
        }

        @keyframes frameGentleFloat {
            0%,
            100% {
                transform: translateY(0);
            }
            30% {
                transform: translateY(-7px);
            }
            60% {
                transform: translateY(-3px);
            }
            85% {
                transform: translateY(-6px);
            }
        }

        /* 相框的 transform 被 frameGentleFloat 常驻动画占用，
           所以位移交给外层 .photo-wrapper:hover，这里只负责阴影变化 */
        .photo-frame-outer:hover {
            box-shadow:
                0 14px 44px rgba(160, 120, 85, 0.35),
                0 4px 14px rgba(140, 100, 65, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }

        /* 内层白色边框 */
        .photo-frame-inner {
            padding: 10px;
            background: #fffefc;
            border-radius: 13px;
            box-shadow: inset 0 0 0 1px rgba(180, 150, 120, 0.25);
            position: relative;
        }

        /* 照片容器 */
        .photo-container {
            width: 280px;
            height: 210px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            background: linear-gradient(135deg, #fdf5ef 0%, #fef8f4 30%, #fdf3ec 60%, #fef6f1 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 0 0 1px rgba(200, 170, 140, 0.2);
        }

        /* 实际照片 */
        .photo-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 8px;
            transition: transform 0.6s ease;
        }
        .photo-frame-outer:hover .photo-container img {
            transform: scale(1.04);
        }

        /* 照片占位 - 当没有照片时显示 */
        .photo-placeholder {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }
        .photo-container.has-image .photo-placeholder {
            opacity: 0;
        }
        .photo-placeholder-icon {
            width: 56px;
            height: 56px;
            opacity: 0.5;
        }
        .photo-placeholder-icon svg {
            width: 100%;
            height: 100%;
        }
        .photo-placeholder-text {
            font-size: 13px;
            color: #c4a894;
            letter-spacing: 0.06em;
            font-weight: 400;
        }

        /* 相框顶部装饰小花 */
        .frame-decoration {
            position: absolute;
            top: -18px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            pointer-events: none;
        }
        .frame-decoration .flower-dot {
            display: block;
            width: 32px;
            height: 32px;
            background: radial-gradient(circle at 40% 35%, #fbe0d0, #e8b8a0);
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(180, 120, 90, 0.3);
            position: relative;
        }
        .frame-decoration .flower-dot::before,
        .frame-decoration .flower-dot::after {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            background: radial-gradient(circle at 50% 40%, #fce8d8, #e0b098);
            border-radius: 50%;
            top: 50%;
        }
        .frame-decoration .flower-dot::before {
            left: -8px;
            transform: translateY(-50%);
        }
        .frame-decoration .flower-dot::after {
            right: -8px;
            transform: translateY(-50%);
        }

        /* ============ 分隔装饰线 ============ */
        .divider-ornament {
            display: flex;
            align-items: center;
            gap: 14px;
            /* 这里原先写有 opacity: 0.7，但它从未生效：photoFadeIn 的终态是 opacity:1，
               动画优先级高于普通声明，一定赢。已删掉这条误导性死声明，
               并把 both 改成 backwards —— 渲染结果与改动前完全一致（最终为不透明），
               但不再让动画常驻占用 transform。若确实想要半透明，
               请换成一个自带终态的独立动画，而不是普通声明。 */
            animation: photoFadeIn 0.9s ease-out 0.35s backwards;
        }
        .divider-ornament .line {
            width: 60px;
            height: 1px;
            background: linear-gradient(90deg, transparent, #d4b8a0, transparent);
            border-radius: 1px;
        }
        .divider-ornament .dot-center {
            width: 7px;
            height: 7px;
            background: #d4b8a0;
            border-radius: 50%;
            box-shadow: 0 0 6px rgba(200, 150, 110, 0.5);
        }

        /* ============ "开启幸福" 按钮 ============ */
        .btn-open-happiness {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 17px 56px;
            font-size: 20px;
            font-weight: 600;
            letter-spacing: 0.1em;
            color: #fff;
            text-decoration: none;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            background: linear-gradient(135deg, #d4a382 0%, #c88b6a 25%, #d9a988 50%, #c48260 75%, #d4a382 100%);
            background-size: 200% 200%;
            box-shadow:
                0 6px 28px rgba(180, 110, 70, 0.4),
                0 2px 8px rgba(160, 90, 50, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.3),
                inset 0 -2px 4px rgba(0, 0, 0, 0.08);
            transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            /* 两个动画都会"劫持"属性，必须处理，否则按钮的交互反馈全是死的：
               1) btnFadeIn 原用 both（含 forwards），其终态含 transform，
                  动画优先级高于 :hover / :active / 内联样式，
                  导致悬停上浮、按下回弹、以及 JS 点击时的 scale 反馈全部无效 → 改 backwards；
               2) btnBreathe 是 infinite 且动画的是 box-shadow，会永久占用 box-shadow，
                  悬停/按下的阴影与 JS 写的阴影同样无效 → 呼吸光效移到 ::after（只脉冲 opacity）。 */
            animation: btnFadeIn 0.8s ease-out 0.45s backwards,
                btnShimmer 4s ease-in-out infinite;
            overflow: hidden;
            z-index: 2;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }

        @keyframes btnFadeIn {
            from {
                opacity: 0;
                transform: translateY(20px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes btnShimmer {
            0%,
            100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }

        /* 呼吸光效改为脉冲 ::after 图层的不透明度。
           原因有三：① 直接动画按钮自身的 box-shadow 会永久压制 :hover/:active/JS 的阴影；
           ② 按钮设了 overflow:hidden，向外扩散的阴影本来就会被裁掉；
           ③ 单独一层做透明度脉冲，开销比逐帧重算阴影小得多，
              且 ::after 的 z-index 低于 .btn-text，文字不会被一起变暗。 */
        @keyframes btnBreathe {
            0%,
            100% {
                opacity: 0.45;
            }
            50% {
                opacity: 1;
            }
        }

        /* 按钮光泽条 */
        .btn-open-happiness::before {
            content: '';
            position: absolute;
            top: -30%;
            left: -60%;
            width: 60%;
            height: 160%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.35),
                    rgba(255, 255, 255, 0.5),
                    rgba(255, 255, 255, 0.35),
                    transparent);
            transform: rotate(22deg);
            animation: btnGlossSweep 5s ease-in-out infinite;
            pointer-events: none;
            z-index: 3;
        }
        @keyframes btnGlossSweep {
            0% {
                left: -60%;
            }
            40% {
                left: 110%;
            }
            100% {
                left: 110%;
            }
        }

        /* 按钮内层光晕：承担"呼吸"脉冲（原来由按钮自身的 btnBreathe 负责） */
        .btn-open-happiness::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border-radius: 50px;
            pointer-events: none;
            z-index: 1;
            box-shadow: inset 0 0 34px rgba(255, 224, 196, 0.5);
            animation: btnBreathe 3.5s ease-in-out infinite;
        }

        .btn-open-happiness:hover {
            transform: translateY(-4px) scale(1.04);
            box-shadow:
                0 14px 40px rgba(180, 110, 70, 0.5),
                0 4px 14px rgba(160, 90, 50, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.4),
                0 0 60px rgba(220, 160, 120, 0.4);
            letter-spacing: 0.14em;
        }
        .btn-open-happiness:active {
            transform: translateY(-1px) scale(0.97);
            box-shadow: 0 3px 14px rgba(180, 110, 70, 0.45), 0 1px 4px rgba(160, 90, 50, 0.2);
            transition: all 0.12s ease;
        }

        /* 按钮文字 */
        .btn-text {
            position: relative;
            z-index: 4;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
            pointer-events: none;
        }

        /* ============ 点击扩散光效元素 ============ */
        .ripple-ring {
            position: fixed;
            border-radius: 50%;
            pointer-events: none;
            z-index: 10;
            border: 2px solid rgba(255, 220, 180, 0.7);
            animation: rippleExpand 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
            opacity: 1;
        }
        @keyframes rippleExpand {
            0% {
                width: 20px;
                height: 20px;
                opacity: 1;
                border-width: 3px;
            }
            100% {
                width: 2000px;
                height: 2000px;
                opacity: 0;
                border-width: 0.3px;
                margin-left: -1000px;
                margin-top: -1000px;
            }
        }

        .ripple-glow {
            position: fixed;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9;
            background: radial-gradient(circle, rgba(255, 235, 210, 0.7) 0%, rgba(255, 210, 170, 0.3) 30%, transparent 70%);
            animation: glowExpand 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
        }
        @keyframes glowExpand {
            0% {
                width: 40px;
                height: 40px;
                opacity: 0.9;
            }
            100% {
                width: 1800px;
                height: 1800px;
                opacity: 0;
                margin-left: -900px;
                margin-top: -900px;
            }
        }

        /* ============ 链接卡片区域 ============ */
        .links-section {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            justify-content: center;
            width: 100%;
            animation: photoFadeIn 0.9s ease-out 0.55s backwards;
        }

        .link-card {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 15px 22px;
            background: var(--card-bg);
            border-radius: 16px;
            text-decoration: none;
            color: var(--text-primary);
            box-shadow: var(--shadow-card);
            border: 1px solid var(--border-warm);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            overflow: hidden;
            min-width: 150px;
            justify-content: center;
            cursor: pointer;
        }
        .link-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 240, 225, 0.6) 0%, rgba(255, 245, 235, 0.3) 50%, transparent 80%);
            opacity: 0;
            transition: opacity 0.4s ease;
            border-radius: 16px;
            pointer-events: none;
        }
        .link-card:hover {
            transform: translateY(-6px) scale(1.03);
            box-shadow: var(--shadow-medium);
            border-color: #dcc8b4;
        }
        .link-card:hover::before {
            opacity: 1;
        }
        .link-card:active {
            transform: translateY(-2px) scale(0.98);
            transition: all 0.1s ease;
        }

        .link-card .card-icon {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 18px;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .link-card:hover .card-icon {
            transform: rotate(-8deg) scale(1.12);
        }
        .link-card.guozan .card-icon {
            background: #fef5ef;
            color: #c8977a;
        }
        .link-card.zhangmeng .card-icon {
            background: #fef6f2;
            color: #d4a382;
        }
        .link-card.child-reserved .card-icon {
            background: #fefaf7;
            color: #dcc4b0;
        }

        .link-card .card-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .link-card .card-domain {
            font-size: 15px;
            font-weight: 600;
            letter-spacing: 0.03em;
            color: var(--text-primary);
            transition: color 0.3s ease;
        }
        .link-card:hover .card-domain {
            color: #b87850;
        }
        .link-card .card-label {
            font-size: 11px;
            color: var(--text-muted);
            letter-spacing: 0.04em;
            font-weight: 400;
        }

        /* 预留卡片特殊样式 */
        .link-card.child-reserved {
            border-style: dashed;
            border-color: #e0d0c0;
            background: #fffdfa;
            cursor: default;
            opacity: 0.8;
        }
        .link-card.child-reserved:hover {
            transform: translateY(-3px) scale(1.02);
            border-color: #d8c4b0;
            box-shadow: 0 4px 20px rgba(180, 150, 120, 0.18);
        }
        .link-card.child-reserved .card-domain {
            color: #b89880;
        }
        .link-card.child-reserved .card-label {
            color: #c4a894;
            font-style: italic;
        }

        /* ============ 底部提示文字 ============ */
        .footer-hint {
            font-size: 12px;
            color: #c4b0a0;
            letter-spacing: 0.06em;
            text-align: center;
            animation: photoFadeIn 1s ease-out 0.65s backwards;
            margin-top: 4px;
        }

        /* ============ 响应式设计 ============ */
        @media (max-width: 600px) {
            .main-container {
                padding: 20px 16px 28px;
                gap: 22px;
            }
            .photo-container {
                width: 220px;
                height: 165px;
            }
            .photo-frame-outer {
                padding: 6px;
                border-radius: 14px;
            }
            .photo-frame-inner {
                padding: 7px;
                border-radius: 10px;
            }
            .photo-container,
            .photo-container img {
                border-radius: 6px;
            }
            .btn-open-happiness {
                padding: 15px 42px;
                font-size: 18px;
                letter-spacing: 0.07em;
                border-radius: 44px;
            }
            .links-section {
                gap: 10px;
            }
            .link-card {
                padding: 12px 16px;
                min-width: 120px;
                border-radius: 13px;
                gap: 8px;
            }
            .link-card .card-icon {
                width: 32px;
                height: 32px;
                font-size: 15px;
            }
            .link-card .card-domain {
                font-size: 13px;
            }
            .link-card .card-label {
                font-size: 10px;
            }
            .frame-decoration {
                top: -14px;
            }
            .frame-decoration .flower-dot {
                width: 24px;
                height: 24px;
            }
            .frame-decoration .flower-dot::before,
            .frame-decoration .flower-dot::after {
                width: 8px;
                height: 8px;
            }
            .frame-decoration .flower-dot::before {
                left: -6px;
            }
            .frame-decoration .flower-dot::after {
                right: -6px;
            }
        }

        @media (max-width: 380px) {
            .photo-container {
                width: 180px;
                height: 135px;
            }
            .btn-open-happiness {
                padding: 13px 34px;
                font-size: 16px;
                letter-spacing: 0.05em;
            }
            .links-section {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
            .link-card {
                width: 100%;
                max-width: 260px;
                justify-content: center;
            }
        }

        /* 触摸设备：抵消 :hover 残留。
           手指点一下之后 hover 态会粘在元素上，照片/按钮/链接卡
           会一直停在上浮放大的状态不还原。这里只撤掉位移缩放，
           颜色阴影的变化留着无妨（反而算点击反馈）。 */
        @media (hover: none) {
            .photo-wrapper:hover,
            .btn-open-happiness:hover,
            .link-card:hover { transform: none; }

            /* ⚠️ 上面这几条必须把 :active 补回来。
               本块位于文件末尾，而 :active 规则在前面（457 / 567 行），
               两者特异性相同（都是 0,2,0），后写的胜 ——
               只写 :hover 的话会顺带把「按下去」的缩放反馈一起压掉，
               手指点按钮时就完全没反应了。 */
            .btn-open-happiness:active { transform: translateY(-1px) scale(0.97); }
            .link-card:active { transform: translateY(-2px) scale(0.98); }
        }