* { margin: 0; padding: 0; box-sizing: border-box; }
    :root { color-scheme: light; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #E8F5E9 !important;
      min-height: 100vh;
      color: #333;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-text-size-adjust: 100%;
      -webkit-user-select: none;
      user-select: none;
      padding-bottom: env(safe-area-inset-bottom, 8px);
    }
    /* 全局触控优化 */
    button, a, .clickable, [onclick] {
      touch-action: manipulation;
    }

    /* ===== 主标题区 ===== */
    .page-header {
      background: white;
      padding: 14px 16px 12px;
      text-align: center;
      border-bottom: 0.5px solid #C8E6C9;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: linear-gradient(135deg, #43A047, #66BB6A);
      color: white;
      padding: 3px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
    }
    .header-title {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin: 8px 0 4px;
    }
    .logo { font-size: 22px; }
    .title-text { font-size: 17px; font-weight: 700; color: #2E7D32; margin: 0; }
    .slogan { font-size: 12px; color: #43A047; letter-spacing: 0.3px; }

    /* ===== 上次在学提示 ===== */
    .last-study-bar {
      background: #C8E6C9;
      padding: 8px 16px;
      text-align: center;
      font-size: 13px;
      color: #2E7D32;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.2s;
    }
    .last-study-bar:hover { background: #A5D6A7; }

    /* ===== 用户信息栏 ===== */
    .user-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 16px;
      background: white;
      border-bottom: 0.5px solid #C8E6C9;
    }
    .user-info { font-size: 13px; color: #555; }
    .btn-logout {
      padding: 5px 14px;
      background: #E8F5E9;
      border: 0.5px solid #C8E6C9;
      border-radius: 8px;
      font-size: 12px;
      cursor: pointer;
      color: #555;
    }

    /* ===== 主内容 ===== */
    .main-content { padding: 12px 12px 0; }

    /* 积分卡片 */
    .points-row {
      display: flex;
      gap: 4px;
      margin-bottom: 8px;
    }
    .point-card {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 6px 4px;
      background: #F5F7FA;
      border-radius: 8px;
      min-height: 32px;
    }
    .point-label { font-size: 11px; color: #888; white-space: nowrap; }
    .point-value { font-size: 16px; font-weight: 700; }
    .point-share { display: none; }

    /* 总体进度条（精简） */
    .progress-section {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      margin-bottom: 8px;
      background: #FFF;
      border-radius: 8px;
      font-size: 12px;
    }
    .progress-section .progress-header {
      display: flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      color: #888;
    }
    .progress-section .progress-header #progressText { color: #333; font-weight: 600; }
    .progress-section .progress-bar-bg {
      flex: 1;
      height: 6px;
      background: #E0E0E0;
      border-radius: 3px;
      overflow: hidden;
    }
    .progress-section .progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #66BB6A, #43A047);
      border-radius: 3px;
      transition: width 0.5s ease;
    }
      box-shadow: 0 1px 4px rgba(46,125,50,0.08);
    }
    .progress-header {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #666;
      margin-bottom: 6px;
    }
    .progress-bar-bg {
      height: 7px;
      background: #E8F5E9;
      border-radius: 3px;
      overflow: hidden;
    }
    .progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg,#43A047,#66BB6A);
      border-radius: 3px;
      transition: width 0.3s ease;
    }

    /* 模式按钮 */
    .mode-row {
      display: flex;
      gap: 6px;
      margin-bottom: 8px;
    }
    .mode-btn {
      flex: 1;
      display: block;
      text-decoration: none;
      background: #FFF;
      border-radius: 8px;
      padding: 6px 4px;
      text-align: center;
      font-size: 12px;
      font-weight: 500;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .mode-btn:hover {
      transform: translateY(-1px);
    }
    .mode-btn-bubble { border: 1.5px solid #F9A825; color: #F9A825; }
    .mode-btn-challenge { border: 1.5px solid #E53935; color: #E53935; }
    .mode-btn-retell { border: 1.5px solid #43A047; color: #43A047; }

    /* 模式按钮选中态 */
    .mode-btn.active { font-weight: 700; transform: scale(1.02); }
    .mode-btn-bubble.active { background: #FFF8E1; }
    .mode-btn-challenge.active { background: #FFEBEE; }
    .mode-btn-retell.active { background: #E8F5E9; }

    /* ===== 连续学习天数组件 ===== */
    .streak-card {
      background: linear-gradient(135deg, #43A047 0%, #66BB6A 100%);
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 11px;
      color: white;
      box-shadow: 0 2px 8px rgba(67,160,71,0.25);
      text-align: center;
    }
    .streak-title {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 6px;
      margin-bottom: 11px;
    }
    .streak-prefix { font-size: 14px; opacity: 0.95; }
    .streak-days { font-size: 34px; font-weight: 800; line-height: 1; }
    .streak-suffix { font-size: 14px; opacity: 0.95; }

    /* 本周7格 */
    .week-grid {
      display: flex;
      gap: 5px;
      justify-content: center;
      margin-bottom: 10px;
    }
    .day-cell {
      width: 30px;
      height: 30px;
      background: rgba(255,255,255,0.22);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
    }
    .day-cell.active {
      background: white;
      color: #43A047;
      font-weight: 700;
    }
    .day-cell.future {
      background: rgba(255,255,255,0.15);
      opacity: 0.45;
    }

    /* 血条进度 */
    .health-bar {
      background: rgba(0,0,0,0.12);
      height: 8px;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 4px;
    }
    .health-fill {
      height: 100%;
      background: #FFD93D;
      border-radius: 4px;
      box-shadow: 0 0 6px rgba(255,217,61,0.5);
      transition: width 0.3s ease;
    }
    .health-label {
      font-size: 10px;
      opacity: 0.85;
    }

    /* 压缩统计行 */
    .stats-row {
      display: flex;
      gap: 14px;
      font-size: 12px;
      color: #666;
      margin-bottom: 10px;
      padding: 6px 4px;
      border-bottom: 0.5px solid #C8E6C9;
      align-items: center;
    }
    .stat-dot {
      display: inline-block;
      width: 9px;
      height: 9px;
      border-radius: 2px;
      vertical-align: middle;
      margin-right: 2px;
    }

    /* 日历块 */
    .calendar-section {
      background: white;
      border-radius: 10px;
      padding: 12px;
      box-shadow: 0 1px 4px rgba(46,125,50,0.08);
    }
    .cal-title-row {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 10px;
    }
    .cal-title {
      font-size: 16px;
      font-weight: 600;
      color: #2E7D32;
    }

    /* ===== 日历块：移动端分页序号网格（Sprint 3 Mobile Enhancement）===== */

    /* 分页容器 */
    .cal-pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      gap: 6px;
    }
    .cal-page-btn {
      background: white;
      border: 1px solid #C8E6C9;
      border-radius: 8px;
      padding: 8px 14px;
      font-size: 14px;
      color: #2E7D32;
      cursor: pointer;
      font-weight: 600;
      transition: background 0.15s, transform 0.1s;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cal-page-btn:active {
      background: #C8E6C9;
      transform: scale(0.95);
    }
    .cal-page-btn:disabled {
      opacity: 0.35;
      cursor: default;
    }
    .cal-page-info {
      font-size: 14px;
      font-weight: 700;
      color: #2E7D32;
      text-align: center;
      flex: 1;
      min-width: 100px;
    }
    .cal-page-sub {
      font-size: 11px;
      color: #888;
      font-weight: 400;
    }

    /* 5列响应式网格（非日历，不需要星期头）*/
    .cal-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4px;
    }
    @media (min-width: 480px) {
      .cal-grid { grid-template-columns: repeat(6, 1fr); }
    }
    @media (min-width: 768px) {
      .cal-grid { grid-template-columns: repeat(7, 1fr); }
    }

    .cal-day {
      position: relative;
      background: #E8F5E9;
      border-radius: 8px;
      padding: 5px 3px;
      text-align: center;
      font-size: 10px;
      color: #999;
      cursor: default;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      line-height: 1.2;
      transition: transform 0.1s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      position: relative;
      border: 1px solid transparent;
    }
    .cal-day:active {
      transform: scale(0.93);
    }
    .cal-day-num {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: -0.2px;
    }
    .cal-day-scene {
      font-size: 10px;
      font-weight: 500;
      margin-top: 2px;
      word-break: keep-all;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      line-height: 1.1;
      color: #555;
    }

    /* 定位按钮 */
    .cal-jump-btn {
      display: block;
      width: 100%;
      margin-top: 10px;
      padding: 10px 16px;
      background: linear-gradient(135deg, #43A047, #66BB6A);
      color: white;
      border: none;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      min-height: 48px;
      transition: transform 0.1s, box-shadow 0.15s;
      box-shadow: 0 2px 6px rgba(67,160,71,0.25);
    }
    .cal-jump-btn:active {
      transform: scale(0.96);
      box-shadow: 0 1px 3px rgba(67,160,71,0.2);
    }

    /* ===== 泡泡主题视觉（Sprint 3 Mobile Enhancement）===== */

    /* 泡泡罐 - 成就感视觉化 */
    .bubble-jar {
      display: flex; align-items: center; justify-content: center;
      gap: 3px; flex-wrap: wrap; padding: 6px 8px; margin-bottom: 8px;
      background: linear-gradient(180deg, #E3F2FD 0%, #BBDEFB 100%);
      border-radius: 12px; min-height: 32px;
      border: 1px dashed #90CAF9;
    }
    .bubble-jar-label {
      font-size: 11px; color: #1565C0; font-weight: 600;
      margin-right: 2px; white-space: nowrap;
    }
    .jar-bubble {
      width: 12px; height: 12px; border-radius: 50%;
      display: inline-block; flex-shrink: 0;
      animation: floatInJar 2s ease-in-out infinite;
    }
    .jar-bubble:nth-child(odd)  { animation-delay: 0s; }
    .jar-bubble:nth-child(even) { animation-delay: 1s; }
    .jar-bubble:nth-child(3n)   { animation-delay: 0.5s; }
    @keyframes floatInJar {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    .jar-count {
      font-size: 18px; font-weight: 900; color: #1565C0;
      margin-left: 2px; min-width: 22px; text-align: center;
    }
    .jar-sub { font-size: 10px; color: #64B5F6; font-weight: 500; }

    /* 图例行 - 颜色含义说明（常驻显示，帮助新学员理解） */
    .cal-legend {
      display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 4px 4px 4px;
      font-size: 11px; color: #666; align-items: center; justify-content: center;
    }
    .cal-legend .legend-item {
      display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
    }
    .cal-legend .legend-dot {
      display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    }
    .cal-legend .legend-dot.green  { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6), #66BB6A); }
    .cal-legend .legend-dot.blue   { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6), #42A5F5); }
    .cal-legend .legend-dot.red    { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6), #EF5350); }
    .cal-legend .legend-dot.mid    { background: #FFC107; width: 8px; height: 8px; }
    .cal-legend .legend-dot.empty  { border: 1.5px dashed #bbb; background: transparent; }

    /* 统计行 - 当前页高/中/低 + 连续天数 */
    .cal-stats {
      display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 4px 6px 4px;
      font-size: 12px; color: #555; align-items: center; justify-content: center;
    }
    .cal-stats .stats-sep { color: #ddd; }

    /* 肥皂泡 - CSS纯代码 */
    .soap-bubble {
      position: absolute; border-radius: 50%; z-index: 1; pointer-events: none;
    }
    .soap-bubble.big {
      width: 28px; height: 28px;
      top: 50%; left: 50%; transform: translate(-50%, -70%);
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      display: flex; align-items: flex-start; justify-content: center;
      color: #fff; font-size: 9px; font-weight: 700; line-height: 1;
      text-shadow: 0 1px 2px rgba(0,0,0,0.35);
      padding-top: 1px;
      /* 动画已移除：floatBubble 在老设备（iPhone 5s）上造成严重 GPU 负担，
         666格 × 动画 = 渲染灾难。静态泡泡视觉效果足够。 */
    }
    .soap-bubble.big::after {
      content: ''; position: absolute; top: 7px; left: 7px;
      width: 7px; height: 3px; background: rgba(255,255,255,0.7);
      border-radius: 50%; transform: rotate(-30deg);
      pointer-events: none;
    }
    .soap-bubble.big.green  { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.25) 30%, #66BB6A 70%); }
    .soap-bubble.big.blue   { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.25) 30%, #42A5F5 70%); }
    .soap-bubble.big.red    { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.25) 30%, #EF5350 70%); }
    .soap-bubble.mid {
      width: 20px; height: 20px;
      top: 50%; left: 50%; transform: translate(-50%, -73%);
      background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.15) 35%, #FFE082 70%);
      box-shadow: 0 1px 3px rgba(0,0,0,0.06); opacity: 0.8;
    }
    .soap-bubble.mid::after {
      content: ''; position: absolute; top: 4px; left: 4px;
      width: 5px; height: 2px; background: rgba(255,255,255,0.6);
      border-radius: 50%; transform: rotate(-30deg);
    }
    .soap-bubble.small {
      width: 12px; height: 12px;
      top: 50%; left: 50%; transform: translate(-50%, -80%);
      border: 1.5px dashed #CCC; border-radius: 50%;
      background: transparent; opacity: 0.45;
    }
    @keyframes cardFadeIn {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* D序号+星星并排居中 */
    .cal-day-label-wrap {
      display: flex; align-items: center; justify-content: center;
      gap: 2px; z-index: 2; position: relative;
      font-size: 11px; font-weight: 800; color: #333;
      text-shadow: 0 1px 2px rgba(255,255,255,0.8);
      margin-top: 1px;
    }

    /* 完成态格子边框微调 */
    .cal-day.completed { border-color: #A5D6A7; }
    .cal-day.in-progress { border-color: #FFE082; }
    .cal-day.today {
      background: #C8E6C9;
      color: #2E7D32;
      font-weight: 600;
    }
    /* --- Sprint 3 S3-T1: 日历6态CSS（保留旧.studied作兼容） --- */
    .cal-day.studied, .cal-day.in-progress {
      background: #3b82f6; color: white; font-weight: 500;
      animation: calPulse 2s infinite;
    }
    /* 完成态方块：闯关=0时仅边框变化，背景保持默认；颜色只由 sq- 类控制 */
    .cal-day.completed { border-color: #A5D6A7; background: #E8F5E9; }
    .cal-day.completed.sq-green { background: #43A047; color: white; font-weight: 500; }
    .cal-day.completed.sq-blue  { background: #1E88E5; color: white; font-weight: 500; }
    .cal-day.completed.sq-red   { background: #E53935; color: white; font-weight: 500; }
    /* 金锁·已解锁(试用) */
    .cal-day.unlocked {
      background: #f0fdf4; color: #166534; font-weight: 600;
      border: 2px solid #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.3);
    }
    .cal-day.unlocked::after {
      content: '🔓'; font-size: 10px; position: absolute; top: 2px; right: 2px;
    }
    /* 灰钩·可选(试用有余量) — 加🔒视觉提示：可选但仍锁定 */
    .cal-day.selectable {
      background: #e5e7eb; cursor: pointer; border: 1px dashed #9ca3af;
    }
    .cal-day.selectable:hover { background: #d1d5db; }
    .cal-day.selectable::after {
      content: '🔒'; font-size: 9px; color: #6b7280;
      position: absolute; top: 0; right: 2px;
    }
    /* 灰锁·不可选(试用用完) */
    .cal-day.not-selectable {
      background: #f3f4f6; cursor: not-allowed; opacity: 0.55;
    }
    .cal-day.not-selectable::after {
      content: '🔒'; font-size: 10px; color: #9ca3af;
      position: absolute; top: 0; right: 2px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .cal-spinner { display: inline-block; }
    /* 付费默认·全开（保持原始浅绿格子样式） */
    .cal-day.default {
      background: #E8F5E9;
      border: 1px solid #C8E6C9;
    }
    .cal-day.default:hover { background: #C8E6C9; }
    @keyframes calPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.03); }
    }

    /* ===== Sprint 3 模态弹窗（选块确认 + 付费引导） ===== */
    .modal-overlay {
      display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5); z-index: 99999;
      align-items: center; justify-content: center;
    }
    .modal-overlay.show { display: flex; }
    .modal-box {
      background: #fff; border-radius: 14px; padding: 24px 20px;
      width: 85%; max-width: 340px; text-align: center;
      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    }
    .modal-box h3 { font-size: 17px; color: #1a1a2e; margin: 0 0 10px; }
    .modal-box p { font-size: 14px; color: #666; margin: 0 0 18px; line-height: 1.5; }
    .modal-box .day-highlight {
      display: inline-block; background: #e8f5e9; color: #2e7d32;
      padding: 2px 10px; border-radius: 10px; font-weight: 600; margin: 0 4px;
    }
    .modal-btns { display: flex; gap: 10px; justify-content: center; }
    .modal-btns button {
      padding: 10px 24px; border-radius: 22px; border: none;
      font-size: 14px; font-weight: 500; cursor: pointer;
    }
    .btn-cancel { background: #f3f4f6; color: #666; }
    .btn-primary { background: #43A047; color: #fff; }
    .btn-pay { background: #f59e0b; color: #fff; }

    /* ===== 头像图标（右上角悬浮） ===== */
    .avatar-wrapper {
      position: fixed;
      top: 12px;
      right: 12px;
      z-index: 100;
      cursor: pointer;
    }
    .avatar-mini {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.8);
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      background: #fff;
    }

    /* ===== 头像下拉菜单 ===== */
    .avatar-mask {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 200;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s, visibility 0.2s;
    }
    .avatar-mask.show {
      opacity: 1;
      visibility: visible;
    }

    .avatar-menu {
      position: fixed;
      top: 52px;
      right: 12px;
      width: 240px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      z-index: 300;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    }
    .avatar-menu.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    /* 用户信息区 */
    .menu-user-info {
      background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .menu-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid #07c160;
    }
    .menu-user-detail {
      flex: 1;
    }
    .menu-user-name {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
    .menu-user-status {
      font-size: 12px;
      color: #07c160;
      margin-top: 2px;
    }

    /* 菜单项 */
    .menu-items {
      padding: 8px 0;
    }
    .menu-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      font-size: 15px;
      color: #333;
      cursor: pointer;
      transition: background 0.15s;
    }
    .menu-item:active {
      background: #f5f5f5;
    }
    .menu-item-icon {
      font-size: 18px;
      margin-right: 12px;
      width: 24px;
      text-align: center;
    }
    .menu-item-text {
      flex: 1;
    }
    .menu-item-arrow {
      color: #ccc;
      font-size: 12px;
    }

    /* ===== 启动封面 Splash（仅本标签页首次进入显示一次） ===== */

    /* ===== 手机号绑定引导条 ===== */
    .bind-banner {
      display: flex; align-items: center; gap: 10px;
      margin: 0 16px 8px; padding: 12px 16px;
      background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
      border-radius: 12px; font-size: 14px; color: #2E7D32;
      border: 1px solid #A5D6A7; cursor: default;
    }
    .bind-banner .bind-icon { font-size: 20px; flex-shrink: 0; }
    .bind-banner .bind-text { flex: 1; line-height: 1.4; }
    .bind-banner .bind-btn {
      flex-shrink: 0; padding: 6px 14px; font-size: 13px; font-weight: 600;
      background: #43A047; color: #fff; border: none; border-radius: 8px; cursor: pointer;
    }
    /* 绑定弹窗 */
    .bind-modal-overlay {
      display: none; position: fixed; inset: 0; z-index: 100001;
      background: rgba(0,0,0,0.45); align-items: center; justify-content: center;
    }
    .bind-modal-overlay.active { display: flex; }
    .bind-modal {
      width: 90%; max-width: 360px; background: #fff; border-radius: 16px;
      padding: 24px 20px 20px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    }
    .bind-modal h3 { margin: 0 0 8px; font-size: 18px; color: #333; }
    .bind-modal .bind-desc { font-size: 13px; color: #888; margin-bottom: 18px; line-height: 1.5; }
    .bind-modal input[type=tel] {
      width: 100%; padding: 12px; font-size: 16px; border: 1px solid #ddd;
      border-radius: 10px; text-align: center; margin-bottom: 10px; box-sizing: border-box;
    }
    .bind-modal .bind-send { margin-bottom: 10px; }
    .bind-modal .bind-send .sms-btn {
      padding: 10px 20px; background: #43A047; color: #fff; border: none;
      border-radius: 8px; font-size: 14px; cursor: pointer; font-weight: 600;
    }
    .bind-modal .bind-send .sms-btn:disabled { background: #ccc; cursor: default; }
    .bind-modal input[type=text].code-input {
      width: 100%; padding: 12px; font-size: 18px; letter-spacing: 4px;
      border: 1px solid #ddd; border-radius: 10px; text-align: center;
      margin-bottom: 14px; box-sizing: border-box;
    }
    .bind-modal .bind-submit {
      width: 100%; padding: 12px; background: #07c160; color: #fff; border: none;
      border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer;
    }
    .bind-modal .bind-submit:disabled { background: #ccc; cursor: default; }
    .bind-modal .bind-cancel {
      margin-top: 10px; font-size: 13px; color: #999; cursor: pointer;
      background: none; border: none;
    }
    .bind-modal .bind-msg { font-size: 12px; margin-bottom: 8px; min-height: 18px; }
    .bind-modal .bind-msg.success { color: #43A047; }
    .bind-modal .bind-msg.error { color: #E53935; }
    .bind-modal .bind-merged {
      display: none; padding: 16px; background: #E8F5E9; border-radius: 10px; margin-top: 12px;
      font-size: 14px; color: #2E7D32; line-height: 1.6;
    }

    /* ===== 设置面板 ===== */
    .settings-overlay { display: none; position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,0.3); }
    .settings-overlay.show { display: flex; }
    .settings-panel { width: 100%; height: 100%; background: #f5f5f5; display: flex; flex-direction: column; overflow: hidden; }
    .settings-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #fff; border-bottom: 1px solid #e8e8e8; }
    .settings-back { background: none; border: none; font-size: 15px; color: #333; cursor: pointer; padding: 4px 8px; }
    .settings-title { font-size: 17px; font-weight: 600; color: #333; }
    .settings-body { flex: 1; overflow-y: auto; padding: 0; }
    .settings-menu { padding: 8px 0; }
    .settings-section-title { padding: 12px 16px 6px; font-size: 13px; color: #999; }
    .settings-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
    .settings-item:active { background: #f5f5f5; }
    .settings-item-icon { font-size: 18px; flex-shrink: 0; }
    .settings-item-text { flex: 1; font-size: 15px; color: #333; }
    .settings-item-hint { font-size: 13px; color: #999; margin-right: 4px; }
    .settings-item-arrow { font-size: 18px; color: #ccc; }
    .settings-item-danger .settings-item-text { color: #e53935; }
    .settings-page { display: none; padding: 0; }
    .settings-page.active { display: block; }
    .settings-page-header { display: flex; align-items: center; padding: 14px 16px; background: #fff; border-bottom: 1px solid #e8e8e8; font-size: 15px; color: #333; cursor: pointer; }
    .settings-avatar-area { display: flex; flex-direction: column; align-items: center; padding: 32px 16px 20px; background: #fff; margin-bottom: 8px; }
    .settings-avatar-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid #e8e8e8; }
    .settings-avatar-label { margin-top: 8px; font-size: 12px; color: #999; }
    .settings-field { padding: 14px 16px; background: #fff; display: flex; align-items: center; border-bottom: 1px solid #f0f0f0; }
    .settings-field-label { font-size: 15px; color: #333; width: 56px; flex-shrink: 0; }
    .settings-field-input { flex: 1; border: none; font-size: 15px; color: #333; outline: none; padding: 4px 0; background: transparent; }
    .settings-save-btn { display: block; margin: 20px 16px; width: calc(100% - 32px); padding: 14px; background: #07c160; color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; }
    .settings-save-btn:active { opacity: 0.9; }
    .settings-account-list { background: #fff; }
    .settings-account-item { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid #f0f0f0; }
    .settings-account-label { font-size: 15px; color: #333; width: 72px; flex-shrink: 0; }
    .settings-account-value { flex: 1; font-size: 14px; color: #999; text-align: right; }
    .settings-account-arrow { font-size: 16px; color: #ccc; margin-left: 8px; }

    /* ===== 服务号二维码弹窗 ===== */
    .qr-overlay { display: none; position: fixed; inset: 0; z-index: 100001; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
    .qr-overlay.show { display: flex; }
    .qr-card { width: 280px; background: #fff; border-radius: 16px; padding: 28px 24px 20px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
    .qr-card-title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 6px; }
    .qr-card-sub { font-size: 13px; color: #999; margin-bottom: 20px; }
    .qr-card-img-wrap { width: 200px; height: 200px; margin: 0 auto 16px; border: 1px solid #eee; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .qr-card-img { width: 100%; height: 100%; object-fit: contain; }
    .qr-card-close { padding: 10px 40px; background: #f5f5f5; border: none; border-radius: 8px; font-size: 14px; color: #666; cursor: pointer; margin-top: 4px; }

/* ========= CSS Design Tokens ========= */
    :root {
      --green-50:  #F0F9F0;
      --green-100: #DCF2DC;
      --green-200: #B8E4B8;
      --green-300: #86D086;
      --green-400: #5FB878;
      --green-500: #4CAF50;
      --green-600: #43A047;
      --green-700: #388E3C;
      --green-800: #2E7D32;
      --green-900: #1B5E20;

      --yellow:    #FFD43B;
      --yellow-bg: #FFF8E1;
      --red:       #FF6B6B;
      --red-bg:    #FFEBEE;
      --blue:      #4DABF7;
      --blue-bg:   #E3F2FD;
      --white:     #FFFFFF;
      --gray-50:   #F9FAFB;
      --gray-100:  #F3F4F6;
      --gray-200:  #E5E7EB;
      --gray-300:  #D1D5DB;
      --gray-400:  #9CA3AF;
      --gray-500:  #6B7280;
      --gray-600:  #4B5563;
      --gray-700:  #374151;
      --gray-800:  #1F2937;
      --gray-900:  #111827;

      --space-1: 4px;  --space-2: 8px;
      --space-3: 12px; --space-4: 16px;
      --space-5: 20px; --space-6: 24px;
      --space-8: 32px; --space-10: 40px;
      --space-12: 48px; --space-16: 64px;

      --font-xs: 11px;  --font-sm: 12px;
      --font-base: 14px; --font-md: 16px;
      --font-lg: 18px;  --font-xl: 22px;
      --font-2xl: 26px; --font-3xl: 32px;

      --radius-sm: 8px;  --radius-md: 12px;
      --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px;

      --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
      --shadow-md: 0 4px 12px rgba(95,184,120,0.10);
      --shadow-lg: 0 8px 24px rgba(95,184,120,0.13);
    }

    *, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
    html { font-size: 16px; -webkit-text-size-adjust: 100%; }
    body {
      font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #E8F5E9 !important;  /* ✅ 修改6：和 index.html 完全一致的护眼绿 */
      color: var(--gray-800);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;  /* ✅ 修改2：修复毛边 */
      padding-bottom: env(safe-area-inset-bottom);
      min-height: 100vh;
    }
    a { text-decoration: none; color: inherit; }
    button { border: none; background: none; cursor: pointer; font-family: inherit; }
    img { max-width: 100%; display: block; }

    /* ========= Header ========= */
    .header {
      position: sticky; top:0; z-index:100;
      display: flex; align-items: center; justify-content: space-between;
      height: 56px; padding: 0 var(--space-4);
      background: linear-gradient(135deg, var(--green-500) 0%, var(--green-400) 100%);
      color: var(--white);
      box-shadow: 0 2px 8px rgba(72,184,101,0.15);
    }
    .header-left { display: flex; align-items: center; gap: var(--space-2); }
    .header-logo-img {
      width: 44px; height: 44px; border-radius: var(--radius-md);
      background: rgba(255,255,255,0.15); backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center; overflow: hidden;
    }
    .header-logo-img img { width: 40px; height: 40px; object-fit: contain; }
    .header-title-group { display: flex; flex-direction: column; gap:1px; }
    .header-title { font-size: var(--font-xl); font-weight: 900; letter-spacing: 0.5px; line-height: 1.2; }
    .header-subtitle { font-size: var(--font-xs); color: rgba(255,255,255,0.75); font-weight: 500; letter-spacing: 1.5px; line-height: 1; }
    .header-right { display: flex; align-items: center; gap: var(--space-3); }
    .header-avatar-btn {
      width: 38px; height: 38px; border-radius: var(--radius-full);
      background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);
      border: 2px solid rgba(255,255,255,0.3);
      display: flex; align-items: center; justify-content: center; overflow: hidden;
      transition: opacity 0.2s, transform 0.2s;
    }
    .header-avatar-btn:hover { background: rgba(255,255,255,0.3); }
    .header-avatar-btn img { width: 34px; height: 34px; object-fit: cover; border-radius: var(--radius-full); }
    .header-task-btn {
      position: relative;
      width: 38px; height: 38px; border-radius: var(--radius-full);
      background: #E8F5E9;
      border: 2px solid #C8E6C9;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; cursor: pointer; color: #2E7D32;
      transition: background 0.2s, transform 0.2s;
    }
    .header-task-btn:active { background: #C8E6C9; transform: scale(0.95); }
    .task-tooltip {
      position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
      margin-top: 6px; padding: 5px 10px; border-radius: 8px;
      background: rgba(0,0,0,0.75); color: #fff;
      font-size: 12px; font-weight: 500; white-space: nowrap;
      pointer-events: none; opacity: 0;
      transition: opacity 0.15s;
    }
    .header-task-btn:active .task-tooltip { opacity: 1; }

    /* ========= Banner ========= */
    .banner {
      position: relative; overflow: hidden;
      /* ✅ 修改6：渐变终点改为 #E8F5E9，和 index.html 护眼绿无缝衔接 */
      background: linear-gradient(160deg, #4CAF50 0%, #5FB878 30%, #7BCA92 60%, #E8F5E9 100%);
      padding: var(--space-8) var(--space-4) 36px;
      display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
    }
    .banner::before {
      content: ''; position: absolute; inset: -50%;
      background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
      animation: bannerShine 8s ease-in-out infinite;
    }
    @keyframes bannerShine { 0%,100%{ transform: translateX(-100%) rotate(45deg); } 50%{ transform: translateX(100%) rotate(45deg); } }

    .banner-circle { position: absolute; border-radius: var(--radius-full); opacity: 0.06; background: var(--white); animation: circleFloat 6s ease-in-out infinite; }
    .banner-circle.c1 { width:120px; height:120px; top:-30px; right:-20px; animation-delay:0s; }
    .banner-circle.c2 { width:80px; height:80px; bottom:20px; left:-10px; animation-delay:2s; }
    .banner-circle.c3 { width:50px; height:50px; top:40%; left:60%; animation-delay:4s; }
    @keyframes circleFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }

    .banner-dot { position: absolute; width:4px; height:4px; border-radius: var(--radius-full); background: rgba(255,255,255,0.25); animation: dotBlink 3s ease-in-out infinite; }
    .banner-dot.d1 { top:20%; right:25%; animation-delay:0s; }
    .banner-dot.d2 { top:60%; right:10%; animation-delay:1s; }
    .banner-dot.d3 { bottom:30%; left:15%; animation-delay:2s; }
    @keyframes dotBlink { 0%,100%{ opacity:0.25; transform:scale(1); } 50%{ opacity:0.7; transform:scale(1.5); } }

    .banner-top-row {
      position: relative; z-index:2;
      display: flex; align-items: center; justify-content: center;
      gap: var(--space-4); width: 100%;
      max-width: 420px;
    }
    .banner-slogan-area { flex:1; display:flex; flex-direction:column; gap:var(--space-3); min-width:0; }
    
    /* ✅ 修改2：SVG文字毛边修复 — 启用字体平滑 + 去除stroke */
    .slogan-svg { width:100%; max-width:260px; height:auto; }
    .slogan-svg text { 
      font-family: 'Fredoka', 'Noto Sans SC', sans-serif; 
      font-smooth: always;  /* 旧版兼容 */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ✅ 修改1："如何学英语" → "How to get good at english?" */
    .banner-video-btn {
      display: inline-flex; align-items: center; gap: var(--space-2);
      padding: var(--space-2) var(--space-4);
      background: var(--white); color: var(--green-700);
      font-size: var(--font-sm); font-weight: 700;
      border-radius: var(--radius-full);
      box-shadow: 0 2px 8px rgba(0,0,0,0.10); transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
      align-self: flex-start;
    }
    .banner-video-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    .banner-video-btn svg { width:16px; height:16px; }

    /* 卡通耳麦 */
    .banner-mic-wrap { position:relative; width:110px; height:110px; flex-shrink:0; }
    .banner-mic-svg {
      width:100%; height:100%;
      animation: micBounce 3s ease-in-out infinite;
      filter: drop-shadow(0 4px 12px rgba(255,212,59,0.25));
    }
    @keyframes micBounce { 0%,100%{ transform: translateY(0) rotate(0deg); } 25%{ transform: translateY(-6px) rotate(-2deg); } 75%{ transform: translateY(-3px) rotate(2deg); } }
    .mic-sound-ring {
      position:absolute; inset:-8px; border-radius:50%;
      border:2px solid rgba(255,212,59,0.30);
      animation: soundRing 2.2s ease-out infinite; pointer-events:none;
    }
    .mic-sound-ring.r2 { animation-delay: 0.7s; }
    @keyframes soundRing { 0%{ transform:scale(0.9); opacity:0.50; } 100%{ transform:scale(1.5); opacity:0; } }
    .mic-sparkle {
      position:absolute; width:6px; height:6px; border-radius:50%;
      background: rgba(255,255,255,0.65);
      animation: sparkle 2s ease-in-out infinite; pointer-events:none;
    }
    .mic-sparkle.s1 { top:8px; right:12px; animation-delay:0s; }
    .mic-sparkle.s2 { bottom:18px; left:6px; animation-delay:1.1s; }
    @keyframes sparkle { 0%,100%{ opacity:0; transform:scale(0.5); } 50%{ opacity:1; transform:scale(1.2); } }

    /* ✅ 修改6：波浪颜色改为 #E8F5E9，完美衔接 */
    .banner-wave {
      position:absolute; bottom:-1px; left:0;
      width:100%; height:36px; z-index:3;
    }

    /* ========= 用户信息栏（动态生成，非静态图片）========= */
    /* ✅ 修改5：用户身份和名字是动态生成的，不是死图片 */
    .user-info-bar {
      display: none; align-items:center; gap:var(--space-3);
      padding: var(--space-3) var(--space-4);
      background: var(--white); border-bottom:1px solid var(--gray-200);
    }
    @media (max-width:767px){ .user-info-bar{ display:flex; } }
    .user-info-avatar {
      width:36px; height:36px; border-radius:var(--radius-full);
      background:var(--green-100); display:flex; align-items:center; justify-content:center;
      font-size:18px; overflow:hidden;
    }
    .user-info-avatar img{ width:100%; height:100%; object-fit:cover; }
    .user-info-text{ flex:1; }
    .user-info-name{ font-size:var(--font-base); font-weight:700; color:var(--gray-800); }
    .user-info-role{ font-size:var(--font-xs); color:var(--gray-500); }
    .user-info-logout {
      font-size:var(--font-xs); color:var(--gray-400);
      padding:var(--space-1) var(--space-2); border:1px solid var(--gray-200);
      border-radius:var(--radius-sm); transition:color 0.2s, border-color 0.2s;
    }
    .user-info-logout:hover{ color:var(--red); border-color:var(--red); }

    /* ========= 积分折叠面板 ========= */
    .score-section {
      background:var(--white); margin:var(--space-2) var(--space-4) 0;
      border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden;
      border: 1px solid var(--green-100);
    }
    .score-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:var(--space-4); cursor:pointer; user-select:none;
      -webkit-tap-highlight-color:transparent; transition:background 0.2s;
    }
    .score-header:active{ background:var(--gray-50); }
    
    /* ✅ 修改3："我的积分" → "我的量变" */
    .score-total-label{ font-size:var(--font-sm); color:var(--gray-500); }
    .score-total-value{ font-size:var(--font-2xl); font-weight:900; color:var(--green-600); line-height:1; }
    .score-arrow{ font-size:12px; color:var(--gray-400); transition:transform 0.3s; }
    .score-arrow.open{ transform:rotate(180deg); }

    /* ========= 积分展开区域 ========= */
    .score-detail{ max-height:0; overflow:hidden; transition:max-height 0.35s ease, padding 0.35s ease; padding:0 var(--space-4); }
    .score-detail.open{ max-height:360px; padding:0 var(--space-4) var(--space-4); }
    
    .score-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); }
    
    .score-card{
      border-radius:var(--radius-md); padding:var(--space-3); text-align:center;
      position: relative; overflow: hidden;
    }
    .score-card::before {
      content: ''; position: absolute; top: -20px; right: -20px;
      width: 60px; height: 60px; border-radius: 50%; opacity: 0.15;
    }
    
    /* 泡泡积分 - 黄色系 */
    .score-card.yellow {
      background: linear-gradient(135deg, #FFF8E1, #FFECB3);
      border: 1px solid #FFE082;
    }
    .score-card.yellow::before { background: #FFD43B; }
    .score-card.yellow .score-card-icon { color: #F9A825; }
    .score-card.yellow .score-card-value { color: #F57F17; }
    
    /* 闯关积分 - 红色系 */
    .score-card.red {
      background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
      border: 1px solid #EF9A9A;
    }
    .score-card.red::before { background: #FF6B6B; }
    .score-card.red .score-card-icon { color: #E53935; }
    .score-card.red .score-card-value { color: #C62828; }
    
    /* 复述积分 - 绿色系 */
    .score-card.green {
      background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
      border: 1px solid #A5D6A7;
    }
    .score-card.green::before { background: #4CAF50; }
    .score-card.green .score-card-icon { color: #43A047; }
    .score-card.green .score-card-value { color: #2E7D32; }
    
    .score-card-icon{
      font-size:26px; margin-bottom:var(--space-1);
      position: relative; z-index: 1;
    }
    .score-card-label{
      font-size:var(--font-xs); color:var(--gray-600); margin-bottom:2px;
      position: relative; z-index: 1; font-weight: 500;
    }
    .score-card-value{
      font-size:var(--font-lg); font-weight:800;
      position: relative; z-index: 1;
    }
    
    /* ✅ 修改3："分享积分海报" → "分享量变积分" */
    .score-share-btn {
      display:flex; align-items:center; justify-content:center; gap:var(--space-2);
      width:100%; margin-top:var(--space-3); padding:var(--space-3);
      background:linear-gradient(135deg, var(--green-500), var(--green-600));
      color:var(--white); font-size:var(--font-base); font-weight:700;
      border-radius:var(--radius-md); box-shadow:0 2px 8px rgba(95,184,120,0.25);
      transition:opacity 0.2s, transform 0.2s;
    }
    .score-share-btn:active{ transform:scale(0.98); }
    .score-share-btn .share-icon {
      width: 18px; height: 18px;
    }
/* ========= 响应式 ========= */
    @media (min-width:500px){
    }
    @media (min-width:768px){
      .banner-top-row{ max-width:560px; }
      .banner-mic-wrap{ width:130px; height:130px; }
      .slogan-svg{ max-width:320px; }
      .banner{ padding:48px var(--space-6) 60px; }
      .score-section{ margin:var(--space-6) var(--space-6) 0; }
    }
    @media (min-width:1024px){
      .banner-top-row{ max-width:620px; }
      .banner-mic-wrap{ width:150px; height:150px; }
      .slogan-svg{ max-width:360px; }
    }
    @media (max-width:380px){
      .header-title{ font-size:var(--font-lg); }
      .header-subtitle{ font-size:10px; }
      .banner{ padding:24px var(--space-4) 44px; }
      .banner-top-row{ gap:var(--space-3); }
      .banner-mic-wrap{ width:90px; height:90px; }
      .slogan-svg{ max-width:200px; }
    }
    @media (max-width:340px){
      .banner-top-row{ flex-direction:column; text-align:center; }
      .banner-mic-wrap{ width:80px; height:80px; }
      .banner-video-btn{ align-self:center; }
    }

    /* ===== V4 模式选择悬浮层（卡片式，点击日历块时弹出）===== */
    .mode-overlay {
      display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5); z-index: 99999;
      align-items: flex-end; justify-content: center;
    }
    .mode-overlay.show { display: flex; }
    .mode-panel {
      background: white; border-radius: 20px 20px 0 0; padding: 20px 16px 24px;
      width: 100%; max-width: 500px; text-align: center;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
      animation: slideUp 0.25s ease-out;
    }
    @keyframes slideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }
    .mode-panel-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 4px;
    }
    .mode-panel-title { font-size: 18px; font-weight: bold; color: #333; }
    .mode-panel-close {
      width: 28px; height: 28px; border-radius: 50%; background: #f5f5f5;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; color: #999; cursor: pointer; border: none;
    }
    .mode-panel-close:active { background: #e0e0e0; }

    /* 推荐语（顶部显眼位置） */
    .mode-tip {
      font-size: 13px; color: #07c160; font-weight: bold;
      text-align: left; margin: 8px 0 14px 2px;
      padding: 8px 10px; background: #f0fef5; border-radius: 8px;
    }

    /* 卡片列表 */
    .mode-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }

    /* 单张卡片 */
    .mode-card {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 14px; border-radius: 14px;
      background: #fff; border: 1.5px solid #e8e8e8;
      cursor: pointer; transition: all 0.2s;
    }
    .mode-card:active { transform: scale(0.98); }
    /* 选中状态：绿色边框+浅绿背景 */
    .mode-card.selected {
      border: 2px solid #07c160;
      background: linear-gradient(135deg, #f0fef5, #e8f5e9);
    }
    .mode-card-icon { font-size: 28px; width: 36px; text-align: center; flex-shrink: 0; }
    .mode-card-body { flex: 1; text-align: left; }
    .mode-card-name { font-size: 14px; font-weight: bold; color: #333; }
    .mode-card-desc { font-size: 11px; color: #888; margin-top: 2px; }

    /* 按钮：默认灰色（不可点） */
    .mode-card-btn {
      flex-shrink: 0; height: 32px; padding: 0 14px;
      background: #ccc; color: #fff; border: none;
      border-radius: 16px; font-size: 12px; font-weight: bold; cursor: default;
      transition: all 0.2s;
    }
    /* 按钮：绿色激活（可点） */
    .mode-card-btn.active {
      background: #07c160; cursor: pointer;
    }
    .mode-card-btn.active:active { opacity: 0.85; }

    /* 泡泡按钮略大 */
    #modeBtnBubble { height: 36px; padding: 0 18px; font-size: 13px; border-radius: 18px; }

    .mode-badge {
      font-size: 11px; padding: 2px 8px; border-radius: 8px;
      background: #07c160; color: white; margin-left: 4px;
    }

    /* ===== 横屏适配（V4 恢复「学习建议横屏」） =====
       根因：manifest 的 "orientation":"portrait" 会强制已安装 PWA 锁死竖屏。
       此处仅对「横屏 + 矮屏手机」生效（max-height:540px 排除桌面/平板），
       把学习主内容限宽居中、压缩主视觉上下留白，横过来也精致、不拉伸。 */
    @media (orientation: landscape) and (max-height: 540px) {
      .score-section,
      .bind-banner,
      .main-content {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
      }
      .banner { padding-top: 14px; padding-bottom: 18px; }
    }