/**
 * ABDL 尿布日历 - 下载中心专属样式 (Lite v1.0)
 * 仅包含：新拟态框架、下载卡片、响应式布局、暗色模式
 */

/* --- 1. 核心变量 (同步主站视觉) --- */
:root {
    --bg-primary: #FFF9F5;
    --bg-secondary: #FFF2EA;
    --bg-card: #FFFFFF;
    --bg-glass: rgba(255, 255, 255, 0.72);
    
    --accent-pink: #FFB7C5;
    --accent-pink-deep: #FF8FA3;
    --accent-blue: #B5E4F0;
    --accent-blue-deep: #8DD4E8;
    
    --text-primary: #4A4A4A;
    --text-secondary: #757575;
    --text-muted: #BDBDBD;
    
    --border: rgba(255, 183, 197, 0.2);
    
    /* 新拟态核心阴影 */
    --nm-shadow-out: 8px 8px 16px rgba(163, 177, 198, 0.2), -8px -8px 16px rgba(255, 255, 255, 0.9);
    --nm-shadow-in:  inset 4px 4px 8px rgba(163, 177, 198, 0.2), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
    --nm-shadow-sm:  4px 4px 8px rgba(163, 177, 198, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.8);

    --radius-lg: 32px;
    --radius-md: 20px;
    --radius-full: 999px;
    --transition: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 2. 暗色模式适配 --- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1A1A2E;
        --bg-secondary: #16213E;
        --bg-card: #24243E;
        --bg-glass: rgba(30, 30, 62, 0.8);
        --text-primary: #E0E0E0;
        --text-secondary: #A0A0B0;
        --nm-shadow-out: 8px 8px 16px rgba(0, 0, 0, 0.5), -4px -4px 12px rgba(255, 255, 255, 0.03);
        --nm-in: inset 6px 6px 12px rgba(0, 0, 0, 0.5), inset -4px -4px 12px rgba(255, 255, 255, 0.03);
        --border: rgba(255, 255, 255, 0.05);
    }
}

/* --- 3. 基础复位 --- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'PingFang SC', system-ui, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

/* SVG 图标全局控制 */
svg { width: 24px; height: 24px; stroke-width: 2.5; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* --- 4. 通用组件 --- */
.card-neumorphic {
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--nm-shadow-out) !important;
    border: 1px solid var(--border);
    transition: var(--transition);
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 30px; border-radius: 18px; font-weight: 800; font-size: 15px;
    cursor: pointer; transition: var(--transition); border: none; text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-pink), var(--accent-pink-deep));
    color: white;
    box-shadow: 0 8px 20px rgba(255, 143, 163, 0.35);
}
.btn-primary:active { transform: scale(0.96); box-shadow: none; }

.btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--nm-shadow-out);
}
.btn-secondary:active { box-shadow: var(--nm-shadow-in); transform: scale(0.96); }

/* --- 5. 下载页专属布局 --- */
.download-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 20px;
}

/* iOS 提示块样式 */
#ios-notice {
    display: none; /* JS控制显示 */
    background: var(--bg-primary);
    box-shadow: var(--nm-in);
    border: 2px dashed var(--accent-blue-deep);
    border-radius: 24px;
    padding: 25px;
    margin-bottom: 40px;
    align-items: flex-start;
    gap: 20px;
}
.ios-alert-icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--bg-card); box-shadow: var(--nm-shadow-out);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ios-alert-text h4 { font-weight: 900; color: var(--accent-blue-deep); margin-bottom: 5px; }
.ios-alert-text p { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

/* 动作网格 */
.action-grid {
    display: flex; flex-direction: column; gap: 30px; margin-bottom: 60px;
}
.dl-card {
    padding: 45px 30px; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.dl-card-icon {
    width: 72px; height: 72px; border-radius: 22px;
    background: var(--bg-primary); box-shadow: var(--nm-in);
    display: flex; align-items: center; justify-content: center; margin-bottom: 25px;
}
.dl-card h2 { font-size: 20px; font-weight: 900; margin-bottom: 10px; }
.dl-card p { font-size: 12px; color: var(--text-muted); font-weight: 800; margin-bottom: 30px; }

/* 历史记录 */
.history-card { padding: 35px; }
.history-title { font-weight: 900; margin-bottom: 30px; display: flex; align-items: center; gap: 12px; }
.version-item { padding: 20px 0; border-bottom: 1px solid var(--border); }
.version-item:last-child { border-bottom: none; }
.ver-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ver-num { font-weight: 900; color: var(--accent-pink-deep); font-size: 16px; }
.ver-date { font-size: 12px; color: var(--text-muted); font-weight: 800; }
.ver-desc { font-size: 14px; color: var(--text-secondary); list-style: circle; padding-left: 20px; }

/* --- 6. 响应式规则 --- */
@media (min-width: 769px) {
    .action-grid { flex-direction: row; }
}

@media (max-width: 768px) {
    .download-container { padding: 40px 15px; }
    .dl-card { padding: 35px 20px; }
    .ios-notice { flex-direction: column; align-items: center; text-align: center; }
}

/* ============================================================
   黑暗模式视觉去燥补丁：彻底斩杀刺眼高光
   ============================================================ */

@media (prefers-color-scheme: dark) {
    /* 1. 压制大卡片的高光 */
    .card-neumorphic, .card {
        box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.6), 
                   -2px -2px 10px rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    /* 2. 修复图标盒子的内凹高光 */
    .dl-card-icon, .icon-box {
        background: var(--bg-secondary) !important;
        box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.5), 
                    inset -1px -1px 5px rgba(255, 255, 255, 0.02) !important;
        border: none !important;
    }

    /* 3. 削减主按钮底部的粉色光晕 */
    .btn-primary {
        box-shadow: 0 5px 15px rgba(255, 143, 163, 0.25) !important;
    }

    /* 4. 修复次要按钮（灰色按钮）的投影 */
    .btn-secondary {
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4), 
                    -1px -1px 5px rgba(255, 255, 255, 0.05) !important;
    }
    
    /* 5. 修复文字颜色细节 */
    .dl-card h2 {
        color: #FFFFFF;
    }
    .dl-card p {
        color: var(--text-s);
    }
}