/* source/css/algo.css - Complete Cook Style */

:root {
    /*  iOS System Colors */
    --ios-green: #34C759;
    --ios-yellow: #FF9F0A;
    --ios-red: #FF3B30;
    --ios-gray: #8E8E93;
    --ios-black: #1d1d1f; /* 新增：苹果黑 */
    --ios-bg-blur: rgba(255, 255, 255, 0.72);
    --ios-border: rgba(255, 255, 255, 0.5);
    --ios-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
}

/* === 0. 全局容器与标题 (补全基础排版) === */
.algo-container {
    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    color: var(--ios-black);
    padding-top: 20px;
    max-width: 960px; /* 限制最大宽度 */
    margin: 0 auto;
}

.algo-hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 15px;
    line-height: 1.1;
    color: var(--ios-black);
}

.algo-hero-subtitle {
    font-size: 1.25rem;
    color: var(--ios-gray);
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto 40px auto;
    line-height: 1.5;
}

.algo-divider {
    border: 0;
    height: 1px;
    background: #e0e0e0;
    margin: 60px auto;
    max-width: 200px;
}

/* === 1. 仪表盘容器 (Grid Layout) === */
.algo-dashboard {
    display: grid;
    /* 智能网格：每张卡片最小宽度140px，自动填满 */
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 16px;
    margin: 40px 0 60px 0;
    padding: 10px;
}

/* === 2. 极致毛玻璃卡片 (小卡片) === */
.algo-stat-card {
    background: var(--ios-bg-blur);
    /* 核心：高斯模糊 + 饱和度提升 (Vibrancy Effect) */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* 极细的半透明边框 */
    border: 1px solid var(--ios-border);
    box-shadow: var(--ios-shadow);
    
    border-radius: 22px; /* iOS 大圆角 */
    padding: 18px;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 120px; /* 固定高度 */
    
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: default;
    text-align: left; /* 内容左对齐 */
}

/* 悬停效果 */
.algo-stat-card:hover {
    transform: translateY(-4px) scale(1.02);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.08);
    border-color: rgba(255, 255, 255, 0.9);
}

/* === 3. 内部排版 (卡片内元素) === */
.card-header { margin-bottom: 8px; }

.stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ios-black);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-desc {
    font-size: 0.65rem;
    color: var(--ios-gray);
    font-weight: 400;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-main { display: flex; flex-direction: column; gap: 6px; }

.stat-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: #000;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* === 4. 进度条系统 === */
.progress-track {
    background: rgba(0, 0, 0, 0.04);
    height: 6px;
    border-radius: 10px;
    width: 100%;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 1s ease-out;
}

/* === 5. 颜色定义 === */
.fill-green { background-color: var(--ios-green); }
.fill-yellow { background-color: var(--ios-yellow); }
.fill-red { background-color: var(--ios-red); }

/* 卡片微弱色调背景 (可选) */
.card-green:hover { box-shadow: 0 10px 30px -10px rgba(52, 199, 89, 0.3); }
.card-yellow:hover { box-shadow: 0 10px 30px -10px rgba(255, 159, 10, 0.3); }
.card-red:hover { box-shadow: 0 10px 30px -10px rgba(255, 59, 48, 0.3); }

/* === 6. 👇 补全：底部大卡片 (Archive Card) === */
.algo-glass-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 24px;
    padding: 50px 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.6);
    max-width: 680px;
    margin: 0 auto 80px auto;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.algo-glass-card:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

/* === 7. 👇 补全：按钮特效 (Button) === */
.algo-btn {
    display: inline-block;
    padding: 14px 45px;
    background-color: var(--ios-black);
    color: white !important; /* 强制白色文字 */
    border-radius: 999px;    /* 胶囊形状 */
    text-decoration: none !important;
    font-size: 1.05rem;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-top: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.algo-btn:hover {
    background-color: #333;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}