/* =============================================================================
 * mobile-beautify.css  ——  Cream 广场 手机端视觉美化层
 *
 * 加载顺序：style.css → responsive.css → mobile-beautify.css
 * 作用：在 responsive.css 已经搞定布局适配的基础上，做手机端的"颜值升级"
 *      （设计 Token、背景虚化、卡片白底、底部 Tab Bar、回顶按钮、入场动画等）
 * 非手机端（>768px）保持现状，一切美化只对移动端生效。
 * ========================================================================== */

/* ============ 设计 Token（通用，桌面/手机都可用） ============ */
:root {
    /* 主题色 */
    --cream-pink-50:  #fff5f7;
    --cream-pink-100: #fdecef;
    --cream-pink-200: #fcdde0;   /* 现有主粉 */
    --cream-pink-300: #f9c3cc;
    --cream-pink-400: #f4a4b3;
    --cream-pink-500: #ff8aa7;   /* 强调粉 */
    --cream-pink-600: #e94f73;
    --cream-pink-700: #c2185b;   /* 深粉：重要文字/选中 */

    /* 文字 */
    --cream-text-1: #2b2430;     /* 主文 */
    --cream-text-2: #6a5a67;     /* 次文 */
    --cream-text-3: #a599a0;     /* 更淡 */

    /* 阴影 */
    --cream-shadow-sm: 0 2px 8px rgba(252, 135, 155, 0.12);
    --cream-shadow-md: 0 6px 20px rgba(252, 135, 155, 0.18);
    --cream-shadow-lg: 0 12px 36px rgba(252, 135, 155, 0.26);
    --cream-shadow-inset: inset 0 0 0 1px rgba(252, 221, 224, 0.7);

    /* 圆角 */
    --cream-radius-xs: 8px;
    --cream-radius-sm: 12px;
    --cream-radius-md: 16px;
    --cream-radius-lg: 22px;
    --cream-radius-xl: 28px;
    --cream-radius-pill: 999px;

    /* 动效 */
    --cream-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --cream-dur-fast: 160ms;
    --cream-dur-base: 260ms;
    --cream-dur-slow: 420ms;
}

/* 系统 UI 字体（更快、更清晰），保留原"微软雅黑"作为末位回退 */
html, body {
    font-family:
        -apple-system, BlinkMacSystemFont,
        "PingFang SC", "HarmonyOS Sans SC", "MiSans",
        "Noto Sans CJK SC", "Segoe UI", Roboto, "Helvetica Neue",
        "Microsoft YaHei", "微软雅黑", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern", "palt";
    text-rendering: optimizeLegibility;
}

/* =============================================================================
 * 下面所有规则仅在 ≤ 768px 的手机视窗生效
 * ========================================================================== */
@media screen and (max-width: 768px) {

    /* ============ 1) 背景虚化 + 半透蒙层，提高内容可读性 ============ */
    body {
        position: relative;
        /* 保留 body 原始 background-image（banner1.jpg） */
        background-size: cover !important;
        background-position: center center !important;
    }
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;                 /* 在全部内容之下 */
        background: inherit;          /* 继承 body 的背景图 */
        background-size: cover;
        background-position: center center;
        filter: blur(14px) saturate(1.1);
        transform: scale(1.08);       /* 避免 blur 边缘露白边 */
    }
    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        /* 粉→白的暖色渐变蒙层，让下方文字可读 */
        background:
            radial-gradient(ellipse at top,
                rgba(252, 221, 224, 0.35) 0%,
                rgba(255, 245, 247, 0.55) 45%,
                rgba(255, 255, 255, 0.65) 100%);
    }

    /* ============ 2) 主内容容器（.main / .xny_M / .blank_M 等）改白卡 ============ */
    .main,
    .xny_M,
    .blank_M,
    .bwg_M,
    .cartMain {
        background: #ffffff !important;
        border-radius: var(--cream-radius-lg) !important;
        box-shadow: var(--cream-shadow-md) !important;
        margin: 16px 12px !important;
        padding: 18px !important;
        box-sizing: border-box;
    }

    /* ============ 3) 卡片类元素统一白底 + 精致阴影 + 大圆角 ============ */
    .index_top_l,
    .index_top_c_t li,
    .index_top_c_b_l,
    .index_top_c_b_r,
    .index_two li,
    .index_three li,
    .index_four,
    .index_five_con,
    .bwg_M_two > ul > li,
    .bwg_M_three_Ul > li,
    .xny_M_b li,
    .goods_item,
    .post_card,
    .post_creator,
    .mlk_sidebar,
    .mlk_sidebar_right,
    .cartMain .cartList li,
    .cartMain .addList,
    .cartMain .shipping-info {
        background: #ffffff !important;
        border: 1px solid rgba(252, 221, 224, 0.8) !important;
        box-shadow: var(--cream-shadow-sm) !important;
        border-radius: var(--cream-radius-md) !important;
        transition: transform var(--cream-dur-base) var(--cream-ease),
                    box-shadow var(--cream-dur-base) var(--cream-ease);
    }

    /* 章节标题横线 */
    .index_top_l h2,
    .index_top_c_t h2,
    .index_top_c_b_l h2,
    .index_top_c_b_r h2,
    .index_two h2,
    .index_three_top h2,
    .index_three_top .start,
    .index_four h2,
    .index_five_con h2 {
        background: linear-gradient(90deg,
            var(--cream-pink-100) 0%,
            rgba(255, 255, 255, 0) 90%) !important;
        border-bottom: 1px solid rgba(252, 221, 224, 0.6) !important;
        color: var(--cream-text-1) !important;
        font-weight: 600 !important;
    }

    /* ============ 4) 顶部导航：玉糖渐变 + 毛玻璃 + 圆角浮层 ============ */
    nav {
        background: linear-gradient(135deg,
            rgba(252, 221, 224, 0.92) 0%,
            rgba(249, 195, 204, 0.92) 100%) !important;
        backdrop-filter: saturate(1.4) blur(12px);
        -webkit-backdrop-filter: saturate(1.4) blur(12px);
        box-shadow: 0 4px 12px rgba(233, 79, 115, 0.12);
        padding: 10px 0 12px !important;
        border-radius: 0 0 var(--cream-radius-lg) var(--cream-radius-lg);
    }
    nav .topUl {
        color: var(--cream-pink-700) !important;
        font-size: 13px !important;
        padding: 0 14px 8px !important;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
        margin-bottom: 8px !important;
    }
    nav .topUl a {
        color: var(--cream-pink-700) !important;
        padding: 2px 10px;
        border-radius: var(--cream-radius-pill);
        background: rgba(255, 255, 255, 0.4);
    }
    nav .FirstUl > .has-submenu > a {
        color: #ffffff !important;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(233, 79, 115, 0.3);
    }
    nav .FirstUl > li > a {
        border-right: 0 !important;
    }
    nav .SecondUl {
        background: rgba(255, 255, 255, 0.88) !important;
        box-shadow: 0 2px 8px rgba(194, 24, 91, 0.08) !important;
    }
    nav .SecondUl li {
        color: var(--cream-pink-700) !important;
        background: transparent !important;
        font-weight: 500;
    }
    nav .SecondUl li.hover {
        background: var(--cream-pink-200) !important;
        color: var(--cream-pink-700) !important;
    }

    /* Logo 居中 + 阴影 */
    .logo img {
        filter: drop-shadow(0 4px 10px rgba(194, 24, 91, 0.15));
    }
    /* 头像加个柔和描边 */
    .touxiang .bTmg,
    .touxiang .b2Tmg {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9),
                    0 6px 16px rgba(194, 24, 91, 0.18);
    }

    /* ============ 手机端头像布局修复 ============ */
    .profile-header {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }

    .avatar-section {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .avatar-wrapper.bili-avatar {
        width: 80px !important;
        height: 80px !important;
        z-index: 2;
    }

    .avatar-wrapper.local-avatar {
        width: 50px !important;
        height: 50px !important;
        margin-top: 0 !important;
        margin-left: -20px !important;
        z-index: 1;
    }

    /* 原有touxiang头像在手机端隐藏（已在profile-card-v2中显示） */
    .touxiang {
        display: none !important;
    }

    /* ============ 手机端用户头部区域适配 ============ */
    .sea_M {
        gap: 12px !important;
        padding-top: 10px !important;
    }
    
    .user_header {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 15px 20px !important;
        margin: 0 10px !important;
    }
    
    .user_header .user_avatar {
        display: none !important;
    }
    
    .user_header .user_info {
        text-align: center !important;
    }
    
    .user_header .user_info h1 {
        font-size: 24px !important;
        justify-content: center !important;
    }
    
    .user_header .user_data {
        justify-content: center !important;
    }
    
    .user_header .user_actions {
        margin-left: 0 !important;
    }
    
    .user_header .user_actions .btn {
        padding: 10px 20px !important;
        font-size: 13px !important;
    }
    
    /* ============ 手机端个人资料卡适配 ============ */
    .profile-card-v2 {
        padding: 20px !important;
        margin: 0 10px !important;
    }
    
    .profile-header {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }
    
    .info-section {
        width: 100% !important;
        text-align: center !important;
    }
    
    .info-section .signature {
        text-align: left !important;
    }
    
    .meta-tags {
        justify-content: center !important;
    }
    
    .bio-text {
        text-align: left !important;
    }

    /* ============ 5) 按钮统一：主粉渐变 + 按压反馈 ============ */
    .xny_M_b_Ul .c_btn,
    .cartMain .btn,
    .creator_footer .post_btn,
    .exchange_btn,
    .confirm-btn,
    .searchList .btn {
        background: linear-gradient(135deg,
            var(--cream-pink-500) 0%,
            var(--cream-pink-600) 100%) !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: var(--cream-radius-pill) !important;
        box-shadow: 0 4px 12px rgba(233, 79, 115, 0.25),
                    inset 0 1px 0 rgba(255, 255, 255, 0.4);
        transition: transform var(--cream-dur-fast) var(--cream-ease),
                    box-shadow var(--cream-dur-fast) var(--cream-ease),
                    filter var(--cream-dur-fast) var(--cream-ease);
        font-weight: 600;
    }
    .xny_M_b_Ul .c_btn:active,
    .cartMain .btn:active,
    .exchange_btn:active,
    .confirm-btn:active,
    .searchList .btn:active {
        transform: scale(0.96);
        filter: brightness(0.95);
        box-shadow: 0 2px 6px rgba(233, 79, 115, 0.3);
    }

    /* 次要按钮（删除/取消） */
    .cartMain .cartList .del,
    .cancel-btn {
        background: #ffffff !important;
        color: var(--cream-text-2) !important;
        border: 1px solid rgba(252, 221, 224, 0.9) !important;
        border-radius: var(--cream-radius-pill) !important;
        padding: 8px 16px !important;
    }
    .cartMain .cartList .del:active,
    .cancel-btn:active {
        background: var(--cream-pink-100) !important;
    }

    /* 数量 +/− 按钮 */
    .cartMain .cartList .right .prev,
    .cartMain .cartList .right .add {
        background: var(--cream-pink-100) !important;
        color: var(--cream-pink-700) !important;
        border-radius: var(--cream-radius-pill) !important;
        font-weight: 700 !important;
        box-shadow: var(--cream-shadow-sm);
    }
    .cartMain .cartList .right .inp {
        border: 1px solid var(--cream-pink-200) !important;
        border-radius: var(--cream-radius-xs) !important;
        background: #fff !important;
    }

    /* ============ 6) 表单输入框：柔和底 + 聚焦态 ============ */
    input[type="text"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="email"],
    input[type="search"],
    textarea {
        border-radius: var(--cream-radius-sm) !important;
        border: 1.5px solid rgba(252, 221, 224, 0.9) !important;
        background: #ffffff !important;
        padding: 10px 14px !important;
        font-size: 16px;              /* 防 iOS 聚焦缩放 */
        box-sizing: border-box;
        transition: border-color var(--cream-dur-fast) var(--cream-ease),
                    box-shadow var(--cream-dur-fast) var(--cream-ease);
        -webkit-appearance: none;
    }
    input:focus,
    textarea:focus {
        border-color: var(--cream-pink-500) !important;
        box-shadow: 0 0 0 3px rgba(255, 138, 167, 0.18);
        outline: none;
    }

    /* ============ 7) 商品/资源卡的价格/标签升级 ============ */
    .xny_M_b_Ul .price,
    .goods_price .cost,
    .cartMain .cartList .con .price {
        color: var(--cream-pink-600) !important;
        font-weight: 700;
        font-size: 18px !important;
    }
    .tag,
    .bwg_M_five .tag,
    .bwg_M_three_Ul_c li {
        border-radius: var(--cream-radius-pill) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    /* "剩余多少件"小角标 */
    .goods_item .remaining {
        background: var(--cream-pink-100);
        color: var(--cream-pink-700);
        border-radius: var(--cream-radius-pill);
        padding: 2px 10px;
        font-size: 12px;
        display: inline-block;
    }

    /* ============ 8) 商品卡入场动画（JS 会给 .in 类） ============ */
    .xny_M_b li,
    .bwg_M_two > ul > li,
    .goods_item,
    .post_card {
        opacity: 0;
        transform: translateY(14px);
    }
    .xny_M_b li.in,
    .bwg_M_two > ul > li.in,
    .goods_item.in,
    .post_card.in {
        animation: creamFadeUp var(--cream-dur-slow) var(--cream-ease) forwards;
    }
    @keyframes creamFadeUp {
        to { opacity: 1; transform: translateY(0); }
    }
    /* 如果浏览器不支持 IntersectionObserver（极少数），fallback 显示全部 */
    .no-io .xny_M_b li,
    .no-io .bwg_M_two > ul > li,
    .no-io .goods_item,
    .no-io .post_card {
        opacity: 1 !important;
        transform: none !important;
    }

    /* ============ 9) Footer ============ */
    footer {
        background: rgba(252, 221, 224, 0.92) !important;
        color: var(--cream-pink-700) !important;
        border-radius: var(--cream-radius-lg) var(--cream-radius-lg) 0 0;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        margin: 24px 0 0 !important;
        padding: 16px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    }
    footer a {
        color: var(--cream-pink-700) !important;
    }

    /* ============ 10) 给页面底部留出 Tab Bar 的空间 ============ */
    body {
        padding-bottom: calc(68px + env(safe-area-inset-bottom));
    }

    /* ============ 11) Sticky Footer —— 页脚始终维持在底部 ============ */
    /* 让主容器使用 flex 布局，footer 会被自动推到底部 */
    .Main_S,
    .main,
    .sea-profile-container,
    .shop-container,
    .xny_M,
    .bwg_M,
    .xyc_M {
        display: flex !important;
        flex-direction: column !important;
        min-height: 100vh !important;
    }

    /* 主内容区自动扩展，填满剩余空间 */
    .Main_S_M,
    .main > div:not(footer),
    .sea-profile-container > div:not(footer),
    .shop-container > div:not(footer),
    .xny_M > div:not(footer),
    .bwg_M > div:not(footer),
    .xyc_M > div:not(footer),
    .xyc_right_Main,
    main,
    .content-wrapper,
    .page-content {
        flex: 1 0 auto !important;
    }

    /* 确保留言板内容区域有足够的底部边距 */
    .xyc_M_r_b {
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }

    /* footer 自动被推到最底部，不收缩 */
    footer {
        flex-shrink: 0 !important;
        margin-top: auto !important;
    }

    /* ============ 12) 手机端隐藏默认 footer（已有 Tab Bar） ============ */
    footer {
        display: none !important;
    }
}

/* =============================================================================
 * 固定在底部的 Tab Bar（所有视窗都有 DOM，但只在 ≤768px 显示）
 * ========================================================================== */
.m-tabbar {
    display: none;
}
@media screen and (max-width: 768px) {
    .m-tabbar {
        display: flex;
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        z-index: 1000;
        justify-content: space-around;
        align-items: stretch;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: saturate(1.6) blur(18px);
        -webkit-backdrop-filter: saturate(1.6) blur(18px);
        border-radius: var(--cream-radius-xl);
        box-shadow: 0 10px 28px rgba(194, 24, 91, 0.18),
                    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
        padding: 8px 6px;
    }
    .m-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 4px;
        color: var(--cream-text-2);
        text-decoration: none;
        border-radius: var(--cream-radius-md);
        transition: color var(--cream-dur-fast) var(--cream-ease),
                    transform var(--cream-dur-fast) var(--cream-ease);
    }
    .m-tab svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .m-tab span {
        font-size: 11px;
        line-height: 1.2;
        font-weight: 500;
    }
    .m-tab:active {
        transform: scale(0.92);
    }
    .m-tab.active {
        color: var(--cream-pink-700);
    }
    .m-tab.active svg {
        fill: rgba(255, 138, 167, 0.18);
    }
}

/* =============================================================================
 * 浮动回顶按钮
 * ========================================================================== */
.m-backtop {
    display: none;
}
@media screen and (max-width: 768px) {
    .m-backtop {
        display: flex;
        position: fixed;
        right: 16px;
        bottom: calc(82px + env(safe-area-inset-bottom));
        z-index: 999;
        width: 44px;
        height: 44px;
        border-radius: var(--cream-radius-pill);
        border: 0;
        background: linear-gradient(135deg,
            var(--cream-pink-500) 0%,
            var(--cream-pink-600) 100%);
        color: #fff;
        font-size: 20px;
        line-height: 1;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 20px rgba(233, 79, 115, 0.35);
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px);
        transition: opacity var(--cream-dur-base) var(--cream-ease),
                    transform var(--cream-dur-base) var(--cream-ease);
        cursor: pointer;
    }
    .m-backtop.show {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    .m-backtop:active {
        transform: scale(0.92) translateY(0);
    }
}