/* 🎨 设计系统 V3.3：商家列表细节精修版 */
        :root {
            /* 品牌色系 */
            --primary: #FF9A9E;
            --primary-gradient: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%);
            --sunny-gradient: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
            --purple-gradient: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
            --blue-gradient: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
            
            --text-main: #5D5D5D;
            --text-sub: #909090;
            --bg-body: #FFF9F9;
            
            --radius-card: 24px;
            --radius-pill: 50px;
            --shadow-soft: 0 10px 40px rgba(255, 154, 158, 0.15);
            --shadow-float: 0 15px 35px rgba(0,0,0,0.08);
        }

        body {
    font-family: "Varela Round", "Arial Rounded MT Bold", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    
    /* 🔥 核心修改：将底色设为渐变的起始色 #FFF0F5 */
    /* 这样当你在顶部下拉时，露出的背景色和页面顶端颜色一致，视觉上就“无缝”了 */
    background: #FFF0F5; 
    
    margin: 0; padding: 0; padding-bottom: 110px;
    color: var(--text-main);
    
    /* 保持原有的背景图纹理不变 */
    background-image: 
        radial-gradient(at 0% 0%, rgba(254, 207, 239, 0.3) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(161, 140, 209, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(246, 211, 101, 0.1) 0px, transparent 50%);
    background-attachment: fixed;
    
    -webkit-tap-highlight-color: transparent;
    overflow-y: scroll;
    overflow-x: hidden;
}

        .page-container { padding: 20px; box-sizing: border-box; animation: fadeIn 0.5s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* 顶部导航 */
        .top-nav { display: flex; justify-content: space-between; align-items: center; padding: 5px 0 15px; }
        .app-title { font-size: 26px; font-weight: 900; color: #5D5D5D; display: flex; align-items: center; gap: 8px; letter-spacing: -0.5px; }
        .app-title i { color: #FF9A9E; filter: drop-shadow(0 4px 6px rgba(255,154,158,0.4)); }

        /* 头像框 */
        .user-avatar-small {
            width: 44px; height: 44px; border-radius: 50%; overflow: hidden; 
            border: 3px solid #FFF; box-shadow: 0 5px 15px rgba(255, 154, 158, 0.25);
            background: #FFF; display: flex; align-items: center; justify-content: center;
            transition: transform 0.2s;
        }
        .user-avatar-small:active { transform: scale(0.9); }
        .user-avatar-small img { width: 100%; height: 100%; object-fit: cover; }

        /* 通用组件 */
        .btn {
            background: var(--primary-gradient); color: white; border: none; 
            padding: 16px; border-radius: var(--radius-pill); width: 100%; 
            font-size: 16px; font-weight: 800; 
            box-shadow: 0 8px 20px rgba(255, 154, 158, 0.35); 
            cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
            transition: all 0.2s;
        }
        .btn:active { transform: scale(0.97); box-shadow: 0 4px 10px rgba(255, 154, 158, 0.3); }
        .btn-green { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); box-shadow: 0 8px 20px rgba(132, 250, 176, 0.3); }
        .btn-purple { background: var(--purple-gradient); box-shadow: 0 8px 20px rgba(161, 140, 209, 0.3); }
        .btn-disabled { background: #E0E0E0; box-shadow: none; color: #999; cursor: not-allowed; }

        /* 联盟 Banner */
        .alliance-banner {
            background: var(--primary-gradient);
            border-radius: var(--radius-card); padding: 24px; color: white;
            margin-bottom: 25px; position: relative; overflow: hidden;
            box-shadow: var(--shadow-soft); cursor: pointer;
            transition: transform 0.2s;
        }
        .alliance-banner:active { transform: scale(0.98); }
        .alliance-content { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
        .alliance-text h3 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: 0.5px; }
        .alliance-text p { margin: 6px 0 0; font-size: 12px; opacity: 0.95; font-weight: 700; display:flex; align-items:center; }
        .alliance-btn { background: white; color: #FF9A9E; padding: 10px 20px; border-radius: 30px; font-size: 13px; font-weight: 900; white-space: nowrap; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .alliance-bg-icon { position: absolute; right: -15px; bottom: -30px; font-size: 120px; color: white; opacity: 0.15; transform: rotate(-15deg); z-index: 1; }
        .tag-hot { display: inline-block; background: #FF4757; color:white; padding: 3px 8px; border-radius: 8px; font-size: 10px; margin-left: 6px; animation: pulse 1.5s infinite; font-weight:800; box-shadow: 0 2px 6px rgba(255, 71, 87, 0.4); }
        @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

        /* 金刚区 */
        .quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 25px; }
        .action-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: 0.2s; }
        .action-item:active { transform: scale(0.95); }
        .action-icon-box { width: 56px; height: 56px; border-radius: 22px; background: white; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 8px 20px rgba(0,0,0,0.04); color: var(--text-sub); border: 1px solid #FFF5F5; }
        .action-label { font-size: 12px; font-weight: 700; color: #888; }

        /* 卡片系统 */
        .card { background: white; border-radius: var(--radius-card); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-float); border: 1px solid #FFF; }
        .card.universal-card { 
        background: linear-gradient(135deg, #fff 30%, #f3e7e9 100%); 
        border: 2px solid #e3eeff; 
        position: relative; 
        overflow: hidden;
        box-shadow: 0 0 15px rgba(161, 140, 209, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.8);
        animation: glow 3s infinite alternate;
        }
        @keyframes glow {
        from { box-shadow: 0 5px 15px rgba(161, 140, 209, 0.2); border-color: #e3eeff; }
        to { box-shadow: 0 5px 25px rgba(255, 154, 158, 0.6); border-color: #FF9A9E; }
        }
        .uni-header { color: #a18cd1; font-weight: 900; display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 10px; }
        .breed-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 0 2px; }
        .breed-name { font-weight: 800; font-size: 16px; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
        .breed-progress { font-size: 13px; font-weight: 900; color: #FF9A9E; background: #FFF0F3; padding: 5px 12px; border-radius: 15px; }

        .grid-container { position: relative; width: 100%; padding-bottom: 100%; border-radius: 20px; overflow: hidden; background-color: #F0F2F5; background-size: cover; background-position: center; border: 4px solid #fff; box-shadow: inset 0 0 20px rgba(0,0,0,0.05); }
        .grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3px; border: 3px solid rgba(255,255,255,0.5); box-sizing: border-box; }
        .cell { 
            position: relative; 
            display: flex; align-items: center; justify-content: center; 
            cursor: pointer; 
            /* 核心：毛玻璃特效 (背景色将由行内样式动态控制) */
            backdrop-filter: blur(8px); 
            -webkit-backdrop-filter: blur(8px);
            /* 增加内发光和边框，像果冻一样 */
            box-shadow: inset 0 0 15px rgba(255,255,255,0.4);
            border: 1px solid rgba(255,255,255,0.5); 
            transition: all 0.2s; 
        }
        .cell:active { transform: scale(0.96); }
        .cell-num { font-size: 24px; font-weight: 900; color: #DDD; z-index: 2; font-family: "Nunito"; }
        .cell.owned { background-color: transparent !important; backdrop-filter: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); z-index: 1; }
        .cell.latest-highlight { box-shadow: inset 0 0 0 3px var(--accent); }
        .new-tag { position: absolute; top: 0; left: 0; background: var(--accent); color: white; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 0 0 8px 0; z-index: 20; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); }
        .count-badge { 
        position: absolute; bottom: 5px; right: 5px; 
        background: #FF9F43; color: white; 
        border-radius: 10px; padding: 2px 8px; 
        font-size: 10px; font-weight: bold; 
        backdrop-filter: blur(2px);
        animation: bounceBadge 2s infinite; 
        }
        @keyframes bounceBadge {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
        }

        /* 底部导航 */
        .tab-bar { position: fixed; bottom: 20px; left: 5%; width: 90%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); display: flex; justify-content: space-around; padding: 12px 0; box-shadow: 0 10px 40px rgba(0,0,0,0.1); z-index: 90; border-radius: 30px; border: 1px solid rgba(255,255,255,0.8); }
        .tab-item { text-align: center; color: #C1C1C1; font-size: 11px; flex: 1; transition: 0.3s; font-weight: 700; }
        .tab-item i { font-size: 22px; display: block; margin-bottom: 4px; transition: 0.3s; }
        .tab-item.active { color: #FF9A9E; }
        .tab-item.active i { transform: translateY(-3px) scale(1.1); filter: drop-shadow(0 4px 8px rgba(255,154,158,0.4)); }

        /* 弹窗系统 */
        .modal-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(166, 177, 225, 0.4); backdrop-filter: blur(8px); z-index: 10000; display: flex; justify-content: center; align-items: center; animation: fadeIn 0.2s; }
        .modal-card { background: white; width: 85%; max-width: 340px; border-radius: 32px; text-align: center; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 25px 60px rgba(100, 100, 100, 0.15); animation: bounceIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .modal-inner { padding: 25px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch;contain: content;}
        .modal-header-sticky { background: white; padding: 20px 25px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #F7F7F7; flex-shrink: 0; }
        .modal-title { font-size: 20px; font-weight: 900; color: #5D5D5D; margin: 0; }
        .close-btn-fixed { font-size: 24px; color: #ccc; cursor: pointer; padding: 5px; }
        .modal-input { width: 100%; padding: 15px; margin-bottom: 15px; border: 2px solid #F0F2F5; border-radius: 16px; background: #F9FAFC; font-size: 15px; box-sizing: border-box; transition: 0.3s; }
        .modal-input:focus { background: white; border-color: #FF9A9E; outline: none; }

        /* -------------------------------------------
           🔥 V3.2+V3.3 专项优化：商家列表 (Wide Mode + Pro Badge)
           ------------------------------------------- */
        .modal-card-wide { width: 92%; max-width: 420px; height: auto; max-height: 85vh; }
/* 💡 顶部提示条 - 通透气泡版 */
        .tip-box-pretty {
            background: linear-gradient(to right, #FFF6F8, #FFF); /* 极淡的粉白渐变 */
            border-left: 4px solid #FF9A9E;
            padding: 15px 18px; 
            border-radius: 16px; 
            font-size: 12px; color: #666; text-align: left; 
            margin-bottom: 15px; line-height: 1.6; 
            /* 增加一点点粉色光晕，去掉黑影 */
            box-shadow: 0 4px 15px rgba(255, 154, 158, 0.1); 
            border: 1px solid #FFF0F3;
        }
/* ☁️ 商家卡片：空气感悬浮设计 (高性能版) */
        .merchant-card-pro {
            background: #FFF;
            border-radius: 24px;
            padding: 20px;
            margin-bottom: 16px;
            border: 1px solid #FFF0F3;
            /* ⚡️ 优化1：简化阴影算法，减少手机渲染压力 */
            box-shadow: 0 5px 15px rgba(255, 154, 158, 0.08); 
            display: flex; 
            flex-direction: column;
            position: relative; 
            overflow: hidden;
            text-align: left;
            /* ⚡️ 优化2：开启硬件加速，防止列表卡顿 */
            transform: translateZ(0); 
            -webkit-transform: translateZ(0);
            will-change: transform;
            /* ⚡️ 优化3：移除 transition，避免滚动时浏览器反复计算动画 */
        }
        /* 点击时的反馈效果保留，但只改变透明度，性能开销最小 */
        .merchant-card-pro:active { opacity: 0.9; transform: scale(0.99) translateZ(0); }

        /* 2. 商家头部信息 */
        .m-top { display: flex; align-items: flex-start; margin-bottom: 12px; }

        .m-icon-pro {
            width: 56px; height: 56px; 
            background: #FFF0F5; 
            color: #FF9A9E; border-radius: 20px; 
            display: flex; align-items: center; justify-content: center; 
            font-size: 26px; margin-right: 14px; flex-shrink: 0;
            border: 2px solid #FFF; 
            box-shadow: 0 4px 12px rgba(255, 154, 158, 0.15);
        }

        /* ———— 🌟 V1.5 终极优化：标签分行与视觉升级 ———— */
        /* 📏 商家卡片-顶部行布局 (让店名和距离左右分开) */
        .m-header-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
            width: 100%;
        }

        /* 📛 店名样式 (限制宽度，防止挤压距离) */
        .m-name-text {
            font-weight: 900;
            font-size: 17px;
            color: #333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            /*max-width: 60%;  留40%给距离，暂时注释掉 */
        }

        /* 📍 距离胶囊 (V2.0 光速导航风) */
        .dist-capsule {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: #FFF0F3; /* 极淡的草莓底色 */
            color: #FF9A9E;      /* 品牌色文字 */
            padding: 4px 10px;
            border-radius: 20px; /* 圆润胶囊 */
            font-size: 11px;
            font-weight: 800;
            flex-shrink: 0;      /* 防止被挤扁 */
            box-shadow: 0 2px 6px rgba(255, 154, 158, 0.15); /* 微微浮起 */
            border: 1px solid rgba(255, 154, 158, 0.1); /* 增加精致度 */
        }
        
        .dist-capsule i {
            font-size: 10px;
            transform: rotate(45deg); /* 让箭头稍微倾斜，更有导航的感觉 */
        }
        /* 1. 商家名称：加大行高，防止拥挤 */
        .m-name-pro { 
            font-weight: 900; 
            font-size: 17px; 
            color: #333; 
            margin-bottom: 6px; /* 增加下方间距 */
            line-height: 1.4;   /* 优化长名字换行时的阅读体验 */
            text-align: left;
        }

        /* 2. 新增：荣誉勋章栏容器 */
        .m-badges-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap; /* 如果标签太多允许换行 */
            gap: 6px;        /* 标签之间的间距 */
            margin-bottom: 8px; /* 与地址栏的距离 */
        }

        /* 3. 新设计：集喵联盟认证标签 (清爽蓝) */
        .verified-tag-pro {
            background: #E3F2FD; /* 极淡的蓝色背景 */
            color: #2196F3;      /* 谷歌蓝/推特蓝，专业且年轻 */
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 6px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }

        /* 4. 优化：万能图鉴徽章 (梦幻紫) */
        .uni-badge-pro {
            background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
            color: white; 
            font-size: 10px; 
            padding: 3px 8px; 
            border-radius: 6px; 
            font-weight: 800; 
            display: inline-flex; 
            align-items: center; 
            gap: 3px;
            box-shadow: 0 2px 6px rgba(161, 140, 209, 0.3);
            text-shadow: 0 1px 1px rgba(0,0,0,0.1);
            margin-left: 0; /* 清除之前的左边距，现在由 gap 控制 */
            vertical-align: middle;
        }

        .m-addr-pro { 
            font-size: 12px; color: #999; 
            background: #F7F8FA; 
            padding: 5px 8px; /* 微调内边距 */
            border-radius: 6px; 
            display: inline-flex; 
            align-items: center; /* 核心：Flex垂直居中 */
            gap: 4px;
            max-width: 100%; /* 防止撑开 */
        }

        .m-addr-pro i {
            font-size: 12px;
            margin-top: -1px; /* 上移1像素，视觉上修正重心 */
            color: #CCC;
        }

        /* 地址文字微调 */
        .m-addr-pro span {
            line-height: 1.2; /* 紧凑行高 */
            position: relative;
            top: 1px; /* 文字下沉1像素，与图标完美对齐 */
        }

        /* 3. 🔥 核心升级：活动列表容器（收纳盒） */
        .m-events-box {
            background: linear-gradient(180deg, #FFF9FA 0%, #FFF 100%);
            border: 1px solid #FFF0F3;
            border-radius: 16px;
            padding: 10px;
            display: flex; 
            flex-direction: column; 
            gap: 8px; 
            margin-top: 5px;
        }

        /* 4. 单个活动条目（悬浮胶囊） */
        .m-event-item {
            background: #FFF;
            border-radius: 12px;
            padding: 10px 12px;
            display: flex; align-items: center;
            box-shadow: 0 2px 8px rgba(255, 154, 158, 0.08);
            border: 1px solid #FFF5F7;
            cursor: pointer;
            transition: all 0.2s;
        }
        .m-event-item:active { background: #FFF0F3; transform: scale(0.98); }

        /* 活动图标 */
        .m-evt-icon {
            width: 24px; height: 24px; flex-shrink: 0;
            background: linear-gradient(135deg, #FF9A9E 0%, #FF6B6B 100%);
            color: white; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; margin-right: 10px;
            box-shadow: 0 2px 5px rgba(255, 107, 107, 0.2);
        }

        .m-evt-title {
            flex: 1; font-size: 13px; color: #555; font-weight: 700;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            text-align: left; /* 🔥 双重保险：确保标题文字靠左 */
        }

        /* 已报名标签 */
        .joined-tag {
            font-size: 10px; color: #00B894; 
            background: #E0F7FA; padding: 2px 6px; border-radius: 6px; 
            font-weight: 800; margin-right: 5px; flex-shrink: 0;
        }

        /* 联系商家按钮 */
        .m-actions-pro { 
            margin-top: 15px; 
            padding-top: 15px; 
            border-top: 1px dashed #F0F2F5; 
        }
        .m-btn-pro {
            width: 100%; text-align: center;
            padding: 12px 0; border-radius: 50px; 
            font-size: 14px; font-weight: 800;
            background: #FFF; 
            color: #FF9A9E;
            border: 1px solid #FFDEE6;
            display: flex; align-items: center; justify-content: center; gap: 6px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.02);
        }

        /* 足迹 (Timeline) */
        .log-timeline-pretty {
            position: relative; padding-left: 20px; margin-left: 10px;
            border-left: 2px dashed #FFDEE6; 
        }
        .log-item-pretty { position: relative; margin-bottom: 25px; }
        .log-dot-pretty {
            position: absolute; left: -29px; top: 0;
            width: 12px; height: 12px; border-radius: 50%;
            background: #FF9A9E; border: 4px solid #FFF;
            box-shadow: 0 2px 5px rgba(255, 154, 158, 0.3);
        }
        .log-dot-pretty.GIFT { background: #FFD93D; }
        .log-dot-pretty.ADOPT { background: #00B894; }
        .log-bubble {
            background: #F9FAFC; padding: 15px; 
            border-radius: 4px 20px 20px 20px; 
            font-size: 14px; color: #555; position: relative;
            border: 1px solid #F0F2F5; box-shadow: 0 3px 10px rgba(0,0,0,0.02);
        }
        .log-bubble-time { display: block; font-size: 11px; color: #BBB; margin-top: 6px; font-weight: 600; }

        /* 互换局 (Image Full) */
        .event-full-img { width: 100%; height: auto; display: block; background: #F5F5F5; }

        /* 其他原有样式 */
        .marquee-box { background: white; border-radius: 30px; padding: 8px 15px; margin-bottom: 25px; display: flex; align-items: center; box-shadow: 0 5px 20px rgba(0,0,0,0.03); border: 1px solid #FFF; }
        .marquee-content { flex: 1; overflow: hidden; height: 20px; position: relative; }
        .marquee-list { position: absolute; width: 100%; animation: scrollUp 10s infinite cubic-bezier(0.19, 1, 0.22, 1); }
        .marquee-item { font-size: 13px; color: #666; height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
        @keyframes scrollUp { 0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(-20px); } 50%, 70% { transform: translateY(-40px); } 75%, 95% { transform: translateY(-60px); } 100% { transform: translateY(-80px); } }

        .menu-list { background: white; border-radius: 24px; overflow: hidden; margin-top: 25px; box-shadow: var(--shadow-float); padding: 5px 0; }
        .menu-item { padding: 18px 24px; display: flex; justify-content: space-between; border-bottom: 1px solid #FAFAFA; cursor: pointer; align-items: center; transition: 0.2s; }
        .menu-item:last-child { border-bottom: none; }
        .menu-item:active { background: #FFF9F9; }
        .menu-icon { width: 24px; text-align: center; margin-right: 12px; color: #C1C1C1; font-size: 18px; }
        .avatar-box { width: 90px; height: 90px; margin: 0 auto 15px; border-radius: 50%; border: 4px solid white; box-shadow: 0 10px 30px rgba(255, 154, 158, 0.3); position: relative; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; }
        .avatar-box img { width: 100%; height: 100%; object-fit: cover; }
        .avatar-file { position: absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor: pointer; }
        .bell-dot { position: absolute; top: 0; right: 0; width: 8px; height: 8px; background: #FF4757; border-radius: 50%; border: 2px solid white; }
        
        .event-card { background: white; border-radius: 24px; overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow-float); border: 1px solid #FFF; position: relative; transition: 0.2s; }
        .event-img { width: 100%; height: 170px; object-fit: cover; }
        .event-info { padding: 18px; }
        .joined-badge-top { position: absolute; top: 12px; right: 12px; background: rgba(77, 124, 254, 0.9); color: white; font-size: 12px; padding: 5px 12px; border-radius: 20px; font-weight: 800; backdrop-filter: blur(4px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
        .dist-badge { background: #FFF3E0; color: #FF9F43; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 800; float: right; display:flex; align-items:center; gap:4px; }
        .evt-tag { font-size:11px; font-weight:800; padding:3px 8px; border-radius:8px; margin-right:6px; vertical-align:middle; }
        .evt-tag-week { color: #4D7CFE; background: #E3F2FD; }
        .evt-tag-month { color: #A55EEA; background: #F3E5F5; }
        .evt-tag-once { color: #FF9F43; background: #FFF3E0; }

/* ✨ C端登录页 - 沉底布局适配版 */

        .login-input { width: 100%; background: rgba(255,255,255,0.8); border: 2px solid transparent; border-radius: var(--radius-pill); padding: 18px 25px; margin-bottom: 15px; font-size: 15px; box-sizing: border-box; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s; }
        .login-input:focus { background: white; border-color: #FF9A9E; outline: none; box-shadow: 0 5px 20px rgba(255, 154, 158, 0.2); }
        .captcha-row { display: flex; gap: 10px; align-items: stretch; }
        .captcha-img { width: 120px; flex-shrink: 0; border-radius: var(--radius-pill); overflow: hidden; border: 2px solid rgba(255,255,255,0.5); cursor: pointer; background: white; display: flex; align-items: center; justify-content: center; }
        .captcha-img svg { width: 100%; height: 100%; transform: scale(1.1); }
        .agreement-row { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 15px; font-size: 13px; color: #888; text-align: left; padding: 0 10px; }
        .agreement-row input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: #FF9A9E; }
        .agreement-link { color: #FF9A9E; font-weight: 800; cursor: pointer; text-decoration: underline; }

        .empty-state-pretty { text-align:center; padding:60px 20px; color:#ccc; }
        .empty-icon { font-size: 70px; color: #EEE; margin-bottom: 20px; animation: float 3s ease-in-out infinite; }
        .empty-btn { margin-top:20px; background:white; border:1px solid #f0f0f0; color:#888; border-radius:20px; padding:10px 25px; font-size:13px; box-shadow:0 5px 15px rgba(0,0,0,0.05); cursor: pointer; font-weight: 700; }
        .text-content { white-space: pre-wrap; line-height: 1.8; text-align: left; font-size: 14px; color: #555; background: #F9FAFC; padding: 20px; border-radius: 20px; max-height: 60vh; overflow-y: auto; }
        [v-cloak] { display: none; }
        #reader { width: 100%; border-radius: 24px; overflow: hidden; margin-bottom: 20px; background: black; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
        .manual-input { text-align: center; font-family: monospace; letter-spacing: 4px; font-weight: bold; text-transform: uppercase; color: #FF9A9E; font-size: 20px; }
        
        /* 双倍券金卡特效 */
        .coupon-card {
            background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
            border-radius: 24px; padding: 20px; margin-bottom: 20px;
            box-shadow: 0 10px 20px rgba(253, 185, 49, 0.3);
            position: relative; overflow: hidden; color: #8a6d3b;
            border: 2px solid #FFF; animation: pulse 3s infinite;
        }
        .coupon-title { font-size: 18px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
        .coupon-timer { font-family: monospace; font-size: 20px; font-weight: 800; margin-top: 10px; letter-spacing: 2px; }
        .coupon-btn { background: #FFF; color: #FDB931; border: none; padding: 8px 16px; border-radius: 20px; font-weight: 800; font-size: 12px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
        .scan-warning { background: #FFF3E0; color: #E65100; padding: 10px; border-radius: 12px; font-size: 12px; margin-bottom: 15px; border: 1px dashed #FFB74D; display: flex; align-items: center; gap: 8px; animation: bounceBadge 2s infinite; }
        /* 🔥 新增：双倍结果弹窗样式 */
        .result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; }
        .result-item { background: #FFF9F9; padding: 15px; border-radius: 20px; border: 2px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); position: relative; }
        .result-item.bonus { background: linear-gradient(180deg, #FFF9C4 0%, #FFF 100%); border-color: #FDB931; }
        .result-img-box { width: 100%; aspect-ratio: 1; border-radius: 15px; overflow: hidden; margin-bottom: 10px; }
        .result-img-box img { width: 100%; height: 100%; object-fit: cover; }
        .result-tag-new { position: absolute; top: -5px; right: -5px; background: #FF4757; color: white; font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 10px; box-shadow: 0 2px 5px rgba(255, 71, 87, 0.4); animation: bounceBadge 2s infinite; z-index: 5; }
        .result-label { font-size: 14px; font-weight: 900; color: #333; line-height: 1.2; }
        .result-sub { font-size: 11px; color: #999; margin-top: 4px; }
/* 🍬 V3.0 甜心果冻筛选栏 (Top UI重制版) */
        .filter-tabs { 
            display: flex; 
            justify-content: center; 
            gap: 15px; /* 增加间距，让按钮不再拥挤 */
            margin: 20px 0 25px 0;
        }
        
        .filter-btn { 
            padding: 9px 22px; /* 更大的点击区域 */
            background: #F7F8FA; /* 未选中：极淡的糯米白 */
            color: #B0B3C7;      /* 未选中：低饱和度的灰紫 */
            border-radius: 50px; 
            font-size: 13px; 
            font-weight: 800; 
            border: 1px solid transparent; 
            transition: transform 0.2s, background-color 0.2s, color 0.2s; /* 果冻回弹动画 */
            display: flex; align-items: center; gap: 6px;
            cursor: pointer;
            letter-spacing: 1px;
        }

        /* 选中状态：激活品牌渐变 + 弥散彩色投影 */
        /* 1. 全部 - 蜜桃粉 */
        .filter-btn:nth-child(1).active {
            background: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%);
            color: white;
            box-shadow: 0 6px 16px rgba(255, 154, 158, 0.4); /* 粉色光晕 */
            transform: translateY(-2px) scale(1.05); /* 微微上浮放大 */
        }

        /* 2. 认证 - 晴空蓝 */
        .filter-btn:nth-child(2).active {
            background: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%);
            color: white;
            box-shadow: 0 6px 16px rgba(79, 172, 254, 0.4);
            transform: translateY(-2px) scale(1.05);
        }

        /* 3. 万能 - 梦幻紫 */
        .filter-btn:nth-child(3).active {
            background: linear-gradient(135deg, #A18CD1 0%, #FBC2EB 100%);
            color: white;
            box-shadow: 0 6px 16px rgba(161, 140, 209, 0.4);
            transform: translateY(-2px) scale(1.05);
        }
        
        .filter-btn i { font-size: 14px; }
        /* 🔥 新增：拼图详情与互换引导样式 */
        .piece-detail-img { width: 140px; height: 140px; border-radius: 20px; object-fit: cover; margin: 0 auto 15px; display: block; border: 4px solid #FFF; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
        .piece-detail-info { text-align: center; margin-bottom: 30px; }
        .piece-count-tag { background: #FF9F43; color: white; padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 800; display: inline-block; margin-top: 5px; box-shadow: 0 4px 10px rgba(255, 159, 67, 0.3); }
        
        /* 两个操作按钮的布局 */
        .piece-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .action-card-btn { background: #F9FAFC; border: 1px solid #F0F2F5; border-radius: 20px; padding: 20px 10px; text-align: center; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; }
        .action-card-btn:active { transform: scale(0.96); }
        .action-card-btn i { font-size: 24px; margin-bottom: 2px; }
        .action-title { font-size: 14px; font-weight: 800; color: #555; }
        .action-desc { font-size: 11px; color: #999; line-height: 1.2; }

        /* 左边：普通赠送 */
        .btn-gift:hover { background: #FFF0F5; border-color: #FF9A9E; }
        
        /* 右边：互换引导 (高亮强调) */
        .btn-swap { background: linear-gradient(135deg, #E3F2FD 0%, #F1F8E9 100%); border: 1px solid #BBDEFB; }
        .btn-swap .action-title { color: #1976D2; }
        .btn-swap i { color: #2196F3; }
        .swap-tag { position: absolute; top: 0; right: 0; background: #FF4757; color: white; font-size: 10px; padding: 3px 8px; border-radius: 0 0 0 10px; font-weight: 800; }
        /* 🍬 新增：甜美风双倍提示条 */
.pretty-toast {
    background: linear-gradient(95deg, #FFF9EB 0%, #FFF0F5 100%); /* 奶油金到淡粉的渐变 */
    border: 1px dashed #FFD180; /* 像邮票一样的虚线边框，精致感 */
    color: #FF8F00; /* 暖橙金色字体，显眼但不刺眼 */
    border-radius: 50px; /* 胶囊圆角 */
    padding: 12px 20px;
    margin-bottom: 20px;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px;
    font-size: 13px; 
    font-weight: 800; /* 字体加粗 */
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(255, 167, 38, 0.15); /* 极淡的暖色投影 */
    animation: softBreathe 3s infinite ease-in-out; /* 呼吸动画 */
}

/* 呼吸动画关键帧 */
@keyframes softBreathe {
    0%, 100% { transform: scale(1); border-color: #FFD180; }
    50% { transform: scale(1.02); border-color: #FFAB40; } /* 微微放大，边框变深一点点 */
}
/* 📧 邮箱状态卡片 (V3.0 美化) */
        .email-status-card {
            background: linear-gradient(135deg, #E3F2FD 0%, #F9FAFC 100%);
            border: 1px solid #BBDEFB;
            border-radius: 20px;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }
        .email-status-icon {
            font-size: 32px;
            color: #2196F3;
            margin-bottom: 8px;
            filter: drop-shadow(0 4px 6px rgba(33, 150, 243, 0.2));
        }
        .email-text {
            font-size: 16px;
            font-weight: 800;
            color: #555;
            font-family: monospace; /* 更有数字账号的感觉 */
            letter-spacing: 1px;
        }
        .email-label {
            font-size: 11px;
            color: #90CAF9;
            margin-bottom: 10px;
            font-weight: 700;
        }
        .btn-change-email {
            background: white;
            border: 1px solid #E3F2FD;
            color: #2196F3;
            padding: 6px 15px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(33, 150, 243, 0.1);
            transition: all 0.2s;
        }
        .btn-change-email:active { transform: scale(0.95); }
        .cancel-change {
            font-size: 12px; color: #999; text-decoration: underline; 
            margin-top: 10px; cursor: pointer; display: inline-block;
        }
        /* 🔥 新增：重复卡片互换引导标签 */
        .swap-hint-tag {
            position: absolute;
            top: 2px;
            right: 2px;
            background: linear-gradient(135deg, #2980b9 0%, #6dd5fa 100%); /* 科技蓝渐变，通过色彩心理学暗示“交换/流通” */
            color: white;
            font-size: 9px;
            padding: 2px 6px;
            border-radius: 8px;
            font-weight: 800;
            z-index: 10;
            box-shadow: 0 2px 5px rgba(41, 128, 185, 0.3);
            display: flex;
            align-items: center;
            gap: 2px;
            animation: pulse-swap 2s infinite; /* 呼吸动画 */
        }

        /* 呼吸动画效果 */
        @keyframes pulse-swap {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(109, 213, 250, 0.7); }
            70% { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(109, 213, 250, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(109, 213, 250, 0); }
        }
        /* 📖 集喵册 (Wiki) 样式 */
        .wiki-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            padding-bottom: 20px;
        }
        .wiki-card {
            background: white; border-radius: 16px;
            overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.2s; cursor: pointer;
            position: relative;
        }
        .wiki-card:active { transform: scale(0.98); }
        .wiki-img-box {
            width: 100%; aspect-ratio: 1; /* 正方形 */
            background: #f0f0f0; position: relative;
        }
        .wiki-img {
            width: 100%; height: 100%; object-fit: cover;
            opacity: 0; transition: opacity 0.5s; /* 懒加载渐变 */
        }
        .wiki-img.loaded { opacity: 1; }
        
        .wiki-info { padding: 12px; }
        .wiki-name { font-weight: 800; font-size: 15px; color: #333; margin-bottom: 4px; }
        /* 🍬 动态性格标签样式 */
        .trait-capsule {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 800;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            letter-spacing: 0.5px;
            vertical-align: middle;
        }

        /* 📸 拍立得风格详情页 */
        .polaroid-box {
            background: white; padding: 15px 15px 30px 15px;
            border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            transform: rotate(-2deg); margin: 10px 0 20px;
            border: 1px solid #eee;
        }
        .polaroid-img {
            width: 100%; aspect-ratio: 1; object-fit: cover;
            background: #eee; margin-bottom: 15px;
            filter: contrast(1.05) brightness(1.05); /* 稍微胶片感 */
        }
        .polaroid-text {
            font-family: "Varela Round", sans-serif;
            font-size: 18px; color: #333; font-weight: 900;
            text-align: center; letter-spacing: 1px;
        }
        .wiki-desc-box {
            background: #F9FAFC; padding: 20px; border-radius: 20px;
            font-size: 14px; color: #666; line-height: 1.8; text-align: left;
            margin-bottom: 20px;
        }
        .disclaimer-footer {
            font-size: 11px; color: #ccc; text-align: center;
            border-top: 1px dashed #eee; padding-top: 15px; margin-top: 20px;
        }
        /* —————— 🔥 V3.3 活动列表 UI 升级 (高光时刻) —————— */

/* 1. 基础卡片优化：让卡片更圆润，阴影更柔和 */
.event-card {
    position: relative; /* 为绝对定位的标签做准备 */
    border: 1px solid #FFF; /* 默认白边 */
    transition: transform 0.2s;
}

/* 2. 🌟 SSR级特效：万能图鉴出没的活动 */
/* 整个卡片会有淡淡的紫色光晕，且边框是渐变的 */
.event-card.ssr-glow {
    border: 2px solid transparent; /* 预留边框位置 */
    background-image: linear-gradient(white, white), linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 10px 25px rgba(161, 140, 209, 0.25); /* 梦幻紫投影 */
}

/* 3. 🏷️ 标签容器：放在商户名下方 */
.merchant-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* 4. 🏅 认证标签 (清爽蓝 - 信任感) */
.tag-cert-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #E3F2FD;
    color: #2196F3;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 800;
}

/* 5. 🔮 万能标签 (梦幻紫 - 稀缺感) */
.tag-uni-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(90deg, #E0C3FC 0%, #8EC5FC 100%); /* 独角兽渐变 */
    color: #5E35B1;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 800;
    box-shadow: 0 2px 5px rgba(161, 140, 209, 0.3);
    animation: breathe 3s infinite; /* 呼吸动画 */
}

/* 呼吸动画 */
@keyframes breathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.02); }
}

/* 6. 📸 图片左上角的“特殊掉落”角标 (类似游戏) */
.ssr-corner-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%);
    color: white;
    font-size: 10px;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 20px 0 10px 0;
    z-index: 2;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
/* 紫色版角标 */
.ssr-corner-badge.purple {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}
.upload-box { 
    width: 100%; height: 120px; background: #F2F4F8; 
    border-radius: 12px; border: 2px dashed #DDD; 
    position: relative; overflow: hidden; margin-bottom: 15px; 
}
.form-label { font-size: 13px; font-weight: 800; color: #555; margin-bottom: 8px; display: block; }

/* —————— 🔥 V3.5 市场工作台专属美化 (甜心特权卡) —————— */
.bd-dashboard-card {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFFFFF 100%); /* 奶油白到纯白的渐变 */
    border: 2px solid #FFE0B2; /* 极淡的橙色边框 */
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 20px; /* 与下方菜单拉开距离 */
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(255, 179, 0, 0.15); /* 暖色投影 */
    transition: all 0.2s;
    cursor: pointer;
}

.bd-dashboard-card:active {
    transform: scale(0.98);
    box-shadow: 0 5px 15px rgba(255, 179, 0, 0.1);
}

/* 背景装饰球，增加层次感 */
.bd-card-decor {
    position: absolute;
    right: -20px; top: -20px;
    width: 100px; height: 100px;
    background: radial-gradient(circle, #FFECB3 0%, transparent 70%);
    opacity: 0.4;
    border-radius: 50%;
    z-index: 0;
}

.bd-card-inner {
    position: relative; z-index: 1;
    display: flex; justify-content: space-between; align-items: center;
}

.bd-title-group { display: flex; align-items: center; gap: 12px; }

.bd-icon-box {
    width: 48px; height: 48px;
    background: #FFF;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #FFB300;
    box-shadow: 0 4px 10px rgba(255, 179, 0, 0.2);
    border: 1px solid #FFF8E1;
}

.bd-text-main {
    font-size: 16px; font-weight: 900; color: #5D4037; /* 暖咖色字体 */
    margin-bottom: 4px;
}

.bd-text-sub {
    font-size: 11px; color: #FFB300; font-weight: 700;
    background: #FFF8E1; padding: 2px 8px; border-radius: 10px;
    display: inline-block;
}

.bd-arrow-btn {
    width: 32px; height: 32px;
    background: #FFF;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #FFB300; font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* ========================================= */
/* 🔥 V3.3 C端登录页专属样式 (梦幻极光版) */
/* ========================================= */

/* 1. 全屏背景容器 (位置上移修正版) */
.login-page {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100dvh; /* 动态视口高度 */
    z-index: 9999;
    
    /* 背景保持不变 */
    background: 
        radial-gradient(circle at 15% 25%, rgba(255, 235, 240, 1) 0%, transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(230, 245, 255, 1) 0%, transparent 40%),
        radial-gradient(circle at 50% 60%, #FFF0F5 0%, #FFE4E1 100%);
    background-size: cover;
    background-attachment: fixed;
    
    display: flex; 
    flex-direction: column; 
    align-items: center;
    
    /* 🔥 核心修改：从 12vh 改为 8vh */
    /* 这样卡片会整体往上提，给底部留出更多空间，兼容华为/安卓微信的大额头 */
    padding-top: 8vh; 
    
    /* 底部安全距离保持不变 */
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
}

/* 优化后的卡片：更窄、更精致 */
.login-content-card {
    width: 82%;             /* 变窄一点 */
    max-width: 330px;       /* 上限也减小 */
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    
    border-radius: 24px;    /* 圆角收敛，更像B端 */
    padding: 35px 20px;     /* 左右留白减小，给验证码腾位置 */
    
    box-shadow: 
        0 20px 40px rgba(255, 154, 158, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
        
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

/* 3. LOGO 容器 */
.logo-box-fancy {
    width: 88px; 
    height: 88px;
    background: #FFF;
    border-radius: 26px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    margin: 0 auto 10px;
    /* 悬浮感投影 */
    box-shadow: 0 12px 24px rgba(255, 170, 170, 0.2);
}

/* 4. 输入框组 (定位图标用) */
.input-group-fancy {
    position: relative;
    margin-bottom: 16px;
}

/* 输入框内部图标 */
.input-icon-left {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #FFC1C1; /* 默认浅粉色 */
    font-size: 16px;
    z-index: 2;
    transition: 0.3s;
    pointer-events: none; /* 确保点击穿透 */
}

/* 5. 极简输入框 */
.login-input-fancy {
    width: 100%;
    height: 52px; /* 固定高度，手感更好 */
    background: #FFFFFF;
    border: 2px solid transparent; /* 默认无边框 */
    border-radius: 50px;
    padding: 0 20px 0 50px; /* 左边留出图标位置 */
    font-size: 15px;
    color: #555;
    box-sizing: border-box;
    transition: all 0.3s;
    /* 内部微凹效果 */
    box-shadow: inset 0 2px 6px rgba(166, 177, 225, 0.15); 
}

.login-input-fancy:focus {
    background: #FFF;
    border-color: #FF9A9E; /* 聚焦变粉 */
    box-shadow: 0 8px 20px rgba(255, 154, 158, 0.15);
    outline: none;
}

/* 聚焦时图标高亮动画 */
.login-input-fancy:focus + .input-icon-left,
.input-group-fancy:focus-within .input-icon-left {
    color: #FF9A9E;
    transform: translateY(-50%) scale(1.15);
}

.captcha-row-fancy {
    display: flex;
    gap: 8px; /* 间距稍微收紧 */
    align-items: stretch;
    margin-bottom: 16px;
}

/* 7. 果冻渐变按钮 */
.btn-fancy {
    width: 100%;
    height: 52px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 800;
    margin-top: 15px;
    border: none;
    color: white;
    /* 梦幻渐变：蜜桃粉 -> 糖果粉 */
    background: linear-gradient(135deg, #FF9A9E 0%, #FF6B6B 100%);
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.35);
    letter-spacing: 1px;
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-fancy:active { transform: scale(0.96); }
/* 新增：验证码专用容器，确保 SVG 完美缩放 */
.captcha-box-glass {
    width: 95px;            /* 固定宽度，不抢占输入框空间 */
    flex-shrink: 0;         /* 禁止被压缩 */
    border-radius: 50px;    /* 与输入框一致的圆角 */
    border: 2px solid #FFF0F5;
    background: #FFF;
    overflow: hidden;       /* 超出隐藏 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 🔥 核心修复：强制 SVG 适应容器 */
.captcha-box-glass svg {
    width: 100% !important;
    height: 100% !important;
    transform: scale(1.1); /* 稍微放大一点点填满缝隙 */
    display: block;
}