/* =====================================================================
 * ②号子屏幕（second sub-screen）独立样式表
 * ---------------------------------------------------------------------
 * 设计原则：
 *  1) 完全独立文件：本屏的结构/样式/逻辑分别在 index.html(挂载点)、
 *     本文件、sub-screen-2.js，后续功能组件也各自独立文件，互不共用。
 *  2) 风格与主屏/子屏一致：玻璃拟态卡片、同字体、同圆角、同安全区策略。
 *  3) 主题联动：主屏「主题 - 全局美化」预设通过 :root 上的 --lmg-* 变量
 *     与 html[data-global-beautify="1"] 选择器影响本屏配色 / 按钮样式。
 *  4) 兼容性：iOS Safari / 华为·小米·OPPO·魅族·vivo·三星 自带浏览器、
 *     Via / 谷歌 / Edge / 搜狗 / 雨见 / 夸克 等。统一加 -webkit- 前缀，
 *     backdrop-filter 不支持时以足够不透明的底色兜底。
 * 命名：除挂载点 .home-sub-screen-2-page 外，一律使用 ss2- 前缀，避免与
 *       其它屏幕样式冲突。
 * ===================================================================== */

/* 本屏自有的主题令牌：默认值为浅色玻璃；开启全局美化后由下方规则改写。
   单独建一组 --ss2-* 令牌（而非直接散用 --lmg-*），让本屏在「未开启美化」
   时也有完整、自洽的配色，开启后再平滑接管。 */
.home-sub-screen-2-page {
    --ss2-card-bg: linear-gradient(135deg, rgba(188, 198, 223, 0.86) 0%, rgba(233, 231, 245, 0.86) 50%, rgba(208, 221, 227, 0.86) 100%);
    --ss2-card-border: rgba(255, 255, 255, 0.46);
    --ss2-card-shadow: rgba(112, 128, 165, 0.18);
    --ss2-text: #2a3a55;
    --ss2-text-dim: rgba(70, 85, 111, 0.66);
    --ss2-accent: #5878b6;

    background: transparent !important;
    color: var(--ss2-text);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* 滚动容器：与 .sub-screen-scroll 行为一致（隐形滚动条 + 触控惯性 + 底栏留白） */
.ss2-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* 与 #home-screen 底栏变量对齐：底栏实高 + 安全区 + 与底栏顶 12px 间距 */
    padding: 0 0 calc(var(--home-dock-bar-h, 100px) + var(--home-dock-bottom-inset, max(16px, env(safe-area-inset-bottom, 0px))) + 12px);
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-color: transparent;
}

.ss2-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* 至少铺满一屏；纵向堆叠，顶部/左右留白与子屏一致；底部由 .ss2-scroll 统一为底栏留空 */
.ss2-fill {
    box-sizing: border-box;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: clamp(12px, 2.4vh, 18px);
    padding: max(14px, env(safe-area-inset-top, 0px)) 14px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
}

/* ---------- 顶部标题区 ---------- */
.ss2-header {
    flex-shrink: 0;
    padding: 6px 6px 2px;
}

.ss2-header-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--ss2-text);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.ss2-header-sub {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ss2-text-dim);
}

/* ---------- 功能区：未来独立功能组件的挂载容器 ---------- */
.ss2-widgets {
    flex: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2.4vh, 18px);
}

/* 快捷功能区（闲置等 2×2）：沉底右对齐，与底栏保持 12px（由 .ss2-scroll padding-bottom 计入） */
#ss2-widget-quick-shortcuts {
    margin-top: auto;
    flex-shrink: 0;
}

/* bare 组件占位：不加任何卡片外壳，仅承担排序与定位，样式完全交给功能自身文件 */
.ss2-slot {
    display: block;
    min-width: 0;
}

/* 注册进来的功能组件统一外层卡片样式；组件内部样式由各自独立文件负责 */
.ss2-widget {
    box-sizing: border-box;
    border-radius: 18px;
    padding: 14px;
    background: var(--ss2-card-bg);
    border: 1px solid var(--ss2-card-border);
    box-shadow: 0 12px 28px var(--ss2-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    color: var(--ss2-text);
}

.ss2-widget-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--ss2-accent);
}

/* ---------- 空态占位（无功能组件时显示） ---------- */
.ss2-empty {
    box-sizing: border-box;
    border-radius: 20px;
    padding: 34px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    background: var(--ss2-card-bg);
    border: 1px solid var(--ss2-card-border);
    box-shadow: 0 12px 28px var(--ss2-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

.ss2-empty-emoji {
    font-size: 30px;
    line-height: 1;
    color: var(--ss2-accent);
}

.ss2-empty-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--ss2-text);
}

.ss2-empty-hint {
    font-size: 12px;
    color: var(--ss2-text-dim);
}

.ss2-empty.ss2-hidden {
    display: none;
}

/* =====================================================================
 * 暗色模式（与全站 html[data-appearance="dark"] 一致）
 * ===================================================================== */
html[data-appearance="dark"] .home-sub-screen-2-page {
    --ss2-card-bg: rgba(38, 38, 42, 0.72);
    --ss2-card-border: rgba(255, 255, 255, 0.12);
    --ss2-card-shadow: rgba(0, 0, 0, 0.4);
    --ss2-text: rgba(245, 245, 250, 0.92);
    --ss2-text-dim: rgba(235, 235, 245, 0.55);
    --ss2-accent: rgba(190, 205, 245, 0.95);
}

/* =====================================================================
 * 全局美化联动：开启后接管本屏背景与组件配色
 *  - 背景使用 --lmg-sub-bg（与子屏同一张「子屏背景」）
 *  - 卡片/按钮使用 --lmg-sub-component-bg、--lmg-border、--lmg-shadow
 *  - 文字 --lmg-text、强调色 --lmg-button-text
 * ===================================================================== */
html[data-global-beautify="1"] .home-sub-screen-2-page {
    --ss2-card-bg: var(--lmg-sub-component-bg);
    --ss2-card-border: var(--lmg-border);
    --ss2-card-shadow: var(--lmg-shadow);
    --ss2-text: var(--lmg-text);
    --ss2-accent: var(--lmg-button-text);
    background: var(--lmg-sub-bg) !important;
}

/* 美化中文字暗度：用强调色的低透明度近似，保证可读 */
html[data-global-beautify="1"] .home-sub-screen-2-page .ss2-header-sub,
html[data-global-beautify="1"] .home-sub-screen-2-page .ss2-empty-hint {
    color: var(--lmg-text);
    opacity: 0.65;
}

/* 用户设置了首页壁纸时：背景透明以透出共用壁纸层（与子屏一致策略） */
html[data-global-beautify="1"][data-user-home-wallpaper="1"] .home-sub-screen-2-page {
    background: transparent !important;
}

/* 不同美化风格（material / minimal / retro / glass）下卡片模糊与质感的细化。
   ②号子屏幕各功能组件的完整分风格规则见 theme-global-beautify.css（与子屏 .sub-screen-action 同款）。 */
html[data-global-beautify="1"][data-global-beautify-style="minimal"] .home-sub-screen-2-page .ss2-widget,
html[data-global-beautify="1"][data-global-beautify-style="minimal"] .home-sub-screen-2-page .ss2-empty,
html[data-global-beautify="1"][data-global-beautify-style="minimal"] .home-sub-screen-2-page .ss2cn-card,
html[data-global-beautify="1"][data-global-beautify-style="minimal"] .home-sub-screen-2-page .ss2ab-sleeve {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 8px 20px var(--ss2-card-shadow);
}

/* 快捷磁贴 .ss2sc-tile 的 minimal 磨砂规则见 theme-global-beautify.css（与子屏 AO3 四格同款 blur 12px） */

html[data-global-beautify="1"][data-global-beautify-style="glass"] .home-sub-screen-2-page .ss2-widget,
html[data-global-beautify="1"][data-global-beautify-style="glass"] .home-sub-screen-2-page .ss2-empty,
html[data-global-beautify="1"][data-global-beautify-style="glass"] .home-sub-screen-2-page .ss2cn-card,
html[data-global-beautify="1"][data-global-beautify-style="glass"] .home-sub-screen-2-page .ss2ab-sleeve,
html[data-global-beautify="1"][data-global-beautify-style="glass"] .home-sub-screen-2-page .ss2sc-tile:not(.ss2sc-tile--placeholder) {
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
}

/* =====================================================================
 * 兼容性兜底：不支持 backdrop-filter 的内核（部分搜狗/雨见/老安卓 WebView）
 * 用足够不透明的底色，避免卡片「糊成一片透明」看不清。
 * ===================================================================== */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .home-sub-screen-2-page .ss2-widget,
    .home-sub-screen-2-page .ss2-empty {
        background: linear-gradient(135deg, rgba(206, 214, 233, 0.97) 0%, rgba(236, 234, 247, 0.97) 50%, rgba(216, 227, 232, 0.97) 100%);
    }
    html[data-appearance="dark"] .home-sub-screen-2-page .ss2-widget,
    html[data-appearance="dark"] .home-sub-screen-2-page .ss2-empty {
        background: rgba(44, 44, 50, 0.97);
    }
}

/* 窄屏 / 矮屏微调，对齐子屏断点 */
@media (max-width: 375px), (max-height: 700px) {
    .ss2-fill {
        padding-left: 12px;
        padding-right: 12px;
        gap: 12px;
    }
    .ss2-header-title {
        font-size: 18px;
    }
}