/* ============================================================
 * InnerOS v2.5 · 移动端留白根治版
 * 修正：手机左右幽灵留白
 * 核心：弃用 vw 做主容器，三层容器职责分离
 * ============================================================ */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ============================================================
 * 一、全局设计令牌
 * ============================================================ */
:root {
    /* ---------- 密度因子 ---------- */
    --density: clamp(0.8, 100vw / 1600, 1.4);

    /* ---------- 色彩 ---------- */
    --bg: #f0f2f5;
    --card: #fff;
    --text: #333;
    --text-sub: #888;

    /* ❌ 删除：旧颜色池命名
    --c-1: #e74c3c; --c-2: #e67e22; --c-3: #f1c40f;
    --c-4: #2ecc71; --c-5: #1abc9c; --c-6: #3498db;
    --c-7: #9b59b6;
    */

    /* ✅ 新增：规范 7 色颜色池（ID 1~7） */
    --color-1: #e74c3c; /* 赤 */
    --color-2: #e67e22; /* 橙 */
    --color-3: #f1c40f; /* 黄 */
    --color-4: #2ecc71; /* 绿 */
    --color-5: #1abc9c; /* 青 */
    --color-6: #3498db; /* 蓝 */
    --color-7: #9b59b6; /* 紫 */
	



    /* ---------- 空间节奏（原样保留） ---------- */
    --space: clamp(12px, 2vw, 20px);
    --pad: clamp(14px, 2.2vw, 22px);
    --radius: calc(8px * var(--density));

    /* ---------- 字体（已按你上次反馈微调） ---------- */
    --font-base: clamp(15px, 1.2vw, 18px);
    --font-title: clamp(22px, 2.8vw, 36px);
}

/* ============================================================
 * ✅ 分区颜色变量（关键补丁）
 * 用于 .module 的左侧色条
 * ============================================================ */
.module.color-1 { --partition-color: var(--color-1); }
.module.color-2 { --partition-color: var(--color-2); }
.module.color-3 { --partition-color: var(--color-3); }
.module.color-4 { --partition-color: var(--color-4); }
.module.color-5 { --partition-color: var(--color-5); }
.module.color-6 { --partition-color: var(--color-6); }
.module.color-7 { --partition-color: var(--color-7); }





/* ============================================================
 * 二、Body 基础（消灭所有默认噪音）
 * ============================================================ */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

html {
    scrollbar-gutter: stable;
}

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: var(--font-base);
    line-height: 1.6;
    background: var(--bg);
    color: var(--text);
}

/* ============================================================
 * 三、备案信息（沉底）
 * ============================================================ */
.site-footer {
    margin-top: auto;
    width: 100%;
    text-align: center;
    padding: var(--pad);
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    color: var(--text-sub);
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
}
.site-footer .sep { margin: 0 8px; color: #ccc; }
.site-footer .copyright { font-size: 0.75rem; color: var(--text-sub); margin-top: 4px; }
.site-footer img { vertical-align: middle; max-height: 14px; margin-right: 2px; }

/* ============================================================
 * 四、通用组件
 * ============================================================ */

/* 模块卡片 */
.module {
    background: var(--card);
    border: 1px solid #ddd;
    /* ❌ 删除：旧硬编码
    border-left: calc(4px * var(--density)) solid var(--c-6);
    */
    /* ✅ 新增：动态分区颜色 */
    border-left: calc(4px * var(--density)) solid var(--partition-color, var(--color-4));
    border-radius: var(--radius);
    padding: var(--pad);
    margin-bottom: var(--space);
    box-shadow: 0 calc(1px * var(--density)) calc(4px * var(--density)) rgba(0,0,0,0.05);
}

/* ❌ 删除：旧 7 色模块类名
.module--c1 { border-left-color: var(--c-1); }
.module--c2 { border-left-color: var(--c-2); }
.module--c3 { border-left-color: var(--c-3); }
.module--c4 { border-left-color: var(--c-4); }
.module--c5 { border-left-color: var(--c-5); }
.module--c6 { border-left-color: var(--c-6); }
.module--c7 { border-left-color: var(--c-7); }
*/

/* 按钮 */
.link-btn {
    display: inline-block;
    padding: calc(10px * var(--density)) calc(18px * var(--density));
    border-radius: var(--radius);
    text-decoration: none;
    color: #fff;
    font-size: var(--font-base);
    border: none;
    cursor: pointer;
    /* ✅ 新增：动态按钮颜色 */
    background: var(--item-color, var(--color-6));
    transition: opacity 0.2s, transform calc(0.15s * var(--density));
}
.link-btn:hover { opacity: 0.85; }
.link-btn:active { transform: scale(0.96); }

/* ❌ 删除：旧 7 色按钮类名
.link-btn--c1 { background: var(--c-1); }
.link-btn--c2 { background: var(--c-2); }
.link-btn--c3 { background: var(--c-3); color: #333; }
.link-btn--c4 { background: var(--c-4); }
.link-btn--c5 { background: var(--c-5); }
.link-btn--c6 { background: var(--c-6); }
.link-btn--c7 { background: var(--c-7); }
*/

/* ============================================================
 * 五、Shell 布局（首页）
 * ✅ 弃用 vw，用 100% + padding 控制呼吸
 * ============================================================ */
.shell-header {
    flex-shrink: 0;
    padding: var(--pad);
    text-align: center;
}
.shell-header h1 {
    font-size: var(--font-title);
    font-weight: 800;
    letter-spacing: calc(1.5px * var(--density));
}

.shell-main {
    flex: 1;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space);
    padding: var(--space);
    box-sizing: border-box;
}

/* ============================================================
 * 六、Content 布局（文章 / 设置 / 管理）
 * ============================================================ */
.content-main {
    flex: 1;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--space);
    box-sizing: border-box;
}

/* ============================================================
 * 七、Immersive 布局（全屏播放 / 终端）
 * ============================================================ */
.layout-immersive {
    min-height: 100dvh;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.immersive-content {
    width: 100vw;
    height: 100vh;
}
.layout-immersive .site-footer,
.layout-immersive .shell-header,
.layout-immersive .shell-main {
    display: none !important;
}
.immersive-content video,
.immersive-content iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================================
 * 八、Fullscreen API 兜底
 * ============================================================ */
:fullscreen .site-footer,
:fullscreen .shell-header {
    display: none !important;
}

/* ============================================================
 * 九、模块 & 链接样式（Shell 专用）
 * ✅ 全部使用密度因子，无硬编码
 * ============================================================ */

/* 模块头部 */
.module-header {
    display: flex;
    align-items: center;
    gap: calc(var(--pad) * 0.45);
    margin-bottom: calc(var(--pad) * 0.55);
    padding-bottom: calc(var(--pad) * 0.45);
    border-bottom: 1px solid var(--border, #eee);
}

/* 模块内容区：智能按钮容器 */
.module-items {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space) * 0.6);
}

.module-icon { font-size: calc(22px * var(--density)); }
.module-name { font-size: 16px; font-weight: 600; }

/* 链接项（自适应按钮） */
.item {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--pad) * 0.45);
    padding: calc(var(--pad) * 0.55) calc(var(--pad) * 0.7);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text, #333);
    /* ✅ 新增：动态按钮颜色（半透明背景） */
    background: color-mix(in srgb, var(--item-color, var(--color-6)) 10%, transparent);
    transition: background 0.15s;
    flex: 0 1 auto;
}
.item:hover {
    background: color-mix(in srgb, var(--item-color, var(--color-6)) 18%, transparent);
}
.item-icon { font-size: calc(18px * var(--density)); flex-shrink: 0; }

/* ============================================================
 * 十、移动端微调（≤640px 自动收紧）
 * ============================================================ */
@media (max-width: 640px) {
    :root {
        --space: clamp(8px, 2.5vw, 12px);
        --pad: clamp(10px, 3vw, 14px);
    }
    .shell-main,
    .content-main {
        padding: calc(var(--space) * 0.8);
    }
    .module {
        padding: var(--pad);
        margin-bottom: calc(var(--space) * 0.8);
    }
}