@layer utilities {
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .card-hover {
        transition: all 0.3s ease;
    }

    .card-hover:hover {
        transform: translateY(-5px);
    }

    .gradient-bg {
        /* 修改为与logo一致的橙色 */
        background: linear-gradient(135deg, #FF6B00 0%, #FF5200 100%);
    }

    .input-focus {
        transition: all 0.3s ease;
    }

    .input-focus:focus {
        /* 修改为与logo一致的橙色 */
        border-color: #FF6B00;
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
        outline: none;
    }

    /* 安装页：在低端安卓机/老版WebView上增强换行与断词 */
    .rr-wrap {
        word-break: break-word;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    /* 兼容自动连字符（部分安卓不支持，忽略即可） */
    .hyphens-auto {
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

/* 手机内部浏览器（WebView）专用样式 */
@layer base {

    /* 确保在WebView中正确显示 */
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* 防止WebView中的缩放问题 */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* 确保按钮在WebView中正确显示 */
    button,
    input,
    select,
    textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0;
    }

    /* 修复WebView中的flexbox问题 */
    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    /* 确保图片在WebView中正确缩放 */
    img {
        max-width: 100%;
        height: auto;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* 修复WebView中的文本选择问题 */
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* 允许文本内容选择 */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    span,
    div {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }

    /* 确保链接在WebView中正确工作 */
    a {
        -webkit-tap-highlight-color: rgba(255, 107, 0, 0.2);
    }

    /* 修复WebView中的滚动问题 */
    html,
    body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* 确保容器在WebView中正确显示 */
    .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
        box-sizing: border-box;
    }

    /* 修复WebView中的网格布局问题 */
    .grid {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    /* 确保响应式设计在WebView中正常工作 */
    @media (max-width: 768px) {
        .container {
            padding: 0 0.75rem;
        }

        /* 确保在小屏幕上文本不会溢出 */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            word-wrap: break-word;
            overflow-wrap: break-word;
            line-height: 1.4; /* 优化移动端折行后的行高 */
            height: auto !important; /* 强制高度自适应 */
        }

        /* 确保按钮在小屏幕上正确显示 */
        button,
        a {
            min-height: 44px;
            min-width: 44px;
        }
    }

    /* ------------------------------
       安装页（.rr-install）移动端降级
       ------------------------------ */
    .rr-install {
        line-height: 1.6;
    }

    .rr-install * {
        max-width: 100%;
    }

    .rr-install p,
    .rr-install li,
    .rr-install div,
    .rr-install h1,
    .rr-install h2,
    .rr-install h3 {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .rr-install .font-mono {
        word-break: break-all;
    }

    .rr-install ol,
    .rr-install ul {
        padding-left: 1.125rem;
    }

    @media (max-width: 480px) {
        .rr-install .container {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
        .rr-install h1 {
            font-size: 1.625rem; /* ~26px */
        }
        .rr-install h2 {
            font-size: 1.25rem; /* ~20px */
        }
    }
}