/* =========================================
   📱 手机端适配 (Max Width 768px)
   ========================================= */
@media screen and (max-width: 768px) {

    html,
    body {
        height: 100% !important;
        width: 100% !important;
        margin: 0;
        padding: 0;

        /* 强制禁止页面整体滚动 */
        overflow: hidden !important;

        /* 使用 fixed 定位，让浏览器彻底断绝滚动 body 的念头 */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        /* 布局模式 */
        display: flex;
        flex-direction: column;
    }

    /* 2. 上半部分：舞台 (刚性固定) */
    .left-panel {
        /* 高度分配：例如占屏幕 40% (给下面留更多空间输入) */
        flex: 0 0 40%;
        height: 40%;

        width: 100%;
        position: relative;
        z-index: 10;
        background-color: #333;
        overflow: hidden;
        /* 内部也不许滚 */
    }

    .right-panel {
        /* 占据剩余空间 */
        flex: 1;

        /* 【关键修复 1】必须设置 min-height: 0 */
        /* 否则 Flex 子元素会拒绝收缩，强行撑开父容器 */
        min-height: 0;

        width: 100%;

        /* 【关键修复 2】开启内部滚动 */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        background: #fff;
        z-index: 20;
        padding: 15px;

        /* 底部留出巨大空间，防止最后的内容贴底或被键盘遮挡 */
        padding-bottom: 100px;
    }

    /* 4. 背景切换栏适配：变为底部横向滚动 */
    /* .background-wrapper {
        bottom: 0px;
        right: 0;
        left: 0;
        width: 100%;
        background: rgba(170, 167, 167, 0.2);
        border-radius: 0;
        padding: 8px;
        display: flex;
        overflow-x: auto;
    } */
    /* 4. 背景切换栏适配：变为底部横向滚动 */
    /* 1. 外层容器：只负责“待在底部”和“背景色” */
    .background-wrapper {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 50;
        background: rgba(170, 167, 167, 0.2);
        backdrop-filter: blur(5px);
        padding: 0;
        margin: 0;
    }

    /* 2. 内层容器：负责真正的“排列”和“滚动” */
    .background-options {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        /* 占满父容器 */
        box-sizing: border-box;
        /* 防止 padding 撑破宽度 */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* iOS 丝滑滚动 */

        /* 间距与留白 */
        gap: 12px;
        padding: 2px 4px;
        /* 上下10px，左右15px（防贴边） */
    }

    /* 3. 子元素 (图片按钮) */
    /* 注意：你的HTML里没有 >* 选择器，建议直接用类名控制，更安全 */
    .background-options .bg-btn {
        /* 禁止压缩，保持原始大小 */
        flex-shrink: 0;

        /* 设置图片大小 */
        width: 36px;
        height: 36px;

        /* 样式 */
        border-radius: 4px;
        background-size: cover;
        background-position: center;
        border: 2px solid transparent;
        cursor: pointer;
    }

    /* 选中状态 */
    .background-options .bg-btn.selected {
        border-color: #1890ff;
    }

    /* 4. (可选) 隐藏滚动条 */
    .background-options::-webkit-scrollbar {
        display: none;
    }

    .bg-btn {
        width: 35px;
        height: 35px;
    }

    .bg-btn.upload-btn {
        width: 35px;
        height: 35px;
    }

    .guide-content {
        /* 1. 宽度保持之前的设置 */
        width: 85%;
        max-width: 350px;

        /* 2. 【核心修改】限制最大高度 */
        /* 设置为视口高度的 60%，留出 40% 给舞台和背景 */
        max-height: 60vh;

        /* 3. 【核心修改】内容溢出时允许内部滚动 */
        overflow-y: auto;

        /* 4. 进一步压缩内边距 */
        padding: 15px 15px;
    }

    /* 顶部大图标：大幅缩小 */
    .guide-icon {
        font-size: 28px;
        /* 从 48px -> 28px */
        padding: 6px;
        margin-bottom: 5px;
        /* 减少下方空隙 */
    }

    /* 标题：紧凑排列 */
    .guide-content h3 {
        font-size: 16px;
        margin-bottom: 10px;
        /* 减少与列表的距离 */
        margin-top: 0;
    }

    /* 列表容器 */
    .guide-content ul {
        padding: 0 5px;
        margin-bottom: 10px;
        /* 减少底部距离 */
    }

    /* 列表项：更紧凑 */
    .guide-content li {
        font-size: 13px;
        margin-bottom: 8px;
        /* 列表项之间靠得更近 */
        gap: 8px;
        line-height: 1.4;
        /* 行高稍微改小 */
    }

    /* 左侧 Emoji 图标 */
    .guide-content .g-icon {
        font-size: 14px;
        width: 18px;
    }

    /*svg下栏*/
    .font-grid-container {
        /* 原来是 340px，手机放不下，改为固定小一点或者百分比 */
        width: 220px;
        /* 限制最大高度，防止挡住整个屏幕 */
        height: 100px;
        /* 优化移动端滚动体验 */
        -webkit-overflow-scrolling: touch;
    }

    /* 2. 网格布局调整 */
    .font-grid-child-object {
        /* 3列变2列，让每个字体名字有更多空间显示 */
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        /* 减小间距 */
    }

    /* 3. 字体选项样式微调 */
    .font-grid-child-object>.font-option {
        /* 强制字体变小 */
        font-size: 12px !important;
        /* 增加一点点击区域，同时减少左右内边距 */
        padding: 8px 2px !important;
        /* 居中对齐 */
        text-align: center;
        /* 防止长名字（如 sillii-willinn）撑破布局，超出省略 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 稍微加个边框或背景让它看起来更像按钮（可选） */
        background-color: #f9f9f9;
        border-radius: 4px;
        border: 1px solid #eee;
        /* 去掉底边框，改用盒子样式更整齐 */
        border-bottom: 1px solid #eee !important;
    }

    .color-grid {
        /* 1. 必须声明这是网格布局 */
        display: grid;

        /* 2. 宽度与列数调整 */
        width: 200px;
        /* 建议改成 5 列，这样 220px / 5 ≈ 44px 一个格子，放 30px 的圆点刚好 */
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        /* 间距 */

        /* 3. 滚动设置 */
        height: 100px;
        /* 限制最大高度 */
        overflow-y: auto;
        /* 【关键】开启垂直滚动 */
        -webkit-overflow-scrolling: touch;
        /* 丝滑滚动 */

        /* 4. 居中与内边距 */
        margin: 0 auto;
        /* 容器水平居中 */
        padding: 5px;
    }

    .color-grid>.color-item {
        /* 5. 让内部的圆点在格子中绝对居中 */
        display: flex;
        justify-content: center;
        align-items: center;

        /* 去掉固定宽度，让它占满网格单元，然后靠 flex 居中 */
        width: auto;
        height: 40px;
        /* 给一点高度方便点击 */
    }

    /* 6. 确保里面的颜色按钮大小合适 */
    .color-grid .color-btn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        /* 加点阴影更有质感 */
    }

    .glow-switch {
        position: relative;
        width: 60px;
        height: 26px;
        background: #111;
        border-radius: 18px;
        border: 2px solid #00ffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-family: sans-serif;
        overflow: hidden;
        user-select: none;
        position: relative;
    }

    .glow-label {
        flex: 1;
        text-align: center;
        z-index: 2;
        color: #888;
        font-weight: bold;
        font-size: 8px;
        transition: color 0.3s;
        pointer-events: none;
    }

    .length-label,
    .height-label {
        position: absolute;
        font-size: 8px;
        font-family: 'Helvetica Neue', 'Arial', 'sans-serif';
        /* 更现代干净的字体 */
        color: #333;
        /* 深灰色，比纯黑更柔和 */
        font-weight: 600;
        /* 半粗体，专业感 */
        background: rgba(255, 255, 255, 0.8);
        /* 半透明白色背景，增加可读性 */
        padding: 2px 6px;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
        /* 细腻的阴影 */
        backdrop-filter: blur(4px);
        /* 毛玻璃效果，增加层次感（可选） */
        white-space: nowrap;
    }

    .toolbar {
        padding: 4px 8px;
        /* 减小内边距 */
        gap: 4px;
        /* 减小按钮之间的间距 */
        margin-bottom: 10px;
        /* 离物体近一点 */
        border-radius: 20px;
        /* 圆角稍微变小 */
        transform-origin: bottom center;
        /* 缩放基准点 */
    }

    .tool-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 5px 5px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        color: #333;
        transition: background 0.2s;
    }

    .color-trigger-box {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        border: 1px solid #ddd;
        cursor: pointer;
    }

    /* 1. 视觉上：稍微把小白点变大一点，方便眼睛定位 */


    /* 2. 交互上：使用伪元素创建一个巨大的透明点击区 (关键！) */
    /* 这会让点击范围向四周扩大 15px，总点击区域达到 50x50px 左右 */
    .handle::after {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        border-radius: 50%;
        /* background: rgba(255, 0, 0, 0.1); */
        /* 调试时取消注释这行，你可以看到红色的点击区 */
    }

    /* 3. 位置修正：因为点变大了，需要重新校准位置让圆心对准角 */
    /* 20px的一半是10px，所以偏移量改为 -10px */
    .handle.tl {
        top: -10px !important;
        left: -10px !important;
    }

    .handle.tr {
        top: -10px !important;
        right: -10px !important;
    }

    .handle.bl {
        bottom: -10px !important;
        left: -10px !important;
    }

    .handle.br {
        bottom: -10px !important;
        right: -10px !important;
    }

}