/* ================== 1. 基础设置 ================== */
        :root {
            --primary: #ff7eb3;
            --text-main: #333;
            --bg-body: #f5f6f8;
            --btn-green: #2ecc71; /* 截图同款绿色 */
            
            /* 默认锁定状态配色 (红/粉) */
            --alert-bg: #fff0f0;
            --alert-border: #ff4d4f;
            --alert-btn-bg: #ff85c0;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif; background-color: var(--bg-body); color: var(--text-main); padding-bottom: 30px; }
        a { text-decoration: none; color: inherit; }
        img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

        /* ================== 顶部与头部 ================== */
        .top-bar {
            position: sticky; top: 0; z-index: 100;
            height: 48px; background: rgba(255,255,255,0.98);
            border-bottom: 1px solid #eee;
            display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
        }
        .back-btn { font-size: 20px; font-weight: bold; }
        .page-title { font-size: 16px; font-weight: bold; }
        .more-btn { letter-spacing: 2px; }

        .app-header { background: #fff; padding: 20px 16px 5px 16px; display: flex; gap: 15px; }
        .app-icon { width: 80px; height: 80px; border-radius: 18px; border: 1px solid #f0f0f0; flex-shrink: 0; overflow: hidden; }
        .app-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0; }
        .app-name { font-size: 18px; font-weight: 800; line-height: 1.2; }
        .app-tags { display: flex; gap: 6px; margin-top: 4px; }
        .tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #f0f2f5; color: #666; }
        .tag.safe { background: #e8f5e9; color: #2e7d32; display: flex; align-items: center; gap: 2px; }
        .app-stats { display: flex; align-items: center; gap: 15px; margin-top: auto; }
        .stat-item { font-size: 12px; color: #999; }
        .stat-score { font-weight: bold; color: #ff9800; font-size: 14px; margin-right: 3px; }
/* --- 优化后的右侧信息栏 --- */
.app-info-box {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
}

.app-main-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多显示2行标题 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 核心优化：参数网格 */
.info-grid {
    display: grid;
    /* 左边固定宽度，右边自适应，保证对齐 */
    grid-template-columns: 64px 1fr; 
    row-gap: 6px; /* 行间距加大 */
    font-size: 12px;
    margin-bottom: 8px;
}

.info-item {
    display: contents; /* 让内部元素直接参与grid布局 */
}

.i-label {
    color: #999; /* 标签浅灰 */
    font-weight: normal;
}

.i-value {
    color: #333; /* 内容深灰 */
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: Arial, sans-serif; /* 数字显示更好看 */
}

/* 标签行优化 */
.app-tags-row {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.tag-pill {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    line-height: 16px;
    display: inline-flex;
    align-items: center;
}
.tag-pill.safe { background: #e8f5e9; color: #2e7d32; border: 0.5px solid #c8e6c9; }
.tag-pill.no-ad { background: #f5f5f5; color: #757575; border: 0.5px solid #eee; }

/* 底部评分行 */
.app-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #f0f0f0; /* 加一条淡淡的分割线 */
}
.score-box { color: #ff9800; font-weight: 800; font-size: 14px; }
.score-box span { font-size: 11px; font-weight: normal; opacity: 0.8; }
.size-box { font-size: 12px; color: #999; }

        
        /* ================== 操作区 ================== */
        .action-container {
            background: #fff; padding: 15px 16px 20px 16px;
            display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px;
        }
        .btn-main {
            width: 100%; height: 46px;
            background: var(--btn-green); color: #fff; font-size: 16px; font-weight: bold;
            border: none; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 12px rgba(46, 204, 113, 0.25);
        }
        .btn-main:active { transform: scale(0.98); }

        .btn-cloud {
            width: 100%; height: 38px;
            background: #e3f2fd; color: #1976d2;
            font-size: 13px; font-weight: 600;
            border: 1px solid #bbdefb; border-radius: 8px;
            display: flex; align-items: center; justify-content: center; gap: 6px;
        }

        /* ================== 媒体滚动 ================== */
        .media-scroller {
            background: #fff; padding: 16px; margin-bottom: 10px;
            overflow-x: auto; white-space: nowrap; display: flex; gap: 10px;
        }
        .media-scroller::-webkit-scrollbar { display: none; }
        .media-item {
            flex: 0 0 80%; aspect-ratio: 16/9;
            background: #000; border-radius: 8px; overflow: hidden; position: relative;
        }
        .pv-badge {
            position: absolute; top: 8px; left: 8px;
            background: rgba(0,0,0,0.6); color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 4px;
        }

        /* ================== 内容卡片通用 ================== */
        .content-card { background: #fff; padding: 20px 16px; margin-bottom: 10px; }
        .section-title { font-size: 16px; font-weight: bold; margin-bottom: 15px; border-left: 4px solid var(--primary); padding-left: 10px; line-height: 1; }
        .intro-text { font-size: 14px; line-height: 1.6; color: #555; }

        /* ================== 🌟 核心修改：安装警示框 ================== */
        .install-alert-box {
            background: var(--alert-bg);
            border: 1px solid var(--alert-border);
            border-left: 5px solid #d32f2f;
            border-radius: 6px;
            padding: 15px;
            margin-top: 15px;
            transition: all 0.3s;
        }
        
        .alert-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
        .alert-icon { font-size: 20px; }
        .alert-title { color: #d32f2f; font-weight: bold; font-size: 15px; }
        .alert-desc { font-size: 12px; color: #666; line-height: 1.5; margin-bottom: 15px; text-align: justify; }
        .alert-divider { border-top: 1px dashed #ffccc7; margin-bottom: 15px; }
        
        /* 
           🌟 修改重点：a标签按钮样式 
           注意 display: flex 和 text-decoration: none 
        */
        .alert-lock-btn {
            background: var(--alert-btn-bg);
            color: #fff;
            font-size: 13px; font-weight: bold;
            padding: 10px 0; width: 90%; margin: 0 auto;
            border-radius: 30px;
            display: flex; align-items: center; justify-content: center; gap: 5px;
            box-shadow: 0 4px 10px rgba(255, 133, 192, 0.3);
            transition: 0.3s;
            text-decoration: none; /* 去除下划线 */
            cursor: pointer;
        }

        /* 🌟 解锁后的绿色状态 (CSS 类) */
        .alert-lock-btn.unlocked {
            background: var(--btn-green);
            box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
        }

        /* 警示框变绿 */
        .install-alert-box.success {
            background: #f0f9eb;
            border-color: #2ecc71;
            border-left-color: #2ecc71;
        }
        .install-alert-box.success .alert-title { color: #2ecc71; }
        .install-alert-box.success .alert-divider { border-color: #c2e7b0; }

        /* 动画 */
        @keyframes violent-shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-6px) rotate(-1deg); }
            20%, 40%, 60%, 80% { transform: translateX(6px) rotate(1deg); }
        }
        .shake-active { animation: violent-shake 0.5s cubic-bezier(.36,.07,.19,.97) both; border-color: red !important; }

        /* ================== 列表样式 ================== */
        .list-wrap { display: flex; flex-direction: column; }
        .list-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
        .list-item:last-child { border-bottom: none; }
        .li-thumb { width: 110px; height: 66px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: #eee; }
        .li-content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
        .li-title { font-size: 14px; font-weight: bold; color: #333; line-height: 1.3; margin-bottom: 4px; }
        .li-desc { font-size: 11px; color: #999; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .li-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
        .li-tag { font-size: 10px; padding: 1px 5px; border-radius: 3px; background: #e3f2fd; color: #1976d2; }
        .li-btn { font-size: 12px; color: var(--primary); border: 1px solid var(--primary); padding: 2px 8px; border-radius: 12px; }

        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.85); color: #fff; padding: 12px 24px; border-radius: 6px; opacity: 0; pointer-events: none; transition: 0.3s; font-size: 14px; z-index: 2000; text-align: center; }
        .toast.show { opacity: 1; }
        .content-card .intro-text img{
             max-width: 100%;
             /*max-height:260px;*/
             width: unset;
                height: auto;
                margin: 0 auto;
            }