/* css/main.css - 修复版 */

:root {
    --primary-color: #007aff; 
    --bg-dark: #0a0a21;
    --text-color: #f0f0f0;
    --text-light: #ffffff;
    --font-main: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
    --icon-size: 64px; 
    --icon-radius: 14px; 
    --dock-height: 90px; 

    /* ================= 设置面板变量 (白昼) ================= */
    --settings-bg: rgba(255, 255, 255, 0.85);
    --settings-sidebar-bg: rgba(0, 0, 0, 0.05);
    --settings-text: #1d1d1f;
    --settings-border: rgba(0, 0, 0, 0.1);
    --settings-hover: rgba(0, 0, 0, 0.08);
    --settings-card-bg: rgba(0, 0, 0, 0.05);
    --settings-input-bg: rgba(255, 255, 255, 0.5);
    --settings-solid-bg: #f2f2f7;
}

/* ================= 设置面板变量 (月蚀) ================= */
[data-theme="dark"] {
    --settings-bg: rgba(30, 30, 30, 0.85); 
    --settings-sidebar-bg: rgba(255, 255, 255, 0.05);
    --settings-text: #ffffff;
    --settings-border: rgba(255, 255, 255, 0.1);
    --settings-hover: rgba(255, 255, 255, 0.1);
    --settings-card-bg: rgba(255, 255, 255, 0.05);
    --settings-input-bg: rgba(0, 0, 0, 0.3);
    --settings-solid-bg: #1e1e1e;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; }
body { font-family: var(--font-main); color: var(--text-color); background-color: var(--bg-dark); height: 100vh; width: 100vw; overflow: hidden; user-select: none; }
a { text-decoration: none; color: inherit; }

/* --- 页面容器与背景 --- */
.page-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
.background-container { position: absolute; inset: 0; z-index: -2; }
.background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.background-image.placeholder { filter: blur(15px); transform: scale(1.1); }
.real-image { opacity: 0; transition: opacity 0.5s ease-in-out; }
.real-image.loaded { opacity: 1; }
.overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.23); z-index: 2; }

/* --- iOS 风格 status-bar & desktop --- */
.status-bar { position: fixed; top: 0; left: 0; right: 0; height: 44px; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; color: var(--text-light); font-size: 14px; font-weight: 500; z-index: 100; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.user-status { display: flex; align-items: center; gap: 10px; }
.user-status .user-avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(255,255,255,0.3); }
.user-status .user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ios-desktop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.desktop-pages-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
.desktop-pages-scroller { width: 100%; height: 100%; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.desktop-pages-scroller::-webkit-scrollbar { display: none; }
.desktop-page { width: 100%; height: 100%; flex-shrink: 0; scroll-snap-align: start; padding-top: 54px; padding-left: 20px; padding-right: 20px; padding-bottom: 120px; position: relative; box-sizing: border-box; }
.desktop-page-indicator { position: fixed; bottom: calc(var(--dock-height) + 10px); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 50; }
.desktop-page-indicator .dot { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); transition: background-color 0.3s ease, transform 0.3s ease; }
.desktop-page-indicator .dot.active { background-color: rgba(255, 255, 255, 0.9); transform: scale(1.1); }
.desktop-grid { display: grid; grid-template-columns: repeat(auto-fill, 110px); grid-auto-rows: 115px; gap: 10px; justify-content: flex-start; align-content: flex-start; height: 100%; width: 100%; position: relative; }
.desktop-grid .draggable-item { grid-area: 1 / 1; justify-self: center; align-self: center; z-index: 1; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); touch-action: none; will-change: transform; transform: translateZ(0); }
.desktop-grid .large-widget { width: 230px; height: 240px; z-index: 1; }
.draggable-item.is-dragging { z-index: 9999 !important; transition: none !important; }
.app-icon { display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.app-icon:active { transform: scale(0.92); }
.app-icon .icon-bg { width: var(--icon-size); height: var(--icon-size); border-radius: var(--icon-radius); display: flex; justify-content: center; align-items: center; font-size: 28px; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); background-color: rgba(255,255,255,0.2); background-size: cover; background-position: center; background-repeat: no-repeat; transition: all 0.2s ease; }
.icon-bg.user-avatar-icon { padding: 0; overflow: hidden; }
.icon-bg.user-avatar-icon img { width: 100%; height: 100%; object-fit: cover; }
.app-icon .label { font-size: 13px; color: var(--text-light); text-shadow: 0 1px 2px rgba(0,0,0,0.5); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.ios-desktop .app-icon[id^="app-icon-"] .icon-bg { background-color: rgba(255, 255, 255, 0.7) !important; color: #2c2c2c !important; }
.ios-desktop .app-icon[id^="app-icon-"] i { background: none !important; -webkit-text-fill-color: unset !important; color: inherit !important; }
.ios-desktop .app-icon[id^="app-icon-"]:active .icon-bg { background-color: rgba(255, 255, 255, 0.95) !important; }

/* widget */
.announcement-full-page { display: flex; flex-direction: column; padding: 60px 20px 120px 20px; overflow-y: auto; }
.glass-panel-container { width: 100%; height: 100%; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.greeting-section { margin-bottom: 10px; padding-left: 5px; }
.greeting-section h2 { font-size: 28px; font-weight: 700; color: var(--text-light); text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.greeting-section p { font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-top: 5px; }
.widget-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 20px; padding: 15px 20px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease; }
.widget-card:active { transform: scale(0.98); }
.card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 1px; }
.highlight-card { background: rgba(0, 122, 255, 0.15); border: 1px solid rgba(0, 122, 255, 0.2); }
.news-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 14px; line-height: 1.4; }
.news-item .tag { padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.news-item .tag.update { background: #007aff; color: white; }
.news-item .tag.event { background: #ff9f43; color: white; }
.news-item .text { color: var(--text-light); }
.widget-row { display: flex; gap: 15px; }
.small-card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; gap: 5px; }
.small-card i { font-size: 24px; margin-bottom: 5px; }
.small-card .value { font-size: 20px; font-weight: 700; color: white; }
.small-card .label { font-size: 12px; color: rgba(255,255,255,0.6); }
.small-card .vip-info-container { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 30px; }
.vip-status-text { font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, 0.8); }
.vip-count-val { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; }
.vip-date-val { font-size: 10px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; white-space: nowrap; }
.text-card .card-body { font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.6; }
.text-card .card-body p { margin-bottom: 10px; }

/* --- Dock 栏 --- */
.dock {
    /* 1. 定位：稳稳固定在底部 */
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    
    /* 2. 布局：强制横向排列 */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 40px !important;
    
    /* 3. 外观：深色底，去掉性能消耗大的效果 */
    width: auto !important;
    min-width: 260px;
    height: 70px !important;
    border-radius: 35px !important;
    
    /* 稍微降低透明度，保证文字看不清的情况下依然能看清图标 */
    background: rgba(0, 0, 0, 0.55) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    padding: 0 35px !important;
    z-index: 9999 !important;
    
    /* 保留一个最基础的黑影，立体感还是需要的，但不吃配置 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

/* 隐藏原来的文字标签 */
.dock .app-icon .label { display: none !important; }

/* 链接容器重置 */
.dock .app-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 图标容器重置：去掉一切背景 */
.dock .app-icon .dock-icon-style {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* 图标本体：纯白、无光晕 */
.dock .app-icon .dock-icon-style i {
    font-size: 28px !important;
    color: #ffffff !important; /* 纯白 */
    text-shadow: none !important; /* 【关键】删除了所有光晕 */
    filter: none !important;      /* 【关键】删除了所有滤镜 */
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}

/* 点击时的反馈：只改变透明度，不改变大小，性能最好 */
.dock .app-icon:active .dock-icon-style i {
    opacity: 0.6;
}
.guest-login-bar { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 101; width: 220px; }
.login-trigger-btn { width: 100%; height: 56px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.2); background: linear-gradient(135deg, rgba(0, 122, 255, 0.8), rgba(0, 198, 255, 0.8)); backdrop-filter: blur(10px); color: white; font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3); transition: all 0.3 cubic-bezier(0.25, 0.8, 0.25, 1); }
.login-trigger-btn:active { transform: scale(0.95); box-shadow: 0 4px 10px rgba(0, 122, 255, 0.2); }

.hidden { display: none !important; }

/* ======================= 核心修复：认证面板与用户卡片 ======================= */
.auth-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.auth-overlay:not(.hidden) { opacity: 1; pointer-events: auto; }

.auth-card {
    width: 360px;
    background: rgba(30, 30, 40, 0.85); /* 深色面板背景 */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: white;
}
.auth-overlay:not(.hidden) .auth-card { transform: scale(1); }

/* 关闭按钮 */
.close-auth-btn {
    position: absolute; top: 15px; right: 15px;
    background: none; border: none; color: rgba(255,255,255,0.5);
    font-size: 18px; cursor: pointer; z-index: 10;
}

/* --- 修复1: 用户卡片头像过大问题 --- */
.user-card-header { text-align: center; margin-bottom: 20px; }

.user-big-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px auto; /* 关键：确保居中 */
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.2);
    
    /* 核心修复：强制 Flex 居中并限制内容 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 裁剪溢出 */
    flex-shrink: 0;   /* 防止变形 */
    background: #000; /* 兜底背景色 */
}

.user-big-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持比例填充 */
    display: block;
}

/* 用户名和数据 */
.user-card-header h3 { font-size: 20px; color: white; margin-bottom: 5px; }
.user-email { font-size: 12px; color: rgba(255,255,255,0.5); }
.user-stats-mini { display: flex; justify-content: center; gap: 30px; margin-bottom: 25px; }
.stat-box .val { font-size: 18px; font-weight: bold; color: white; display: block; }
.stat-box .lbl { font-size: 12px; color: rgba(255,255,255,0.5); }

/* 按钮样式 */
.action-btn.primary { background: rgba(255,255,255,0.1); color: white;border:none; }
.action-btn.danger { background: rgba(234, 84, 85, 0.2); color: #ea5455;border:none; }
.action-btn { height: 40px; border-radius: 10px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; width: 100%; transition: 0.2s; }
.action-btn:hover { filter: brightness(1.2); }

/* --- 修复2: 验证码输入框与发送按钮美化 --- */

/* 选项卡 */
.auth-tabs { display: flex; margin-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.auth-tab { flex: 1; background: none; border: none; padding: 10px; color: rgba(255,255,255,0.5); font-size: 16px; font-weight: bold; cursor: pointer; border-bottom: 3px solid transparent; }
.auth-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }

/* 表单区域 */
.auth-form { display: none; flex-direction: column; gap: 15px; }
.auth-form.active { display: flex; animation: fadeIn 0.3s ease; }

/* 输入框容器 */
.input-group {
    position: relative;
    width: 100%;
}

/* 图标 */
.input-group i {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,0.4); z-index: 2;
}

/* 输入框本身 - 统一风格 */
.input-group input {
    width: 100%;
    height: 44px;
    background: rgba(0,0,0,0.2); /* 深色半透明背景 */
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0 15px 0 40px; /* 左边留给图标 */
    color: white;
    font-size: 14px;
    transition: border 0.2s;
}
.input-group input:focus { border-color: var(--primary-color); }

/* === 修复重点：带有验证码按钮的输入框 === */
.input-group.with-btn input {
    /* 核心：右边留出足够的空间给按钮，防止重叠 */
    padding-right: 90px !important; 
    padding-left: 15px; /* 如果验证码没有图标的话 */
}

/* === 修复重点：发送按钮 (.mini-btn) === */
.mini-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%); /* 绝对垂直居中 */
    
    height: 32px;
    padding: 0 15px;
    
    background: var(--primary-color); /* 使用主题蓝，确保在白色背景下也可见 */
    border: none;
    border-radius: 8px;
    
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    z-index: 5;
    
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.mini-btn:disabled {
    background: #555;
    color: #ccc;
    cursor: not-allowed;
}

/* 大提交按钮 */
.submit-btn {
    height: 44px; background: var(--primary-color); border: none; border-radius: 12px; color: white;
    font-weight: bold; font-size: 16px; cursor: pointer; margin-top: 10px; box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
}

/* 协议行 */
.agreement-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.7); padding-left: 5px; }
.agreement-row a { color: var(--primary-color); text-decoration: underline; cursor: pointer; }

/* --- 动画 --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.auth-view.hidden { display: none !important; }


/* ======================= 设置面板 ======================= */
.settings-panel-container {
    position: fixed; 
    z-index: 10000 !important; /* 修改核心：层级设为 1万，稳稳压住 Dock 栏 */
    top: 50%; 
    left: 50%; 
    width: 90vw; 
    height: 85vh; 
    max-width: 1200px; 
    max-height: 800px;
    transform: translate(-50%, -50%) scale(0.95); 
    display: flex; 
    flex-direction: column;
    background: var(--settings-bg); 
    color: var(--settings-text); 
    border: 1px solid var(--settings-border);
    backdrop-filter: blur(50px) saturate(150%); 
    -webkit-backdrop-filter: blur(50px) saturate(150%);
    border-radius: 8px; 
    box-shadow: 0 16px 40px rgba(0,0,0,0.3); 
    opacity: 0; 
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; 
    overflow: hidden;
}

.settings-panel-container:not(.hidden) { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.settings-panel-container.hidden { opacity: 0; pointer-events: none; }
.settings-panel-container *::-webkit-scrollbar { display: none; }
.settings-title-bar {
    display: flex; justify-content: space-between; align-items: center; padding-left: 15px;
    height: 48px; flex-shrink: 0; user-select: none; border-bottom: 1px solid var(--settings-border);
}
.settings-title-bar .title { font-weight: 500; }
.window-controls { display: flex; }
.window-control-btn {
    background: none; border: none; color: var(--settings-text); width: 48px; height: 48px; font-size: 12px; transition: background-color 0.2s ease; cursor: pointer;
}
.window-control-btn:hover { background-color: var(--settings-hover); }
.window-control-btn.close-btn:hover { background-color: #e81123; color: white; }
.settings-main-content { display: flex; flex-grow: 1; overflow: hidden; }
.settings-sidebar {
    width: 250px; flex-shrink: 0; background: var(--settings-sidebar-bg); padding: 10px; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; border-right: 1px solid var(--settings-border);
}
.mobile-header, .user-card-mobile { display: none; } 
.search-container { position: relative; display: flex; align-items: center; }
.search-container input {
    width: 100%; height: 36px; border-radius: 5px; border: 1px solid var(--settings-border);
    background-color: var(--settings-input-bg); color: var(--settings-text); padding-left: 35px; font-size: 14px;
}
.search-container input::placeholder { color: var(--settings-text); opacity: 0.5; }
.search-container .fa-search { position: absolute; left: 12px; color: var(--settings-text); opacity: 0.5; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px;}
.sidebar-item {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 5px;
    color: var(--settings-text); opacity: 0.85; transition: background-color 0.2s ease; border-left: 3px solid transparent; font-size: 14px;
}
.sidebar-item:hover { background: var(--settings-hover); }
.sidebar-item.active { background: var(--settings-hover); opacity: 1; border-left-color: var(--primary-color); font-weight: 500; }
.sidebar-item i { width: 18px; text-align: center; font-size: 16px; }
.settings-content-area { 
    flex-grow: 1; 
    padding: 10px 20px 20px 20px; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column;
    
    /* 【新增】给这里也加上底部缓冲 */
    padding-bottom: 200px; 
}
.content-header h2 { font-size: 24px; font-weight: 600; margin-bottom: 20px; color: var(--settings-text); }
.content-wrapper { flex-grow: 1;}
.settings-content { display: none; }
.settings-content.active { display: block; animation: fadeIn 0.3s ease; }
.setting-group { margin-bottom: 30px; }
.setting-group h4 { font-size: 16px; font-weight: 600; color: var(--settings-text); margin-bottom: 15px; padding-bottom: 5px; border-bottom: 1px solid var(--settings-border); }
.setting-description { margin-top: 10px; font-size: 13px; color: var(--settings-text); opacity: 0.6; }
.background-preview-container { display: flex; gap: 20px; align-items: flex-start; }
#background-preview-img { width: 200px; height: 112px; object-fit: cover; border-radius: 6px; border: 1px solid var(--settings-border); flex-shrink: 0; }
.background-actions { display: flex; flex-direction: column; gap: 10px; }
.action-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 5px; border: 1px solid var(--primary-color); background-color: var(--primary-color); color: white; font-weight: 500; cursor: pointer; transition: all 0.2s ease; }
.action-btn:hover { background-color: #0056b3; border-color: #0056b3; }
.action-btn.secondary { background-color: transparent; color: var(--settings-text); border-color: var(--settings-border); opacity: 0.8; }
.action-btn.secondary:hover { background-color: var(--settings-hover); opacity: 1; }
.slider-container { display: flex; align-items: center; gap: 15px; color: var(--settings-text); }
input[type="range"] { flex-grow: 1; -webkit-appearance: none; appearance: none; height: 5px; background: rgba(255, 255, 255, 0.3); border-radius: 5px; outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: white; border-radius: 50%; cursor: pointer; border: 3px solid var(--primary-color); }
.layout-actions { display: flex; gap: 10px; }
.settings-content .about-section.contact-info, .sub-panel-content .contact-info { padding: 10px; color: var(--settings-text); }
.contact-info h4 { font-size: 16px; font-weight: 600; margin-bottom: 20px; gap: 10px; display: flex; align-items: center; }
.contact-info h4 i { color: #88d8b0; }
.contact-info .contact-item { display: flex; align-items: center; gap: 15px; font-size: 14px; margin-bottom: 15px; }
.contact-info .contact-label { background-color: var(--settings-card-bg); padding: 5px 10px; border-radius: 5px; color: var(--settings-text); opacity: 0.8; }
.input-group-simple { display: flex; flex-direction: column; gap: 8px; }
.input-group-simple label { font-size: 13px; color: var(--settings-text); opacity: 0.7; }
.input-group-simple input[type="text"], .input-group-simple input[type="date"], .input-group-simple textarea { background: var(--settings-input-bg); border: 1px solid var(--settings-border); border-radius: 6px; padding: 10px; color: var(--settings-text); font-family: inherit; width: 100%; }
.input-group-simple input:focus, .input-group-simple textarea:focus { border-color: var(--primary-color); }
.settings-sub-panel {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    
    /* 【核心修改】改为使用刚才定义的实色变量 */
    background-color: var(--settings-solid-bg); 
    
    z-index: 10; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column;
}
.settings-sub-panel.active { transform: translateX(0); }
.sub-panel-header { display: flex; align-items: center; padding: 15px; height: 60px; flex-shrink: 0; border-bottom: 1px solid var(--settings-border); color: var(--settings-text); }
.sub-panel-back-btn { background: none; border: none; font-size: 16px; color: var(--primary-color); cursor: pointer; font-weight: 500; }
.sub-panel-header h3 { position: absolute; left: 50%; transform: translateX(-50%); font-size: 18px; font-weight: 600; color: var(--settings-text); }
.sub-panel-content {
    flex-grow: 1;
    
    /* 强制允许Y轴滚动 */
    overflow-y: scroll; 
    
    /* 开启 iOS/Android 顺滑滚动 (惯性滚动) */
    -webkit-overflow-scrolling: touch;
    
    padding: 15px;
    
    /* 【修改这里】加大底部内边距 */
    /* 之前是 80px，我们改成 300px (或者更大) */
    /* 这样键盘弹起时，即便是最后一个输入框，也能被推到屏幕中间 */
    padding-bottom: 300px !important; 
}
.settings-mobile-close-btn { background: var(--settings-hover); color: var(--settings-text); border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; cursor: pointer; position: absolute; top: 25px; right: 15px; display: flex; justify-content: center; align-items: center; }
.icp-footer { position: fixed; bottom: 5px; left: 50%; transform: translateX(-50%); z-index: 5; font-size: 12px; color: rgba(255, 255, 255, 0.4); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
#settings-login-tip { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60vh; width: 100%; gap: 25px; padding: 0 !important; text-align: center !important; }
#settings-login-tip.hidden { display: none !important; }
#settings-login-tip p { font-size: 16px; color: var(--settings-text) !important; opacity: 0.5; margin: 0 !important; }
#settings-login-tip .login-trigger-btn-internal { padding: 10px 30px; font-size: 16px; background: var(--primary-color); border: none; box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3); color: white; border-radius: 20px; cursor: pointer;}
.toast-message{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.75);color:#fff;padding:12px 22px;border-radius:25px;font-size:14px;z-index:10000;box-shadow:0 5px 15px rgba(0,0,0,.2);opacity:0;transition:opacity .3s ease,bottom .3s ease}.toast-message.show{opacity:1;bottom:40px}
.modal-content { background: var(--settings-bg); border: 1px solid var(--settings-border); color: var(--settings-text); }
.panel-header { background: rgba(0,0,0,0.05); border-bottom-color: var(--settings-border); }
.panel-header h3 { color: var(--settings-text); }

@media (max-width: 768px) {
    :root { --icon-size: 60px; --icon-radius: 13px; --dock-height: 80px; }
    .ios-desktop .app-icon .icon-bg { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    .ios-desktop { justify-content: flex-start; padding-top: 80px; }
    .desktop-grid { grid-template-columns: repeat(4, 1fr) !important; grid-auto-rows: 100px; }
    .desktop-page { padding-left: 15px; padding-right: 15px; }
    .dock {
        bottom: 25px !important;
        gap: 25px !important;
        padding: 0 25px !important;
        height: 64px !important;
        border-radius: 32px !important;
        min-width: auto !important;
    }
    
    .dock .app-icon .dock-icon-style i {
        font-size: 24px !important;
    }
    .desktop-page-indicator { bottom: 140px !important; background-color: rgba(0,0,0,0.2); padding: 4px 8px; border-radius: 10px; }
    .icp-footer { display: none; }
    .settings-panel-container {
    width: 100vw;
    
    /* 【建议修改】将 100vh 改为 100%，适配移动端浏览器地址栏 */
    height: 100%; 
    
    max-width: none; max-height: none; top: 0; left: 0;
    border-radius: 0; transform: translateY(100%); background: var(--settings-bg);
}
    .settings-panel-container:not(.hidden) { transform: translateY(0); }
    .settings-title-bar { display: none; }
    .settings-main-content { flex-direction: column; }
    .settings-sidebar { width: 100%; background: transparent; overflow-y: visible; padding: 15px; border-right: none; }
    .mobile-header { display: block; padding: 10px 5px; }
    .mobile-header h1 { font-size: 32px; font-weight: 700; color: var(--settings-text); }
    .mobile-only { display: flex; }
    .search-container input { background: var(--settings-bg); border: 1px solid var(--settings-border); height: 48px; border-radius: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
    .user-card-mobile { background: var(--settings-bg); border: 1px solid var(--settings-border); border-radius: 16px; padding: 15px; align-items: center; gap: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); color: var(--settings-text); }
    .user-card-mobile img { width: 50px; height: 50px; border-radius: 50%; }
    .user-card-mobile .user-info { flex-grow: 1; }
    .user-card-mobile .user-info .name { font-size: 18px; font-weight: 500; }
    .user-card-mobile .user-info .status { font-size: 13px; opacity: 0.6; }
    .sidebar-nav { background: var(--settings-bg); padding: 8px; border-radius: 16px; border: 1px solid var(--settings-border); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
    .sidebar-item { padding: 12px; border-left: none; }
    .sidebar-item i { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; color: white !important; font-size: 16px; }
    .sidebar-item[data-target="visual-content"] i { background-color: #ff9f43; }
    .sidebar-item[data-target="license-content"] i { background-color: #f368e0; }
    .sidebar-item[data-target="about-content"] i { background-color: #1dd1a1; }
    .sidebar-item.active { background: var(--settings-hover) !important; color: var(--settings-text) !important; border-radius: 10px; }
    .settings-content-area { display: none; }
    .background-preview-container { flex-direction: column; }
    #background-preview-img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    /* 1. 针对该页面的容器：强制开启滚动 */
    .announcement-full-page {
        /* 强制让容器变为块级布局，取消Flex居中导致的卡死 */
        display: block !important; 
        
        /* 限制容器高度为屏幕高度，内容超出时出现滚动条 */
        height: 100% !important;
        max-height: 100vh !important; 
        
        /* 核心：允许垂直滚动，禁止水平滚动 */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        
        /* 开启 iOS 的物理惯性滚动效果 */
        -webkit-overflow-scrolling: touch;

        /* 内边距设置 */
        /* 上：留出状态栏空间 */
        padding-top: 40px !important; 
        /* 左右：留出边缘 */
        padding-left: 15px !important;
        padding-right: 15px !important;
        /* 下：【关键】留出巨大的底部空间，确保最后一行字能滑到 Dock 栏上方 */
        padding-bottom: 80px !important; 
    }

    /* 2. 针对内部的内容包裹器 */
    .announcement-full-page .glass-panel-container {
        /* 高度自动撑开，不要被父级限制 */
        height: auto !important;
        min-height: auto !important;
        
        /* 确保排列方向正确 */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* 从顶部开始排，不要居中 */
        
        /* 间距微调 */
        gap: 15px !important;
        margin-bottom: 0 !important;
    }

    /* 3. 隐藏该区域的滚动条 (虽然能滚，但看不见条，更美观) */
    .announcement-full-page::-webkit-scrollbar {
        display: none;
    }

    /* --- 以下是美化微调 (让内容更紧凑，避免一屏也放不下太多东西) --- */

    /* 问候语 */
    .greeting-section h2 { font-size: 26px !important; margin-bottom: 5px !important; }
    .greeting-section p { font-size: 13px !important; opacity: 0.8; margin-top: 0 !important;}

    /* 卡片通用 */
    .widget-card {
        padding: 15px !important;
        border-radius: 16px !important;
        /* 防止被压缩变形 */
        flex-shrink: 0 !important; 
    }

    /* 中间两个小卡片 (积分/月卡) */
    .small-card {
        padding: 12px !important;
    }
    .small-card i { font-size: 22px !important; margin-bottom: 4px !important; }
    .small-card .value { font-size: 18px !important; }
    .small-card .label { font-size: 11px !important; }
    
    /* 底部长文本卡片 */
    .text-card .card-body {
        /* 允许卡片内部文本折行 */
        white-space: normal !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }
}