/* ============================================================
   【5. 状态栏】
   ============================================================ */
.status-bar { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: var(--safe-top); 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    padding: 0 24px 10px 24px; 
    z-index: 10000; 
    color: #333; 
    font-size: 14px; 
    font-weight: 600; 
    pointer-events: none; 
    transition: color 0.3s; 
}

body.dark-mode .status-bar { 
    color: #fff; 
}

.sb-right { 
    width: 80px; 
    display: flex; 
    gap: 6px; 
    align-items: center; 
    justify-content: flex-end; 
    padding-bottom: 2px; 
}

.sb-signal { 
    display: flex; 
    gap: 1px; 
    height: 12px; 
    align-items: flex-end; 
} 

.sb-signal .bar { 
    width: 3px; 
    background: currentColor; 
    border-radius: 1px; 
    opacity: 0.3; 
} 

.sb-signal .bar.active { 
    opacity: 1; 
}

.sb-wifi { 
    width: 26px; 
    height: 19px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.sb-wifi svg { 
    fill: currentColor; 
    width: 100%; 
    height: 100%; 
}

.sb-battery { 
    width: 22px; 
    height: 11px; 
    border: 1px solid currentColor; 
    border-radius: 3px; 
    position: relative; 
    padding: 1px; 
    display: flex; 
    align-items: center; 
} 

.sb-battery::after { 
    content: ''; 
    position: absolute; 
    right: -3px; 
    top: 3px; 
    width: 2px; 
    height: 4px; 
    background: currentColor; 
    border-radius: 0 1px 1px 0; 
} 

.sb-bat-level { 
    height: 100%; 
    background: currentColor; 
    border-radius: 1px; 
    width: 100%; 
    transition: width 0.5s; 
}

/* ============================================================
   【6. 分页系统】
   ============================================================ */
.pages-container { 
    flex: 1; 
    display: flex; 
    overflow-x: auto; 
    overflow-y: hidden; 
    scroll-snap-type: x mandatory; 
    scroll-behavior: smooth; 
    -webkit-overflow-scrolling: touch; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
}

.page { 
    min-width: 100%; 
    height: 100%; 
    scroll-snap-align: center; 
    padding: calc(15px + var(--safe-top)) 20px 0; 
    display: flex; 
    flex-direction: column; 
    position: relative; 
}

.pages-container::-webkit-scrollbar { 
    display: none; 
}

.page-indicators { 
    position: absolute; 
    bottom: calc(110px + var(--safe-bottom)); 
    left: 0; 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    gap: 8px; 
    z-index: 15; 
    pointer-events: none; 
}

.page-dot { 
    width: 8px; 
    height: 8px; 
    border-radius: 50%; 
    background: rgba(255,255,255,0.3); 
    transition: 0.3s; 
}

.page-dot.active { 
    background: white; 
}

/* ✅ 第三页：修改后（已移除灰色背景） */
.page-3 {
    /* 恢复顶部的安全区域padding，让App图标不会顶到状态栏 */
    padding-top: calc(15px + var(--safe-top)); 
    padding-bottom: 20px;
    
    /* 让App网格从顶部开始 */
    justify-content: flex-start;
    
    /* ❌ 已删除灰色背景和磨砂效果 */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 第三页中的App网格样式 */
.page-3 .app-grid {
    /* 保持4列布局 */
    grid-template-columns: repeat(4, 1fr);
    /* 保持原来的行间距 */
    gap: 20px 10px;
    /* 这里的padding可以稍微小一点，和第2页保持一致 */
    padding: 10px 0;
    
    /* 允许垂直滚动，如果不滚动可以去掉下面两行 */
    overflow-y: auto;
    max-height: calc(100% - 60px);
    
    /* 让网格填满宽度 */
    width: 100%;
    /* 自动调整行高 */
    grid-auto-rows: auto;
}

/* 调整第三页中App图标的大小（保持和第2页一致） */
.page-3 .app-icon {
    width: 60px;  /* 恢复标准大小 */
    height: 60px;
    border-radius: 14px;  /* 恢复标准圆角 */
}

.page-3 .app-label {
    font-size: 11px;  /* 恢复标准字体大小 */
    font-weight: normal;
    margin-top: 5px;
}


/* ============================================================
   【7. 主屏幕组件 (无边框磨砂)】
   ============================================================ */
.top-widgets { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 20px; 
    padding: 0 5px; 
    flex-shrink: 0; 
} 

.anniversary-widget, .weather-widget {
    background: var(--bg-widget); 
    backdrop-filter: blur(30px); 
    -webkit-backdrop-filter: blur(30px);
    border: none; /* 彻底移除边框 */
    color: #fff; /* 组件文字始终为白色，保证透明背景下的可读性 */
    text-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition: background 0.3s;
}

.anniversary-widget { 
    width: 155px; 
    height: 155px; 
    border-radius: var(--ios-radius); 
    position: relative; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
}

.anni-content { 
    position: relative; 
    z-index: 2; 
    text-align: center; 
}

.anni-title { 
    font-size: 14px; 
    margin-bottom: 5px; 
    opacity: 0.9; 
    font-weight: 600; 
}

.anni-days { 
    font-size: 42px; 
    font-weight: 500; 
    line-height: 1; 
}

.anni-date { 
    font-size: 12px; 
    opacity: 0.8; 
    margin-top: 5px; 
    letter-spacing: 1px; 
}

.weather-widget { 
    width: 155px; 
    height: 155px; 
    border-radius: var(--ios-radius); 
    display: flex; 
    flex-direction: row; 
    padding: 16px; 
    cursor: pointer; 
}

.weather-left { 
    flex: 2; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: flex-start; 
}

.weather-right { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: flex-end; 
}

.weather-temp { 
    font-size: 50px; 
    font-weight: 400; 
    line-height: 1; 
    margin-bottom: 5px; 
    margin-left: -3px; 
}

.weather-desc { 
    font-size: 14px; 
    opacity: 0.9; 
    font-weight: 600; 
}

.weather-city { 
    font-size: 14px; 
    font-weight: 600; 
    text-align: right; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 100%; 
    opacity: 0.9; 
}

.info-banner { 
    width: 100%; 
    height: 90px; 
    background: var(--bg-widget); 
    backdrop-filter: blur(30px); 
    border: none; 
    border-radius: var(--ios-radius); 
    display: flex; 
    align-items: center; 
    padding: 12px; 
    margin-bottom: 25px; 
    flex-shrink: 0; 
    color: #fff; 
    text-shadow: 0 1px 4px rgba(0,0,0,0.1); 
    transition: background 0.3s; 
} 

.info-banner .icon-box { 
    width: 60px; 
    height: 60px; 
    border-radius: 15px; 
    margin-right: 15px; 
    overflow: hidden; 
}

.info-banner .icon-box img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* ============================================================
   【8. 尺子立牌组件 (透明适配)】
   ============================================================ */
.ruler-widget-container {
    width: 100%; 
    height: 180px;
    background: transparent; 
    backdrop-filter: none; 
    border: none;
    border-radius: 28px; 
    position: relative; 
    margin-bottom: 20px;
    display: flex; 
    align-items: flex-end; 
    padding: 15px; 
    overflow: visible;
}

.ruler-track {
    width: 100%; 
    height: 40px; 
    background: rgba(255,255,255,0.25); 
    border-radius: 12px; 
    position: relative;
    background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.4) 0px, rgba(0,0,0,0.4) 1px, transparent 1px, transparent 10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
    backdrop-filter: blur(5px); 
    border: 1px solid rgba(255,255,255,0.1);
}

.badge-stand { 
    position: absolute; 
    bottom: 5px; 
    left: 10px; 
    width: 60px; 
    height: 120px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    cursor: grab; 
    z-index: 10; 
    touch-action: none; 
}

.badge-stand:active { 
    cursor: grabbing; 
    transform: scale(1.05); 
}

.badge-circle { 
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    background: white; 
    border: 3px solid white; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.25); 
    overflow: hidden; 
    position: relative; 
}

.badge-circle img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.badge-base { 
    width: 30px; 
    height: 50px; 
    background: rgba(255,255,255,0.9); 
    border: 1px solid rgba(255,255,255,0.5); 
    margin-top: -5px; 
    border-radius: 4px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}

.stand-bubble { 
    position: absolute; 
    top: -50px; 
    left: 50%; 
    transform: translateX(-50%) scale(0); 
    background: white; 
    padding: 8px 12px; 
    border-radius: 12px; 
    font-size: 12px; 
    color: #333; 
    white-space: nowrap; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    opacity: 0; 
    transition: 0.3s; 
    pointer-events: none; 
}

.stand-bubble::after { 
    content: ''; 
    position: absolute; 
    bottom: -6px; 
    left: 50%; 
    margin-left: -6px; 
    border-width: 6px 6px 0; 
    border-style: solid; 
    border-color: white transparent transparent transparent; 
}

.stand-bubble.show { 
    transform: translateX(-50%) scale(1); 
    opacity: 1; 
}

/* ============================================================
   【9. App 图标网格】
   ============================================================ */
.app-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px 15px; 
    padding: 0 5px; 
    flex-shrink: 0; 
} 

.app-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    cursor: pointer; 
    transition: transform 0.1s; 
    position: relative; 
} 

.app-item:active { 
    transform: scale(0.9); 
} 

.app-icon { 
    width: 60px; 
    height: 60px; 
    border-radius: var(--app-radius); 
    margin-bottom: 8px; 
    box-shadow: none; 
    background-color: transparent; 
    overflow: hidden; 
}

/* 核心修改：图标在深色模式下变暗 */
.app-icon img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
    border-radius: var(--app-radius); 
    filter: brightness(var(--icon-brightness)); 
    transition: filter 0.5s; /* 平滑过渡 */
}

.app-label { 
    color: white; 
    font-size: 12px; 
    text-shadow: 0 1px 3px rgba(0,0,0,0.5); 
    white-space: nowrap; 
    font-weight: 500; 
    letter-spacing: 0.5px; 
} 

.app-badge { 
    position: absolute; 
    top: -5px; 
    right: 10px; 
    min-width: 22px; 
    height: 22px; 
    background: #FF3B30; 
    border: 1px solid white; 
    border-radius: 11px; 
    color: white; 
    font-size: 12px; 
    font-weight: bold; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 0 6px; 
    z-index: 5; 
    display: none; 
}

.app-badge.active { 
    display: flex; 
}

/* ============================================================
   【10. Dock栏】
   ============================================================ */
.dock { 
    position: absolute; 
    bottom: calc(10px + var(--safe-bottom)); 
    left: 15px; 
    right: 15px; 
    height: 90px; 
    background: var(--bg-dock); 
    backdrop-filter: blur(30px); 
    border: 1px solid rgba(255,255,255,0.2); 
    border-radius: 35px; 
    display: flex; 
    justify-content: space-evenly; 
    align-items: center; 
    z-index: 20; 
    transition: background 0.3s; 
}
/* ============================================================
   【浅色模式专属优化】(只在非深色模式下生效)
   ============================================================ */

/* 1. 主屏幕小组件：文字强制变黑 */
body:not(.dark-mode) .top-widgets .anni-content,
body:not(.dark-mode) .weather-widget,
body:not(.dark-mode) .info-banner,
body:not(.dark-mode) .ruler-widget-container {
    color: #000000 !important; /* 强制黑色 */
    text-shadow: none !important; /* 去掉原本可能存在的白色发光 */
}

/* 针对天气组件的具体修正 */
body:not(.dark-mode) .weather-temp,
body:not(.dark-mode) .weather-desc,
body:not(.dark-mode) .weather-city {
    color: #000000 !important;
}

/* 针对纪念日组件的具体修正 */
body:not(.dark-mode) .anni-title,
body:not(.dark-mode) .anni-days,
body:not(.dark-mode) .anni-date {
    color: #000000 !important;
}

/* 2. App图标文字：加灰色阴影 */
body:not(.dark-mode) .app-label {
    /* 确保文字本身有足够的对比度 */
    color: #ffffff; 
    /* 灰色阴影参数：水平偏移0，垂直偏移1px，模糊2px，深灰色 */
    text-shadow: 0 1px 2px rgba(80, 80, 80, 0.9);
    
    /* 如果你觉得白色字+灰阴影看不清，想改成黑色字+白阴影，可以用下面这行代替上面两行： */
    /* color: #000000; text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8); */
}
/* ============================================================
   【深色模式专属优化】(磨砂玻璃质感)
   ============================================================ */

/* 选中所有桌面小组件 */
body.dark-mode .anniversary-widget,
body.dark-mode .weather-widget,
body.dark-mode .info-banner,
body.dark-mode .ruler-widget-container {
    /* 1. 背景：改成半透明的灰白色 (不再是死黑) */
    background: rgba(80, 80, 80, 0.25) !important;
    
    /* 2. 核心：添加高斯模糊 (磨砂效果) */
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important; /* 兼容苹果浏览器 */
    
    /* 3. 边框：去掉黑色边框，改用极细的微光边框 (增加玻璃厚度感) */
    border: none !important;
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.15) !important;
    
    /* 4. 文字颜色：确保清晰 */
    color: rgba(255, 255, 255, 0.95) !important;
}

/* 针对天气组件内部文字的修正 */
body.dark-mode .weather-temp,
body.dark-mode .weather-desc,
body.dark-mode .weather-city {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3); /* 加一点点阴影增加层次 */
}

/* 针对纪念日组件的修正 */
body.dark-mode .anni-title,
body.dark-mode .anni-days,
body.dark-mode .anni-date {
    color: rgba(255, 255, 255, 0.9) !important;
}
/* ============================================================
   【深色模式专属优化 (加强版)】
   ============================================================ */

/* 选中所有桌面小组件 (强制生效) */
body.dark-mode .top-widgets > div, /* 选中 top-widgets 下的所有直接子元素 */
body.dark-mode .anniversary-widget,
body.dark-mode .weather-widget,
body.dark-mode .info-banner,
body.dark-mode .ruler-widget-container {
    
    /* 1. 背景：改成半透明的灰白色 (不再是死黑) */
    background-color: rgba(80, 80, 80, 0.25) !important;
    background: rgba(80, 80, 80, 0.25) !important; /* 双重保险 */
    
    /* 2. 核心：添加高斯模糊 (磨砂效果) */
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    
    /* 3. 边框：去掉黑色边框，改用极细的微光边框 */
    border: none !important;
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.15) !important;
    
    /* 4. 文字颜色：确保清晰 */
    color: rgba(255, 255, 255, 0.95) !important;
}

/* 针对特定文字颜色的修正 (强制变白) */
body.dark-mode .weather-temp,
body.dark-mode .weather-desc,
body.dark-mode .weather-city,
body.dark-mode .anni-title,
body.dark-mode .anni-days,
body.dark-mode .anni-date,
body.dark-mode .text-area div {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}