:root {
      --blue: #007AFF;
      --green: #34C759;
      --orange: #FF9500;
      --red: #FF3B30;
      --purple: #AF52DE;
      --indigo: #5856D6;
      --teal: #5AC8FA;
      --text-primary: #1c1c1e;
      --text-secondary: #8e8e93;
      --text-tertiary: #aeaeb2;
      --bg-primary: #f2f2f7;
      --bg-gradient: linear-gradient(165deg, #eef4fd 0%, #e8f5e9 25%, #fef9e7 50%, #f3ecf8 75%, #e8f0fe 100%);
      --bg-secondary: #ffffff;
      --separator: rgba(60, 60, 67, 0.12);
      --fill-tertiary: rgba(118, 118, 128, 0.12);
      --fill-quaternary: rgba(116, 116, 128, 0.08);
      --material-thick: rgba(253, 253, 253, 0.92);
      --shadow-card: 0 0.5px 0 0 rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
      --shadow-elevated: 0 2px 12px rgba(0,0,0,0.08), 0 0.5px 1px rgba(0,0,0,0.06);
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-top: env(safe-area-inset-top, 0px);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
    html {
      /* WebApp 模式：撑满整个屏幕含状态栏 */
      height: -webkit-fill-available;
    }
    body {
      font-family: -apple-system, 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', sans-serif;
      background: var(--bg-gradient);
      min-height: 100vh;
      min-height: -webkit-fill-available;
      color: var(--text-primary);
      -webkit-font-smoothing: antialiased;
      /* ★ WebApp 关键：顶部安全区作用在 body，普通流页面自动下沉 */
      padding-top: env(safe-area-inset-top, 0px);
    }

    /* ===== CSS图标系统 ===== */
    .ci { width: 24px; height: 24px; position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .ci-home::before { content:''; width:14px; height:10px; border:2px solid currentColor; border-top:none; border-radius:0 0 2px 2px; position:absolute; bottom:3px; }
    .ci-home::after { content:''; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:8px solid currentColor; position:absolute; top:3px; }
    .ci-cal::before { content:''; width:16px; height:14px; border:2px solid currentColor; border-radius:3px; position:absolute; bottom:2px; }
    .ci-cal::after { content:''; width:16px; border-top:2px solid currentColor; position:absolute; top:8px; }
    .ci-check::before { content:''; width:16px; height:16px; border:2px solid currentColor; border-radius:4px; position:absolute; }
    .ci-check::after { content:''; width:8px; height:5px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); position:absolute; top:6px; left:6px; }
    .ci-bell::before { content:''; width:12px; height:11px; border:2px solid currentColor; border-radius:6px 6px 1px 1px; border-bottom:none; position:absolute; top:3px; }
    .ci-bell::after { content:''; width:18px; border-top:2px solid currentColor; border-radius:1px; position:absolute; bottom:4px; }
    .ci-user::before { content:''; width:8px; height:8px; border:2px solid currentColor; border-radius:50%; position:absolute; top:2px; }
    .ci-user::after { content:''; width:14px; height:7px; border:2px solid currentColor; border-radius:7px 7px 0 0; border-bottom:none; position:absolute; bottom:3px; }
    .ci-plus::before { content:''; width:2px; height:16px; background:currentColor; border-radius:1px; position:absolute; }
    .ci-plus::after { content:''; width:16px; height:2px; background:currentColor; border-radius:1px; position:absolute; }
    .ci-book::before { content:''; width:14px; height:16px; border:2px solid currentColor; border-radius:1px 3px 3px 1px; position:absolute; }
    .ci-book::after { content:''; height:16px; border-left:2px solid currentColor; position:absolute; left:8px; }
    .ci-close::before, .ci-close::after { content:''; width:14px; height:2px; background:currentColor; border-radius:1px; position:absolute; }
    .ci-close::before { transform:rotate(45deg); }
    .ci-close::after { transform:rotate(-45deg); }
    .ci-arrow::before { content:''; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); position:absolute; opacity:0.5; }

    /* 信箱专用图标 */
    /* ci-mail: 信封 □ + 折线 */
    .ci-mail::before { content:''; width:16px; height:12px; border:2px solid currentColor; border-radius:2px; position:absolute; top:5px; }
    .ci-mail::after  { content:''; width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-top:7px solid currentColor; position:absolute; top:5px; }
    /* ci-mail-open: 打开的信封 */
    .ci-mail-open::before { content:''; width:16px; height:10px; border:2px solid currentColor; border-top:none; border-radius:0 0 2px 2px; position:absolute; bottom:4px; }
    .ci-mail-open::after  { content:''; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:8px solid currentColor; position:absolute; top:4px; }
    /* ci-send: 发送 — 纸飞机 */
    .ci-send::before { content:''; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:16px solid currentColor; position:absolute; left:2px; }
    .ci-send::after  { content:''; width:7px; height:2px; background:currentColor; border-radius:1px; position:absolute; bottom:7px; left:7px; transform:rotate(45deg); }
    /* ci-reply: 回复 — 弯箭头 */
    .ci-reply::before { content:''; width:10px; height:8px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; border-radius:0 0 0 4px; position:absolute; top:6px; left:3px; }
    .ci-reply::after  { content:''; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-right:6px solid currentColor; position:absolute; top:9px; left:3px; transform:translateY(-50%) rotate(30deg); }
    /* ci-trash: 删除 — 垃圾桶 */
    .ci-trash::before { content:''; width:14px; height:11px; border:2px solid currentColor; border-top:none; border-radius:0 0 3px 3px; position:absolute; bottom:2px; }
    .ci-trash::after  { content:''; width:18px; border-top:2px solid currentColor; border-radius:1px; position:absolute; top:5px; box-shadow:0 -4px 0 0 currentColor; width:8px; left:7px; }
    /* ci-inbox: 收件箱托盘 */
    .ci-inbox::before { content:''; width:16px; height:8px; border:2px solid currentColor; border-top:none; border-radius:0 0 3px 3px; position:absolute; bottom:2px; }
    .ci-inbox::after  { content:''; width:6px; height:2px; background:currentColor; border-radius:1px; position:absolute; top:6px; box-shadow:-5px 5px 0 0 currentColor, 5px 5px 0 0 currentColor; }
    /* ci-compose: 写信 — 铅笔+纸 */
    .ci-compose::before { content:''; width:12px; height:14px; border:2px solid currentColor; border-radius:1px 3px 1px 1px; position:absolute; left:3px; top:4px; }
    /* ci-undo: 撤回 — 弧形左箭头 */
    .ci-undo::before { content:''; width:10px; height:10px; border:2px solid currentColor; border-right-color:transparent; border-bottom-color:transparent; border-radius:50%; position:absolute; top:4px; left:4px; }
    .ci-undo::after  { content:''; width:0; height:0; border-right:5px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent; position:absolute; top:4px; left:2px; }
    .ci-compose::after  { content:''; width:8px; height:2px; background:currentColor; border-radius:1px; position:absolute; top:9px; left:7px; box-shadow:0 3px 0 0 currentColor; }

    /* 个人中心扩展图标 */
    .ci-smile::before { content:''; width:16px; height:16px; border:2px solid currentColor; border-radius:50%; position:absolute; }
    .ci-smile::after { content:''; width:8px; height:4px; border-bottom:2px solid currentColor; border-radius:0 0 8px 8px; position:absolute; top:11px; }
    .ci-gender::before { content:''; width:10px; height:10px; border:2px solid currentColor; border-radius:50%; position:absolute; bottom:4px; left:4px; }
    .ci-gender::after { content:''; width:8px; height:2px; background:currentColor; transform:rotate(-45deg); position:absolute; top:6px; right:3px; box-shadow:0 0 0 0 currentColor; border-radius:1px; }
    .ci-cake::before { content:''; width:16px; height:8px; border:2px solid currentColor; border-radius:0 0 3px 3px; border-top:none; position:absolute; bottom:3px; }
    .ci-cake::after { content:''; width:16px; height:2px; background:currentColor; border-radius:1px; position:absolute; top:10px; box-shadow:0 -6px 0 -0.5px currentColor; }
    .ci-school::before { content:''; width:18px; height:10px; border:2px solid currentColor; border-top:none; border-radius:0 0 2px 2px; position:absolute; bottom:3px; }
    .ci-school::after { content:''; width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent; border-bottom:7px solid currentColor; position:absolute; top:4px; }
    .ci-books::before { content:''; width:5px; height:14px; border:1.5px solid currentColor; border-radius:1px; position:absolute; left:4px; top:4px; transform:rotate(-5deg); }
    .ci-books::after { content:''; width:5px; height:14px; border:1.5px solid currentColor; border-radius:1px; position:absolute; right:4px; top:4px; transform:rotate(5deg); box-shadow:-5px 0 0 -0.5px currentColor; }
    /* ci-target: 目标 — 同心圆 */
    .ci-target::before { content:''; width:14px; height:14px; border:2px solid currentColor; border-radius:50%; position:absolute; }
    .ci-target::after  { content:''; width:5px; height:5px; background:currentColor; border-radius:50%; position:absolute; }
    /* ci-warn: 警告 — 菱形感叹号 */
    .ci-warn::before { content:''; width:14px; height:14px; border:2px solid currentColor; border-radius:2px; transform:rotate(45deg); position:absolute; top:3px; }
    .ci-warn::after  { content:''; width:2px; height:5px; background:currentColor; border-radius:1px; position:absolute; top:7px; box-shadow:0 7px 0 0 currentColor; }
    /* ci-bell-off: 关闭铃铛 — 铃铛加斜线 */
    .ci-bell-off::before { content:''; width:12px; height:11px; border:2px solid currentColor; border-radius:6px 6px 1px 1px; border-bottom:none; position:absolute; top:3px; }
    .ci-bell-off::after  { content:''; width:17px; height:2px; background:currentColor; border-radius:1px; position:absolute; bottom:7px; transform:rotate(-40deg); }
    .ci-bag::before { content:''; width:14px; height:12px; border:2px solid currentColor; border-radius:3px; position:absolute; bottom:3px; }
    .ci-bag::after { content:''; width:8px; height:4px; border:2px solid currentColor; border-radius:4px 4px 0 0; border-bottom:none; position:absolute; top:3px; }
    .ci-users::before { content:''; width:8px; height:8px; border:2px solid currentColor; border-radius:50%; position:absolute; top:2px; left:3px; }
    .ci-users::after { content:''; width:8px; height:8px; border:2px solid currentColor; border-radius:50%; position:absolute; top:4px; right:3px; }
    .ci-tool::before { content:''; width:7px; height:7px; border:2px solid currentColor; border-radius:50%; position:absolute; top:3px; left:5px; }
    .ci-tool::after { content:''; width:2px; height:9px; background:currentColor; border-radius:0 0 1px 1px; position:absolute; bottom:2px; right:9px; transform:rotate(-35deg); }
    .ci-gear::before { content:''; width:10px; height:10px; border:2.5px solid currentColor; border-radius:50%; position:absolute; }
    .ci-gear::after { content:''; width:16px; height:16px; border-top:2px solid currentColor; border-right:2px solid currentColor; position:absolute; transform:rotate(22deg); border-radius:1px; box-shadow:-1px 1px 0 -0.5px currentColor; }
    .ci-lock::before { content:''; width:12px; height:9px; border:2px solid currentColor; border-radius:2px; position:absolute; bottom:3px; }
    .ci-lock::after { content:''; width:6px; height:6px; border:2px solid currentColor; border-radius:6px 6px 0 0; border-bottom:none; position:absolute; top:3px; }
    .ci-cloud::before { content:''; width:14px; height:8px; border:2px solid currentColor; border-radius:8px; position:absolute; bottom:4px; right:3px; }
    .ci-cloud::after { content:''; width:8px; height:8px; border:2px solid currentColor; border-radius:50%; border-bottom:none; border-right:none; position:absolute; top:4px; left:4px; }
    .ci-screen::before { content:''; width:16px; height:11px; border:2px solid currentColor; border-radius:2px; position:absolute; top:3px; }
    .ci-screen::after { content:''; width:8px; height:2px; background:currentColor; border-radius:1px; position:absolute; bottom:3px; }
    .ci-info::before { content:''; width:14px; height:14px; border:2px solid currentColor; border-radius:50%; position:absolute; }
    .ci-info::after { content:''; width:2px; height:5px; background:currentColor; border-radius:1px; position:absolute; top:10px; box-shadow:0 -5px 0 0 currentColor; }
    .ci-cam::before { content:''; width:16px; height:11px; border:2px solid currentColor; border-radius:2px; position:absolute; bottom:3px; }
    .ci-cam::after { content:''; width:6px; height:6px; border:2px solid currentColor; border-radius:50%; position:absolute; bottom:5px; }
    .ci-chat::before { content:''; width:14px; height:11px; border:2px solid currentColor; border-radius:10px 10px 10px 2px; position:absolute; top:4px; }
    .ci-chat::after { content:''; width:3px; height:3px; background:currentColor; border-radius:50%; position:absolute; top:9px; box-shadow:4px 0 0 currentColor; }
    .ci-edit::before { content:''; width:12px; height:12px; border:2px solid currentColor; border-radius:1px; position:absolute; bottom:3px; left:4px; }
    .ci-edit::after { content:''; width:2px; height:10px; background:currentColor; border-radius:1px 1px 0 0; transform:rotate(-45deg); position:absolute; top:3px; right:5px; }

    /* 个人中心设置项CSS图标适配 */
    .settings-item .icon .ci { width:16px; height:16px; }
    .classbook-icon .ci, .maker-icon .ci { color:white; width:20px; height:20px; }

    .qi { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto 8px; color:white; }
    .qi .ci { color: white; }
    .qi.r { background: linear-gradient(135deg, #FF6259, #FF3B30); }
    .qi.b { background: linear-gradient(135deg, #32ADE6, #007AFF); }
    .qi.o { background: linear-gradient(135deg, #FFD60A, #FF9500); }
    .qi.g { background: linear-gradient(135deg, #30D158, #34C759); }
    .qi.p { background: linear-gradient(135deg, #BF5AF2, #AF52DE); }
    .qi.i { background: linear-gradient(135deg, #5E5CE6, #5856D6); }

    /* ===== 加载遮罩 ===== */
    .loading-overlay { position:fixed; inset:0; background:linear-gradient(165deg, rgba(238,244,253,0.95), rgba(232,245,233,0.95), rgba(254,249,231,0.95)); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:9998; opacity:0; visibility:hidden; transition:all 0.25s; }
    .loading-overlay.active { opacity:1; visibility:visible; }
    .loading-spinner { width:36px; height:36px; border:3px solid rgba(0,0,0,0.06); border-top-color:var(--green); border-radius:50%; animation:spin 0.8s linear infinite; }
    .loading-brand { margin-top:16px; display:flex; align-items:center; gap:10px; }
    .loading-brand img { width:40px; height:40px; border-radius:10px; }
    .loading-brand span { font-size:18px; font-weight:700; color:var(--text-primary); letter-spacing:-0.3px; }
    @keyframes spin { to { transform:rotate(360deg); } }

    /* ===== 登录页 ===== */
    .login-page { position:fixed; inset:0; background:var(--bg-primary); display:flex; align-items:center; justify-content:center; z-index:9999; }
    .login-page.hidden { display:none; }
    .login-card { background:var(--bg-secondary); border-radius:20px; padding:40px 32px; text-align:center; max-width:380px; width:90%; box-shadow:var(--shadow-elevated); }
    .login-logo { width:80px; height:80px; margin:0 auto 16px; border-radius:20px; overflow:hidden; }
    .login-logo img { width:100%; height:100%; object-fit:cover; display:block; }
    .login-title { font-size:26px; font-weight:700; color:var(--text-primary); margin-bottom:4px; letter-spacing:-0.3px; }
    .login-subtitle { color:var(--text-secondary); font-size:15px; margin-bottom:28px; }
    .login-input { width:100%; padding:14px 16px; background:var(--bg-primary); border:none; border-radius:var(--radius-md); font-size:16px; font-family:inherit; color:var(--text-primary); outline:none; transition:background 0.2s, box-shadow 0.2s; }
    .login-input:focus { background:white; box-shadow:0 0 0 3px rgba(0,122,255,0.2); }
    .login-input::placeholder { color:var(--text-tertiary); }
    .login-btn { width:100%; padding:15px; background:var(--blue); color:white; border:none; border-radius:var(--radius-md); font-size:17px; font-weight:600; font-family:inherit; cursor:pointer; transition:opacity 0.2s; }
    .login-btn:active { opacity:0.8; }
    .login-btn.green { background:var(--green); }
    .login-btn:disabled { opacity:0.5; cursor:not-allowed; }
    .login-link { color:var(--blue); font-weight:500; text-decoration:none; }
    .login-error { min-height:36px; padding:6px 0; font-size:13px; color:var(--red); }

    /* ===== 隐私协议区域 ===== */
    .agreement-section { margin:12px 0 4px; text-align:left; }
    .agreement-label { display:flex; align-items:flex-start; gap:8px; cursor:pointer; font-size:12px; color:var(--text-secondary); line-height:1.5; user-select:none; }
    .agreement-label input[type="checkbox"] { width:16px; height:16px; margin-top:1px; accent-color:var(--blue); flex-shrink:0; cursor:pointer; }
    .agreement-label a { color:var(--blue); text-decoration:none; font-weight:500; }
    .agreement-label a:hover { text-decoration:underline; }

    /* ===== 隐私协议弹窗 ===== */
    .agreement-modal { position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:10000; opacity:0; visibility:hidden; transition:all 0.3s; }
    .agreement-modal.active { opacity:1; visibility:visible; }
    .agreement-modal-card { background:var(--bg-secondary); border-radius:16px; max-width:420px; width:90%; max-height:80vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-elevated); }
    .agreement-modal-header { padding:20px 20px 12px; font-size:18px; font-weight:700; border-bottom:0.5px solid var(--separator); display:flex; justify-content:space-between; align-items:center; }
    .agreement-modal-body { flex:1; overflow-y:auto; padding:16px 20px; font-size:14px; line-height:1.8; color:var(--text-primary); }
    .agreement-modal-body h4 { font-size:15px; font-weight:600; margin:12px 0 6px; }
    .agreement-modal-body p { margin-bottom:8px; color:var(--text-secondary); font-size:13px; }
    .agreement-modal-footer { padding:16px 20px; border-top:0.5px solid var(--separator); display:flex; gap:10px; }
    .agreement-modal-footer .btn { flex:1; padding:13px; border-radius:var(--radius-md); font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; border:none; text-align:center; }

    /* QR兼容 */
    .qrcode-container { background:white; padding:16px; border-radius:16px; margin-bottom:20px; display:inline-block; min-width:232px; min-height:232px; }
    .qrcode-container canvas, .qrcode-container img { display:block; margin:0 auto; }
    .qrcode-tip { font-size:14px; color:var(--text-secondary); margin-bottom:16px; }
    .qrcode-tip strong { color:var(--blue); }
    .qrcode-status { font-size:13px; color:var(--text-secondary); padding:8px 16px; background:var(--fill-quaternary); border-radius:20px; display:inline-block; }
    .qrcode-status.scanning { color:var(--orange); background:rgba(255,149,0,0.1); }
    .qrcode-status.success { color:var(--green); background:rgba(52,199,89,0.1); }
    .qrcode-status.error { color:var(--red); background:rgba(255,59,48,0.1); }
    .refresh-btn { margin-top:16px; padding:10px 24px; background:var(--fill-quaternary); border:none; border-radius:20px; font-size:14px; color:var(--text-secondary); cursor:pointer; font-family:inherit; }
    .spinner { width:36px; height:36px; border:3px solid var(--fill-tertiary); border-top-color:var(--blue); border-radius:50%; animation:spin 0.8s linear infinite; margin:20px auto; }
    .error-detail { font-size:11px; color:var(--text-tertiary); margin-top:8px; word-break:break-all; max-width:280px; }

    /* ===== 页面结构 ===== */
    .page {
      display:none; flex-direction:column; overflow:hidden;
      /* body 已有 padding-top = safe-area-inset-top，这里用 100dvh 减去它 */
      height: calc(100vh - env(safe-area-inset-top, 0px));
      height: calc(100dvh - env(safe-area-inset-top, 0px));
      padding-bottom: calc(84px + var(--safe-bottom));
    }
    .page.active { display:flex; }

    /* ===== 顶部导航栏 ===== */
    .page-header { background:var(--material-thick); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:12px 20px; border-bottom:0.5px solid var(--separator); position:sticky; top:0; z-index:50; }
    .header-top { display:flex; align-items:center; justify-content:space-between; }
    .header-left { display:flex; align-items:center; gap:12px; }
    .header-logo { width:36px; height:36px; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
    .header-logo img { width:100%; height:100%; object-fit:cover; }
    .header-text h1 { font-size:20px; font-weight:700; letter-spacing:-0.3px; color:var(--text-primary); }
    .header-text p { font-size:12px; color:var(--text-secondary); margin-top:1px; }
    .header-avatar { width:34px; height:34px; background:linear-gradient(135deg, #5AC8FA, #007AFF); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; color:white; cursor:pointer; overflow:hidden; }
    .header-avatar:active { transform:scale(0.92); }
    .header-avatar img { width:100%; height:100%; object-fit:cover; }

    /* ===== 欢迎横幅 ===== */
    .welcome-banner { margin:16px 20px 0; background:linear-gradient(135deg, #007AFF 0%, #5856D6 100%); border-radius:var(--radius-xl); padding:24px; color:white; position:relative; overflow:hidden; }
    .welcome-banner::before { content:''; position:absolute; top:-30px; right:-20px; width:120px; height:120px; background:rgba(255,255,255,0.1); border-radius:50%; }
    .welcome-banner::after { content:''; position:absolute; bottom:-40px; left:30%; width:160px; height:160px; background:rgba(255,255,255,0.06); border-radius:50%; }
    .welcome-banner h2 { font-size:22px; font-weight:700; letter-spacing:-0.3px; margin-bottom:4px; position:relative; z-index:1; }
    .welcome-banner .date-text { font-size:13px; opacity:0.85; position:relative; z-index:1; }
    .stats-row { display:flex; gap:1px; margin-top:20px; background:rgba(255,255,255,0.12); border-radius:var(--radius-md); overflow:hidden; position:relative; z-index:1; }
    .stat-item { flex:1; text-align:center; padding:14px 8px; background:rgba(255,255,255,0.08); }
    .stat-item .value { font-size:24px; font-weight:700; display:block; letter-spacing:-0.5px; }
    .stat-item .label { font-size:11px; opacity:0.8; margin-top:2px; }

    /* ===== 内容区 ===== */
    .content { flex:1; padding:16px 20px; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom: calc(120px + var(--safe-bottom, 0px)); }
    /* 我的页面底部确保退出登录按钮可见 */
    #page-me > .content { padding-bottom: calc(120px + var(--safe-bottom, 0px)); }

    /* ===== 快捷入口 ===== */
    .quick-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:20px; }
    .quick-item { background:var(--bg-secondary); border-radius:16px; padding:16px 8px 12px; text-align:center; cursor:pointer; box-shadow:var(--shadow-card); transition:transform 0.15s; }
    .quick-item:active { transform:scale(0.95); }
    .quick-item span { font-size:12px; font-weight:500; color:var(--text-primary); display:block; }

    /* ===== 卡片 ===== */
    .card { background:var(--bg-secondary); border-radius:16px; padding:0; margin-bottom:16px; box-shadow:var(--shadow-card); overflow:hidden; }
    .card-header { display:flex; justify-content:space-between; align-items:center; padding:16px 16px 12px; }
    .card-header h3 { font-size:17px; font-weight:600; display:flex; align-items:center; gap:8px; letter-spacing:-0.2px; }
    .card-header h3 .ci { color:var(--blue); }
    .card-header a { font-size:14px; color:var(--blue); text-decoration:none; font-weight:500; }
    .cards-grid { display:grid; gap:16px; }

    /* ===== 列表项 ===== */
    .list-item { display:flex; align-items:flex-start; padding:12px 16px; background:var(--bg-secondary); position:relative; transition:background 0.15s; }
    .list-item:not(:last-child)::after { content:''; position:absolute; bottom:0; right:0; left:56px; height:0.5px; background:var(--separator); }

    /* ===== 课程 ===== */
    .schedule-time { width:44px; flex-shrink:0; text-align:center; }
    .schedule-time .hour { font-size:15px; font-weight:600; color:var(--text-primary); }
    .schedule-time .period { font-size:11px; color:var(--text-secondary); margin-top:2px; }
    .schedule-line { width:3px; border-radius:2px; margin:0 12px; flex-shrink:0; min-height:40px; }
    .schedule-info { flex:1; min-width:0; }
    .schedule-info .subject { font-size:16px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .schedule-tag { font-size:11px; font-weight:500; padding:3px 8px; border-radius:4px; margin-left:8px; flex-shrink:0; align-self:center; }
    .schedule-tag.now { background:rgba(52,199,89,0.12); color:var(--green); }
    .schedule-tag.soon { background:rgba(0,122,255,0.1); color:var(--blue); }

    /* ===== 任务 ===== */
    .task-checkbox { width:22px; height:22px; border:2px solid var(--text-tertiary); border-radius:6px; flex-shrink:0; margin-right:12px; margin-top:2px; display:flex; align-items:center; justify-content:center; font-size:12px; color:white; cursor:pointer; transition:all 0.2s; }
    .task-checkbox.checked { background:var(--green); border-color:var(--green); }
    .task-content { flex:1; min-width:0; }
    .task-title { font-size:15px; font-weight:500; color:var(--text-primary); }
    .list-item.done .task-title { text-decoration:line-through; color:var(--text-tertiary); }
    .task-meta { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; font-size:12px; color:var(--text-secondary); }
    .task-tag { font-size:11px; padding:2px 6px; border-radius:3px; font-weight:500; }
    .task-tag.urgent { background:rgba(255,59,48,0.1); color:var(--red); }
    .overdue { color:var(--red)!important; }

    /* ===== 提醒 ===== */
    .reminder-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-right:12px; }
    .reminder-icon.active { background:rgba(255,149,0,0.12); color:var(--orange); }
    .reminder-icon.inactive { background:var(--fill-quaternary); color:var(--text-tertiary); }
    .reminder-content { flex:1; min-width:0; }
    .reminder-title { font-size:15px; font-weight:500; }
    .reminder-time { font-size:13px; color:var(--text-secondary); margin-top:2px; }
    .reminder-switch { width:51px; height:31px; border-radius:16px; background:var(--fill-tertiary); position:relative; cursor:pointer; flex-shrink:0; margin-left:8px; transition:background 0.25s; align-self:center; }
    .reminder-switch::after { content:''; width:27px; height:27px; border-radius:50%; background:white; box-shadow:0 1px 3px rgba(0,0,0,0.2); position:absolute; top:2px; left:2px; transition:transform 0.25s; }
    .reminder-switch.on { background:var(--green); }
    .reminder-switch.on::after { transform:translateX(20px); }

    /* ===== 考试 ===== */
    .exam-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-right:12px; background:rgba(88,86,214,0.12); color:var(--indigo); }
    .exam-content { flex:1; min-width:0; }
    .exam-title { font-size:15px; font-weight:500; color:var(--text-primary); }
    .exam-meta { font-size:13px; color:var(--text-secondary); margin-top:2px; }
    .exam-subject { font-size:12px; color:var(--indigo); font-weight:500; }
    .exam-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; margin-left:8px; }
    .countdown-badge { display:inline-flex; align-items:center; gap:3px; padding:3px 8px; border-radius:10px; font-size:11px; font-weight:600; }
    .countdown-badge.urgent { background:rgba(255,59,48,0.1); color:var(--red); }
    .countdown-badge.soon { background:rgba(255,149,0,0.1); color:var(--orange); }
    .countdown-badge.normal { background:rgba(88,86,214,0.1); color:var(--indigo); }
    .countdown-badge.passed { background:var(--fill-quaternary); color:var(--text-tertiary); }

    /* 首页倒计时卡片 */
    .countdown-section { margin-bottom:16px; }
    .countdown-card { background:var(--bg-secondary); border-radius:var(--radius-md); padding:16px; margin-bottom:10px; box-shadow:var(--shadow-card); display:flex; align-items:center; gap:14px; }
    .countdown-number { min-width:56px; text-align:center; }
    .countdown-number .num { font-size:28px; font-weight:700; letter-spacing:-1px; line-height:1; }
    .countdown-number .unit { font-size:11px; color:var(--text-secondary); margin-top:2px; }
    .countdown-number.urgent .num { color:var(--red); }
    .countdown-number.soon .num { color:var(--orange); }
    .countdown-number.normal .num { color:var(--indigo); }
    .countdown-info { flex:1; min-width:0; }
    .countdown-info .name { font-size:15px; font-weight:600; color:var(--text-primary); }
    .countdown-info .detail { font-size:12px; color:var(--text-secondary); margin-top:2px; }

    /* 考试科目自定义输入 */
    .subject-wrapper { position:relative; }
    .subject-custom-input { display:none; width:100%; padding:10px 16px; border:none; border-top:0.5px solid var(--separator); background:var(--bg-secondary); font-size:16px; font-family:inherit; color:var(--text-primary); outline:none; }
    .subject-custom-input::placeholder { color:var(--text-tertiary); }
    .subject-wrapper.show-custom .subject-custom-input { display:block; }

    /* 考试日期时间下拉 */
    .date-picker-row, .time-picker-row { display:flex; align-items:center; padding:6px 16px 12px; gap:6px; }
    .date-picker-row select, .time-picker-row select {
      flex:1; padding:10px 8px; border:1.5px solid var(--separator); border-radius:var(--radius-sm);
      background:var(--bg-secondary); font-size:16px; font-family:inherit; color:var(--text-primary);
      outline:none; appearance:none; -webkit-appearance:none; text-align:center;
      background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238e8e93' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 8px center;
      padding-right:22px; min-width:0;
    }
    .date-picker-row select:focus, .time-picker-row select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,122,255,0.12); }
    .picker-sep { font-size:15px; color:var(--text-secondary); font-weight:500; flex-shrink:0; }

    /* 考试倒计时小开关 */
    .exam-countdown-toggle { width:40px; height:24px; border-radius:12px; background:var(--fill-tertiary); position:relative; cursor:pointer; flex-shrink:0; transition:background 0.25s; }
    .exam-countdown-toggle::after { content:''; width:20px; height:20px; border-radius:50%; background:white; box-shadow:0 1px 3px rgba(0,0,0,0.2); position:absolute; top:2px; left:2px; transition:transform 0.25s; }
    .exam-countdown-toggle.on { background:var(--indigo); }
    .exam-countdown-toggle.on::after { transform:translateX(16px); }

    /* 考试页导航图标 */
    .ci-exam::before { content:''; width:14px; height:16px; border:2px solid currentColor; border-radius:2px; position:absolute; bottom:2px; }
    .ci-exam::after { content:''; width:8px; height:2px; background:currentColor; border-radius:1px; position:absolute; top:9px; box-shadow:0 3px 0 currentColor, 0 6px 0 currentColor; }
    .week-tabs { display:flex; gap:4px; margin-bottom:12px; }
    .week-tab { flex:1; text-align:center; padding:8px 4px; border-radius:var(--radius-sm); cursor:pointer; transition:all 0.2s; min-height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
    .week-tab:active { transform:scale(0.95); }
    .week-tab .day-name { font-size:13px; font-weight:500; color:var(--text-secondary); line-height:1.2; }
    .week-tab .day-date { font-size:10px; color:var(--text-tertiary); margin-top:1px; line-height:1.2; }
    .week-tab .week-dot { width:4px; height:4px; border-radius:50%; background:#FF3B30; margin-top:2px; }
    .week-tab.active { background:var(--blue); }
    .week-tab.is-today:not(.active) { background:rgba(255,149,0,0.12); border:1.5px solid rgba(255,149,0,0.3); }
    .week-tab.is-today:not(.active) .day-name { color:#FF9500; font-weight:600; }
    .week-tab.is-today:not(.active) .day-date { color:#FF9500; }
    .week-tab.is-today:not(.active) .week-dot { background:#FF9500; }
    .week-tab.is-today.active { background:linear-gradient(135deg, #FF9500, #FF6B00); }
    .week-tab.active .day-name { color:white; font-weight:600; }
    .week-tab.active .day-date { color:rgba(255,255,255,0.7); }
    .week-tab.active .week-dot { background:rgba(255,255,255,0.8); }

    /* 页面顶栏 */
    .page-top-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
    .page-top-title { font-size:20px; font-weight:700; color:var(--text-primary); margin:0; }
    .top-add-btn { width:34px; height:34px; border-radius:50%; border:none; background:var(--blue,#007AFF); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,122,255,0.25); transition:transform 0.15s; flex-shrink:0; }
    .top-add-btn:active { transform:scale(0.88); }

    /* 统一统计条 */
    .module-stats-row { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
    .module-stat-chip { display:flex; align-items:center; gap:4px; background:var(--bg-secondary,#f5f5f7); padding:6px 10px; border-radius:10px; font-size:12px; flex:1; min-width:0; }
    .module-stat-chip .module-stat-icon { font-size:12px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; }
    .module-stat-chip .module-stat-icon .ci { width:18px; height:18px; }
    .module-stat-chip .module-stat-label { color:var(--text-secondary); font-weight:500; white-space:nowrap; }
    .module-stat-chip .module-stat-value { font-weight:700; color:var(--text-primary); font-size:14px; margin-left:auto; }
    .module-stat-chip.total { background:linear-gradient(135deg,rgba(0,122,255,0.06),rgba(88,86,214,0.06)); }
    .module-stat-chip.total .module-stat-value { color:var(--blue); }
    .module-stat-chip.warn { background:rgba(255,59,48,0.05); }
    .module-stat-chip.warn .module-stat-value { color:var(--red,#FF3B30); }
    .module-stat-chip.clickable { cursor:pointer; transition:all 0.2s; }
    .module-stat-chip.clickable:hover { background:rgba(0,122,255,0.1); }
    .module-stat-chip.clickable:active { transform:scale(0.96); opacity:0.8; }

    /* ===== 双栏布局（日历左 + 内容右）===== */
    .page-split-layout { display:flex; gap:16px; align-items:flex-start; }
    .page-split-left { width:240px; flex-shrink:0; position:sticky; top:16px; }
    .page-split-right { flex:1; min-width:0; }
    @media(max-width:960px) {
      .page-split-layout { flex-direction:column; gap:10px; }
      .page-split-left { width:100%; position:static; }
      .page-split-right { width:100%; min-width:0; }
    }
    @media(max-width:767px) {
      .page-split-layout { width:100%; box-sizing:border-box; }
      .page-split-right { width:100% !important; max-width:100% !important; min-width:0; box-sizing:border-box; }
      .page-split-right > * { width:100%; box-sizing:border-box; }
      .page-split-right .card { margin-left:0; margin-right:0; border-radius:12px; width:100% !important; box-sizing:border-box; }
      .page-split-right .schedule-week-nav { padding:0; width:100%; box-sizing:border-box; }
      .page-split-right .week-tabs { margin-left:0; margin-right:0; width:100%; box-sizing:border-box; overflow-x:auto; }
      .page-split-right .filters { margin-left:0; margin-right:0; width:100%; box-sizing:border-box; }
      .content { padding:12px 14px; }
      .list-item { padding:10px 12px; flex-wrap:wrap; gap:8px; }
      .action-btn { padding:5px 10px; font-size:11px; margin-left:4px; }
      .exam-actions { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; margin-left:0; margin-top:4px; }
      .exam-actions .countdown-badge { margin-bottom:2px; }
      .exam-actions .action-btn { margin-left:0; }
      .mini-cal-day { font-size:11px; }
      .mini-calendar-wrap { padding:8px !important; }
      .module-stats-row { gap:4px; }
      .module-stat-chip { padding:5px 7px; font-size:11px; }
      .module-stat-chip .module-stat-value { font-size:12px; }
      .page-top-title { font-size:18px; }
    }

    /* ===== 迷你日历（Apple风格精致版）===== */
    .mini-calendar-wrap { padding:10px 10px 8px !important; margin-bottom:0; border-radius:14px !important; }
    .mini-cal-header { display:flex; align-items:center; gap:2px; margin-bottom:6px; }
    .mini-cal-title { font-size:13px; font-weight:600; color:var(--text-primary); flex:1; text-align:center; letter-spacing:-0.2px; }
    .mini-cal-nav { width:24px; height:24px; border:none; background:none; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-tertiary); flex-shrink:0; transition:all 0.15s; }
    .mini-cal-nav:hover { background:var(--fill-quaternary,#e8e8ed); color:var(--text-secondary); }
    .mini-cal-nav:active { transform:scale(0.85); }
    .mini-cal-today-btn { font-size:11px; font-weight:600; color:var(--blue,#007AFF); background:none; border:none; cursor:pointer; padding:3px 6px; border-radius:6px; flex-shrink:0; font-family:inherit; }
    .mini-cal-today-btn:active { background:rgba(0,122,255,0.08); }
    .mini-cal-weekdays { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; margin-bottom:2px; }
    .mini-cal-weekdays span { font-size:10px; font-weight:600; color:var(--text-tertiary,#999); padding:2px 0; }
    .mini-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
    .mini-cal-day { position:relative; width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:var(--text-primary); border-radius:50%; cursor:pointer; transition:all 0.15s; user-select:none; }
    .mini-cal-day:hover { background:rgba(0,0,0,0.04); }
    .mini-cal-day:active { transform:scale(0.88); }
    .mini-cal-day.other-month { color:var(--text-tertiary,#ccc); }
    .mini-cal-day.today { background:#FF9500; color:#fff; font-weight:700; }
    .mini-cal-day.today:hover { background:#FF9500; }
    .mini-cal-day.selected:not(.today) { background:rgba(0,122,255,0.12); color:var(--blue,#007AFF); font-weight:700; box-shadow:inset 0 0 0 1.5px rgba(0,122,255,0.3); }
    .mini-cal-day .cal-dot { position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:#FF3B30; }
    .mini-cal-day.today .cal-dot { background:rgba(255,255,255,0.8); }

    /* 周导航 */
    .schedule-week-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding:0 2px; }
    .week-nav-btn { display:flex; align-items:center; gap:4px; background:none; border:none; color:var(--blue); font-size:13px; font-weight:500; cursor:pointer; padding:6px 10px; border-radius:8px; transition:background 0.15s; font-family:inherit; }
    .week-nav-btn:active { background:rgba(0,122,255,0.08); }
    .week-nav-current { font-size:14px; font-weight:600; color:var(--text-primary); }

    /* 每周重复 */
    .switch-label { position:relative; display:inline-block; width:44px; height:26px; flex-shrink:0; }
    .switch-label input { opacity:0; width:0; height:0; }
    .switch-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#ccc; border-radius:26px; transition:0.3s; }
    .switch-slider::before { content:''; position:absolute; height:20px; width:20px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.3s; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
    .switch-label input:checked + .switch-slider { background:var(--blue,#007AFF); }
    .switch-label input:checked + .switch-slider::before { transform:translateX(18px); }

    .repeat-days-grid { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
    .repeat-day-chip { display:flex; align-items:center; justify-content:center; width:42px; height:36px; border-radius:10px; border:1.5px solid var(--separator,#e0e0e0); font-size:12px; font-weight:500; color:var(--text-secondary); cursor:pointer; transition:all 0.2s; user-select:none; }
    .repeat-day-chip input { display:none; }
    .repeat-day-chip.selected { border-color:var(--blue,#007AFF); background:rgba(0,122,255,0.08); color:var(--blue,#007AFF); font-weight:600; }

    /* 课程形式 tabs */
    .course-format-tabs { display:flex; gap:8px; }
    .course-format-tab { flex:1; padding:8px; text-align:center; border-radius:10px; border:1.5px solid var(--separator); cursor:pointer; font-size:13px; font-weight:500; transition:all 0.2s; }
    .course-format-tab.active[data-format="offline"] { border-color:#FF9500; background:rgba(255,149,0,0.08); color:#FF9500; }
    .course-format-tab.active[data-format="online"] { border-color:#5AC8FA; background:rgba(90,200,250,0.08); color:#5AC8FA; }
    .form-optional { font-size:11px; color:var(--text-tertiary); font-weight:400; }

    /* ===== 筛选 ===== */
    .filters { display:flex; gap:8px; margin-bottom:16px; overflow-x:auto; }
    .filters::-webkit-scrollbar { display:none; }
    .filter-btn { flex-shrink:0; padding:8px 16px; background:var(--bg-secondary); border-radius:20px; font-size:13px; font-weight:500; color:var(--text-secondary); cursor:pointer; border:none; font-family:inherit; box-shadow:var(--shadow-card); transition:all 0.2s; }
    .filter-btn.active { background:var(--blue); color:white; box-shadow:0 2px 8px rgba(0,122,255,0.3); }

    /* ===== 按钮 ===== */
    .add-btn { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:14px; background:var(--blue); color:white; border:none; border-radius:var(--radius-md); font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; margin-top:16px; }
    .add-btn:active { opacity:0.8; }
    .fab { position:fixed; bottom:calc(100px + var(--safe-bottom)); right:20px; width:56px; height:56px; background:var(--blue); border:none; border-radius:50%; color:white; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 16px rgba(0,122,255,0.4); z-index:50; }
    .fab:active { transform:scale(0.9); }
    .fab .ci { color:white; }
    .action-btn { padding:6px 12px; border:none; border-radius:6px; font-size:12px; font-family:inherit; cursor:pointer; margin-left:6px; font-weight:500; }
    .action-btn:active { opacity:0.6; }
    .action-btn.edit { background:rgba(0,122,255,0.1); color:var(--blue); }
    .action-btn.delete { background:rgba(255,59,48,0.1); color:var(--red); }

    /* ===== 空状态 ===== */
    .empty-state { text-align:center; padding:40px 20px; color:var(--text-secondary); }
    .empty-icon { width:64px; height:64px; margin:0 auto 14px; background:var(--fill-quaternary); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-tertiary); }
    .empty-state p { font-size:15px; font-weight:500; }
    .empty-state .sub { font-size:13px; color:var(--text-tertiary); margin-top:4px; font-weight:400; }

    /* ===== 弹窗 ===== */
    .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.35); display:flex; align-items:flex-end; justify-content:center; z-index:1000; opacity:0; visibility:hidden; transition:all 0.3s; }
    .modal-overlay.active { opacity:1; visibility:visible; }
    .modal { width:100%; max-width:500px; max-height:88vh; background:var(--bg-primary); border-radius:14px 14px 0 0; padding:0; padding-bottom:calc(20px + var(--safe-bottom)); transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.32,0.72,0,1); overflow-y:auto; }
    .modal-overlay.active .modal { transform:translateY(0); }
    .modal-handle { width:36px; height:5px; background:var(--fill-tertiary); border-radius:3px; margin:8px auto 0; }
    .modal-header { display:flex; justify-content:space-between; align-items:center; padding:12px 20px 16px; position:sticky; top:0; z-index:1; background:var(--bg-primary); }
    .modal-header h3 { font-size:18px; font-weight:600; letter-spacing:-0.2px; }
    .modal-close { width:30px; height:30px; border-radius:50%; background:var(--fill-tertiary); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-secondary); }
    .modal-close .ci { width:14px; height:14px; }
    .modal-content { padding:0 20px; }

    /* ===== 表单 ===== */
    .form-section { background:var(--bg-secondary); border-radius:var(--radius-md); overflow:hidden; margin-bottom:16px; }
    .form-label { display:block; font-size:13px; font-weight:500; color:var(--text-secondary); padding:12px 16px 6px; text-transform:uppercase; letter-spacing:0.3px; }
    .form-input, .form-select, .form-textarea { width:100%; padding:12px 16px; border:none; background:var(--bg-secondary); font-size:16px; font-family:inherit; color:var(--text-primary); outline:none; }
    .form-input::placeholder { color:var(--text-tertiary); }
    .form-textarea { min-height:80px; resize:vertical; }
    .form-select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238e8e93' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:36px; }
    .form-divider { height:0.5px; background:var(--separator); margin-left:16px; }
    .form-row { display:flex; }
    .form-row .form-group { flex:1; }
    .form-row .form-group + .form-group { border-left:0.5px solid var(--separator); }
    .form-label-inline { display:flex; align-items:center; padding:14px 16px; font-size:15px; color:var(--text-primary); cursor:pointer; }
    .form-label-inline input[type="checkbox"] { width:20px; height:20px; margin-right:10px; accent-color:var(--blue); }
    .color-options { display:flex; gap:10px; padding:12px 16px; flex-wrap:wrap; }
    .color-option { width:34px; height:34px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:all 0.2s; }
    .color-option.active { border-color:var(--text-primary); transform:scale(1.1); }
    .modal-actions { display:flex; gap:10px; padding:0 20px; margin-top:20px; }
    .btn { flex:1; padding:14px; border-radius:var(--radius-md); font-size:16px; font-weight:600; font-family:inherit; cursor:pointer; border:none; }
    .btn:active { opacity:0.8; }
    .btn-cancel { background:var(--fill-tertiary); color:var(--text-primary); }
    .btn-primary { background:var(--blue); color:white; }

    /* ===== 闹钟弹窗 ===== */
    .alarm-popup { position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:2000; opacity:0; visibility:hidden; transition:all 0.3s; }
    .alarm-popup.active { opacity:1; visibility:visible; }
    .alarm-card { background:var(--bg-secondary); border-radius:20px; padding:32px; text-align:center; max-width:300px; width:90%; box-shadow:var(--shadow-elevated); animation:alarm-pulse 1s ease-in-out infinite alternate; }
    @keyframes alarm-pulse { 0%{transform:scale(1)} 100%{transform:scale(1.02)} }
    .alarm-icon-wrap { width:72px; height:72px; background:linear-gradient(135deg, #FFD60A, #FF9500); border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; color:white; }
    .alarm-icon-wrap .ci { width:32px; height:32px; color:white; }
    .alarm-title { font-size:20px; font-weight:700; margin-bottom:6px; }
    .alarm-time { font-size:14px; color:var(--text-secondary); margin-bottom:24px; }
    .alarm-dismiss { width:100%; padding:15px; background:var(--red); color:white; border:none; border-radius:var(--radius-md); font-size:16px; font-weight:600; font-family:inherit; cursor:pointer; }

    /* ===== 我的页面 - 升级版 ===== */
    /* ===== 个人中心 磨玻璃风格 ===== */
    .me-glass {
      position: relative;
      background: #c8e0ff !important;
      padding: 0 !important;
    }
    .me-glass > *:not(.me-bg-blobs) { position: relative; z-index: 5; }
    #page-me > .content.me-glass { padding: 16px 20px 120px !important; }

    /* 光晕背景 */
    .me-bg-blobs {
      position: fixed; inset: 0;
      pointer-events: none; z-index: 0; overflow: hidden;
      will-change: transform; isolation: isolate;
    }
    .me-blob {
      position: absolute; border-radius: 50%;
      filter: blur(65px); will-change: transform;
      animation: meDrift 14s ease-in-out infinite alternate;
    }
    .me-b1 { width:420px; height:420px; background:radial-gradient(#a8d5ff,#79c0ff); top:-80px; left:-40px; opacity:.55; animation-delay:0s; }
    .me-b2 { width:340px; height:340px; background:radial-gradient(#ffd0e8,#ffadd1); top:100px; right:40px; opacity:.45; animation-delay:-4s; }
    .me-b3 { width:300px; height:300px; background:radial-gradient(#b8f5d4,#84eab5); bottom:-30px; left:30%; opacity:.42; animation-delay:-8s; }
    .me-b4 { width:240px; height:240px; background:radial-gradient(#ffe8a0,#ffd060); bottom:80px; right:-20px; opacity:.4; animation-delay:-11s; }
    @keyframes meDrift {
      0%   { transform: translate3d(0,0,0) scale(1); }
      100% { transform: translate3d(22px,14px,0) scale(1.06); }
    }

    /* 个人信息卡片 — 磨玻璃 */
    .me-glass .profile-card {
      background: rgba(255,255,255,0.55);
      border: 1.5px solid rgba(255,255,255,0.72);
      box-shadow: 0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
      border-radius: 24px;
      backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
      padding: 28px 24px;
    }

    /* 头像环 — 增加光晕 */
    .me-glass .profile-avatar {
      width: 88px; height: 88px;
      box-shadow: 0 4px 20px rgba(0,122,255,0.2), 0 0 0 3px rgba(255,255,255,0.8);
    }

    /* 姓名加粗 */
    .me-glass .profile-name {
      font-size: 22px; font-weight: 800; color: #1a2a50;
      letter-spacing: -0.3px; margin-top: 4px;
    }
    .me-glass .profile-school {
      color: #5a6a8a; font-weight: 500;
    }
    .me-glass .profile-grade {
      color: var(--blue); font-weight: 600;
      background: rgba(0,122,255,0.08);
      display: inline-block; padding: 2px 10px; border-radius: 10px;
      margin-top: 6px; font-size: 12px;
    }

    /* 设置分组卡片 — 磨玻璃 */
    .me-glass .settings-group {
      background: rgba(255,255,255,0.55);
      border: 1.5px solid rgba(255,255,255,0.72);
      box-shadow: 0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
      border-radius: 20px;
      backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
      overflow: hidden;
    }

    /* 分组标题 */
    .me-glass .settings-group-title {
      color: #5a6a8a; font-weight: 700;
      padding: 14px 18px 8px;
      font-size: 12px; letter-spacing: 0.3px;
    }

    /* 设置行 */
    .me-glass .settings-item {
      padding: 13px 18px;
      transition: background 0.15s;
    }
    .me-glass .settings-item:hover {
      background: rgba(255,255,255,0.35);
    }
    .me-glass .settings-item:active {
      background: rgba(255,255,255,0.5);
    }
    .me-glass .settings-item:not(:last-child)::after {
      background: rgba(255,255,255,0.5);
      left: 18px;
    }

    /* 设置行图标 — 更精致 */
    .me-glass .settings-item .icon {
      width: 32px; height: 32px; border-radius: 9px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    /* 设置行文字 */
    .me-glass .settings-item .label {
      font-weight: 600; color: #1a2a50; font-size: 14px;
    }
    .me-glass .settings-item .value {
      color: #8899bb; font-weight: 500;
    }

    /* 退出登录按钮 — 磨玻璃风格 */
    .me-glass .settings-item.danger {
      color: #FF3B30; font-weight: 700;
      background: rgba(255,59,48,0.04);
    }
    .me-glass .settings-item.danger:hover {
      background: rgba(255,59,48,0.08);
    }

    /* 手机端适配 */
    @media (max-width: 520px) {
      #page-me > .content.me-glass {
        padding: 12px 14px calc(90px + env(safe-area-inset-bottom, 0px)) !important;
      }
      .me-glass .profile-card { padding: 22px 18px; border-radius: 20px; }
      .me-glass .profile-avatar { width: 76px; height: 76px; }
      .me-glass .profile-name { font-size: 20px; }
      .me-glass .settings-group { border-radius: 16px; }
    }

    .profile-card { background:var(--bg-secondary); border-radius:16px; padding:24px; text-align:center; margin-bottom:16px; box-shadow:var(--shadow-card); position:relative; }
    .profile-avatar { width:80px; height:80px; margin:0 auto 12px; border-radius:50%; background:linear-gradient(135deg, #5AC8FA, #007AFF); display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:600; color:white; cursor:pointer; overflow:hidden; position:relative; transition:transform 0.15s; }
    .profile-avatar:active { transform:scale(0.95); }
    .profile-avatar img { width:100%; height:100%; object-fit:cover; }
    .profile-avatar-badge { position:absolute; bottom:0; right:0; width:24px; height:24px; background:var(--blue); border-radius:50%; border:2px solid white; display:flex; align-items:center; justify-content:center; }
    .profile-avatar-badge .ci { width:12px; height:12px; color:white; }
    .profile-name { font-size:20px; font-weight:600; letter-spacing:-0.3px; }
    .profile-school { font-size:14px; color:var(--text-secondary); margin-top:2px; }
    .profile-grade { font-size:13px; color:var(--blue); margin-top:2px; font-weight:500; }
    .profile-phone { font-size:14px; color:var(--text-secondary); margin-top:2px; }

    .settings-group { background:var(--bg-secondary); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-card); margin-bottom:16px; }
    .settings-group-title { font-size:13px; font-weight:600; color:var(--text-secondary); padding:16px 16px 8px; text-transform:uppercase; letter-spacing:0.5px; }
    .settings-item { display:flex; align-items:center; padding:14px 16px; font-size:15px; cursor:pointer; transition:background 0.15s; position:relative; }
    .settings-item:active { background:var(--fill-quaternary); }
    .settings-item:not(:last-child)::after { content:''; position:absolute; bottom:0; left:16px; right:0; height:0.5px; background:var(--separator); }
    .settings-item .icon { width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center; margin-right:12px; font-size:15px; flex-shrink:0; }
    .settings-item .label { flex:1; }
    .settings-item .value { color:var(--text-secondary); font-size:14px; margin-right:4px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .settings-item .value.green { color:var(--green); }
    .settings-item .value.blue { color:var(--blue); }
    .settings-item .value.orange { color:var(--orange); }
    .settings-item.danger { color:var(--red); justify-content:center; font-weight:500; }

    /* ===== 同学录卡片 ===== */
    .classbook-banner { background:linear-gradient(135deg, #5856D6 0%, #AF52DE 100%); border-radius:16px; padding:20px; margin-bottom:16px; color:white; display:flex; align-items:center; gap:16px; cursor:pointer; box-shadow:var(--shadow-card); transition:transform 0.15s; }
    .classbook-banner:active { transform:scale(0.98); }
    .classbook-icon { width:48px; height:48px; background:rgba(255,255,255,0.2); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
    .classbook-info h4 { font-size:16px; font-weight:600; }
    .classbook-info p { font-size:13px; opacity:0.85; margin-top:2px; }

    /* ===== 创客俱乐部卡片 ===== */
    .maker-banner { background:linear-gradient(135deg, #FF9500 0%, #FF3B30 100%); border-radius:16px; padding:20px; margin-bottom:16px; color:white; display:flex; align-items:center; gap:16px; cursor:pointer; box-shadow:var(--shadow-card); transition:transform 0.15s; }
    .maker-banner:active { transform:scale(0.98); }
    .maker-icon { width:48px; height:48px; background:rgba(255,255,255,0.2); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
    .maker-info h4 { font-size:16px; font-weight:600; }
    .maker-info p { font-size:13px; opacity:0.85; margin-top:2px; }

    /* ===== 学校认证表单 ===== */
    .school-verify-section { margin-bottom:16px; }
    .verify-status { display:flex; align-items:center; gap:8px; padding:12px 16px; border-radius:var(--radius-md); font-size:13px; font-weight:500; margin-bottom:12px; }
    .verify-status.pending { background:rgba(255,149,0,0.1); color:var(--orange); }
    .verify-status.verified { background:rgba(52,199,89,0.1); color:var(--green); }
    .verify-status.error { background:rgba(255,59,48,0.1); color:var(--red); }
    .verify-btn { width:100%; padding:13px; background:var(--indigo); color:white; border:none; border-radius:var(--radius-md); font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:opacity 0.2s; }
    .verify-btn:active { opacity:0.8; }
    .verify-btn:disabled { opacity:0.5; cursor:not-allowed; }
    .verify-btn.loading::after { content:''; width:16px; height:16px; border:2px solid rgba(255,255,255,0.3); border-top-color:white; border-radius:50%; animation:spin 0.8s linear infinite; }
    .ai-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; background:linear-gradient(135deg, #5856D6, #AF52DE); color:white; border-radius:10px; font-size:11px; font-weight:600; }
    .school-preview { background:var(--bg-secondary); border-radius:var(--radius-md); padding:16px; margin-top:12px; border:1.5px solid var(--green); }
    .school-preview h4 { font-size:15px; font-weight:600; margin-bottom:4px; }
    .school-preview p { font-size:13px; color:var(--text-secondary); }
    .school-preview .confirm-actions { display:flex; gap:10px; margin-top:12px; }
    .school-candidate { padding:14px 16px; background:var(--bg-secondary); border-radius:var(--radius-md); margin-bottom:8px; cursor:pointer; border:2px solid transparent; transition:all 0.2s; }
    .school-candidate:active { transform:scale(0.98); }
    .school-candidate.selected { border-color:var(--indigo); background:rgba(88,86,214,0.06); }
    .school-candidate .sc-name { font-size:14px; font-weight:600; color:var(--text-primary); }
    .school-candidate .sc-info { font-size:12px; color:var(--text-tertiary); margin-top:3px; }
    .school-candidate .sc-check { display:none; color:var(--indigo); font-weight:700; float:right; margin-top:-20px; }
    .school-candidate.selected .sc-check { display:block; }
    .school-input-wrap { position:relative; }
    .school-dropdown { position:absolute; left:0; right:0; top:100%; background:white; border-radius:0 0 12px 12px; box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:10; max-height:220px; overflow-y:auto; border:1px solid var(--border); border-top:none; display:none; }
    .school-dropdown.show { display:block; }
    .school-dropdown-item { padding:12px 16px; cursor:pointer; border-bottom:1px solid var(--bg-secondary); transition:background 0.15s; }
    .school-dropdown-item:last-child { border-bottom:none; }
    .school-dropdown-item:active { background:rgba(88,86,214,0.08); }
    .school-dropdown-item .sdi-name { font-size:14px; font-weight:500; color:var(--text-primary); }
    .school-dropdown-item .sdi-info { font-size:11px; color:var(--text-tertiary); margin-top:2px; }
    .school-dropdown-item .sdi-badge { display:inline-block; font-size:10px; padding:1px 6px; background:rgba(52,199,89,0.1); color:var(--green); border-radius:4px; margin-left:6px; font-weight:600; }
    .school-dropdown-loading { padding:14px 16px; text-align:center; font-size:13px; color:var(--text-tertiary); }
    .school-dropdown-hint { padding:12px 16px; font-size:12px; color:var(--text-tertiary); text-align:center; }

    /* ===== 磨玻璃子页面通用样式（课表/考试/任务/提醒） ===== */

    /* 页面背景 */
    .pg-glass {
      position: relative;
      background: #c8e0ff !important;
      overflow: hidden;
      padding: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      flex: 1 !important;
      min-height: 0 !important;
    }
    .pg-glass > *:not(.pg-bg-blobs) { position: relative; z-index: 5; }

    /* 手机端：课表/考试内容区可滚动 */
    @media (max-width: 1023px) {
      .pg-glass {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
      }
      /* 取消内部 page-split-layout 自己的滚动，让外层滚 */
      .pg-glass .page-split-layout {
        overflow-y: visible !important;
        flex: none !important;
      }
    }
    .pg-bg-blobs {
      position: absolute; inset: 0;
      pointer-events: none; z-index: 0; overflow: hidden;
      will-change: transform; isolation: isolate;
    }
    .pg-blob {
      position: absolute; border-radius: 50%;
      filter: blur(65px); will-change: transform;
      animation: pgDrift 16s ease-in-out infinite alternate;
    }
    .pg-b1 { width:420px; height:420px; background:radial-gradient(#a8d5ff,#79c0ff); top:-80px; left:-40px; opacity:.55; animation-delay:0s; }
    .pg-b2 { width:340px; height:340px; background:radial-gradient(#ffd0e8,#ffadd1); top:120px; right:40px; opacity:.45; animation-delay:-5s; }
    .pg-b3 { width:300px; height:300px; background:radial-gradient(#b8f5d4,#84eab5); bottom:-30px; left:30%; opacity:.42; animation-delay:-10s; }
    @keyframes pgDrift {
      0%   { transform: translate3d(0,0,0) scale(1); }
      100% { transform: translate3d(20px,14px,0) scale(1.06); }
    }

    /* ── 顶部导航栏 ── */
    .pg-top-bar {
      position: relative; z-index: 10;
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 24px 14px;
      background: rgba(255,255,255,0.5);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border-bottom: 1.5px solid rgba(255,255,255,0.7);
    }
    .pg-top-left {
      display: flex; align-items: center; gap: 12px;
    }
    .pg-top-icon {
      width: 42px; height: 42px; border-radius: 13px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .pg-icon-schedule { background: linear-gradient(135deg, rgba(74,144,226,0.15), rgba(88,86,214,0.15)); color: #4A90E2; }
    .pg-icon-exam { background: linear-gradient(135deg, rgba(255,107,107,0.15), rgba(255,154,60,0.15)); color: #FF6B6B; }
    .pg-top-title {
      font-size: 20px; font-weight: 800; color: #1a2a50;
      letter-spacing: -0.3px; line-height: 1.15; margin: 0;
    }
    .pg-top-date {
      font-size: 11px; font-weight: 600; color: #8899bb;
      display: block; margin-top: 1px;
    }
    .pg-add-btn {
      width: 38px; height: 38px; border-radius: 50%; border: none;
      background: linear-gradient(135deg, #007AFF, #5856D6);
      color: #fff; display: flex; align-items: center; justify-content: center;
      cursor: pointer; box-shadow: 0 4px 14px rgba(0,122,255,0.3);
      transition: transform 0.15s, box-shadow 0.15s; flex-shrink: 0;
    }
    .pg-add-btn:hover { box-shadow: 0 6px 20px rgba(0,122,255,0.4); }
    .pg-add-btn:active { transform: scale(0.88); }

    /* ── 精美CSS图标：课表日历 ── */
    .pgi { position: relative; width: 22px; height: 22px; display: inline-block; flex-shrink: 0; }
    .pgi-cal::before {
      content: ''; position: absolute;
      left: 2px; bottom: 1px; right: 2px; top: 5px;
      border: 2.5px solid currentColor; border-radius: 3px;
    }
    .pgi-cal-pins {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
    }
    .pgi-cal-pins::before, .pgi-cal-pins::after {
      content: ''; position: absolute;
      width: 2.5px; height: 6px;
      background: currentColor; border-radius: 2px; top: 1px;
    }
    .pgi-cal-pins::before { left: 6px; }
    .pgi-cal-pins::after  { right: 6px; }
    .pgi-cal-lines {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
    }
    .pgi-cal-lines::before {
      content: ''; position: absolute;
      top: 10px; left: 5px; right: 5px; height: 2px;
      background: currentColor; border-radius: 1px;
    }
    .pgi-cal-lines::after {
      content: ''; position: absolute;
      left: 6px; top: 14px; width: 3px; height: 3px;
      border-radius: 1px; background: currentColor;
      box-shadow: 5px 0 0 currentColor;
    }

    /* ── 精美CSS图标：考试试卷 ── */
    .pgi-exam::before {
      content: ''; position: absolute;
      left: 3px; top: 1px; right: 3px; bottom: 1px;
      border: 2.5px solid currentColor; border-radius: 2px;
    }
    .pgi-exam-fold {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
    }
    .pgi-exam-fold::before {
      content: ''; position: absolute;
      top: 1px; right: 3px; width: 0; height: 0;
      border-left: 5px solid currentColor;
      border-bottom: 5px solid transparent;
    }
    .pgi-exam-lines {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
    }
    .pgi-exam-lines::before {
      content: ''; position: absolute;
      left: 7px; top: 9px; width: 8px; height: 2px;
      background: currentColor; border-radius: 1px;
      box-shadow: 0 4px 0 currentColor;
    }
    .pgi-exam-lines::after {
      content: '✓'; position: absolute;
      left: 6px; top: 12px; font-size: 6px; font-weight: 900;
      color: currentColor; line-height: 1;
    }

    /* ── 左侧栏磨玻璃卡片 ── */
    .pg-sidebar-card {
      background: rgba(255,255,255,0.55);
      border: 1.5px solid rgba(255,255,255,0.72);
      box-shadow: 0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    }
    .pg-sidebar-card .mini-calendar-wrap {
      background: transparent !important;
      box-shadow: none !important;
      margin-bottom: 0;
    }

    /* ── 左侧栏统计列表 ── */
    .pg-sidebar-stats {
      background: rgba(255,255,255,0.55);
      border: 1.5px solid rgba(255,255,255,0.72);
      box-shadow: 0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
      border-radius: 16px;
      overflow: hidden;
      margin-top: 12px;
      backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    }
    .pg-stat-row {
      display: flex; align-items: center; gap: 8px;
      padding: 11px 14px;
      font-size: 13px; font-weight: 600;
      color: #1a2a50;
      position: relative;
    }
    .pg-stat-row:not(:last-child)::after {
      content: ''; position: absolute;
      bottom: 0; left: 14px; right: 14px;
      height: 0.5px; background: rgba(0,0,0,0.06);
    }
    .pg-stat-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    }
    .pg-stat-label {
      flex: 1; color: #5a6a8a; font-weight: 600; font-size: 13px;
    }
    .pg-stat-value {
      font-size: 16px; font-weight: 800; color: #1a2a50;
      min-width: 24px; text-align: right;
    }
    .pg-stat-total {
      background: linear-gradient(135deg, rgba(0,122,255,0.04), rgba(88,86,214,0.04));
    }
    .pg-stat-total .pg-stat-value { color: var(--blue); }
    .pg-stat-clickable { cursor: pointer; transition: background 0.15s; }
    .pg-stat-clickable:hover { background: rgba(0,122,255,0.05); }
    .pg-stat-clickable:active { transform: scale(0.98); }

    /* ── 右侧主内容磨玻璃卡片 ── */
    .pg-main-card {
      background: rgba(255,255,255,0.55);
      border: 1.5px solid rgba(255,255,255,0.72);
      box-shadow: 0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
      padding: 16px;
    }
    .pg-main-card .schedule-week-nav { margin-bottom: 12px; padding: 0; }
    .pg-main-card .week-tabs { margin-bottom: 12px; }
    .pg-main-card .filters { margin-bottom: 12px; }

    .pg-list-area {
      background: rgba(255,255,255,0.4);
      border: 1px solid rgba(255,255,255,0.6);
      border-radius: 14px;
      min-height: 200px;
      overflow: hidden;
    }

    /* ── 磨玻璃页面内的周导航增强 ── */
    .pg-main-card .week-nav-btn {
      color: var(--blue); font-weight: 600;
      background: rgba(0,122,255,0.06);
      border-radius: 10px; padding: 6px 12px;
    }
    .pg-main-card .week-nav-btn:hover { background: rgba(0,122,255,0.12); }
    .pg-main-card .week-nav-current {
      font-size: 15px; font-weight: 700; color: #1a2a50;
    }

    /* ── 磨玻璃页面内的筛选按钮增强 ── */
    .pg-main-card .filter-btn {
      background: rgba(255,255,255,0.6);
      border: 1.5px solid rgba(255,255,255,0.8);
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .pg-main-card .filter-btn.active {
      background: linear-gradient(135deg, #007AFF, #5856D6);
      border-color: transparent;
      color: white;
      box-shadow: 0 3px 12px rgba(0,122,255,0.3);
    }

    /* ── 磨玻璃风格 week-tab 增强 ── */
    .pg-main-card .week-tab {
      background: rgba(255,255,255,0.4);
      border: 1px solid rgba(255,255,255,0.6);
      border-radius: 12px;
    }
    .pg-main-card .week-tab:hover {
      background: rgba(255,255,255,0.65);
    }
    .pg-main-card .week-tab.active {
      background: linear-gradient(135deg, #007AFF, #5856D6);
      border-color: transparent;
      box-shadow: 0 4px 14px rgba(0,122,255,0.3);
    }
    .pg-main-card .week-tab.is-today:not(.active) {
      background: rgba(255,149,0,0.12);
      border: 1.5px solid rgba(255,149,0,0.3);
    }
    .pg-main-card .week-tab.is-today.active {
      background: linear-gradient(135deg, #FF9500, #FF6B00);
      box-shadow: 0 4px 14px rgba(255,149,0,0.3);
    }

    /* page-split z-index for glass pages */
    .pg-glass .page-split-layout {
      position: relative; z-index: 5;
      padding: 16px 20px; flex: 1; overflow-y: auto;
    }

    /* 手机端适配 */
    @media (max-width: 520px) {
      .pg-top-bar { padding: 12px 16px 10px; }
      .pg-top-title { font-size: 18px; }
      .pg-top-icon { width: 36px; height: 36px; border-radius: 10px; }
      .pg-add-btn { width: 34px; height: 34px; }
      .pg-main-card { padding: 12px; }
      .pg-glass .page-split-layout { padding: 12px 14px calc(80px + env(safe-area-inset-bottom, 0px)); }
    }

    /* ===== 弹窗/模态框 磨玻璃升级 ===== */
    .modal-overlay {
      background: rgba(0,0,0,0.25);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    }
    .modal {
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
      border: 1px solid rgba(255,255,255,0.8);
      box-shadow: 0 -4px 40px rgba(0,0,0,0.1), 0 0 0 0.5px rgba(0,0,0,0.05);
    }
    .modal-header {
      background: rgba(255,255,255,0.6);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border-bottom: 0.5px solid rgba(0,0,0,0.06);
    }
    .modal-header h3 {
      font-size: 18px; font-weight: 700; color: #1a2a50;
      letter-spacing: -0.3px;
    }
    .modal-close {
      background: rgba(118,118,128,0.08);
      border: 1px solid rgba(0,0,0,0.04);
      transition: background 0.15s;
    }
    .modal-close:hover { background: rgba(118,118,128,0.16); }

    /* 弹窗表单磨玻璃 */
    .modal .form-section {
      background: rgba(255,255,255,0.6);
      border: 1px solid rgba(255,255,255,0.8);
      border-radius: 14px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    }
    .modal .form-input,
    .modal .form-select,
    .modal .form-textarea {
      background: transparent;
    }
    .modal .form-label {
      color: #5a6a8a; font-weight: 600;
    }

    /* 弹窗按钮升级 */
    .modal-actions .btn-cancel {
      background: rgba(118,118,128,0.1);
      border: 1px solid rgba(0,0,0,0.04);
      color: #1a2a50; font-weight: 600;
    }
    .modal-actions .btn-primary {
      background: linear-gradient(135deg, #007AFF, #5856D6);
      box-shadow: 0 3px 12px rgba(0,122,255,0.25);
      font-weight: 700;
    }

    /* ===== 底部导航 ===== */
    .bottom-nav {
      position: fixed;
      bottom: 0; /* 手机端贴底 */
      left: 0; right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-top: 0.5px solid rgba(0,0,0,0.08);
      border-bottom: 0.5px solid rgba(0,0,0,0.04);
      padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
      z-index: 200;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .bottom-nav::-webkit-scrollbar { display: none; }
    @media (min-width: 1024px) {
      .bottom-nav {
        bottom: 52px; /* 桌面端在备案footer上方 */
        padding: 8px 12px;
        z-index: 202;
      }
    }
    .bottom-nav .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 6px 14px;
      cursor: pointer;
      color: #8E8E93;
      transition: all 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      min-width: 0;
      border-radius: 18px;
      background: transparent;
      flex: 0 0 auto;
    }
    .bottom-nav .nav-item:active { opacity: 0.7; transform: scale(0.95); }
    .bottom-nav .nav-item.active {
      color: var(--blue, #007AFF);
      background: rgba(0,122,255,0.08);
      box-shadow: 0 1px 4px rgba(0,122,255,0.1);
    }
    .bottom-nav .nav-icon { display: flex; align-items: center; justify-content: center; }
    .bottom-nav .nav-label { font-size: 10px; font-weight: 600; white-space: nowrap; }

    .nav-xfai:active { opacity: 0.8; transform: scale(0.96); }

    /* ===== 桌面端/iPad布局 ===== */
    @media (min-width:768px) {
      body { display:flex; flex-wrap:wrap; }
      .page { display:none; padding-bottom:0; height:auto; min-height:100%; overflow:visible; }
      .page.active { display:flex; width:100%; min-width:0; min-height:100vh; }
      .desktop-main { flex:1; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; height:100vh; width:100%; min-width:0; background: var(--bg-gradient); }
      /* AI智学：独立fixed层，完全脱离desktop-main，精确避开底部导航 */
      #page-ai-learning {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0;
        bottom: 110px;   /* bottom-nav(bottom:52px + 高58px) = 110px */
        z-index: 10;
        overflow: hidden;
        flex-direction: column;
      }
      #page-ai-learning.active {
        display: flex;
      }
      /* IoT智能家居：同AI智学，独立fixed层 */
      #page-iot {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0;
        bottom: 110px;
        z-index: 10;
        overflow: hidden;
        flex-direction: column;
      }
      #page-iot.active {
        display: flex;
      }
      /* 智造学院：同IoT，独立fixed层 */
      #page-studio {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0;
        bottom: 110px;
        z-index: 10;
        overflow: hidden;
        flex-direction: column;
      }
      #page-studio.active {
        display: flex;
      }
      .content { flex:1; overflow-y:auto; height:auto; padding-bottom: 120px; }
      .page-split-layout { align-items:flex-start; }
      .page-split-left { position:sticky; top:16px; align-self:flex-start; width:240px; flex-shrink:0; }
      .page-split-right { flex:1; min-width:0; overflow:visible; }
      /* PC端：玻璃页面(课表/考试)左侧日历与右侧面板上边界对齐 */
      .pg-glass .page-split-left { top:0; }
      /* sidebar 已移除 */
      /* bottom-nav 在桌面端也显示（用于所有子页面跳转） */
      .fab { bottom:120px; right:24px; }
      .cards-grid { grid-template-columns:1fr 1fr; }
      .modal { border-radius:14px; max-width:440px; margin:auto; }
    }

    /* ===== 小飞AI ===== */
    .xf-fab { position:fixed; bottom:120px; right:24px; background:linear-gradient(135deg,#4F8EF7 0%,#7B68EE 100%); color:white; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:205; box-shadow:0 4px 20px rgba(79,142,247,0.35),0 0 0 0 rgba(79,142,247,0.3); transition:transform 0.2s,box-shadow 0.2s; border:none; -webkit-tap-highlight-color:transparent; border-radius:22px; padding:10px 16px 10px 12px; gap:6px; font-family:inherit; animation:xfPulse 3s ease-in-out infinite; }
    @keyframes xfPulse { 0%,100%{box-shadow:0 4px 20px rgba(79,142,247,0.35),0 0 0 0 rgba(79,142,247,0.2);} 50%{box-shadow:0 4px 20px rgba(79,142,247,0.35),0 0 0 6px rgba(79,142,247,0);} }
    .xf-fab:active { transform:scale(0.92); animation:none; }
    .xf-fab.has-panel { background:linear-gradient(135deg,#6B7280,#9CA3AF); box-shadow:0 2px 8px rgba(0,0,0,0.2); animation:none; }
    .xf-fab-icon { width:26px; height:26px; position:relative; display:inline-flex; align-items:center; justify-content:center; }
    .xf-fab-icon::before { content:''; width:18px; height:14px; border:2.5px solid white; border-radius:12px 12px 2px 12px; position:absolute; }
    .xf-fab-icon::after { content:''; width:3px; height:3px; background:white; border-radius:50%; position:absolute; box-shadow:6px 0 0 white, -6px 0 0 white; }
    @media(min-width:768px){ .xf-fab { bottom:120px; right:24px; } }
    @media(max-width:767px){ .xf-fab { bottom:calc(74px + env(safe-area-inset-bottom, 0px)); right:16px; } }

    .xf-panel { position:fixed; top:0; right:-420px; width:400px; max-width:100vw; height:100%; background:var(--bg-primary); z-index:300; display:flex; flex-direction:column; transition:right 0.3s cubic-bezier(.4,0,.2,1); box-shadow:-4px 0 24px rgba(0,0,0,0.15); }
    .xf-panel.open { right:0; }
    @media(max-width:767px){ .xf-panel { width:100vw; right:-100vw; } }
    .xf-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:299; opacity:0; pointer-events:none; transition:opacity 0.3s; }
    .xf-overlay.show { opacity:1; pointer-events:auto; }

    .xf-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; padding-top:calc(14px + var(--safe-top)); border-bottom:0.5px solid var(--separator); background:var(--material-thick); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); flex-shrink:0; }
    .xf-header-left { display:flex; align-items:center; gap:10px; }
    .xf-header-avatar { width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg, #007AFF, #5856D6); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .xf-header-avatar .ci { color:white; width:18px; height:18px; }
    .xf-header-info {}
    .xf-header-title { font-size:17px; font-weight:600; color:var(--text-primary); letter-spacing:-0.2px; }
    .xf-header-sub { font-size:11px; color:var(--text-secondary); margin-top:1px; }
    .xf-header-actions { display:flex; align-items:center; gap:8px; }
    .xf-header .xf-close { width:30px; height:30px; border-radius:50%; background:var(--fill-tertiary); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--text-secondary); }
    .xf-header .xf-back-btn { width:30px; height:30px; border-radius:50%; background:var(--fill-tertiary); border:none; cursor:pointer; display:none; align-items:center; justify-content:center; color:var(--text-secondary); transition:all 0.2s; }
    .xf-header .xf-back-btn:active { transform:scale(0.9); background:var(--fill-quaternary); }

    /* 邀请AI按钮 */
    .xf-header .xf-invite-ai-btn { 
      width:30px; 
      height:30px; 
      border-radius:50%; 
      background:linear-gradient(135deg, rgba(0,122,255,0.12), rgba(88,86,214,0.12)); 
      border:none; 
      cursor:pointer; 
      display:none; 
      align-items:center; 
      justify-content:center; 
      color:var(--blue); 
      transition:all 0.2s; 
      position:relative;
    }
    .xf-header .xf-invite-ai-btn:hover { 
      background:linear-gradient(135deg, rgba(0,122,255,0.2), rgba(88,86,214,0.2)); 
    }
    .xf-header .xf-invite-ai-btn:active { 
      transform:scale(0.9); 
    }
    .xf-header .xf-invite-ai-btn::after {
      content: '';
      position: absolute;
      top: -2px;
      right: -2px;
      width: 8px;
      height: 8px;
      background: linear-gradient(135deg, #007AFF, #5856D6);
      border-radius: 50%;
      border: 2px solid var(--bg-primary);
      animation: invitePulse 2s infinite;
    }
    @keyframes invitePulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(1.1); }
    }

    .xf-messages { flex:1; overflow-y:auto; padding:16px; -webkit-overflow-scrolling:touch; }
    .xf-msg { display:flex; margin-bottom:14px; gap:8px; animation:xfFadeIn 0.3s; }
    @keyframes xfFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
    .xf-msg.user { flex-direction:row-reverse; }
    .xf-msg-avatar { width:32px; height:32px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; }
    .xf-msg.ai .xf-msg-avatar { background:linear-gradient(135deg, #007AFF, #5856D6); color:white; overflow:hidden; }
    .xf-msg.ai .xf-msg-avatar .ci { color:white; width:16px; height:16px; }
    .xf-msg.ai .xf-msg-avatar img { width:100%; height:100%; object-fit:cover; }
    .xf-msg.user .xf-msg-avatar { background:linear-gradient(135deg, #5AC8FA, #007AFF); color:white; font-size:13px; font-weight:600; }
    .xf-msg-bubble { max-width:75%; padding:10px 14px; border-radius:var(--radius-lg); font-size:14px; line-height:1.6; word-break:break-word; box-shadow:var(--shadow-card); }
    .xf-msg.ai .xf-msg-bubble { background:var(--bg-secondary); color:var(--text-primary); border-bottom-left-radius:4px; }
    .xf-msg.user .xf-msg-bubble { background:linear-gradient(135deg, #007AFF, #5856D6); color:white; border-bottom-right-radius:4px; box-shadow:0 2px 8px rgba(0,122,255,0.3); }
    .xf-msg-bubble .xf-action-tag { display:inline-block; font-size:11px; padding:2px 8px; background:rgba(52,199,89,0.15); color:var(--green); border-radius:8px; margin-top:6px; font-weight:500; }
    .xf-typing { display:flex; gap:4px; padding:4px 0; }
    .xf-typing span { width:6px; height:6px; background:var(--blue); border-radius:50%; animation:xfBounce 1.2s infinite; opacity:0.6; }
    .xf-typing span:nth-child(2) { animation-delay:0.15s; }
    .xf-typing span:nth-child(3) { animation-delay:0.3s; }
    @keyframes xfBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }

    .xf-input-area { flex-shrink:0; padding:12px 16px; padding-bottom:calc(12px + var(--safe-bottom)); border-top:0.5px solid var(--separator); background:var(--material-thick); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
    .xf-voice-row { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:10px; }
    .xf-mic-btn { width:64px; height:64px; border-radius:50%; border:none; background:linear-gradient(135deg, #007AFF, #5856D6); color:white; font-size:26px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; position:relative; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; box-shadow:0 4px 16px rgba(0,122,255,0.3); }
    .xf-mic-btn:active { transform:scale(0.92); }
    .xf-mic-btn.recording { background:linear-gradient(135deg,#EF4444,#F87171); animation:xfPulse 1.5s infinite; box-shadow:0 4px 16px rgba(239,68,68,0.4); }
    .xf-mic-btn.recording::after { content:''; position:absolute; inset:-6px; border-radius:50%; border:3px solid rgba(239,68,68,0.3); animation:xfRipple 1.5s infinite; }
    @keyframes xfPulse { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.4)} 50%{box-shadow:0 0 0 12px rgba(239,68,68,0)} }
    @keyframes xfRipple { 0%{transform:scale(1);opacity:1} 100%{transform:scale(1.4);opacity:0} }
    .xf-mic-hint { font-size:12px; color:var(--text-tertiary); text-align:center; }
    .xf-mic-btn.speaking { background:linear-gradient(135deg,#34C759,#30D158); box-shadow:0 4px 16px rgba(52,199,89,0.3); }
    .xf-text-row { display:flex; gap:8px; }
    .xf-text-input { flex:1; height:38px; border-radius:19px; border:1px solid var(--separator); background:var(--bg-secondary); padding:0 16px; font-size:14px; font-family:inherit; color:var(--text-primary); outline:none; box-shadow:var(--shadow-card); }
    .xf-text-input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,122,255,0.15); }
    .xf-send-btn { width:38px; height:38px; border-radius:50%; border:none; background:linear-gradient(135deg, #007AFF, #5856D6); color:white; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 2px 8px rgba(0,122,255,0.3); }
    .xf-send-btn:disabled { opacity:0.4; }
    .xf-tool-btn { width:42px; height:42px; border-radius:12px; border:none; background:var(--bg-secondary); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform 0.15s; -webkit-tap-highlight-color:transparent; box-shadow:var(--shadow-card); color:var(--text-secondary); }
    .xf-tool-btn:active { transform:scale(0.9); }
    .xf-tool-btn .ci { color:var(--blue); }
    /* ── TTS 语音开关 ── */
    /* ══ TTS 语音开关（完全重写）══ */
    .xf-tts-toggle {
      position: relative;
      cursor: pointer;
      display: inline-block;
      -webkit-tap-highlight-color: transparent;
    }

    /* 隐藏 checkbox，但保留可点击性 */
    .xf-tts-toggle input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      pointer-events: none;
    }

    /* ===== TTS toggle: 纯 CSS 图标（无 SVG / 无图标字体）===== */
    .xf-tts-slider {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      transition: background 0.2s, box-shadow 0.2s;
      overflow: visible;
      position: relative;
    }

    /* 禁用旧 ::before SVG 方案 */
    .xf-tts-slider::before { display: none !important; }

    /* --- 喇叭主体（梯形，clip-path 绘制）--- */
    .tts-speaker {
      display: block !important;
      visibility: visible !important;
      position: absolute !important;
      width: 10px;
      height: 10px;
      top: 50%;
      left: 5px;
      transform: translateY(-50%);
      background: currentColor;
      clip-path: polygon(0% 22%, 44% 22%, 100% 0%, 100% 100%, 44% 78%, 0% 78%);
      pointer-events: none;
    }

    /* --- 音波容器 --- */
    .tts-waves {
      position: absolute !important;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      width: 10px;
      height: 12px;
      pointer-events: none;
    }

    /* --- 弧形音波（border-radius 半圆弧）--- */
    .tts-wave {
      display: block !important;
      visibility: visible !important;
      position: absolute !important;
      border: 1.5px solid currentColor;
      border-radius: 50%;
      border-left-color: transparent;
      border-bottom-color: transparent;
      transform: rotate(45deg);
    }
    .tts-wave-1 {
      width: 4px;
      height: 4px;
      right: 4px;
      top: 50%;
      margin-top: -2px;
    }
    .tts-wave-2 {
      width: 8px;
      height: 8px;
      right: 1px;
      top: 50%;
      margin-top: -4px;
    }

    /* --- 静音 × 标（两条对角线）--- */
    .tts-slash {
      display: block !important;
      visibility: visible !important;
      position: absolute !important;
      width: 1.5px;
      height: 11px;
      background: currentColor;
      border-radius: 1px;
      right: 8px;
      top: 9px;
      transform: rotate(45deg);
      transform-origin: center;
      pointer-events: none;
    }
    .tts-slash::before {
      content: '';
      position: absolute;
      width: 1.5px;
      height: 11px;
      background: currentColor;
      border-radius: 1px;
      top: 0;
      left: 0;
      transform: rotate(90deg);
    }

    /* ══ 开启状态：蓝色喇叭 + 音波 ══ */
    .xf-tts-toggle input:checked + .xf-tts-slider {
      background: rgba(0, 122, 255, 0.12);
      box-shadow: 0 2px 8px rgba(0, 122, 255, 0.15);
      color: #007AFF;
    }
    .xf-tts-toggle input:checked + .xf-tts-slider .tts-waves { display: block !important; }
    .xf-tts-toggle input:checked + .xf-tts-slider .tts-slash  { display: none !important; }

    /* ══ 关闭状态：灰色喇叭 + × 标 ══ */
    .xf-tts-toggle input:not(:checked) + .xf-tts-slider {
      background: rgba(120, 120, 128, 0.1);
      box-shadow: none;
      color: #8E8E93;
    }
    .xf-tts-toggle input:not(:checked) + .xf-tts-slider .tts-waves { display: none !important; }
    .xf-tts-toggle input:not(:checked) + .xf-tts-slider .tts-slash  { display: block !important; }

    /* CSS 纯绘制关闭 × 按钮 */
    .xf-close-icon { position:relative; display:inline-block; width:12px; height:12px; }
    .xf-close-icon::before, .xf-close-icon::after {
      content:'';
      position:absolute;
      left:50%; top:50%;
      width:12px; height:2px;
      background:var(--text-secondary);
      border-radius:1px;
      transform-origin:center;
    }
    .xf-close-icon::before { transform:translate(-50%,-50%) rotate(45deg); }
    .xf-close-icon::after  { transform:translate(-50%,-50%) rotate(-45deg); }
    .xf-header .xf-close:active .xf-close-icon::before,
    .xf-header .xf-close:active .xf-close-icon::after { background:var(--red); }
    .xf-img-preview { position:relative; margin:8px 0; padding:8px; background:var(--bg-secondary); border-radius:var(--radius-md); display:flex; align-items:center; gap:8px; box-shadow:var(--shadow-card); }
    .xf-img-preview img { width:60px; height:60px; object-fit:cover; border-radius:8px; }
    .xf-img-remove { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; border:none; background:rgba(0,0,0,0.5); color:white; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .xf-img-type { flex:1; height:32px; border-radius:8px; border:1px solid var(--separator); background:var(--bg-primary); font-size:12px; padding:0 8px; color:var(--text-primary); font-family:inherit; }
    .xf-msg-bubble img.xf-chat-img { max-width:100%; border-radius:8px; margin-top:6px; }

    /* 清空聊天记录按钮 */
    .xf-header .xf-clear-btn { width:30px; height:30px; border-radius:50%; background:var(--fill-tertiary); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:all 0.2s; }
    .xf-header .xf-clear-btn .ci { width:18px; height:18px; }
    .xf-header .xf-clear-btn:active { transform:scale(0.9); background:rgba(255,59,48,0.15); color:var(--red); }

    /* 自定义确认弹窗 */
    .xf-confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:9999; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all 0.25s; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
    .xf-confirm-overlay.active { opacity:1; visibility:visible; }
    .xf-confirm-dialog { width:300px; max-width:85vw; background:var(--bg-secondary); border-radius:var(--radius-lg); box-shadow:0 8px 40px rgba(0,0,0,0.2); overflow:hidden; transform:scale(0.9); transition:transform 0.25s cubic-bezier(.4,0,.2,1); }
    .xf-confirm-overlay.active .xf-confirm-dialog { transform:scale(1); }
    .xf-confirm-body { padding:24px 20px 16px; text-align:center; }
    .xf-confirm-icon { width:48px; height:48px; border-radius:50%; background:rgba(255,59,48,0.12); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:24px; }
    .xf-confirm-title { font-size:17px; font-weight:600; color:var(--text-primary); margin-bottom:8px; }
    .xf-confirm-desc { font-size:13px; color:var(--text-secondary); line-height:1.6; }
    .xf-confirm-warn { display:inline-flex; align-items:center; gap:4px; margin-top:10px; padding:6px 12px; background:rgba(255,149,0,0.1); border-radius:8px; font-size:12px; color:#FF9500; font-weight:500; }
    .xf-confirm-actions { display:flex; border-top:0.5px solid var(--separator); }
    .xf-confirm-actions button { flex:1; padding:14px; border:none; background:none; font-size:16px; font-family:inherit; cursor:pointer; transition:background 0.15s; }
    .xf-confirm-actions button:active { background:var(--fill-quaternary); }
    .xf-confirm-actions .xf-confirm-cancel { color:var(--blue); font-weight:400; border-right:0.5px solid var(--separator); }
    .xf-confirm-actions .xf-confirm-ok { color:var(--red); font-weight:600; }

    /* ===== 课程类型标签 ===== */
    .course-type-tabs { display:flex; gap:8px; }
    .course-type-tab { flex:1; padding:10px; text-align:center; border-radius:10px; border:2px solid var(--separator); cursor:pointer; font-size:14px; font-weight:500; transition:all 0.2s; }
    .course-type-tab.active[data-type="in"] { border-color:#007AFF; background:rgba(0,122,255,0.08); color:#007AFF; }
    .course-type-tab.active[data-type="out"] { border-color:#AF52DE; background:rgba(175,82,222,0.08); color:#AF52DE; }
    .course-card.extra { border-left:3px dashed !important; opacity:0.92; }
    .course-card.extra::after { content:'课外'; position:absolute; top:4px; right:6px; font-size:9px; background:rgba(175,82,222,0.15); color:#AF52DE; padding:1px 5px; border-radius:4px; font-weight:600; }
    .xf-welcome { text-align:center; padding:40px 20px; }
    .xf-welcome-icon { width:64px; height:64px; margin:0 auto 14px; background:linear-gradient(135deg, #007AFF, #5856D6); border-radius:18px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,122,255,0.3); overflow:hidden; }
    .xf-welcome-icon .ci { color:white; width:28px; height:28px; }
    .xf-welcome-icon img { width:100%; height:100%; object-fit:cover; }
    .xf-welcome h4 { font-size:17px; font-weight:600; margin-bottom:6px; color:var(--text-primary); }
    .xf-welcome p { font-size:13px; color:var(--text-secondary); line-height:1.6; }
    .xf-welcome-tips { display:flex; flex-direction:column; gap:8px; margin-top:16px; text-align:left; }
    .xf-welcome-tip { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg-secondary); border-radius:var(--radius-md); box-shadow:var(--shadow-card); }
    .xf-welcome-tip-icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
    .xf-welcome-tip-icon.blue { background:rgba(0,122,255,0.1); color:var(--blue); }
    .xf-welcome-tip-icon.green { background:rgba(52,199,89,0.1); color:var(--green); }
    .xf-welcome-tip-icon.orange { background:rgba(255,149,0,0.1); color:var(--orange); }
    .xf-welcome-tip-text { font-size:13px; color:var(--text-primary); font-weight:500; }

/* ===== Landing 着陆页（浅色 iPhone 风格）===== */
.landing-page {
  position:fixed; inset:0; z-index:10000;
  background: linear-gradient(165deg, #e8f0fe 0%, #d4f4e2 25%, #fef3d0 50%, #f0e4f7 75%, #dbeafe 100%);
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.landing-page.hidden { display:none; }
html[data-autologin] .landing-page { display:none; }
.landing-page::before {
  content:''; position:fixed; width:500px; height:500px; top:-100px; right:-120px;
  background:radial-gradient(circle, rgba(52,199,89,0.18) 0%, rgba(0,122,255,0.08) 50%, transparent 70%);
  border-radius:50%; filter:blur(80px); animation:landOrb1 14s ease-in-out infinite; pointer-events:none;
}
.landing-page::after {
  content:''; position:fixed; width:450px; height:450px; bottom:-80px; left:-100px;
  background:radial-gradient(circle, rgba(175,82,222,0.15) 0%, rgba(255,149,0,0.08) 50%, transparent 70%);
  border-radius:50%; filter:blur(80px); animation:landOrb2 18s ease-in-out infinite; pointer-events:none;
}
@keyframes landOrb1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-40px,30px) scale(1.08)} }
@keyframes landOrb2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-20px) scale(1.1)} }

.landing-inner { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; padding:0 24px; max-width:480px; margin:0 auto; }

.landing-hero { text-align:center; padding-top:max(56px, calc(8vh + 16px)); animation:landFadeUp 0.8s ease-out both; }
.landing-logo {
  width:96px; height:96px; border-radius:26px; margin:0 auto 20px; overflow:hidden;
  box-shadow:0 6px 28px rgba(0,122,255,0.18), 0 0 0 1px rgba(0,0,0,0.04);
  animation:landLogoPulse 5s ease-in-out infinite;
}
.landing-logo img { width:100%; height:100%; object-fit:cover; display:block; }
@keyframes landLogoPulse { 0%,100%{box-shadow:0 6px 28px rgba(0,122,255,0.18),0 0 0 1px rgba(0,0,0,0.04)} 50%{box-shadow:0 8px 36px rgba(52,199,89,0.22),0 0 0 1px rgba(0,0,0,0.04)} }
.landing-hero h1 {
  font-size:36px; font-weight:800; letter-spacing:-1px; margin-bottom:6px;
  background:linear-gradient(135deg, #1c1c1e 0%, #3a3a3c 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.landing-hero .landing-tagline { font-size:16px; color:rgba(0,0,0,0.4); font-weight:400; letter-spacing:0.3px; }

.landing-cta { display:flex; gap:12px; margin-top:32px; animation:landFadeUp 0.8s 0.12s ease-out both; }
.landing-cta-btn {
  flex:1; padding:15px 0; border:none; border-radius:14px; font-size:16px; font-weight:600; font-family:inherit;
  cursor:pointer; transition:transform 0.2s, box-shadow 0.2s; text-align:center;
}
.landing-cta-btn:active { transform:scale(0.97); }
.landing-cta-btn.primary {
  background:linear-gradient(135deg, #34C759, #30B350); color:#fff;
  box-shadow:0 4px 18px rgba(52,199,89,0.35);
}
.landing-cta-btn.secondary {
  background:rgba(255,255,255,0.65); color:#1c1c1e;
  border:1px solid rgba(0,0,0,0.06); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}

/* 玻璃卡片（浅色版）*/
.glass-card {
  background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.7);
  border-radius:20px; padding:24px; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:0 2px 16px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.5);
}

.landing-section { margin-top:36px; }
.landing-section-title {
  font-size:12px; font-weight:700; color:rgba(0,0,0,0.3); text-transform:uppercase; letter-spacing:1.8px;
  margin-bottom:14px; padding-left:4px;
}

.landing-features { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.landing-feat {
  background:rgba(255,255,255,0.5); border:1px solid rgba(255,255,255,0.6);
  border-radius:16px; padding:20px 14px; text-align:center;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 1px 8px rgba(0,0,0,0.03); transition:transform 0.25s;
}
.landing-feat:active { transform:scale(0.97); }
.landing-feat-icon {
  width:44px; height:44px; border-radius:12px; margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
}
.landing-feat-icon.blue { background:rgba(0,122,255,0.12); color:#007AFF; }
.landing-feat-icon.green { background:rgba(52,199,89,0.12); color:#34C759; }
.landing-feat-icon.orange { background:rgba(255,149,0,0.12); color:#FF9500; }
.landing-feat-icon.purple { background:rgba(175,82,222,0.12); color:#AF52DE; }
.landing-feat-icon.teal { background:rgba(90,200,250,0.12); color:#5AC8FA; }
.landing-feat-icon.red { background:rgba(255,59,48,0.12); color:#FF3B30; }
.landing-feat-name { font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:3px; }
.landing-feat-desc { font-size:11px; color:var(--text-secondary); line-height:1.4; }

.landing-detail-row { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid rgba(0,0,0,0.04); align-items:flex-start; }
.landing-detail-row:last-child { border-bottom:none; padding-bottom:0; }
.landing-detail-row:first-child { padding-top:0; }
.landing-detail-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.landing-detail-text h4 { font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:3px; }
.landing-detail-text p { font-size:12px; color:var(--text-secondary); line-height:1.5; }

.landing-footer {
  margin-top:40px; padding:24px 0 max(24px, calc(env(safe-area-inset-bottom) + 12px));
  text-align:center; border-top:1px solid rgba(0,0,0,0.05);
}
.landing-footer p { font-size:11px; color:rgba(0,0,0,0.25); line-height:1.8; }
.landing-footer a { color:rgba(0,0,0,0.35); text-decoration:none; }

@keyframes landFadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.land-delay-1 { animation:landFadeUp 0.7s 0.08s ease-out both; }
.land-delay-2 { animation:landFadeUp 0.7s 0.16s ease-out both; }
.land-delay-3 { animation:landFadeUp 0.7s 0.24s ease-out both; }
.land-delay-4 { animation:landFadeUp 0.7s 0.32s ease-out both; }
.land-delay-5 { animation:landFadeUp 0.7s 0.40s ease-out both; }
.landing-page.fade-out { animation:landingFadeOut 0.4s ease-in forwards; }
@keyframes landingFadeOut { to{opacity:0; transform:scale(0.98); visibility:hidden;} }

/* ===== 侧边栏用户区域 ===== */
.sidebar-user {
  display:flex; align-items:center; gap:10px; padding:12px; margin-top:auto;
  border-top:0.5px solid var(--separator); cursor:pointer; border-radius:var(--radius-sm); transition:background 0.15s;
}
.sidebar-user:hover { background:var(--fill-quaternary); }
.sidebar-user-avatar {
  width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, #5AC8FA, #007AFF);
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; color:white;
  overflow:hidden; flex-shrink:0;
}
.sidebar-user-avatar img { width:100%; height:100%; object-fit:cover; }
.sidebar-user-name { font-size:14px; font-weight:500; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== 同学录 Tab 切换 ===== */
.cb-tabs { display:flex; gap:0; padding:0 16px; border-bottom:0.5px solid var(--separator); }
.cb-tab { flex:1; padding:10px 0; background:none; border:none; border-bottom:2.5px solid transparent; font-size:14px; font-weight:500; color:var(--text-secondary); font-family:inherit; cursor:pointer; transition:all 0.2s; }
.cb-tab.active { color:var(--blue); border-bottom-color:var(--blue); font-weight:600; }
.cb-loading { display:flex; justify-content:center; padding:40px 0; }

/* 同学卡片 */
.cb-student { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:0.5px solid var(--separator); cursor:pointer; transition:background 0.15s; }
.cb-student:active { background:var(--fill-quaternary); }
.cb-student:last-child { border-bottom:none; }
.cb-student-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg, #5AC8FA, #007AFF); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; color:white; flex-shrink:0; overflow:hidden; }
.cb-student-avatar img { width:100%; height:100%; object-fit:cover; }
.cb-student-info { flex:1; min-width:0; }
.cb-student-name { font-size:15px; font-weight:600; color:var(--text-primary); }
.cb-student-meta { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.cb-student-chat-btn { width:32px; height:32px; border-radius:50%; background:rgba(0,122,255,0.1); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; color:var(--blue); }
.cb-student-chat-btn:active { background:rgba(0,122,255,0.2); }

/* 聊天室 */
.cb-back-btn { background:none; border:none; cursor:pointer; color:var(--blue); display:flex; align-items:center; padding:4px; }
.cb-chat-peer-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, #5AC8FA, #007AFF); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12px; color:white; overflow:hidden; flex-shrink:0; }
.cb-chat-peer-avatar img { width:100%; height:100%; object-fit:cover; }
.cb-chat-messages { flex:1; overflow-y:auto; padding:12px 16px; min-height:320px; max-height:calc(92vh - 140px); -webkit-overflow-scrolling:touch; }
.cb-msg { display:flex; margin-bottom:12px; gap:8px; animation:xfFadeIn 0.3s; }
.cb-msg.self { flex-direction:row-reverse; }
.cb-msg-avatar { width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:white; overflow:hidden; }
.cb-msg.peer .cb-msg-avatar { background:linear-gradient(135deg, #5AC8FA, #007AFF); }
.cb-msg.self .cb-msg-avatar { background:linear-gradient(135deg, #34C759, #30D158); }
.cb-msg-avatar img { width:100%; height:100%; object-fit:cover; }
.cb-msg-bubble { max-width:72%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.5; word-break:break-word; box-shadow:var(--shadow-card); }
.cb-msg.peer .cb-msg-bubble { background:var(--bg-secondary); color:var(--text-primary); border-bottom-left-radius:4px; }
.cb-msg.self .cb-msg-bubble { background:linear-gradient(135deg, #007AFF, #5856D6); color:white; border-bottom-right-radius:4px; box-shadow:0 2px 8px rgba(0,122,255,0.25); }
.cb-msg-time { font-size:10px; color:var(--text-tertiary); text-align:center; margin:8px 0; }
.cb-msg-voice { display:flex; align-items:center; gap:6px; cursor:pointer; min-width:80px; }
.cb-msg-voice svg { flex-shrink:0; }
.cb-msg-voice-dur { font-size:12px; opacity:0.8; }
.cb-msg-voice.playing svg { animation:voiceWave 1s infinite; }
@keyframes voiceWave { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* 聊天输入区 */
.cb-chat-input-area { padding:8px 12px; padding-bottom:calc(8px + var(--safe-bottom)); border-top:0.5px solid var(--separator); background:var(--material-thick); }
.cb-chat-input-row { display:flex; align-items:center; gap:8px; }
.cb-chat-voice-btn { width:36px; height:36px; border-radius:50%; background:rgba(0,122,255,0.1); border:none; display:flex; align-items:center; justify-content:center; color:var(--blue); cursor:pointer; flex-shrink:0; transition:all 0.2s; -webkit-tap-highlight-color:transparent; }
.cb-chat-voice-btn:active, .cb-chat-voice-btn.recording { background:linear-gradient(135deg,#EF4444,#F87171); color:white; }
.cb-chat-input { flex:1; height:36px; border-radius:18px; border:1px solid var(--separator); background:var(--bg-secondary); padding:0 14px; font-size:14px; font-family:inherit; color:var(--text-primary); outline:none; }
.cb-chat-input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,122,255,0.12); }
.cb-chat-send-btn { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, #007AFF, #5856D6); border:none; display:flex; align-items:center; justify-content:center; color:white; cursor:pointer; flex-shrink:0; }
.cb-chat-send-btn:active { opacity:0.8; }
.cb-voice-hint { font-size:12px; color:var(--red); text-align:center; padding:4px 0; font-weight:500; }

/* 实名认证拦截弹窗 */
.cb-verify-prompt { text-align:center; padding:40px 20px; }
.cb-verify-prompt .cb-verify-icon { width:64px; height:64px; border-radius:50%; background:rgba(255,149,0,0.12); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.cb-verify-prompt h4 { font-size:17px; font-weight:600; color:var(--text-primary); margin-bottom:8px; }
.cb-verify-prompt p { font-size:13px; color:var(--text-secondary); line-height:1.6; margin-bottom:20px; }

/* ✅ 聊天联系人列表（在小飞AI面板中显示） */
.xf-contacts-list { 
  border-bottom:0.5px solid var(--separator); 
  background:var(--bg-secondary); 
  max-height:240px; 
  display:flex; 
  flex-direction:column; 
}
.xf-contacts-header { 
  padding:10px 16px; 
  font-size:12px; 
  font-weight:600; 
  color:var(--text-secondary); 
  text-transform:uppercase; 
  letter-spacing:0.8px; 
  background:var(--bg-tertiary); 
  border-bottom:0.5px solid var(--separator); 
}
.xf-contacts-scroll { 
  overflow-y:auto; 
  flex:1; 
  -webkit-overflow-scrolling:touch; 
}
.xf-contact-item { 
  display:flex; 
  align-items:center; 
  gap:10px; 
  padding:10px 16px; 
  cursor:pointer; 
  transition:background 0.15s; 
  border-bottom:0.5px solid var(--separator); 
}
.xf-contact-item:active { 
  background:var(--fill-tertiary); 
}
.xf-contact-item.active { 
  background:rgba(0,122,255,0.08); 
}
.xf-contact-avatar { 
  width:40px; 
  height:40px; 
  position:relative; 
  flex-shrink:0; 
}
.xf-contact-online-dot { 
  position:absolute; 
  bottom:0; 
  right:0; 
  width:12px; 
  height:12px; 
  background:#34C759; 
  border:2px solid var(--bg-secondary); 
  border-radius:50%; 
}
.xf-contact-info { 
  flex:1; 
  min-width:0; 
}
.xf-contact-name { 
  font-size:15px; 
  font-weight:500; 
  color:var(--text-primary); 
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis; 
}
.xf-contact-meta { 
  font-size:12px; 
  color:var(--text-tertiary); 
  margin-top:2px; 
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis; 
}

/* ✅ 聊天消息样式（使用小飞AI面板） */
.chat-messages-container { 
  display:flex; 
  flex-direction:column; 
  gap:12px; 
}
.cb-msg-time { 
  text-align:center; 
  font-size:11px; 
  color:var(--text-tertiary); 
  padding:8px 0; 
}
.cb-msg { 
  display:flex; 
  gap:8px; 
  align-items:flex-end; 
}
.cb-msg.self { 
  flex-direction:row-reverse; 
}
.cb-msg-avatar { 
  width:32px; 
  height:32px; 
  border-radius:50%; 
  background:var(--fill-tertiary); 
  flex-shrink:0; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  font-size:14px; 
  font-weight:600; 
  color:var(--text-secondary); 
  overflow:hidden; 
}
.cb-msg.self .cb-msg-avatar { 
  background:linear-gradient(135deg, #007AFF, #5856D6); 
  color:white; 
}
.cb-msg.peer .cb-msg-avatar { 
  background:var(--fill-quaternary); 
}
.cb-msg-bubble { 
  max-width:70%; 
  padding:10px 14px; 
  border-radius:18px; 
  font-size:14px; 
  line-height:1.5; 
  word-break:break-word; 
}
.cb-msg.self .cb-msg-bubble { 
  background:linear-gradient(135deg, #007AFF, #5856D6); 
  color:white; 
  border-bottom-right-radius:4px; 
  box-shadow:0 2px 8px rgba(0,122,255,0.25); 
}
.cb-msg.peer .cb-msg-bubble { 
  background:var(--bg-secondary); 
  color:var(--text-primary); 
  border-bottom-left-radius:4px; 
  box-shadow:var(--shadow-card); 
}
.cb-msg-voice { 
  display:flex; 
  align-items:center; 
  gap:6px; 
  cursor:pointer; 
  padding:4px 8px; 
  border-radius:12px; 
  transition:opacity 0.2s; 
}
.cb-msg-voice:active { 
  opacity:0.7; 
}
.cb-msg-voice svg { 
  flex-shrink:0; 
}
.cb-msg.self .cb-msg-voice { 
  color:white; 
}
.cb-msg.peer .cb-msg-voice { 
  color:var(--blue); 
}
.cb-msg-voice-dur { 
  font-size:12px; 
  font-weight:500; 
}

/* ✅ 聊天模式下调整小飞AI面板 */
.xf-panel[data-mode="chat"] .xf-messages { 
  padding:12px 16px; 
}
.xf-panel[data-mode="chat"] .xf-welcome { 
  display:none; 
}

/* ===== ★★★ 同学聊天页面（微信/QQ风格）★★★ ===== */
/* ===== 同学聊聊页面 — 嵌入式布局 ===== */

/* 页面容器 */
.cb-content {
  position: relative;
  background: #c8e0ff !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#page-classbook { overflow: hidden !important; }
#page-classbook.active { display: flex !important; flex-direction: column !important; }
.cb-content > *:not(.pg-bg-blobs) { position: relative; z-index: 5; }

/* 顶栏Banner */
.cb-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1.5px solid rgba(255,255,255,0.7);
  flex-shrink: 0;
}
.cb-banner-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cb-school-icon {
  width: 36px; height: 36px; border-radius: 11px;
  background: rgba(88,86,214,0.12); color: #5856D6;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cb-banner-info { min-width: 0; }
.cb-school-name { font-size: 15px; font-weight: 800; color: #1a2a50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.cb-school-meta { display: flex; gap: 4px; margin-top: 2px; }
.cb-school-meta .ph-meta-tag {
  font-size: 10px; font-weight: 600; padding: 1px 8px; border-radius: 10px;
  background: rgba(255,255,255,0.6); color: #6688aa;
}
.cb-banner-stats {
  display: flex; align-items: center; gap: 0;
  flex: 1; justify-content: center;
  background: rgba(255,255,255,0.5); border-radius: 14px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.7);
}
.cb-bstat { text-align: center; padding: 2px 10px; }
.cb-bstat-num { display: block; font-size: 18px; font-weight: 800; color: #1a2a50; line-height: 1.2; }
.cb-bstat-label { font-size: 10px; color: #8899bb; font-weight: 600; }
.cb-bstat-sep { width: 1px; height: 24px; background: rgba(0,0,0,0.06); flex-shrink: 0; }
.cb-online-num { color: #34C759 !important; }
.cb-req-num { color: #FF3B30 !important; }
.cb-invite-btn {
  background: linear-gradient(135deg,#2ECC71,#1ABC9C) !important;
  box-shadow: 0 3px 12px rgba(46,204,113,0.3) !important;
}

/* 聊天分栏包裹 */
.cb-chat-wrap {
  flex: 1; display: flex; min-height: 0;
  margin: 12px 16px;
  gap: 12px;
}

/* 左侧联系人面板 — 磨玻璃 */
.cb-chat-wrap .peer-chat-sidebar {
  width: 280px; height: auto;
  background: rgba(255,255,255,0.55);
  border: 1.5px solid rgba(255,255,255,0.72);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden;
}
.cb-sidebar-top {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px 10px; border-bottom: 0.5px solid rgba(255,255,255,0.5);
}
.cb-search-box {
  flex: 1; display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.6); border-radius: 10px; padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.8);
}
.cb-search-box input {
  border: none; background: transparent; outline: none;
  font-size: 13px; color: var(--text-primary); width: 100%; min-width: 0;
}
.cb-search-box button {
  border: none; background: transparent; padding: 0; cursor: pointer; opacity: 0.45;
  align-items: center; line-height: 1;
}
.cb-view-toggle {
  width: 34px; height: 34px; border-radius: 10px; border: none;
  background: rgba(255,255,255,0.6); color: #6688aa; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.8);
}
.cb-view-toggle:hover { background: rgba(255,255,255,0.85); }
.cb-view-toggle:active { transform: scale(0.9); }

.cb-chat-wrap .peer-chat-contacts-list {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cb-chat-wrap .peer-chat-contacts-list::-webkit-scrollbar { display: none; }

.cb-sidebar-footer {
  padding: 8px 12px; font-size: 10px; color: #aab; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  border-top: 0.5px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.3);
}

/* 右侧聊天区域 — 磨玻璃 */
.cb-chat-wrap .peer-chat-main {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,0.55);
  border: 1.5px solid rgba(255,255,255,0.72);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; flex-direction: column; overflow: hidden;
}
.cb-chat-wrap .peer-chat-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #aab;
}
.cb-chat-wrap .peer-chat-empty-icon { color: #ccd; margin-bottom: 12px; }
.cb-chat-wrap .peer-chat-empty p { font-size: 14px; font-weight: 500; }

.cb-chat-wrap .peer-chat-container { height: 100%; }
.cb-chat-wrap .peer-chat-header {
  background: rgba(255,255,255,0.6);
  border-bottom: 0.5px solid rgba(255,255,255,0.5);
}
.cb-chat-wrap .peer-chat-messages {
  background: rgba(248,250,255,0.4);
}

/* ===== 联系人列表项 — 磨玻璃内 ===== */
.cb-chat-wrap .peer-contact-item {
  border-bottom-color: rgba(255,255,255,0.5);
  transition: background 0.15s;
}
.cb-chat-wrap .peer-contact-item:hover { background: rgba(255,255,255,0.4); }
.cb-chat-wrap .peer-contact-item.active { background: rgba(0,122,255,0.1); }

/* ===== 网格视图 ===== */
.peer-contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  padding: 10px;
}
.peer-grid-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px; border-radius: 14px; cursor: pointer;
  transition: all 0.15s; text-align: center;
}
.peer-grid-item:hover { background: rgba(255,255,255,0.4); }
.peer-grid-item:active { transform: scale(0.93); }
.peer-grid-item.active { background: rgba(0,122,255,0.1); }
.peer-grid-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #5AC8FA, #007AFF);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600; color: white;
  margin-bottom: 4px; position: relative; overflow: hidden;
  flex-shrink: 0;
}
.peer-grid-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.peer-grid-avatar.online {
  box-shadow: 0 0 0 2.5px rgba(255,255,255,0.8), 0 0 0 4.5px #34C759;
}
.peer-grid-avatar.offline img { filter: grayscale(100%); opacity: 0.55; }
.peer-grid-avatar.offline span { opacity: 0.5; }
.peer-grid-name {
  font-size: 11px; font-weight: 500; color: #1a2a50;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.peer-grid-badge {
  font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 6px;
  margin-top: 2px; white-space: nowrap;
}
.peer-grid-badge.friend { background: rgba(0,122,255,0.1); color: #007AFF; }
.peer-grid-badge.pending { background: rgba(255,149,0,0.1); color: #FF9500; }
.peer-grid-section-label {
  grid-column: 1 / -1;
  font-size: 11px; font-weight: 700; color: #8899bb;
  letter-spacing: 0.5px; padding: 6px 4px 2px;
}

/* ===== 移动端适配 ===== */
@media (max-width: 767px) {
  /* ★ 同学页：缩减底部留白，紧贴导航栏 */
  #page-classbook {
    padding-bottom: calc(62px + var(--safe-bottom));
  }
  .cb-banner { flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
  .cb-school-name { max-width: 140px; font-size: 14px; }
  .cb-banner-stats { order: 3; width: 100%; justify-content: space-around; }
  .cb-bstat-num { font-size: 16px; }
  .cb-chat-wrap {
    flex-direction: column; margin: 8px 10px 4px; gap: 0;
    position: relative; flex: 1;
    border-radius: 16px;
    overflow: hidden;
  }
  .cb-chat-wrap .peer-chat-sidebar {
    width: 100%; border-radius: 0;
    position: absolute; inset: 0; z-index: 2;
    transition: transform 0.25s ease;
  }
  .cb-chat-wrap.chat-active .peer-chat-sidebar { transform: translateX(-100%); }
  .cb-chat-wrap .peer-chat-main {
    position: absolute; inset: 0; z-index: 1;
    border-radius: 0;
  }
  /* ★ 联系人列表：内部滚动，不带动外层 */
  .cb-chat-wrap .peer-chat-contacts-list {
    overscroll-behavior: contain;
  }
  /* ★ 聊天消息：内部滚动，不带动外层 */
  .cb-chat-wrap .peer-chat-messages {
    overscroll-behavior: contain;
  }
  /* ★ 聊天容器flex链：确保min-height:0让overflow生效 */
  .cb-chat-wrap .peer-chat-container {
    min-height: 0;
  }
  .cb-chat-wrap .peer-chat-back-mobile { display: flex; }
  .cb-chat-wrap .peer-chat-header { padding-top: 8px; }
  .cb-chat-wrap .peer-chat-input-area { padding-bottom: 8px; }
}

.peer-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 0.5px solid var(--separator);
}

.peer-contact-item:hover {
  background: var(--fill-quaternary);
}

.peer-contact-item.active {
  background: rgba(0,122,255,0.08);
}

.peer-contact-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #5AC8FA, #007AFF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}

.peer-contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.peer-contact-avatar.online::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #34C759;
  border: 2px solid var(--bg-secondary);
  border-radius: 50%;
}

.peer-contact-info {
  flex: 1;
  min-width: 0;
}

.peer-contact-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.peer-contact-meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

.peer-contact-meta .online-badge {
  color: #34C759;
  font-weight: 500;
}

/* 右侧聊天区域 */
.peer-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary);
}

/* 空状态 */
.peer-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}

.peer-chat-empty-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  color: var(--text-quaternary);
}

.peer-chat-empty p {
  font-size: 14px;
  margin: 0;
}

/* 聊天容器 */
.peer-chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.peer-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  padding-top: calc(14px + var(--safe-top));
  border-bottom: 0.5px solid var(--separator);
  background: var(--material-thick);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0;
}

.peer-chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.peer-chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #5AC8FA, #007AFF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.peer-chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.peer-chat-avatar.online::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: #34C759;
  border: 2px solid var(--bg-primary);
  border-radius: 50%;
}

.peer-chat-info {
  flex: 1;
  min-width: 0;
}

.peer-chat-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.peer-chat-status {
  font-size: 12px;
  color: var(--text-tertiary);
}

.peer-chat-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 邀请AI按钮 */
.peer-chat-ai-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0,122,255,0.1), rgba(88,86,214,0.1));
  border: 1.5px solid rgba(0,122,255,0.25);
  cursor: pointer;
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
}

.peer-chat-ai-btn:hover {
  background: linear-gradient(135deg, rgba(0,122,255,0.15), rgba(88,86,214,0.15));
  border-color: rgba(0,122,255,0.35);
  transform: translateY(-1px);
}

.peer-chat-ai-btn:active {
  transform: translateY(0);
}

.peer-chat-ai-btn.active {
  background: linear-gradient(135deg, #007AFF, #5856D6);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(0,122,255,0.3);
}

.peer-chat-ai-btn.active::after {
  content: '✓';
  margin-left: 2px;
}

/* 消息区域 */
.peer-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-primary);
}

.peer-msg {
  display: flex;
  margin-bottom: 16px;
  animation: fadeInUp 0.3s;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.peer-msg.self {
  flex-direction: row-reverse;
}

.peer-msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #5AC8FA, #007AFF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: white;
  overflow: hidden;
}

.peer-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.peer-msg-avatar.ai {
  background: linear-gradient(135deg, #007AFF, #5856D6);
}

.peer-msg-content {
  display: flex;
  flex-direction: column;
  max-width: 65%;
  margin: 0 10px;
}

.peer-msg.self .peer-msg-content {
  align-items: flex-end;
}

.peer-msg-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}

.peer-msg.self .peer-msg-bubble {
  background: linear-gradient(135deg, #007AFF, #5856D6);
  color: white;
  border-bottom-right-radius: 4px;
}

.peer-msg.peer .peer-msg-bubble {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-card);
}

.peer-msg.ai .peer-msg-bubble {
  background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(88,86,214,0.08));
  border: 1px solid rgba(0,122,255,0.15);
  border-bottom-left-radius: 4px;
}

.peer-msg-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(0,122,255,0.15), rgba(88,86,214,0.15));
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
}

.peer-msg-ai-badge svg {
  width: 12px;
  height: 12px;
}

/* AI TTS 播放按钮 */
.peer-msg-ai-tts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(88,86,214,0.1);
  color: #5856D6;
  font-size: 12px;
  transition: all 0.2s;
}
.peer-msg-ai-tts:hover { background: rgba(88,86,214,0.2); }
.peer-msg-ai-tts:active { transform: scale(0.95); }
.peer-msg-ai-tts .tts-icon-loading,
.peer-msg-ai-tts .tts-icon-stop { display: none; }
.peer-msg-ai-tts .tts-icon-play { display: inline; }
.peer-msg-ai-tts.tts-loading .tts-icon-play { display: none; }
.peer-msg-ai-tts.tts-loading .tts-icon-loading { display: inline; animation: ttsSpin 1s linear infinite; }
.peer-msg-ai-tts.tts-playing .tts-icon-play { display: none; }
.peer-msg-ai-tts.tts-playing .tts-icon-stop { display: inline; }
.peer-msg-ai-tts.tts-playing { background: rgba(88,86,214,0.2); }
@keyframes ttsSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.peer-msg-time {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.peer-msg-bubble img {
  max-width: 220px;
  max-height: 220px;
  border-radius: 10px;
  display: block;
  cursor: pointer;
}

/* 输入区域 */
.peer-chat-input-area {
  flex-shrink: 0;
  padding: 12px 20px;
  padding-bottom: calc(12px + var(--safe-bottom));
  border-top: 0.5px solid var(--separator);
  background: var(--material-thick);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.peer-chat-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
}

.peer-chat-mic-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #007AFF, #5856D6);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0,122,255,0.3);
}

.peer-chat-mic-btn:active {
  transform: scale(0.92);
}

.peer-chat-mic-btn.recording {
  background: linear-gradient(135deg, #EF4444, #F87171);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
}

.peer-chat-tool-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  box-shadow: var(--shadow-card);
}

.peer-chat-tool-btn:active {
  transform: scale(0.9);
}

.peer-chat-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* @小飞 模式切换按钮 */
.peer-chat-at-ai-btn {
  flex-shrink: 0;
  height: 32px;
  padding: 0 10px;
  border-radius: 16px;
  border: 1.5px solid rgba(88,86,214,0.3);
  background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(88,86,214,0.08));
  color: #5856D6;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  font-family: inherit;
}
.peer-chat-at-ai-btn:active {
  transform: scale(0.92);
}
/* AI模式激活状态 —— 按钮变"返回聊天" */
.peer-chat-at-ai-btn.ai-mode-active {
  background: linear-gradient(135deg, #007AFF, #5856D6);
  color: white;
  border-color: transparent;
}

/* ★ AI模式：输入区整体变色 */
.peer-chat-input-area.ai-mode {
  background: linear-gradient(135deg, rgba(0,122,255,0.06), rgba(88,86,214,0.06));
  border-top-color: rgba(88,86,214,0.2);
}
.peer-chat-input-area.ai-mode .peer-chat-input {
  border-color: rgba(88,86,214,0.3);
  background: rgba(255,255,255,0.9);
}
.peer-chat-input-area.ai-mode .peer-chat-input:focus {
  border-color: #5856D6;
  box-shadow: 0 0 0 3px rgba(88,86,214,0.15);
}
.peer-chat-input-area.ai-mode .peer-chat-send-btn {
  background: linear-gradient(135deg, #5856D6, #7B61FF);
}
/* 麦克风AI模式样式 */
.peer-chat-mic-btn.ai-mode {
  background: linear-gradient(135deg, #5856D6, #7B61FF);
  box-shadow: 0 4px 12px rgba(88,86,214,0.3);
}

.peer-chat-input {
  flex: 1;
  height: 40px;
  border-radius: 20px;
  border: 1px solid var(--separator);
  background: var(--bg-secondary);
  padding: 0 18px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
  box-shadow: var(--shadow-card);
}

.peer-chat-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.15);
}

.peer-chat-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #007AFF, #5856D6);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,122,255,0.3);
  transition: transform 0.2s;
}

.peer-chat-send-btn:active {
  transform: scale(0.9);
}

.peer-chat-send-btn:disabled {
  opacity: 0.4;
}

/* 返回按钮 - 桌面端隐藏 */
.peer-chat-back-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--blue);
  cursor: pointer;
  padding: 4px;
  margin-right: 4px;
  -webkit-tap-highlight-color: transparent;
}

/* 移动端适配 - 同学聊天（已移至 cb-chat-wrap 移动端规则） */
@media (max-width: 767px) {
  .peer-chat-back-mobile {
    display: flex;
  }
}

/* 兼容你下面用到的变量（如果你项目里没定义的话） */
:root{
  --accent: var(--blue);
  --text: var(--text-primary);
}
/* 卡包卡片 */
.card-item {
  flex-shrink: 0;
  width: 140px;
  background: linear-gradient(135deg, var(--accent) 0%, #5B4DB7 100%);
  border-radius: 12px;
  padding: 14px;
  color: white;
  position: relative;
  box-shadow: 0 4px 12px rgba(108,92,231,0.25);
}

.card-item.tts {
  background: linear-gradient(135deg, #FF9F43 0%, #FF6B6B 100%);
  box-shadow: 0 4px 12px rgba(255,159,67,0.25);
}

.card-item.expired {
  background: linear-gradient(135deg, #666 0%, #444 100%);
  opacity: 0.5;
  box-shadow: none;
}

.card-badge {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  opacity: 0.95;
}

.card-days {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  opacity: 0.9;
}

.card-expire {
  font-size: 10px;
  opacity: 0.7;
}

/* 使用情况 */
.usage-item {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 12px;
  position: relative;
}

.usage-label {
  font-size: 12px;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 8px;
}

.usage-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  position: absolute;
  right: 12px;
  top: 12px;
}

.usage-bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.usage-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.usage-fill.warning {
  background: var(--orange);
}

.usage-fill.danger {
  background: var(--red);
}

/* 消费记录 */
.credit-log-item {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--separator);
}

.credit-log-item:last-child {
  border-bottom: none;
}

.credit-log-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-right: 12px;
  flex-shrink: 0;
}

.credit-log-icon.earn {
  background: rgba(0, 214, 143, 0.15);
}

.credit-log-icon.spend {
  background: rgba(255, 107, 107, 0.12);
}

.credit-log-info {
  flex: 1;
  min-width: 0;
}

.credit-log-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.credit-log-source {
  font-size: 10px;
  color: var(--text-tertiary);
  background: rgba(255,255,255,0.05);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-left: 6px;
}

.credit-log-time {
  font-size: 11px;
  color: var(--text-secondary);
}

.credit-log-amount {
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
}

.credit-log-amount.earn {
  color: var(--green);
}

.credit-log-amount.spend {
  color: var(--text-secondary);
}

/* ==================================================
   积分中心 v4 — 重构样式
   ================================================== */

/* ---- 顶部导航栏 ---- */
.cp-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  background:var(--material-thick);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:0.5px solid var(--separator);
  position:sticky; top:0; z-index:50;
}
.cp-back-btn {
  display:flex; align-items:center; gap:3px;
  border:none; background:none; color:var(--blue);
  font-size:15px; font-weight:500;
  padding:6px 10px 6px 6px; border-radius:20px;
  cursor:pointer; transition:background .15s; flex-shrink:0;
}
.cp-back-btn:active { background:var(--fill-quaternary); }
.cp-header-title { font-size:17px; font-weight:600; color:var(--text-primary); }
.cp-header-right { width:60px; }

/* ---- Hero 余额卡 ---- */
.cp-hero {
  position:relative;
  background:linear-gradient(145deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);
  padding:28px 24px 24px;
  overflow:hidden;
  margin-bottom:4px;
}
/* 装饰光晕 */
.cp-hero::before {
  content:''; position:absolute;
  top:-60px; right:-60px;
  width:200px; height:200px;
  background:radial-gradient(circle,rgba(255,149,0,.35) 0%,transparent 70%);
  border-radius:50%;
}
.cp-hero::after {
  content:''; position:absolute;
  bottom:-40px; left:-30px;
  width:150px; height:150px;
  background:radial-gradient(circle,rgba(88,86,214,.3) 0%,transparent 70%);
  border-radius:50%;
}
.cp-hero-bg-deco { display:none; }
.cp-hero-content { position:relative; z-index:1; text-align:center; }
.cp-hero-coin { font-size:32px; margin-bottom:6px; line-height:1; }
.cp-hero-label {
  font-size:12px; color:rgba(255,255,255,.55);
  font-weight:500; letter-spacing:0.5px; margin-bottom:8px;
  text-transform:uppercase;
}
.cp-hero-num {
  font-size:54px; font-weight:800;
  color:#FFD700;
  line-height:1; letter-spacing:-2px;
  margin-bottom:20px;
  text-shadow:0 2px 20px rgba(255,215,0,.3);
}
.cp-hero-unit {
  font-size:20px; font-weight:600;
  color:rgba(255,215,0,.7);
  margin-left:2px; vertical-align:baseline; letter-spacing:0;
}

/* 统计行（深色卡内） */
.cp-hero-sub-row {
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08);
  border:0.5px solid rgba(255,255,255,.12);
  border-radius:14px; padding:14px 8px;
  margin-bottom:16px;
}
.cp-hero-sub-item { flex:1; text-align:center; display:flex; flex-direction:column; gap:3px; }
.cp-hero-sub-divider { width:0.5px; height:28px; background:rgba(255,255,255,.15); flex-shrink:0; }
.cp-hs-val { font-size:18px; font-weight:700; color:#fff; line-height:1.2; }
.cp-hs-lbl { font-size:11px; color:rgba(255,255,255,.45); }

/* 每日签到按钮 */
.cp-sign-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px 20px;
  background:linear-gradient(135deg,#FF9500,#FF6B00);
  color:#fff; border:none; border-radius:14px;
  font-size:14px; font-weight:600;
  cursor:pointer; transition:opacity .15s, transform .15s;
  box-shadow:0 4px 16px rgba(255,149,0,.35);
}
.cp-sign-btn:active { opacity:.85; transform:scale(.98); }
.cp-sign-reward {
  background:rgba(255,255,255,.25);
  padding:2px 8px; border-radius:8px;
  font-size:12px; font-weight:700;
}

/* ---- 快捷操作双卡 ---- */
.cp-quick-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; margin:12px 16px 0;
}
.cp-quick-card {
  display:flex; align-items:center; gap:12px;
  background:var(--bg-secondary);
  border-radius:16px; padding:14px;
  box-shadow:var(--shadow-card);
  cursor:pointer; transition:transform .15s;
}
.cp-quick-card:active { transform:scale(.97); }
.cp-quick-icon {
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.cp-quick-icon.redeem { background:rgba(88,86,214,.1); }
.cp-quick-icon.recharge { background:rgba(255,149,0,.1); }
.cp-quick-title { font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:2px; }
.cp-quick-desc { font-size:11px; color:var(--text-tertiary); }

/* ---- 底部安全区 ---- */
.cp-bottom-pad { height:calc(20px + var(--safe-bottom)); }
/* (已迁移至 v4 重构区) */

/* ---- 通用 Section ---- */
.cp-section { background:var(--bg-secondary); border-radius:16px; margin:12px 16px; padding:16px; box-shadow:var(--shadow-card); }
.cp-sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cp-sec-title { font-size:15px; font-weight:700; color:var(--text-primary); }
.cp-sec-sub { font-size:12px; font-weight:500; color:var(--text-tertiary); }
.cp-badge { font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; background:rgba(52,199,89,.12); color:var(--green); }
.cp-tip { background:var(--bg-primary); border-radius:10px; padding:10px 14px; margin-top:14px; font-size:12px; color:var(--text-secondary); line-height:1.5; }

/* ---- 卡包卡片 ---- */
.cp-cards-row { display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px; }
.cp-cards-row::-webkit-scrollbar { display:none; }
.cp-card { flex-shrink:0; min-width:150px; border-radius:14px; padding:16px; color:#fff; position:relative; overflow:hidden; }
.cp-card::after { content:''; position:absolute; top:-20px; right:-20px; width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,.1); }
.cp-card.main { background:linear-gradient(135deg,#6C5CE7,#4834D4); box-shadow:0 4px 16px rgba(108,92,231,.3); }
.cp-card.tts  { background:linear-gradient(135deg,#FF9F43,#EE5A24); box-shadow:0 4px 16px rgba(255,159,67,.3); }
.cp-card.expired { background:linear-gradient(135deg,#636e72,#2d3436); opacity:.6; box-shadow:none; }
.cp-card-name { font-size:15px; font-weight:700; margin-bottom:10px; }
.cp-card-days { font-size:22px; font-weight:800; line-height:1; margin-bottom:2px; }
.cp-card-days span { font-size:12px; font-weight:500; opacity:.8; }
.cp-card-expire { font-size:11px; opacity:.65; margin-top:6px; }

/* ---- 今日用量 ---- */
.cp-usage-head { font-size:13px; font-weight:600; color:var(--text-secondary); margin:14px 0 10px; }
.cp-usage-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cp-ucard { background:var(--bg-primary); border-radius:12px; padding:12px; display:flex; align-items:center; gap:10px; }
.cp-uring { position:relative; width:42px; height:42px; flex-shrink:0; }
.cp-uring svg { transform:rotate(-90deg); }
.cp-uring-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--text-primary); }
.cp-uinfo { flex:1; min-width:0; }
.cp-ulabel { font-size:12px; color:var(--text-secondary); margin-bottom:2px; display:flex; align-items:center; gap:4px; }
.cp-unums { font-size:14px; font-weight:700; color:var(--text-primary); }
.cp-unums span { font-weight:400; color:var(--text-tertiary); font-size:12px; }

/* ---- 消费分类概览 ---- */
.cp-cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cp-cat-item { background:var(--bg-primary); border-radius:12px; padding:14px 10px; text-align:center; }
.cp-cat-icon { font-size:22px; margin-bottom:6px; }
.cp-cat-name { font-size:11px; color:var(--text-secondary); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-cat-amount { font-size:16px; font-weight:700; }
.cp-cat-count { font-size:10px; color:var(--text-tertiary); margin-top:2px; }

/* ---- 兑换码 ---- */
.cp-redeem-row { display:flex; gap:10px; }
.cp-redeem-input { flex:1; height:42px; padding:0 14px; background:var(--bg-primary); border:1.5px solid var(--separator); border-radius:12px; font-size:15px; font-weight:600; letter-spacing:1px; color:var(--text-primary); outline:none; transition:border-color .2s; text-transform:uppercase; font-family:'SF Mono',Menlo,Consolas,monospace; }
.cp-redeem-input:focus { border-color:var(--blue); }
.cp-redeem-input::placeholder { font-family:-apple-system,'PingFang SC',sans-serif; font-weight:400; letter-spacing:0; text-transform:none; color:var(--text-tertiary); }
.cp-redeem-btn { height:42px; padding:0 20px; background:var(--blue); color:#fff; border:none; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer; flex-shrink:0; transition:opacity .15s; }
.cp-redeem-btn:active { opacity:.7; }

/* ---- 充值套餐 ---- */
.cp-pkg-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cp-pkg-card { position:relative; text-align:center; padding:18px 10px 14px; background:var(--bg-primary); border:1.5px solid var(--separator); border-radius:14px; cursor:pointer; transition:transform .15s,border-color .2s; }
.cp-pkg-card:active { transform:scale(.97); border-color:var(--orange); }
.cp-pkg-tag { position:absolute; top:-1px; right:12px; background:var(--red); color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:0 0 8px 8px; }
.cp-pkg-credits { font-size:28px; font-weight:800; color:var(--text-primary); line-height:1.1; }
.cp-pkg-label { font-size:11px; color:var(--text-secondary); margin:2px 0 6px; }
.cp-pkg-price { font-size:18px; font-weight:700; color:var(--orange); }
.cp-pkg-name { font-size:11px; color:var(--text-secondary); margin-top:2px; }

/* ---- Tab 筛选 ---- */
.cp-tabs { display:flex; gap:4px; background:var(--bg-primary); border-radius:8px; padding:2px; }
.cp-tab { font-size:12px; font-weight:500; color:var(--text-secondary); padding:4px 12px; border-radius:6px; cursor:pointer; transition:all .2s; }
.cp-tab.active { background:var(--bg-secondary); color:var(--text-primary); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.06); }

/* ---- 按日期分组明细 ---- */
.cp-date-group { margin-bottom:4px; }
.cp-date-head { display:flex; align-items:center; justify-content:space-between; padding:10px 0 6px; }
.cp-date-lbl { font-size:13px; font-weight:600; color:var(--text-secondary); }
.cp-date-sum { font-size:12px; }
.cp-log { display:flex; align-items:center; padding:10px 0; border-bottom:.5px solid var(--separator); }
.cp-date-group:last-child .cp-log:last-child { border-bottom:none; }
.cp-log-ico { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; margin-right:10px; flex-shrink:0; }
.cp-log-ico.earn { background:rgba(52,199,89,.1); }
.cp-log-ico.spend { background:rgba(255,59,48,.08); }
.cp-log-body { flex:1; min-width:0; }
.cp-log-reason { font-size:14px; font-weight:500; color:var(--text-primary); margin-bottom:1px; }
.cp-log-time { font-size:11px; color:var(--text-tertiary); }
.cp-log-amt { font-size:16px; font-weight:700; flex-shrink:0; margin-left:8px; }
.cp-log-amt.earn { color:var(--green); }
.cp-log-amt.spend { color:var(--red); }
.cp-empty { text-align:center; padding:32px 16px; color:var(--text-tertiary); font-size:13px; line-height:2; }





/* ==================== 好友系统样式 ==================== */

/* 底部导航角标 */
.fr-nav-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  background: #FF3B30;
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
}

/* 好友申请卡片 */
.fr-request-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--separator);
  background: rgba(52,199,89,0.04);
}
.fr-request-card:last-child { border-bottom: none; }
.fr-req-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #5AC8FA, #007AFF);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: white;
  flex-shrink: 0; overflow: hidden;
}
.fr-req-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fr-req-info { flex: 1; min-width: 0; }
.fr-req-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.fr-req-tip { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.fr-req-actions { display: flex; gap: 8px; flex-shrink: 0; }
.fr-btn {
  padding: 6px 14px; border-radius: 16px; border: none;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: opacity 0.15s;
}
.fr-btn:active { opacity: 0.7; }
.fr-btn-reject { background: var(--fill-secondary); color: var(--text-primary); }
.fr-btn-accept { background: var(--blue); color: white; }

/* 同学录同学卡片-好友操作按钮 */
.cb-friend-btn {
  padding: 6px 12px; border-radius: 16px; border: none;
  font-size: 12px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0; transition: opacity 0.15s;
  white-space: nowrap;
}
.cb-friend-btn:active { opacity: 0.7; }
.cb-friend-add { background: var(--blue); color: white; }
.cb-friend-pending { background: var(--fill-secondary); color: var(--text-tertiary); cursor: default; }
.cb-friend-respond { background: rgba(52,199,89,0.15); color: #34C759; border: 1px solid rgba(52,199,89,0.3); }

/* 好友标记角标 */
.cb-friend-badge {
  position: absolute; top: -2px; right: -2px;
  background: #34C759; color: white;
  font-size: 8px; font-weight: 700;
  padding: 1px 4px; border-radius: 6px;
  line-height: 1.4;
}

/* 在线同学区域-加好友按钮 */
.ph-online-item .ph-add-friend-btn {
  display: none;
}

/* ===== 同学聊天：联系人操作区 ===== */
.peer-contact-item {
  cursor: default; /* 默认不可点，仅好友可点 */
}
.peer-contact-item.is-friend {
  cursor: pointer;
}
.peer-contact-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* 状态徽章：好友 / 等待中 */
.peer-status-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.peer-status-badge.friend {
  background: rgba(52, 199, 89, 0.12);
  color: #34C759;
}
.peer-status-badge.pending {
  background: var(--fill-tertiary);
  color: var(--text-tertiary);
}

/* 加好友 / 回应 按钮 */
.peer-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
  background: rgba(0,122,255,0.1);
  color: var(--blue, #007AFF);
}
.peer-add-btn:active { opacity: 0.7; }
.peer-add-btn.respond {
  background: rgba(255,149,0,0.1);
  color: var(--orange, #FF9500);
}
.peer-add-btn.cancel {
  background: rgba(255,59,48,0.08);
  color: var(--red, #FF3B30);
}

/* AI消息气泡 */
.peer-msg.ai-msg {
  justify-content: flex-start;
}
.ai-bubble {
  background: linear-gradient(135deg, rgba(88,86,214,0.08), rgba(0,122,255,0.08)) !important;
  border: 1px solid rgba(88,86,214,0.15) !important;
  color: var(--text-primary) !important;
}

/* ★ 删除好友按钮 — 覆盖 peer-chat-tool-btn 的固定尺寸 */
#peerHeaderDeleteBtn {
  width: auto !important;
  height: auto !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  background: rgba(255, 59, 48, 0.08) !important;
  color: #FF3B30 !important;
  box-shadow: none !important;
  display: none;  /* 默认隐藏，JS 控制 */
}
#peerHeaderDeleteBtn[style*="inline-flex"],
#peerHeaderDeleteBtn[style*="flex"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}
#peerHeaderDeleteBtn:active {
  background: rgba(255, 59, 48, 0.16) !important;
}


/* ==================== 电子信箱 v2 ==================== */

/* 底部导航滑动新手引导 */
.nav-swipe-hint {
  position:fixed; bottom:calc(84px + var(--safe-bottom) + 8px); left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,0.72); color:#fff; font-size:12px; padding:7px 16px; border-radius:20px;
  z-index:200; white-space:nowrap; pointer-events:none;
  display:flex; align-items:center; gap:6px;
  animation:navHintFade 3.5s ease forwards;
}
@keyframes navHintFade {
  0%{opacity:0;transform:translateX(-50%) translateY(8px);}
  15%{opacity:1;transform:translateX(-50%) translateY(0);}
  75%{opacity:1;}
  100%{opacity:0;}
}

/* ═══════════════════════════════════════════════════════════
   电子邮局 — 学生端完整重设计（适合小学生，专业又活泼）
═══════════════════════════════════════════════════════════ */

/* 信箱页面 — 全屏 overlay */
.letterbox-overlay {
  display:none; flex-direction:column;
  background: #c8e0ff;
  flex:1; overflow:hidden;
  position: relative;
}
.letterbox-overlay.active { display:flex; }
.letterbox-overlay > *:not(.lb-bg-blobs),
.letterbox-pane > *:not(.lb-bg-blobs) { position: relative; z-index: 5; }

/* 光晕背景 */
.lb-bg-blobs {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
  will-change: transform; isolation: isolate;
}
.lb-blob {
  position: absolute; border-radius: 50%;
  filter: blur(65px); will-change: transform;
  animation: lbDrift 14s ease-in-out infinite alternate;
}
.lb-b1 { width:420px; height:420px; background:radial-gradient(#a8d5ff,#79c0ff); top:-80px; left:-40px; opacity:.55; animation-delay:0s; }
.lb-b2 { width:340px; height:340px; background:radial-gradient(#ffd0e8,#ffadd1); top:100px; right:40px; opacity:.45; animation-delay:-4s; }
.lb-b3 { width:300px; height:300px; background:radial-gradient(#b8f5d4,#84eab5); bottom:-30px; left:30%; opacity:.42; animation-delay:-8s; }
.lb-b4 { width:240px; height:240px; background:radial-gradient(#ffe8a0,#ffd060); bottom:80px; right:-20px; opacity:.4; animation-delay:-11s; }
@keyframes lbDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(22px,14px,0) scale(1.06); }
}


/* ─── 顶栏 — 磨玻璃 ─── */
.lb-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  padding-top:calc(14px + env(safe-area-inset-top, 0px));
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1.5px solid rgba(255,255,255,0.7);
  flex-shrink:0;
  box-shadow: none;
}
.lb-back-btn {
  width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(0,0,0,0.05); cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#1a2a50;
  transition:background 0.15s; flex-shrink:0;
}
.lb-back-btn:active { background:rgba(0,0,0,0.1); }
.lb-back-btn svg { width:18px; height:18px; }
.lb-title {
  font-size:18px; font-weight:800; color:#1a2a50;
  display:flex; align-items:center; gap:8px;
  letter-spacing:-0.3px;
}
.lb-title svg { width:22px; height:22px; filter:none; color:#4A90E2; }
.lb-compose-btn {
  width:36px; height:36px; border-radius:50%; border:none;
  background:linear-gradient(135deg, #007AFF, #5856D6); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,122,255,0.3); transition:all 0.15s;
}
.lb-compose-btn:active { background:rgba(255,255,255,0.4); transform:scale(0.93); }
.lb-compose-btn svg { width:20px; height:20px; }

/* ─── Tab 栏 ─── */
.lb-tabs {
  display:flex; background:rgba(255,255,255,0.45);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1.5px solid rgba(255,255,255,0.6); flex-shrink:0;
  overflow-x:auto; scrollbar-width:none;
  box-shadow:none;
}
.lb-tabs::-webkit-scrollbar { display:none; }
.lb-tab {
  flex:1; min-width:80px; padding:11px 4px 9px; text-align:center;
  font-size:13px; font-weight:500; color:#5a6a8a;
  cursor:pointer; border-bottom:2.5px solid transparent;
  transition:color 0.2s,border-color 0.2s; position:relative;
  white-space:nowrap; display:flex; align-items:center; justify-content:center; gap:5px;
}
.lb-tab.active { color:#007AFF; border-bottom-color:#007AFF; font-weight:700; }
.lb-tab svg { width:14px; height:14px; opacity:0.75; flex-shrink:0; }
.lb-tab.active svg { opacity:1; }
.lb-tab-badge {
  position:absolute; top:5px; right:6px;
  min-width:15px; height:15px; padding:0 3px;
  background:#FF3B30; color:#fff; font-size:10px; font-weight:700;
  border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
}

/* ─── 筛选条 — 磨玻璃 ─── */
.lb-filter-bar {
  display:flex; gap:8px; padding:9px 16px 7px;
  background:rgba(255,255,255,0.35);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.5);
  flex-shrink:0;
}
.lb-filter-chip {
  padding:5px 14px; border-radius:20px; font-size:12px; font-weight:600;
  border:1.5px solid rgba(255,255,255,0.7); color:#5a6a8a; cursor:pointer;
  transition:all 0.18s; background:rgba(255,255,255,0.4);
}
.lb-filter-chip.active {
  border-color:#007AFF; background:rgba(0,122,255,0.1); color:#007AFF;
}

/* ─── 信件列表容器 ─── */
.lb-content {
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:12px 14px calc(80px + env(safe-area-inset-bottom, 0px)) 14px;
  background:transparent;
}
.lb-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 20px; color:#B0B0C0; text-align:center; gap:14px;
}
.lb-empty svg { width:56px; height:56px; opacity:0.35; }
.lb-empty p { font-size:14px; font-weight:500; color:#B0B0C0; }

/* ─── 信件卡片 — 磨玻璃 ─── */
.letter-card {
  background:rgba(255,255,255,0.55);
  border:1.5px solid rgba(255,255,255,0.72);
  border-radius:20px;
  padding:14px 15px; margin-bottom:10px;
  box-shadow:0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  cursor:pointer; transition:transform 0.15s, box-shadow 0.15s, background 0.15s;
  border-left:3.5px solid transparent; position:relative; overflow:hidden;
}
.letter-card::before {
  content:''; position:absolute; top:0; right:0;
  width:60px; height:60px;
  background:radial-gradient(circle at top right, rgba(74,144,226,0.06), transparent 70%);
  border-radius:0 20px 0 0; pointer-events:none;
}
.letter-card:hover { background:rgba(255,255,255,0.72); box-shadow:0 8px 30px rgba(0,0,0,0.08); }
.letter-card:active { transform:scale(0.982); box-shadow:0 2px 8px rgba(0,0,0,0.05); }
.letter-card.unread { border-left-color:#007AFF; background:rgba(255,255,255,0.65); }
.letter-card.pending { border-left-color:#FF9500; }
.letter-card.deleted-card { opacity:0.5; border-left-color:#C7C7CC; }
.letter-card.recalled-card { opacity:0.55; border-left-color:#FF9500; }
.letter-card.sent-card { border-left-color:#5856D6; }

.letter-card-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:5px;
}
.letter-card-from {
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color:#1a2a50; flex:1; min-width:0;
}
.letter-card-from-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.letter-card-time { font-size:11px; color:#8899bb; flex-shrink:0; margin-left:6px; }
.letter-card-title {
  font-size:14px; font-weight:700; color:#1a2a50; margin-bottom:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.letter-card-preview {
  font-size:12.5px; color:#5a6a8a; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.letter-unread-dot {
  width:7px; height:7px; border-radius:50%; background:#007AFF; flex-shrink:0;
  box-shadow:0 0 0 2px rgba(0,122,255,0.2);
}
.letter-card-footer {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:9px;
}

/* ─── 状态标签 ─── */
.letter-status-tag {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; padding:3px 9px; border-radius:10px;
}
.letter-status-tag.pending   { background:rgba(255,149,0,0.12); color:#FF9500; }
.letter-status-tag.delivered { background:rgba(52,199,89,0.12); color:#34C759; }
.letter-status-tag.read-tag  { background:rgba(142,142,147,0.1); color:#8E8E93; }
.letter-status-tag.unread-tag{ background:rgba(0,122,255,0.12); color:#007AFF; font-weight:700; }

/* ─── 快捷操作（底部横向，保留备用）─── */
.letter-card-actions {
  display:flex; gap:6px; margin-top:9px; padding-top:9px;
  border-top:0.5px solid rgba(0,0,0,0.05);
}
.lc-action-btn {
  flex:1; padding:7px 0; border-radius:12px; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:12px; font-weight:600; transition:opacity 0.15s;
}
.lc-action-btn:active { opacity:0.7; }
.lc-action-btn.reply  { background:rgba(0,122,255,0.1); color:#007AFF; }
.lc-action-btn.recall { background:rgba(255,149,0,0.1); color:#FF9500; }
.lc-action-btn.delete { background:rgba(255,59,48,0.1);  color:#FF3B30; }
.lc-action-btn svg { width:14px; height:14px; }

/* ─── 信件头像 ─── */
.letter-avatar {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#4A90E2,#5856D6);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#fff; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,122,255,0.25);
}
.letter-avatar img { width:100%; height:100%; object-fit:cover; }

/* ─── 写信界面 ─── */
.lb-compose-overlay {
  position:fixed; inset:0; z-index:310;
  background: #c8e0ff;
  display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.32,0,0.15,1);
}
.lb-compose-overlay.active { transform:translateY(0); }
.lb-compose-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  padding-top:calc(14px + env(safe-area-inset-top, 0px));
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1.5px solid rgba(255,255,255,0.7);
  flex-shrink:0;
  box-shadow:none;
}
.lb-compose-title {
  font-size:17px; font-weight:800; color:#1a2a50;
  display:flex; align-items:center; gap:8px;
}
.lb-compose-title svg { width:20px; height:20px; color:#4A90E2; }
.lb-send-btn {
  padding:8px 18px; border-radius:22px; border:none;
  background:linear-gradient(135deg, #007AFF, #5856D6); color:#fff;
  font-size:14px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  transition:all 0.2s;
  box-shadow:0 4px 14px rgba(0,122,255,0.3);
}
.lb-send-btn svg { width:15px; height:15px; }
.lb-send-btn:disabled { opacity:0.35; }
.lb-send-btn:not(:disabled):active { background:rgba(255,255,255,0.4); transform:scale(0.96); }

.lb-compose-body {
  flex:1; overflow-y:auto; padding:16px 14px;
  padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:12px;
  -webkit-overflow-scrolling:touch;
}
.lb-recipient-wrap {
  background:#fff; border-radius:16px; padding:13px 15px;
  box-shadow:0 2px 10px rgba(0,0,0,0.06); cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1.5px solid rgba(91,158,248,0.15);
}
.lb-recipient-wrap svg { flex-shrink:0; color:#B0B0C0; width:16px; height:16px; }
.lb-recipient-label { font-size:11px; color:#8A8A9C; margin-bottom:3px; font-weight:600; }
.lb-recipient-val { font-size:15px; font-weight:700; color:#1C1C2E; }
.lb-recipient-val.empty { color:#C0C0CC; font-weight:400; font-size:14px; }

/* ─── 信纸 ─── */
.lb-letter-paper {
  background:rgba(255,255,255,0.65);
  border:1.5px solid rgba(255,255,255,0.72);
  border-radius:16px; padding:16px 18px;
  box-shadow:0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background-image:
    linear-gradient(to right, #E53935 0, #E53935 3px, transparent 3px),
    repeating-linear-gradient(transparent, transparent 27px, rgba(0,0,0,0.04) 28px);
  background-size:100% 100%, 100% 100%;
  flex:1; display:flex; flex-direction:column; gap:10px; padding-left:22px;
  position:relative;
}
.lb-letter-paper::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(to right,#4A90E2,#5856D6);
  border-radius:16px 16px 0 0;
}
.lb-letter-title-input {
  border:none; background:transparent; outline:none;
  font-size:17px; font-weight:800; color:#1a2a50; font-family:inherit; padding:0; width:100%;
  margin-top:4px;
}
.lb-letter-title-input::placeholder { color:#D0D0DC; font-weight:400; font-size:15px; }
.lb-letter-divider { height:1px; background:rgba(0,0,0,0.06); }
.lb-letter-content-input {
  border:none; background:transparent; outline:none;
  font-size:15px; color:#3C3C4E; line-height:2; font-family:inherit;
  resize:none; width:100%; min-height:180px; flex:1;
}
.lb-letter-content-input::placeholder { color:#D0D0DC; }
.lb-char-count { text-align:right; font-size:11px; color:#C8C8D0; margin-top:2px; }

/* ─── 投递时间 ─── */
.lb-deliver-wrap {
  background:#fff; border-radius:16px; padding:14px;
  box-shadow:0 2px 10px rgba(0,0,0,0.06);
  border:1.5px solid rgba(0,0,0,0.04);
}
.lb-deliver-label {
  font-size:13px; font-weight:700; color:#1C1C2E; margin-bottom:10px;
  display:flex; align-items:center; gap:7px;
}
.lb-deliver-label svg { color:#FF9500; width:16px; height:16px; }
.lb-deliver-options { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px; }
.lb-deliver-opt {
  padding:6px 14px; border-radius:22px; border:1.5px solid #E5E5EA;
  font-size:13px; font-weight:500; cursor:pointer; transition:all 0.18s; color:#8A8A9C;
}
.lb-deliver-opt.active {
  border-color:#007AFF; background:rgba(0,122,255,0.1); color:#007AFF; font-weight:700;
}
.lb-deliver-custom { display:none; gap:8px; }
.lb-deliver-custom.show { display:flex; }
.lb-deliver-custom input {
  flex:1; padding:9px 13px; border-radius:12px; border:1.5px solid #E5E5EA;
  font-size:13px; background:rgba(0,0,0,0.03); color:#1C1C2E; outline:none;
}
.lb-deliver-custom input:focus { border-color:#007AFF; }
.lb-deliver-preview { font-size:12px; color:#B0B0C0; margin-top:6px; }

/* ─── 发送动画 ─── */
.lb-send-animation {
  position:fixed; inset:0; z-index:400;
  background:rgba(255,255,255,0.96); backdrop-filter:blur(12px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.lb-send-animation.show { opacity:1; pointer-events:all; }
.lb-send-envelope-icon {
  width:80px; height:80px; border-radius:24px;
  background:linear-gradient(135deg,#4A90E2,#5856D6);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(91,158,248,0.4);
  animation:envelopeFly 1.8s ease forwards;
}
.lb-send-envelope-icon svg { width:38px; height:38px; color:#fff; }
@keyframes envelopeFly {
  0%  { transform:scale(1) translateY(0) rotate(0deg); opacity:1; }
  60% { transform:scale(1.15) translateY(-20px) rotate(-5deg); opacity:1; }
  100%{ transform:scale(0.3) translateY(-120px) rotate(14deg); opacity:0; }
}
.lb-send-text {
  font-size:20px; font-weight:800; color:#1C1C2E;
  animation:textFadeIn 0.5s 0.4s both;
}
.lb-send-subtext {
  font-size:14px; color:#8A8A9C; animation:textFadeIn 0.5s 0.6s both;
  text-align:center; padding:0 30px;
}
@keyframes textFadeIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }

/* ─── 阅读信件 ─── */
.lb-read-overlay {
  position:fixed; inset:0; z-index:320;
  background: #c8e0ff;
  display:flex; flex-direction:column;
  transform:translateY(-100%); transition:transform 0.35s cubic-bezier(0.32,0,0.15,1);
}
.lb-read-overlay.active { transform:translateY(0); }
.lb-read-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  padding-top:calc(14px + env(safe-area-inset-top, 0px));
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1.5px solid rgba(255,255,255,0.7);
  flex-shrink:0;
  box-shadow:none;
}
.lb-read-header-title {
  font-size:17px; font-weight:800; color:#1a2a50;
  display:flex; align-items:center; gap:8px;
}
.lb-read-header-title svg { width:20px; height:20px; color:#4A90E2; }
.lb-read-actions { display:flex; gap:8px; }
.lb-read-action-btn {
  height:36px; border-radius:22px; border:none; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:#1a2a50;
  padding:0 14px;
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.7);
  transition:all 0.15s;
}
.lb-read-action-btn svg { width:15px; height:15px; flex-shrink:0; }
.lb-read-action-btn.reply { background:rgba(0,122,255,0.1); color:#007AFF; border-color:rgba(0,122,255,0.2); }
.lb-read-action-btn.delete { background:rgba(255,59,48,0.1); color:#FF3B30; border-color:rgba(255,59,48,0.2); }
.lb-read-action-btn:active { opacity:0.75; transform:scale(0.95); }
.lb-read-body { flex:1; overflow-y:auto; padding:16px 14px; }

.lb-read-envelope-top {
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
  padding:14px 16px;
  background:rgba(255,255,255,0.55); border:1.5px solid rgba(255,255,255,0.72);
  border-radius:18px;
  box-shadow:0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.lb-read-from { flex:1; }
.lb-read-from-label { font-size:11px; color:#8899bb; font-weight:600; letter-spacing:0.3px; }
.lb-read-from-name { font-size:16px; font-weight:800; color:#1a2a50; margin-top:2px; }
.lb-read-meta { text-align:right; }
.lb-read-time { font-size:11px; color:#B0B0C0; }

/* 阅读信纸 */
.lb-read-paper {
  background:rgba(255,255,255,0.65);
  border:1.5px solid rgba(255,255,255,0.72);
  border-radius:16px; padding:20px 20px 20px 24px;
  box-shadow:0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background-image:
    linear-gradient(to right,#E53935 0,#E53935 3px,transparent 3px),
    repeating-linear-gradient(transparent,transparent 27px,rgba(0,0,0,0.04) 28px);
  position:relative;
}
.lb-read-paper::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(to right,#4A90E2,#5856D6);
  border-radius:16px 16px 0 0;
}
.lb-read-title {
  font-size:19px; font-weight:800; color:#1a2a50; margin-bottom:16px; line-height:1.4;
}
.lb-read-content {
  font-size:15px; color:#2a3a5a; line-height:2; white-space:pre-wrap; word-break:break-word;
}
.lb-read-signature {
  text-align:right; margin-top:20px; font-size:12px; color:#B0B0C0; font-style:italic;
}

/* ─── 底部回复栏（隐藏，回信走写信界面）─── */
.lb-reply-bar {
  flex-shrink:0; padding:10px 14px; padding-bottom:calc(10px + var(--safe-bottom));
  background:rgba(255,255,255,0.92); backdrop-filter:blur(20px);
  border-top:0.5px solid rgba(0,0,0,0.08);
  display:flex; gap:10px; align-items:flex-end;
}
.lb-reply-input {
  flex:1; padding:9px 14px; border-radius:14px; border:1.5px solid #E5E5EA;
  font-size:14px; background:rgba(0,0,0,0.03); color:#1C1C2E;
  outline:none; font-family:inherit; resize:vertical; min-height:40px; height:110px; line-height:1.5;
}
.lb-reply-input:focus { border-color:#007AFF; }
.lb-reply-send-btn {
  width:40px; height:40px; border-radius:50%; border:none;
  background:linear-gradient(135deg,#4A90E2,#5856D6); color:#fff; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(91,158,248,0.35); transition:opacity 0.15s;
  margin-bottom:2px;
}
.lb-reply-send-btn:active { opacity:0.8; }
.lb-reply-send-btn svg { width:17px; height:17px; }

/* ─── 收件人选择弹窗 ─── */
.lb-recipient-modal {
  position:fixed; inset:0; z-index:350;
  background:rgba(0,0,0,0.45); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none; transition:opacity 0.25s;
}
.lb-recipient-modal.active { opacity:1; pointer-events:all; }
.lb-recipient-sheet {
  width:100%; max-width:380px; background:#fff; border-radius:24px;
  padding:0 0 16px;
  max-height:70vh; display:flex; flex-direction:column;
  transform:scale(0.93) translateY(-12px); opacity:0;
  transition:transform 0.28s cubic-bezier(0.34,1.4,0.64,1), opacity 0.22s;
  box-shadow:0 20px 60px rgba(0,0,0,0.22);
}
.lb-recipient-modal.active .lb-recipient-sheet { transform:scale(1) translateY(0); opacity:1; }
.lb-recipient-sheet-header {
  padding:18px 16px 14px; border-bottom:1px solid rgba(0,0,0,0.05);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.lb-recipient-sheet-header h4 {
  font-size:17px; font-weight:800; display:flex; align-items:center; gap:8px;
  color:#1C1C2E;
}
.lb-recipient-sheet-header h4 svg { color:#007AFF; width:18px; height:18px; }
.lb-recipient-sheet-header .lb-back-btn {
  background:rgba(0,0,0,0.06); color:#6B6B80;
}
.lb-recipient-list { overflow-y:auto; flex:1; padding:6px 0; }
.lb-recipient-item {
  display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer;
  transition:background 0.15s;
}
.lb-recipient-item:active { background:rgba(91,158,248,0.07); }
.lb-recipient-item-info { flex:1; }
.lb-recipient-item-name { font-size:14px; font-weight:700; color:#1C1C2E; }
.lb-recipient-item-sub { font-size:12px; color:#8A8A9C; margin-top:2px; }

/* ─── 首页信箱入口卡片 ─── */
.ph-letter-entry {
  margin:0 16px 16px; padding:15px 16px;
  background:linear-gradient(135deg,#EEF6FF,#F0EAFF);
  border-radius:18px; box-shadow:0 2px 12px rgba(91,158,248,0.12);
  display:flex; align-items:center; gap:14px; cursor:pointer;
  border:1px solid rgba(91,158,248,0.15); transition:transform 0.15s;
}
.ph-letter-entry:active { transform:scale(0.98); }
.ph-letter-icon {
  width:50px; height:50px; border-radius:16px; flex-shrink:0;
  background:linear-gradient(135deg,#4A90E2,#5856D6);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(91,158,248,0.3);
}
.ph-letter-icon svg { width:26px; height:26px; color:#fff; }
.ph-letter-info { flex:1; }
.ph-letter-info h4 { font-size:15px; font-weight:800; color:#1C1C2E; margin:0 0 3px; }
.ph-letter-info p { font-size:12px; color:#8A8A9C; margin:0; }
.ph-letter-badge {
  min-width:22px; height:22px; padding:0 6px;
  background:#FF3B30; color:#fff; font-size:12px; font-weight:700;
  border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ─── 私密信件设置 ─── */
.lb-secret-wrap {
  background:#fff; border-radius:16px;
  box-shadow:0 2px 10px rgba(0,0,0,0.06); overflow:hidden;
  border:1.5px solid rgba(0,0,0,0.04);
}
.lb-secret-toggle {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 15px; cursor:pointer; user-select:none;
}
.lb-secret-toggle:active { background:rgba(0,0,0,0.03); }
.lb-secret-toggle-left { display:flex; align-items:center; gap:12px; }
.lb-secret-icon {
  width:38px; height:38px; border-radius:12px;
  background:rgba(0,0,0,0.05);
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s;
}
.lb-secret-icon svg { width:18px; height:18px; color:#8A8A9C; transition:color 0.2s; }
.lb-secret-toggle-title { font-size:14px; font-weight:700; color:#1C1C2E; }
.lb-secret-toggle-sub { font-size:12px; color:#8A8A9C; margin-top:2px; }
.lb-secret-switch {
  width:46px; height:28px; border-radius:14px;
  background:#E5E5EA; position:relative;
  transition:background 0.25s; flex-shrink:0;
}
.lb-secret-switch.on { background:#FF9500; }
.lb-secret-switch-thumb {
  position:absolute; top:3px; left:3px;
  width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 1px 5px rgba(0,0,0,0.2);
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.lb-secret-switch.on .lb-secret-switch-thumb { transform:translateX(18px); }
.lb-secret-input-wrap {
  padding:0 15px 15px; border-top:1px solid rgba(0,0,0,0.05);
}
.lb-secret-password-input {
  width:100%; padding:11px 14px; border-radius:12px; margin-top:10px;
  border:1.5px solid #E5E5EA; font-size:15px; font-weight:700;
  background:rgba(0,0,0,0.03); color:#1C1C2E;
  outline:none; font-family:inherit; letter-spacing:3px;
}
.lb-secret-password-input:focus { border-color:#FF9500; }
.lb-secret-hint {
  display:flex; align-items:flex-start; gap:6px;
  font-size:11px; color:#B0B0C0; margin-top:8px; line-height:1.5;
}
.lb-secret-hint svg { width:13px; height:13px; flex-shrink:0; margin-top:1px; }

/* ─── 私密信解锁弹窗 ─── */
.lb-unlock-modal {
  position:fixed; inset:0; z-index:400;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.25s;
  padding:20px;
}
.lb-unlock-modal.active { opacity:1; pointer-events:all; }
.lb-unlock-sheet {
  width:100%; max-width:340px; background:#fff;
  border-radius:24px; padding:30px 24px 22px;
  box-shadow:0 24px 64px rgba(0,0,0,0.25);
  text-align:center;
  animation:lbShake 0s;
}
@keyframes lbShake {
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(8px); }
  60%{ transform:translateX(-5px); }
  80%{ transform:translateX(5px); }
}
.lb-unlock-icon {
  width:60px; height:60px; border-radius:18px;
  background:rgba(255,149,0,0.1);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
.lb-unlock-icon svg { width:28px; height:28px; color:#FF9500; }
.lb-unlock-title { font-size:18px; font-weight:800; color:#1C1C2E; margin-bottom:6px; }
.lb-unlock-sub { font-size:13px; color:#8A8A9C; margin-bottom:16px; }
.lb-unlock-input {
  width:100%; padding:13px 14px; border-radius:14px;
  border:1.5px solid #E5E5EA; font-size:20px; font-weight:700;
  background:rgba(0,0,0,0.03); color:#1C1C2E;
  outline:none; text-align:center; letter-spacing:5px;
  margin-bottom:8px; font-family:inherit;
}
.lb-unlock-input:focus { border-color:#FF9500; box-shadow:0 0 0 3px rgba(255,149,0,0.15); }
.lb-unlock-error { font-size:12px; color:#FF3B30; height:18px; margin-bottom:12px; }
.lb-unlock-actions { display:flex; gap:10px; }
.lb-unlock-cancel {
  flex:1; padding:13px; border-radius:14px; border:none;
  background:rgba(0,0,0,0.06); color:#6B6B80;
  font-size:15px; font-weight:600; cursor:pointer;
}
.lb-unlock-confirm {
  flex:1; padding:13px; border-radius:14px; border:none;
  background:#FF9500; color:#fff; font-size:15px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
}
.lb-unlock-confirm:active { opacity:0.85; }
.lb-unlock-confirm svg { width:15px; height:15px; }

/* ─── 私密标记 chip ─── */
.letter-card-secret-tag {
  display:inline-flex; align-items:center; gap:3px;
  font-size:10px; font-weight:600; padding:2px 8px; border-radius:8px;
  background:rgba(255,149,0,0.1); color:#FF9500;
  margin-left:6px; vertical-align:middle;
}

/* ─── 撤回样式 ─── */
.lc-action-btn.recall { background:rgba(255,149,0,0.1); color:#FF9500; }
.letter-card.recalled-card .letter-card-preview { font-style:italic; color:#B0B0C0; }

/* ─── 信件线程视图 ─── */
.lb-thread-wrap { margin-top:18px; border-top:1px solid rgba(0,0,0,0.06); padding-top:14px; }
.lb-thread-title {
  font-size:11px; font-weight:700; color:#B0B0C0;
  text-transform:uppercase; letter-spacing:0.8px;
  margin-bottom:12px; padding:0 2px;
}
.lb-thread-loading { text-align:center; padding:16px 0; font-size:13px; color:#B0B0C0; }
.lb-thread-item { display:flex; gap:10px; margin-bottom:14px; align-items:flex-start; }
.lb-thread-avatar {
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,#4A90E2,#5856D6);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff; flex-shrink:0;
  box-shadow:0 2px 8px rgba(91,158,248,0.28);
}
.lb-thread-avatar.is-parent { background:linear-gradient(135deg,#1A2B4B,#3A7CA5); }
.lb-thread-bubble {
  flex:1; min-width:0;
  background:rgba(0,0,0,0.04); border-radius:4px 16px 16px 16px;
  padding:10px 13px;
}
.lb-thread-bubble.unread {
  background:rgba(91,158,248,0.08); border:1px solid rgba(91,158,248,0.2);
}
.lb-thread-bubble-header { display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.lb-thread-sender { font-size:12px; font-weight:700; color:#6B6B80; }
.lb-thread-time { font-size:11px; color:#B0B0C0; margin-left:auto; }
.lb-thread-unread-tag {
  font-size:10px; font-weight:700;
  background:rgba(91,158,248,0.12); color:#007AFF;
  border-radius:4px; padding:1px 5px;
}
.lb-thread-content {
  font-size:14px; color:#1C1C2E; line-height:1.6;
  white-space:pre-wrap; word-break:break-word;
}

/* ─── 回复 chip ─── */
.lb-reply-chip {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; color:#B0B0C0;
  background:rgba(0,0,0,0.05); border-radius:8px; padding:3px 8px;
}
.lb-reply-chip.has-unread { color:#007AFF; background:rgba(0,122,255,0.1); }
.lb-reply-chip svg { width:11px; height:11px; }

/* ─── 收件人分类标题 ─── */
.lb-recipient-section-title {
  padding:10px 16px 6px; font-size:11px; font-weight:700;
  color:#B0B0C0; letter-spacing:0.5px; text-transform:uppercase;
  background:#f7f7fa; position:sticky; top:0; z-index:1;
}
.lb-recipient-section-icon { margin-right:4px; }

/* ─── 已删除提示 ─── */
.lb-deleted-hint {
  text-align:center; padding:10px; font-size:12px;
  color:#B0B0C0; font-style:italic;
}

/* ─── 邮票 & 信封状态（letterbox.js 注入补充）─── */
.lb-stamp {
  position:absolute; top:10px; right:10px; pointer-events:none; z-index:3;
  width:34px; height:40px;
  background:linear-gradient(145deg,#EAF4E0,#F8EFB8);
  border:1.5px dashed rgba(120,90,30,0.3); border-radius:3px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.6), 0 1px 4px rgba(0,0,0,0.1);
}
.lb-stamp::before {
  content:''; position:absolute; inset:2.5px;
  border:1px solid rgba(120,90,30,0.08); border-radius:1px;
}
.lb-stamp.sent-stamp { background:linear-gradient(145deg,#D4E8F8,#C0D8F0); border-color:rgba(30,80,140,0.22); }
.lb-stamp-icon { font-size:15px; line-height:1; }
.lb-stamp-text { font-size:5px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; color:rgba(100,65,10,0.45); font-family:'Courier New',monospace; line-height:1; }
.lb-stamp.sent-stamp .lb-stamp-text { color:rgba(20,55,110,0.4); }
/* 信封状态 */
.lb-env-state { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 8px; border-radius:8px; }
.lb-env-state.sealed { background:rgba(255,149,0,0.1); color:#FF9500; }
.lb-env-icon { width:12px; height:12px; flex-shrink:0; }
/* 倒计时 */
.lb-countdown-wrap { margin-top:9px; padding:8px 11px; background:rgba(91,158,248,0.07); border-radius:12px; border:1px solid rgba(91,158,248,0.15); display:flex; align-items:center; gap:8px; }
.lb-countdown-icon { width:26px; height:26px; border-radius:50%; background:rgba(91,158,248,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lb-countdown-icon svg { width:13px; height:13px; color:#007AFF; }
.lb-countdown-label { font-size:10px; color:#B0B0C0; font-weight:600; margin-bottom:1px; }
.lb-countdown-timer { font-size:13px; font-weight:800; color:#007AFF; font-variant-numeric:tabular-nums; letter-spacing:0.5px; }
.lb-countdown-timer.urgent { color:#FF9500; animation:lbPulse 1s ease-in-out infinite; }
@keyframes lbPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ─── 家长端线程（保留，避免引用丢失）─── */
.plb-thread-wrap { margin-top:16px; border-top:1px solid rgba(0,0,0,0.06); padding-top:12px; }
.plb-thread-title { font-size:11px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; padding:0 2px; }
.plb-thread-loading { text-align:center; padding:14px 0; font-size:13px; color:var(--text-tertiary); }
.plb-thread-item { display:flex; gap:10px; margin-bottom:14px; align-items:flex-start; }
.plb-thread-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#6B73FF,#9F44D3); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#fff; flex-shrink:0; }
.plb-thread-avatar.is-parent { background:linear-gradient(135deg,#1A2B4B,#3A7CA5); }
.plb-thread-bubble { flex:1; min-width:0; background:var(--bg-secondary,#EFECE4); border-radius:4px 14px 14px 14px; padding:10px 12px; }
.plb-thread-bubble.unread { background:rgba(196,146,42,0.08); border:1px solid rgba(196,146,42,0.25); }
.plb-thread-bubble-header { display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.plb-thread-sender { font-size:12px; font-weight:600; color:var(--text-secondary); }
.plb-thread-time { font-size:11px; color:var(--text-tertiary); margin-left:auto; }
.plb-thread-unread-tag { font-size:10px; font-weight:600; background:rgba(196,146,42,0.12); color:var(--gold,#C4922A); border-radius:4px; padding:1px 5px; }
.plb-thread-content { font-size:14px; color:var(--text-primary); line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.plb-reply-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:500; color:var(--text-tertiary); background:rgba(0,0,0,0.04); border-radius:6px; padding:2px 7px; margin-top:4px; }
.plb-reply-chip.has-unread { color:var(--gold,#C4922A); background:rgba(196,146,42,0.10); }


/* ==================== ni 精细导航图标 ==================== */
.ni {
  width: 24px; height: 24px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* 首页 — 房子 */
.ni-home::before { content:''; position:absolute; width:14px; height:10px; border:2px solid currentColor; border-top:none; border-radius:0 0 3px 3px; bottom:3px; }
.ni-home::after  { content:''; position:absolute; top:2px; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid currentColor; }
.ni-home .ni-door { position:absolute; bottom:3px; width:5px; height:6px; border:1.5px solid currentColor; border-bottom:none; border-radius:1px 1px 0 0; }

/* 课表 — 日历 */
.ni-schedule::before { content:''; position:absolute; width:16px; height:14px; border:2px solid currentColor; border-radius:3px; bottom:2px; }
.ni-schedule::after  { content:''; position:absolute; top:7px; width:16px; border-top:1.5px solid currentColor; }
.ni-schedule .ni-s1 { position:absolute; top:3px; left:6px;  width:2px; height:5px; background:currentColor; border-radius:1px; }
.ni-schedule .ni-s2 { position:absolute; top:3px; right:6px; width:2px; height:5px; background:currentColor; border-radius:1px; }
.ni-schedule .ni-s3 { position:absolute; bottom:5px; left:7px; width:2px; height:2px; background:currentColor; border-radius:50%; box-shadow:5px 0 0 currentColor, 0 -4px 0 currentColor, 5px -4px 0 currentColor; }

/* 考试 — 试卷 */
.ni-exam::before { content:''; position:absolute; width:14px; height:17px; border:2px solid currentColor; border-radius:2px; bottom:2px; }
.ni-exam::after  { content:''; position:absolute; top:8px; left:8px; width:7px; border-top:1.5px solid currentColor; box-shadow:0 3.5px 0 currentColor, 0 7px 0 currentColor; }
.ni-exam .ni-e1 { position:absolute; top:5px; left:8px; width:4px; height:1.5px; background:currentColor; border-radius:1px; }

/* 同学 — 两个人 */
.ni-classbook::before { content:''; position:absolute; width:8px; height:8px; border:2px solid currentColor; border-radius:50%; top:2px; left:2px; }
.ni-classbook::after  { content:''; position:absolute; width:12px; height:6px; border:2px solid currentColor; border-radius:6px 6px 0 0; border-bottom:none; bottom:3px; left:0; }
.ni-classbook .ni-c1 { position:absolute; width:7px; height:7px; border:1.5px solid currentColor; border-radius:50%; top:4px; right:2px; }
.ni-classbook .ni-c2 { position:absolute; width:10px; height:5px; border:1.5px solid currentColor; border-radius:5px 5px 0 0; border-bottom:none; bottom:3px; right:-1px; }

/* 信箱 — 信封 */
.ni-mail::before { content:''; position:absolute; width:16px; height:12px; border:2px solid currentColor; border-radius:2px; top:6px; }
.ni-mail::after  { content:''; position:absolute; top:6px; left:4px; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:6px solid currentColor; }

/* AI学习 — 闪电 */
.ni-ai::before { content:''; position:absolute; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:10px solid currentColor; top:2px; left:7px; }
.ni-ai::after  { content:''; position:absolute; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:10px solid currentColor; bottom:2px; left:7px; }
.ni-ai .ni-a1 { position:absolute; width:3px; height:3px; background:currentColor; border-radius:50%; top:3px; right:4px; }
.ni-ai .ni-a2 { position:absolute; width:2px; height:2px; background:currentColor; border-radius:50%; bottom:4px; left:3px; }

/* 我的 — 人像 */
.ni-me::before { content:''; position:absolute; width:9px; height:9px; border:2px solid currentColor; border-radius:50%; top:2px; }
.ni-me::after  { content:''; position:absolute; width:15px; height:8px; border:2px solid currentColor; border-radius:8px 8px 0 0; border-bottom:none; bottom:3px; }

/* 顶部日期 */
.page-top-date {
  font-size: 13px;
  color: var(--text-secondary, #888);
  font-weight: 400;
  flex: 1;
  text-align: center;
}

/* 桌面端顶部栏 */
@media (min-width: 768px) {
  .page-top-bar { display:flex; align-items:center; padding:16px 24px 10px; }
  .page-top-title { font-size:22px; flex-shrink:0; }
  .page-top-date { font-size:14px; }
  /* 桌面端底部导航+备案栏高度：bottom-nav(52px位置+58px高度) + site-footer(52px) ≈ 115px */
  .desktop-main { padding-bottom: 115px; background: var(--bg-gradient); }
}

/* ==================== 顶部双行Header（桌面端） ==================== */
/* 手机端隐藏顶部导航栏那行 */
@media (max-width: 767px) {
  /* AI智学中心手机端适配 */
  #page-ai-learning {
    position: fixed;
    top: 0; left: 0; right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)); /* 底部导航高度 */
    z-index: 10;
    overflow: hidden;
    flex-direction: column;
    display: none;
  }
  #page-ai-learning.active {
    display: flex;
  }
  /* IoT智能家居手机端适配 */
  #page-iot {
    position: fixed;
    top: 0; left: 0; right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    z-index: 10;
    overflow: hidden;
    flex-direction: column;
    display: none;
  }
  #page-iot.active {
    display: flex;
  }
  /* 智造学院手机端适配 */
  #page-studio {
    position: fixed;
    top: 0; left: 0; right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    z-index: 10;
    overflow: hidden;
    flex-direction: column;
    display: none;
  }
  #page-studio.active {
    display: flex;
  }
}

/* ==================== 底部备案 ==================== */
/* 手机端隐藏备案footer，只保留底部导航 */
@media (max-width: 767px) {
  .site-footer { display: none !important; }
}
.site-footer {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 8px 24px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.site-footer span,
.site-footer a,
.site-footer .footer-link {
  font-size: 11.5px;
  color: #bbb;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: color 0.15s;
}
.site-footer .footer-link:hover { color: #007AFF; }
.site-footer .footer-sep { color: #e0e0e0 !important; }

/* ==================== 手机端适配修复 ==================== */
@media (max-width: 767px) {
  /* 手机端隐藏备案footer，避免遮挡底部导航 */
  .site-footer { display: none !important; }

  /* 底部导航：确保手机端显示正常 */
  .bottom-nav {
    bottom: 0;
    left: 0; right: 0;
    z-index: 200;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    gap: 2px;
  }
  .bottom-nav .nav-item {
    padding: 6px 8px;
    flex: 1 1 0;
    min-width: 0;
  }

  /* 页面底部 padding 留出底部导航空间 */
  .page {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  /* .content 区域底部留够空间（排除pg-glass和首页使用独立滚动的页面） */
  .content:not(.pg-glass) {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #page-home > .content {
    padding-bottom: 0 !important;
  }

  /* 小飞AI浮动按钮在底部导航上方 */
  .xf-fab {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    right: 16px;
  }
}

/* 768-1023px范围：底部导航尚未抬升，也需隐藏footer */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer { display: none !important; }
}
/* ===== 首页仪表盘 精美CSS图标 v2 ===== */
.hdi { position:relative; width:20px; height:20px; display:inline-block; flex-shrink:0; }

/* ── 📅 日历图标：精致翻页日历+日期数字 ── */
.hdi-cal::before {
  content:''; position:absolute;
  left:1px; top:4px; right:1px; bottom:0;
  border:2px solid currentColor; border-radius:3px;
  background: rgba(255,255,255,0.15);
}
.hdi-cal::after {
  content:''; position:absolute;
  top:8px; left:1px; right:1px; height:1.5px;
  background:currentColor; opacity:0.5;
}
.hdi-cal-pins {
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none;
}
.hdi-cal-pins::before,
.hdi-cal-pins::after {
  content:''; position:absolute;
  width:2.5px; height:6px;
  background:currentColor; border-radius:2px;
  top:0;
}
.hdi-cal-pins::before { left:5px; }
.hdi-cal-pins::after  { right:5px; }
/* 日历内日期数字 */
.hdi-cal-num {
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none;
}
.hdi-cal-num::before {
  content:'6'; position:absolute;
  left:50%; top:55%; transform:translate(-50%,-40%);
  font-size:8px; font-weight:900; color:currentColor;
  line-height:1; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── 📝 考试图标：精致试卷+A+标记 ── */
.hdi-exam::before {
  content:''; position:absolute;
  left:2px; top:0; right:2px; bottom:0;
  border:2px solid currentColor; border-radius:2px;
}
.hdi-exam::after {
  content:''; position:absolute;
  top:0; right:2px;
  width:6px; height:6px;
  border-bottom:2px solid currentColor;
  border-left:2px solid currentColor;
  background: rgba(255,107,107,0.08);
}
.hdi-exam-lines {
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none;
}
.hdi-exam-lines::before {
  content:''; position:absolute;
  left:5px; top:8px; width:5px; height:1.5px;
  background:currentColor; border-radius:1px;
  box-shadow: 0 3.5px 0 currentColor, 0 7px 0 currentColor;
}
/* A+ 标记 */
.hdi-exam-mark {
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none;
}
.hdi-exam-mark::before {
  content:'✓'; position:absolute;
  right:3px; bottom:1px;
  font-size:8px; font-weight:900; color:currentColor;
  line-height:1;
}

/* ── 💬 同学聊聊图标：双气泡+表情点 ── */
.hdi-chat::before {
  content:''; position:absolute;
  left:0; top:0; width:13px; height:11px;
  border:2px solid currentColor; border-radius:9px 9px 2px 9px;
}
.hdi-chat::after {
  content:''; position:absolute;
  right:0; bottom:0; width:12px; height:10px;
  border:2px solid currentColor; border-radius:9px 9px 9px 2px;
}
.hdi-chat-dots {
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none;
}
.hdi-chat-dots::before {
  content:''; position:absolute;
  left:4px; top:5px; width:1.8px; height:1.8px;
  border-radius:50%; background:currentColor;
  box-shadow: 3px 0 0 currentColor;
}
/* 右侧气泡内的点 */
.hdi-chat-dots::after {
  content:''; position:absolute;
  right:4px; bottom:4px; width:1.8px; height:1.8px;
  border-radius:50%; background:currentColor;
  box-shadow: -3px 0 0 currentColor;
}

/* ── ✉️ 电子邮局图标：打开的信封+小纸飞机 ── */
.hdi-mail::before {
  content:''; position:absolute;
  left:0; top:5px; right:0; bottom:0;
  border:2px solid currentColor; border-radius:2px;
}
.hdi-mail::after {
  content:''; position:absolute;
  top:5px; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-top:6px solid currentColor;
}
.hdi-mail-heart {
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none;
}
/* 信封盖子的翻起效果 */
.hdi-mail-heart::before {
  content:''; position:absolute;
  left:50%; top:5px; transform:translateX(-50%);
  width:0; height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:5px solid currentColor;
  opacity:0.4;
}
/* 飞出的小纸片 */
.hdi-mail-heart::after {
  content:''; position:absolute;
  right:2px; top:0;
  width:5px; height:4px;
  border:1.5px solid currentColor;
  border-radius:1px;
  transform: rotate(-15deg);
  opacity:0.7;
}

/* ── 🧠 AI智学图标：芯片+闪电脉冲 ── */
.hdi-ai::before {
  content:''; position:absolute;
  left:3px; top:3px; right:3px; bottom:3px;
  border:2px solid currentColor; border-radius:4px;
}
.hdi-ai::after {
  content:''; position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:5px; height:5px;
  border-radius:50%;
  background:currentColor;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.3);
}
.hdi-ai-spark {
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none;
}
/* 芯片四周引脚 */
.hdi-ai-spark::before {
  content:''; position:absolute;
  left:50%; top:0; transform:translateX(-50%);
  width:1.5px; height:4px;
  background:currentColor;
  box-shadow:
    0px 16px 0 currentColor,
    -5px 8px 0 currentColor,
    5px 8px 0 currentColor;
}
/* 左右引脚 */
.hdi-ai-spark::after {
  content:''; position:absolute;
  top:50%; left:0; transform:translateY(-50%);
  width:4px; height:1.5px;
  background:currentColor;
  box-shadow: 16px 0 0 currentColor;
}



/* ================================================================
   新增样式：导航整合 v2（6项导航 + 计划/沟通/学习合并页面）
   ================================================================ */

/* ── 首页仪表盘：4卡布局 ── */
/* 桌面端：4卡横排 */
@media (min-width: 901px) {
  .hd-body {
    flex-wrap: nowrap;
  }
  .hd-col {
    flex: 1;
    min-width: 0;
  }
}
/* iPad端：2×2网格 */
@media (min-width: 521px) and (max-width: 900px) {
  .hd-body {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .hd-col {
    flex: 0 0 calc(50% - 7px) !important;
    min-height: 260px;
  }
}
/* 手机端：单列 */
@media (max-width: 520px) {
  .hd-body {
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px 12px calc(90px + env(safe-area-inset-bottom)) !important;
  }
  .hd-col {
    flex: none !important;
    width: 100% !important;
    min-height: 0 !important;
  }
  .hd-col .hd-card {
    min-height: 180px !important;
  }
}

/* ── 首页卡片内子模块样式 ── */
.hd-card-submodule {
  padding: 8px 0 0;
  border-top: 1px solid rgba(0,0,0,0.04);
  margin-top: 8px;
}
.hd-card-submodule:first-of-type {
  border-top: none;
  margin-top: 0;
}
.hd-sm-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.hd-sm-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.hd-sm-more {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ── 计划页 plan-fab-menu / plan-section-header ── */
.plan-fab-menu {
  position: fixed !important;
  right: 20px;
  top: 72px;
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 200;
  background: rgba(255,255,255,0.96);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.8);
}
.plan-fab-menu.open { display: flex; }
.plan-fab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background 0.15s;
}
.plan-fab-item:hover { background: rgba(0,0,0,0.04); }
.plan-fab-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.plan-fab-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.plan-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  flex-wrap: wrap;
  gap: 8px;
}
.plan-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── 沟通页 comm-content / comm-tabs ── */
.comm-content {
  background: #c8e0ff;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0 !important;
}
.comm-top-bar {
  flex-shrink: 0;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1.5px solid rgba(255,255,255,0.8);
  padding: 12px 16px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.comm-top-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  white-space: nowrap;
}
.comm-tabs-bar {
  display: flex;
  gap: 0;
  flex: 1;
  min-width: 0;
}
.comm-tab-btn {
  flex: none;
  padding: 10px 20px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  transition: all 0.15s;
  font-family: inherit;
  position: relative;
}
.comm-tab-btn.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}
.lb-comm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #FF3B30;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
}
.comm-tab-pane {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.comm-tab-pane.active {
  display: flex;
  flex-direction: column;
}
.comm-pane-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.comm-pane-inner.cb-content {
  background: transparent;
}
/* 信箱面板容器 */
.letterbox-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, #daeeff 0%, #c8e0ff 40%, #d8eaff 100%);
}

/* ── PC端侧边栏保持 comm 高亮 ── */
.sidebar-nav-item[data-page="comm"].active,
.nav-item[data-page="comm"].active { color: var(--blue); }

/* 沟通页强制覆盖.content通用样式，确保flex列布局正常工作 */
#page-comm > .content.comm-content {
  overflow: hidden !important;
  overflow-y: hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  flex: 1 !important;
}

/* 手机端沟通页高度修正 */
@media (max-width: 767px) {
  .comm-top-bar { padding: 10px 12px 0; }
  .comm-tab-btn { padding: 8px 14px; font-size: 13px; }
}

/* ===== 智造学院卡片 - 设备状态行 ===== */
/* 智造学院卡片追加样式（style.css补充） */
.studio-device-item {
  display: flex;
  align-items: center;
  gap: 3px;
}
.studio-device-online {
  color: #34C759;
}
.studio-device-sep {
  color: rgba(0,0,0,0.2);
  font-size: 11px;
}