/* ======================
   全局基础设置
   ====================== */

/* 去掉默认边距，背景先统一成黑色底 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #000;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color: #fff;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

/* 默认：先当成 PC 来显示；移动端在 index.html 里用 JS 切换。
   如果你只想用 CSS 媒体查询，这两行可以删掉。 */
.pc-page {
    min-height: 100vh;
}
.mobile-page {
    display: none;
}
    /* PC 整页：用背景图铺满屏幕 */
    .pc-page {
        position: relative;
        min-height: 100vh;
        /* 背景图在这里改： */
        background-image: url("images/pc-bg.png"); /* PC 背景大图路径 */
        background-size: cover;    /* 铺满 */
        background-position: center center;
        background-repeat: no-repeat;
        color: #fff;
    }
/* 内容框在背景上面 */
.pc-frame {
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 60px 60px 60px 60px;
    z-index: 1;           /* 确保在背景之上 */
}

/* ======================
   PC 外层框架：pc-frame
   ====================== */

/* 这个容器是你要“整体往里缩”的那一层：
   - 想离屏幕边缘远一点，就改 padding
   - 想整体靠左/靠右，可以改 max-width、margin */
.pc-frame {
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;

    /* ==== 核心：PC 布局和屏幕边缘的距离都在这里控制 ==== */
    padding: 40px 40px 40px 40px;  /* 上 右 下 左 内边距，随便调 */
    /* max-width: 1400px;          如需宽度限制可打开，用 margin:0 auto 居中 */
    /* margin: 0 auto; */
}

/* 顶部一行：左 logo + 右 icon 组 */
.pc-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 如果需要整体离顶部再远一点，可以在这里加 margin-top */
    /* margin-top: 10px; */
}

/* 左上 logo 区域 */
.pc-logo {
    height: 100px;   /* logo 高度：调这个就行，宽度等比缩放 */
}
/* 左中图：大概在屏幕中间稍偏左 */
.pc-middle-left {
	position: absolute;
	left: 10%;
	/* margin: 10%; */
	right: 10%;
	bottom: 10%;
	/* top: 10%; */
}

/* 右上图标组：3 个 icon 横向排列 */
.pc-icons-wrap {
    display: flex;
    gap: 24px;      /* 图标之间的间距 */
}

.pc-icons-wrap img {
    width: 100px;   /* 右上角图标大小 */
    cursor: pointer;
}

/* ======================
   PC 左下二维码下载区
   ====================== */

/* 整个“左下二维码+文字”的区域 */
.pc-bottom-download {
    position: absolute;
    left: 160px;     /* 内容离屏幕左侧（或者说离 .pc-frame 左边）距离 */
    bottom: 160px;   /* 内容离屏幕底部距离 */
    display: flex;
    align-items: flex-start;
    gap: 20px;      /* 二维码和文字之间的间距 */
    max-width: 520px; /* 可选：限制总宽度，防止太长 */
}

/* 二维码盒子，可以单独控制大小 */
.pc-qrcode-wrap img {
    width: 180px;   /* 二维码宽高 */
    height: 180px;
}
#pc-qrcode {
    width: 180px;      /* 二维码宽度 */
    height: 180px;     /* 二维码高度 */
    background: #fff;  /* 不想要白边可以去掉 */
    padding: 10px;
}

/* 右侧文字区域 */
.pc-download-text {
    flex: 1;
}

/* 标题（“安卓手机 建议使用UC浏览器扫码”） */
.pc-download-title {
    margin: 0 0 12px 0;
    font-size: 22px;     /* 标题字体大小 */
    line-height: 1.4;    /* 行高，换行时距离 */
    color: #ff9b3b;      /* 标题橙色：你可以调成别的颜色 */
}

/* 安装提示小字 */
.pc-download-tip {
    margin: 0;
    font-size: 12px;     /* 小字字体大小 */
    line-height: 1.6;    /* 行距 */
    color: #f0f0f0;      /* 小字颜色，偏浅灰 */
    max-width: 360px;    /* 防止一行太长，可以调整或删掉 */
}

/* ------- 移动端布局 ------- */

    .mobile-page {
        position: relative;
        min-height: 100vh;
        background-color: #111; /* 深灰背景 */
        padding-bottom: 80px;   /* 给底部按钮预留空间 */
        box-sizing: border-box;
    }
/* 固定顶部：banner + tab */
.m-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 15;
    background: #111;      /* 和整体背景一样，避免露出底色 */
}


    /* 顶部 banner 图区域 */
    .m-top-banner {
        padding: 12px 12px 8px 12px;  /* 上左右 padding，想贴边就调 */
    }

    .m-top-banner img {
        border-radius: 10px;    /* 顶部图片圆角大小 */
        /* 如果不要圆角，改成 0 */
    }

    /* ---- 胶囊 Tab 区域 ---- */

    .m-tab-wrapper {
        padding: 2px 12px 10px 12px; /* 控制 Tab 离上方/左右的距离 */
    }

    .m-tabs {
        display: flex;
        background-color: #222;  /* 背景浅灰（外层胶囊） */
        border-radius: 10px;    /* 胶囊效果 */
    }

    .m-tab-btn {
        flex: 1;
        text-align: center;
        padding: 8px 0;          /* Tab 高度（上下内边距） */
        border-radius: 10px;
        font-size: 14px;
        color: #aaa;             /* 默认文字白色 */
        background: transparent; /* 未选中时透明 */
        border: none;
        outline: none;
        cursor: pointer;
    }

    .m-tab-btn.active {
        background-color: #bffd63;  /* 选中 Tab 的橙色背景 */
        color: #000;                /* 选中时的文字颜色 */
        font-weight: 500;
    }

    /* Tab 内容区：每个 Tab 对应一张长图，只显示当前激活的 */
    .m-tab-content {
    padding: 150px 12px 0 12px;  /* 230px 你自己调，= banner 高度 + tab 高度 + 间距 */
    }

    .m-tab-panel {
        display: none;
    }

    .m-tab-panel.active {
        display: block;
    }

    .m-long-image {
        border-radius: 10px;   /* 长图圆角 */
        overflow: hidden;
        cursor: pointer;
    }

/* 侧边悬浮栏整体：黑色圆角条 */
.floating-bar {
    position: fixed;
    right: 0;                    /* 靠右贴边 */
    top: 50%;                    /* 垂直居中 */
    transform: translateY(-50%);
    background: #000000ad;         /* 圆角条底色 */
    border-radius: 24px 0 0 24px;/* 左侧圆角，右侧贴屏幕 */
    padding: 10px 6px;           /* 内边距：上下/左右 */
    display: flex;
    flex-direction: column;
    gap: 10px;                   /* 三个图之间的间距 */
    z-index: 40;
}

/* 每个悬浮项（本身只是个容器，主要靠 img） */
.floating-item img {
    width: 32px;     /* 图块宽度：你可根据切图调 */
    height: auto;
    display: block;
}

/* ---- 底部两个下载按钮 ---- */
    .m-bottom-download-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #000;      /* 底条背景颜色 */
        padding: 8px 10px 10px 10px; /* 与屏幕边缘的距离 */
        display: flex;
        gap: 8px;                    /* 两个按钮的间距 */
        box-sizing: border-box;
        z-index: 30;
    }

    .m-download-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;                      /* 图标和文字间距 */
        padding: 10px 0;               /* 按钮高度：改上下 padding 即可 */
        border-radius: 999px;
        background-color: #333;        /* 默认浅灰背景 */
        color: #fff;                   /* 白字 */
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
    }

    /* 左按钮橙色高亮，右边灰色，你可以根据需要互换颜色 */
    .m-download-btn--android {
        background-color: #ff7a1a;
    }
    .m-download-btn--ios {
        background-color: #ff7a1a;
    }

    .m-download-btn img {
        width: 18px;   /* 安卓机器人 / 苹果 logo 尺寸 */
        height: 18px;
    }

    .dl-mask {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);  /* 周围变暗 */
    display: none;                /* 默认隐藏 */
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.dl-mask-img {
    max-width: 80%;
    max-height: 80%;
    border-radius: 8px;
}
.canvas-wrap {
    width: 100%;                /* 自适应屏幕宽度 */
    max-width: 750px;           /* 你设计稿的宽度 */
    margin: 0 auto;
}

canvas {
    width: 100%;                /* 拉伸到容器宽度 */
    height: auto;               /* 高度按比例 */
    display: block;
}

/* 底部两张图：垂直依次排，贴满宽度 */
.m-block-bottom {
	position: fixed;
	bottom: 0;
}