* { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --sky: #7DD3FC;
      --sky-light: #E0F7FF;
      --candy: #FDA4AF;
      --candy-light: #FFE4E8;
      --lemon: #FDE047;
      --lemon-light: #FEF9C3;
      --mint: #86EFAC;
      --mint-light: #DCFCE7;
      --grape: #C4B5FD;
      --grape-light: #EDE9FE;
      --cream: #FFFDF5;
      --chocolate: #5D4037;
      --chocolate-light: #8D6E63;
      --shadow: rgba(93, 64, 55, 0.12);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
                   "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
                   "Noto Sans SC", Arial, sans-serif;
      background: var(--cream);
      color: var(--chocolate);
      line-height: 1.6;
      font-size: 15px;
      -webkit-font-smoothing: antialiased;
    }
    .container { max-width: 720px; margin: 0 auto; padding: 0 18px; }

    /* 顶部导航 */
    .navbar {
      background: linear-gradient(135deg, var(--sky) 0%, #60A5FA 100%);
      padding: 7px 18px;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 4px 16px rgba(96, 165, 250, 0.25);
      /* 固定高度：首页（铃铛 44px）与学习/玩会/我的（纯文字）内容不同也保持同一高度 */
      height: 58px;
      box-sizing: border-box;
    }
    .navbar .logo {
      font-size: 22px;
      font-weight: 800;
      color: #fff;
      text-shadow: 2px 2px 0 rgba(93, 64, 55, 0.15);
      letter-spacing: 1px;
      /* 绝对定位居中：标题相对整条导航居中，不受左右按钮宽度差影响 */
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: calc(100% - 240px);
    }
    .navbar .user-info {
      font-size: 14px;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
    }
    .navbar .notification-home-button {
      position: relative; margin-left: auto; flex: 0 0 40px; width: 40px; height: 40px;
      display: grid; place-items: center; padding: 0; border: 0; color: #fff;
      border-radius: 12px; background: transparent; cursor: pointer;
    }
    .notification-home-icon { display: block; width: 25px; height: 25px; }
    .notification-home-button:active { transform: scale(.95); }
    /* 有未读时铃铛轻晃 + 角标跳一下，提醒但不打扰 */
    .notification-home-button.has-unread .notification-home-icon {
      transform-origin: 50% 12%; animation: bell-swing 1.8s ease-in-out infinite;
    }
    .notification-home-button.has-unread .notification-home-badge {
      animation: badge-pop 1.8s ease-out infinite;
    }
    @keyframes bell-swing {
      0%, 55%, 100% { transform: rotate(0deg); }
      62% { transform: rotate(9deg); }
      70% { transform: rotate(-7deg); }
      78% { transform: rotate(5deg); }
      86% { transform: rotate(-3deg); }
      93% { transform: rotate(1deg); }
    }
    @keyframes badge-pop {
      0%, 55%, 100% { transform: scale(1); }
      66% { transform: scale(1.22); }
      78% { transform: scale(.96); }
      88% { transform: scale(1.06); }
    }
    @media (prefers-reduced-motion: reduce) {
      .notification-home-button.has-unread .notification-home-icon,
      .notification-home-button.has-unread .notification-home-badge { animation: none; }
    }
    .notification-home-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
    .notification-home-badge {
      position: absolute; top: 0; right: 0; min-width: 20px; height: 20px; padding: 0 4px;
      display: grid; place-items: center; border-radius: 11px; background: #DC2626; color: #fff;
      border: 2px solid #fff; font-size: 11px; line-height: 1; font-weight: 800; box-sizing: border-box;
    }
    .notification-home-badge[hidden] { display: none; }
    .home-announcement-ribbon {
      display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px;
      margin-top: 14px; padding: 10px 14px; border: 0; border-radius: 12px;
      background: #EFF6FF; color: #64748B; text-align: left; font-family: inherit; cursor: pointer;
    }
    .home-announcement-label { display: flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: #2563EB; }
    .home-announcement-dot { width: 6px; height: 6px; border-radius: 50%; background: #DC2626; }
    .home-announcement-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
    .home-announcement-entry { flex-shrink: 0; font-size: 12px; color: #2563EB; }
    .home-announcement-ribbon:focus-visible { outline: 2px solid #60A5FA; outline-offset: 3px; }
    .notification-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .notification-toolbar [hidden] { display: none; }
    .notification-filters { display: flex; align-items: center; gap: 8px; }
    .notification-filter { min-height: 44px; padding: 10px 14px; border: 0; border-radius: 12px; background: transparent; color: #64748B; font: inherit; font-size: 13px; cursor: pointer; }
    .notification-filter.active { background: #DBEAFE; color: #1D4ED8; font-weight: 700; }
    .notification-count { margin: 14px 0; color: #64748B; font-size: 12px; }
    .notification-card { display: flex; gap: 12px; width: 100%; padding: 18px; margin-bottom: 12px; border: 0; border-radius: var(--radius-lg); background: #fff; text-align: left; font: inherit; color: var(--chocolate); box-shadow: 0 4px 16px rgba(93,64,55,.08); cursor: pointer; }
    .notification-kind { flex-shrink: 0; font-size: 22px; }
    .notification-body { flex: 1; min-width: 0; }
    .notification-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .notification-title-row h2 { min-width: 0; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
    .notification-read { flex-shrink: 0; padding-top: 3px; color: #64748B; font-size: 11px; }
    .notification-unread { flex-shrink: 0; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: #DC2626; }
    .notification-summary-badge { flex-shrink: 0; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #DC2626; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
    .notification-body > p { margin: 7px 0 10px; color: #8D6E63; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
    .notification-card:focus-visible, .notification-filter:focus-visible { outline: 2px solid #60A5FA; outline-offset: 3px; }
    /* 公告页会和固定底部导航同时存在，底部留白必须能让评论表单完整滚到导航上方。 */
    .announcement-page { padding: 20px 0 calc(112px + env(safe-area-inset-bottom, 0px)); }
    .announcement-intro {
      display: flex; align-items: center; gap: 12px;
      background: #EFF6FF; border-radius: var(--radius-lg); padding: 16px; color: var(--chocolate);
    }
    .announcement-intro > span { font-size: 32px; }
    .announcement-intro b { font-size: 18px; }
    .announcement-intro p, .announcement-form-hint {
      margin-top: 4px; font-size: 13px; line-height: 1.65; color: var(--chocolate-light);
    }
    .announcement-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
    .announcement-toolbar > span { color: var(--chocolate-light); font-size: 13px; font-weight: 700; }
    .announcement-card {
      display: block; width: 100%; padding: 18px; margin-bottom: 12px; text-align: left;
      font: inherit; color: var(--chocolate); background: #fff; border: 0;
      border-radius: var(--radius-lg); box-shadow: 0 4px 16px rgba(93,64,55,.08); cursor: pointer;
    }
    .announcement-card:focus-visible { outline: 3px solid #60A5FA; outline-offset: 3px; }
    .announcement-card-head { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
    .announcement-card-head h2 { font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; min-width: 0; }
    .announcement-read-tag { flex-shrink: 0; border-radius: 10px; background: #DBEAFE; color: #1D4ED8; padding: 4px 8px; font-size: 11px; font-weight: 800; }
    .announcement-read-tag.read { background: transparent; color: #64748B; padding-right: 0; font-weight: 600; }
    .announcement-preview {
      margin: 10px 0 12px; font-size: 14px; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .announcement-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--chocolate-light); font-size: 12px; line-height: 1.7; }
    .announcement-detail-card { border: 0; border-radius: var(--radius-lg); background: #fff; padding: 22px 20px; box-shadow: 0 4px 16px rgba(93,64,55,.08); }
    .announcement-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
    .announcement-detail-card h1 { min-width: 0; font-size: 22px; line-height: 1.5; overflow-wrap: anywhere; }
    .announcement-content { margin: 22px 0; font-size: 16px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
    .announcement-like {
      display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
      padding: 8px 14px; border: 0; border-radius: 50px; background: #FFF1F2;
      color: #9F1239; font: inherit; font-size: 13px; font-weight: 800;
      cursor: pointer; transition: background .2s, transform .15s;
    }
    .announcement-like:hover, .announcement-like.liked { background: #FFE4E8; color: #E11D48; }
    .announcement-like:active { transform: scale(.96); }
    .announcement-like:disabled { cursor: wait; opacity: .65; }
    .announcement-comments { margin-top: 26px; padding-top: 20px; border-top: 1px solid #E2E8F0; }
    .announcement-comments-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .announcement-comments-head h2 { font-size: 16px; }
    .announcement-comments-head span, .announcement-comment-head time { color: #94A3B8; font-size: 12px; }
    .announcement-comment-card { padding: 12px 0; border-bottom: 1px solid #F1F5F9; }
    .announcement-comment-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .announcement-comment-head strong { color: var(--chocolate); font-size: 13px; }
    .announcement-comment-head time { margin-left: auto; white-space: nowrap; }
    .announcement-comment-delete { padding: 2px 0; border: 0; background: transparent; color: #94A3B8; font: inherit; font-size: 12px; cursor: pointer; }
    .announcement-comment-delete:hover { color: #B91C1C; }
    .announcement-comment-card p { margin-top: 6px; color: #475569; font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
    .announcement-comments-empty { padding: 12px 0; color: #94A3B8; font-size: 13px; }
    .announcement-comment-form { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; }
    .announcement-comment-form textarea { flex: 1; min-height: 76px; resize: vertical; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 10px; color: var(--chocolate); font: inherit; font-size: 13px; line-height: 1.6; }
    .announcement-comment-form textarea:focus { border-color: #60A5FA; outline: 2px solid #DBEAFE; }
    .announcement-comment-form .announcement-action { flex-shrink: 0; }
    @media (max-width: 480px) {
      .announcement-comment-form { align-items: stretch; flex-direction: column; }
      .announcement-comment-form .announcement-action { width: 100%; }
    }
    .announcement-read-status { flex-shrink: 0; padding-top: 7px; color: #64748B; font-size: 12px; line-height: 1.6; white-space: nowrap; }
    .announcement-read-feedback { margin-top: 12px; color: #64748B; font-size: 12px; line-height: 1.7; }
    .announcement-manage-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #E2E8F0; }
    .announcement-action {
      display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
      padding: 10px 14px; border: 0; border-radius: 12px; background: #EFF6FF; color: #2563EB;
      font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.4;
      white-space: nowrap; cursor: pointer;
    }
    .announcement-action:hover { background: #DBEAFE; }
    .announcement-action:active { transform: scale(.98); }
    .announcement-action:focus-visible { outline: 2px solid #60A5FA; outline-offset: 3px; }
    .announcement-action.announcement-delete { color: #B91C1C; background: #FFF1F2; }
    .announcement-action.announcement-delete:hover { background: #FFE4E6; }
    .announcement-form-hint { margin: 0 0 18px; }
    .announcement-form-page textarea { min-height: 260px; }
    .announcement-empty-help { font-size: 13px; margin-top: 8px; }

    /* 登录页 */
    .login-page {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 24px;
      background: radial-gradient(circle at 20% 20%, var(--sky-light) 0%, transparent 35%),
                  radial-gradient(circle at 80% 80%, var(--candy-light) 0%, transparent 35%),
                  var(--cream);
    }
    .login-card {
      background: #fff;
      border-radius: var(--radius-xl);
      padding: 38px 28px;
      width: 100%;
      max-width: 380px;
      box-shadow: 0 12px 40px var(--shadow), 0 6px 0 #F3E8FF;
      border: 4px solid var(--grape-light);
      position: relative;
      overflow: hidden;
    }
    .login-card::before {
      content: "✏️";
      position: absolute;
      top: -18px;
      right: -18px;
      font-size: 64px;
      opacity: 0.18;
      transform: rotate(15deg);
    }
    .login-card h1 {
      font-size: 32px;
      font-weight: 800;
      color: var(--chocolate);
      text-align: center;
      margin-bottom: 6px;
      letter-spacing: 2px;
    }
    .login-card .subtitle {
      font-size: 14px;
      color: var(--chocolate-light);
      text-align: center;
      margin-bottom: 28px;
      font-weight: 600;
    }
    .form-group { margin-bottom: 18px; }
    .form-group label {
      display: block;
      font-size: 14px;
      color: var(--chocolate);
      margin-bottom: 8px;
      font-weight: 700;
      padding-left: 6px;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      padding: 14px 16px;
      border: 3px solid var(--sky-light);
      border-radius: var(--radius-md);
      font-size: 15px;
      font-family: inherit;
      background: #fff;
      transition: all 0.2s;
      color: var(--chocolate);
      outline: none;
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--sky);
      box-shadow: 0 0 0 5px var(--sky-light);
    }
    .form-group textarea { min-height: 120px; resize: vertical; }
    .form-row { display: flex; gap: 14px; }
    .form-row .form-group { flex: 1; }
    .form-group label .label-sub { font-size: 11px; font-weight: 600; color: var(--chocolate-light); }
    .end-date-clear {
      display: inline-block;
      margin-top: 6px;
      font-size: 12px;
      font-weight: 700;
      color: #0369A1;
      text-decoration: underline;
      cursor: pointer;
      padding-left: 6px;
    }

    /* 科目选择 chip：原生 select 展开样式无法定制，换成与全站一致的胶囊选择组 */
    .subject-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .subject-chip {
      border: 3px solid var(--sky-light); background: #fff; border-radius: 50px;
      padding: 8px 14px; min-height: 40px; font-family: inherit; font-weight: 800;
      font-size: 14px; color: var(--chocolate); cursor: pointer;
      touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    }
    .subject-chip:active { transform: translateY(2px); }
    .subject-chip.on { background: var(--sky); border-color: #0284C7; }

    /* 日期选择：原生 date 的日历弹层是系统样式，改为全站风格的自定义日历 */
    .date-field {
      width: 100%; display: flex; justify-content: space-between; align-items: center;
      padding: 14px 16px; border: 3px solid var(--sky-light); border-radius: var(--radius-md);
      font-size: 15px; font-family: inherit; background: #fff; color: var(--chocolate);
      font-weight: 700; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    }
    .date-field:active { border-color: var(--sky); }
    .date-picker {
      margin-top: 8px; padding: 12px; background: #fff; border: 3px solid var(--sky-light);
      border-radius: var(--radius-md); box-shadow: 0 6px 0 var(--shadow);
    }
    .dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .dp-title { font-weight: 800; font-size: 15px; color: var(--chocolate); }
    .dp-nav {
      width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--sky-light);
      background: #fff; color: var(--chocolate); font-size: 18px; font-weight: 800;
      font-family: inherit; cursor: pointer; line-height: 1;
    }
    .dp-nav:active { background: var(--sky-light); }
    .dp-week {
      display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
      font-size: 12px; font-weight: 700; color: var(--chocolate-light); margin-bottom: 4px;
    }
    .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
    .dp-day {
      position: relative;
      min-height: 38px; border: none; border-radius: 12px; background: transparent;
      font-family: inherit; font-size: 14px; font-weight: 700; color: var(--chocolate); cursor: pointer;
      touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    }
    .dp-day:active { background: var(--lemon-light); }
    .dp-day.today { box-shadow: inset 0 0 0 2px var(--sky); }
    .dp-day.selected { background: linear-gradient(135deg, #FB7185 0%, var(--candy) 100%); color: #fff; }
    .dp-day.has-hw::after {
      content: '';
      position: absolute;
      bottom: 3px;
      left: 50%;
      transform: translateX(-50%);
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #FB7185;
    }
    .dp-blank { visibility: hidden; }
    .dp-today {
      margin-top: 10px; width: 100%; border: 2px dashed var(--grape); background: var(--grape-light);
      border-radius: 50px; padding: 8px; font-family: inherit; font-weight: 800; font-size: 13px;
      color: var(--chocolate); cursor: pointer;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 26px;
      border-radius: 50px;
      font-size: 16px;
      font-weight: 800;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
      font-family: inherit;
    }
    .btn:active { transform: translateY(2px); }
    .btn-primary {
      background: linear-gradient(135deg, #60A5FA 0%, var(--sky) 100%);
      color: #fff;
    }
    .btn-coral {
      background: linear-gradient(135deg, #FB7185 0%, var(--candy) 100%);
      color: #fff;
    }
    .btn-outline {
      background: #fff;
      border: 3px solid var(--mint);
      color: var(--chocolate);
    }
    .btn-block { width: 100%; }

    /* 日期选择器 */
    .date-bar {
      background: #fff;
      padding: 16px 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      border-bottom: 3px dashed var(--sky-light);
    }
    .date-bar .date-nav {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 3px solid var(--sky-light);
      background: #fff;
      cursor: pointer;
      font-size: 20px;
      color: var(--chocolate);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 0 var(--sky-light);
      transition: all 0.15s;
    }
    .date-bar .date-nav:active {
      transform: translateY(4px);
      box-shadow: 0 0 0 var(--sky-light);
      background: var(--sky-light);
    }
    .date-bar .date-text {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-size: 18px;
      font-weight: 800;
      min-width: 160px;
      text-align: center;
      color: var(--chocolate);
      background: var(--sky-light);
      padding: 10px 18px;
      border-radius: 50px;
      border: none;
      font-family: inherit;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .date-bar .date-caret { font-size: 11px; opacity: .55; }
    .home-date-picker { margin-bottom: 14px; }
    .dp-legend {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      font-size: 12px;
      font-weight: 600;
      color: var(--chocolate-light);
    }
    .dp-dot-sample { width: 6px; height: 6px; border-radius: 50%; background: #FB7185; }

    /* 作业卡片 */
    .assignment-list { padding: 20px 0 100px; }
    .assignment-card {
      background: #fff;
      border-radius: var(--radius-lg);
      padding: 20px;
      margin-bottom: 16px;
      cursor: pointer;
      transition: all 0.2s;
      border: 3px solid transparent;
      box-shadow: 0 6px 18px var(--shadow);
      position: relative;
    }
    .assignment-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px var(--shadow); }
    .assignment-card:active { border-color: var(--sky); transform: scale(0.98); }
    .assignment-card::after {
      content: "";
      position: absolute;
      top: 12px;
      right: 12px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--mint);
    }
    .assignment-card .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
    }
    .assignment-card .subject {
      font-size: 18px;
      font-weight: 800;
      color: var(--chocolate);
      background: var(--sky-light);
      padding: 6px 14px;
      border-radius: 50px;
    }
    .assignment-card .card-meta {
      font-size: 12px;
      color: var(--chocolate-light);
      font-weight: 600;
    }
    .assignment-card .card-range {
      font-size: 11px;
      font-weight: 700;
      color: #0369A1;
      background: var(--sky-light);
      padding: 3px 8px;
      border-radius: 50px;
      white-space: nowrap;
    }
    /* 今天没作业时保留今天日期，并提供最近作业入口 */
    .fallback-note {
      background: var(--lemon-light);
      border: 2px solid var(--lemon);
      border-radius: var(--radius-md);
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 700;
      color: #854D0E;
      margin-bottom: 12px;
    }
    .latest-assignment-link {
      display: inline-block;
      margin-top: 10px;
      padding: 8px 12px;
      border: 0;
      border-radius: 8px;
      background: var(--sky-light);
      color: #0369A1;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    .latest-assignment-link:active { transform: translateY(1px); }
    .assignment-card .card-content {
      font-size: 16px;
      font-weight: 700;
      color: var(--chocolate);
      line-height: 1.6;
      white-space: pre-wrap;
    }
    .assignment-card .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 14px;
      font-size: 13px;
      color: var(--chocolate-light);
      font-weight: 600;
    }
    .assignment-card .comment-badge {
      background: var(--candy-light);
      color: #E11D48;
      padding: 4px 12px;
      border-radius: 50px;
      font-size: 12px;
      font-weight: 800;
    }

    /* 空状态 */
    .empty-state {
      text-align: center;
      padding: 56px 20px;
      color: var(--chocolate-light);
    }
    .empty-state .icon {
      font-size: 64px;
      margin-bottom: 16px;
      display: inline-block;
      animation: float 2.5s ease-in-out infinite;
    }
    .empty-state p { font-size: 15px; font-weight: 600; }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    /* 详情页 */
    .detail-page { padding: 20px 0 100px; }
    .detail-header {
      background: #fff;
      border-radius: var(--radius-lg);
      padding: 24px;
      margin-bottom: 20px;
      box-shadow: 0 6px 18px var(--shadow);
      border: 3px solid var(--sky-light);
    }
    .detail-header .subject-date {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .detail-header .subject-tag {
      background: var(--grape-light);
      color: var(--chocolate);
      padding: 6px 16px;
      border-radius: 50px;
      font-size: 16px;
      font-weight: 800;
    }
    .detail-header .date-text { font-size: 14px; color: var(--chocolate-light); font-weight: 700; }
    .detail-header .detail-meta {
      font-size: 13px;
      color: var(--chocolate-light);
      margin-bottom: 18px;
      font-weight: 600;
    }
    .detail-content {
      background: #F0F9FF;
      border-radius: var(--radius-md);
      padding: 20px;
      font-size: 16px;
      line-height: 1.9;
      white-space: pre-wrap;
      color: var(--chocolate);
      border: 2px dashed var(--sky-light);
    }
    .detail-content img {
      max-width: 100%;
      border-radius: var(--radius-md);
      margin-top: 12px;
      border: 3px solid #fff;
      box-shadow: 0 4px 12px var(--shadow);
    }

    /* 评论区 */
    .comment-section { margin-top: 20px; }
    .comment-section .section-title {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 16px;
      color: var(--chocolate);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .comment-card {
      background: #fff;
      border-radius: var(--radius-lg);
      padding: 18px;
      margin-bottom: 12px;
      box-shadow: 0 4px 14px var(--shadow);
      border: 2px solid transparent;
    }
    .comment-card .comment-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    .comment-card .author-name {
      font-size: 14px;
      font-weight: 800;
      color: var(--chocolate);
    }
    .comment-card .comment-type {
      font-size: 11px;
      color: var(--chocolate-light);
      background: var(--grape-light);
      padding: 4px 10px;
      border-radius: 50px;
      font-weight: 700;
    }
    .comment-card .comment-body {
      font-size: 15px;
      color: var(--chocolate);
      line-height: 1.7;
    }
    .comment-card .voice-player {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--grape-light);
      padding: 10px 14px;
      border-radius: var(--radius-md);
      margin-top: 6px;
    }
    .comment-card .voice-player .play-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(135deg, #A78BFA 0%, var(--grape) 100%);
      color: #fff;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 0 #7C3AED;
      transition: all 0.15s;
    }
    .comment-card .voice-player .play-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #7C3AED; }
    .comment-card .voice-player .duration {
      font-size: 13px;
      color: var(--chocolate-light);
      font-weight: 700;
    }
    .comment-card .comment-footer {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 10px;
      font-size: 12px;
      color: var(--chocolate-light);
      font-weight: 600;
    }
    .comment-card .like-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      border: none;
      background: var(--candy-light);
      font-size: 13px;
      color: var(--chocolate-light);
      font-family: inherit;
      padding: 6px 12px;
      border-radius: 50px;
      font-weight: 700;
      transition: all 0.2s;
    }
    .comment-card .like-btn.liked { color: #E11D48; background: #FFE4E8; }
    .comment-card .like-btn:active { transform: scale(0.92); }

    /* 评论输入区 */
    .comment-input-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      border-top: 3px solid var(--sky-light);
      padding: 12px 16px;
      display: flex;
      gap: 10px;
      align-items: center;
      z-index: 50;
      box-shadow: 0 -4px 20px var(--shadow);
    }
    .comment-input-bar .input-wrapper {
      flex: 1;
      min-width: 0;
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .comment-input-bar input[type="text"] {
      flex: 1;
      min-width: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 12px 16px;
      border: 3px solid var(--lemon-light);
      border-radius: 50px;
      font-size: 15px;
      font-family: inherit;
      outline: none;
      color: var(--chocolate);
    }
    .comment-input-bar input[type="text"]:focus { border-color: var(--sky); }
    /* 纸飞机模块（紫色主题）的输入条与详情卡 */
    .comp-grape { border-top-color: var(--grape-light); }
    .comp-grape input[type="text"] { border-color: var(--grape-light); }
    .comp-grape input[type="text"]:focus { border-color: var(--grape); }
    .comp-grape .btn { background: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%); color: #fff; }
    .comp-grape .detail-header { border-color: var(--grape-light); background: #F5F3FF; }
    /* 录音中：圆按钮变胶囊，红点和秒数一行显示不换行 */
    .chat-img-btn.recording {
      width: auto;
      min-width: 40px;
      padding: 0 10px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 800;
      color: #DC2626;
      white-space: nowrap;
    }
    .comp-grape .form-group input,
    .comp-grape .form-group textarea { border-color: var(--grape-light); }
    .comp-grape .form-group input:focus,
    .comp-grape .form-group textarea:focus { border-color: var(--grape); box-shadow: 0 0 0 5px var(--grape-light); }
    .comp-grape .img-add-btn { border-color: var(--grape); background: var(--grape-light); color: #6D28D9; }
    /* 来玩吧（绿色主题）发布页 */
    .comp-mint .form-group input,
    .comp-mint .form-group textarea { border-color: var(--mint-light); }
    .comp-mint .form-group input:focus,
    .comp-mint .form-group textarea:focus { border-color: var(--mint); box-shadow: 0 0 0 5px var(--mint-light); }
    .comp-mint .img-add-btn { border-color: var(--mint); background: var(--mint-light); color: #15803D; }
    .comp-mint .pub-seg { border-color: var(--mint-light); }
    .comp-mint .pub-seg.on { background: linear-gradient(135deg, #34D399 0%, var(--mint) 100%); border-color: #16A34A; }
    .comment-input-bar .voice-btn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 3px solid var(--candy-light);
      background: #fff;
      cursor: pointer;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      flex-shrink: 0;
    }
    .comment-input-bar .voice-btn.recording {
      background: linear-gradient(135deg, #FB7185 0%, var(--candy) 100%);
      color: #fff;
      border-color: #BE123C;
    }

    /* 通用表情选择器（OpenMoji） */
    .emoji-btn, .emoji-bar-btn, .emoji-inline-btn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 3px solid var(--lemon-light);
      background: #fff;
      cursor: pointer;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform .15s;
      padding: 0;
    }
    .emoji-btn:active, .emoji-bar-btn:active, .emoji-inline-btn:active { transform: scale(.9); }
    .emoji-host { margin-top: 8px; }
    .emoji-picker {
      background: #fff;
      border-radius: var(--radius-lg);
      border: 3px solid var(--lemon-light);
      box-shadow: 0 8px 24px var(--shadow);
      padding: 12px;
      z-index: 90;
      max-width: calc(100vw - 24px);
      box-sizing: border-box;
    }
    .emoji-picker-fixed {
      position: fixed;
    }
    .emoji-tabs {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--lemon-light);
      margin-bottom: 10px;
    }
    .emoji-tab {
      flex-shrink: 0;
      padding: 6px 12px;
      border-radius: 50px;
      border: none;
      background: #FDF6E3;
      font-size: 13px;
      font-weight: 700;
      color: var(--chocolate-light);
      font-family: inherit;
      cursor: pointer;
    }
    .emoji-tab.on {
      background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%);
      color: #7C2D12;
    }
    .emoji-body {
      max-height: 240px;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .emoji-group { margin-bottom: 10px; }
    .emoji-group-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--chocolate-light);
      margin: 6px 0 8px;
    }
    .emoji-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
      gap: 4px;
    }
    .emoji-item {
      width: 40px;
      height: 40px;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      border: none;
      background: transparent;
      cursor: pointer;
      transition: transform .12s, background .12s;
    }
    .emoji-item:hover { background: var(--lemon-light); }
    .emoji-item:active { transform: scale(.85); }
    .emoji-item img { width: 28px; height: 28px; pointer-events: none; }
    .emoji-group-empty {
      padding: 16px 0;
      text-align: center;
      font-size: 13px;
      color: var(--chocolate-light);
      font-weight: 600;
    }
    .emoji-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 10px 0 2px;
      font-size: 12px;
      color: var(--chocolate-light);
    }
    .emoji-pagination button {
      border: none;
      border-radius: 20px;
      padding: 6px 12px;
      background: var(--lemon-light);
      color: var(--chocolate);
      font: inherit;
      cursor: pointer;
    }
    .emoji-pagination button:disabled { opacity: .4; cursor: default; }

    /* 上传页 */
    .upload-page { padding: 20px 0 100px; }
    .upload-page h2 {
      font-size: 22px;
      font-weight: 800;
      margin-bottom: 20px;
      color: var(--chocolate);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* 我的页 */
    .mine-page { padding: 20px 0 100px; }
    /* 我的页分组内的小标题与统计行间距 */
    .mine-sub {
      font-size: 13px;
      font-weight: 800;
      color: var(--chocolate-light);
      margin: 16px 2px 8px;
    }
    .mine-page .section .stats-row { margin-bottom: 4px; }
    /* 纯展示统计：无跳转、无按压反馈（数据为 0 时点击没有意义） */
    .stats-plain .stat-item { cursor: default; }
    .stats-plain .stat-item:active { transform: none; }
    /* 可点击的统计卡：进入对应明细页 */
    .stats-clickable { cursor: pointer; }
    .stats-clickable .stat-item:active { transform: translateY(2px); }
    .stats-hint {
      font-size: 12px;
      font-weight: 700;
      color: var(--chocolate-light);
      margin: 6px 2px 0;
      text-align: right;
    }
    /* 退出账号：只放在「我的」页底部，安静的一行 */
    .logout-account {
      display: block;
      width: 100%;
      margin: 4px 0 8px;
      padding: 12px;
      border: 2px solid #EEE7E1;
      border-radius: var(--radius-md);
      background: #fff;
      color: var(--chocolate-light);
      font-family: inherit;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      touch-action: manipulation;
    }
    .logout-account:active { background: var(--cream); }
    .mine-page .section {
      margin-bottom: 28px;
    }
    .mine-page .section h3 {
      font-size: 17px;
      font-weight: 800;
      color: var(--chocolate);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* 返回按钮 */
    .back-bar {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 18px;
      background: linear-gradient(135deg, var(--sky) 0%, #60A5FA 100%);
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 4px 16px rgba(96, 165, 250, 0.25);
    }
    .back-bar .back-btn {
      border: none;
      background: rgba(255,255,255,0.25);
      color: #fff;
      cursor: pointer;
      /* 正圆且保留 44px 手机触控区。 */
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 50%;
      transition: all 0.2s;
      /* 按钮里现在是描边箭头矢量，给死尺寸，别让 svg 去撑行高 */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .back-bar .back-btn svg { width: 20px; height: 20px; display: block; }
    .back-bar .back-btn:active { background: rgba(255,255,255,0.4); transform: scale(0.92); }
    .back-bar .title {
      font-size: 18px;
      font-weight: 800;
      color: #fff;
      text-shadow: 1px 1px 0 rgba(93, 64, 55, 0.15);
      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* 底部导航 */
    .tab-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      display: flex;
      justify-content: space-around;
      padding: 8px 0 calc(10px + env(safe-area-inset-bottom, 0px));
      z-index: 50;
      box-shadow: 0 -2px 12px var(--shadow);
    }
    .tab-bar .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      border: none;
      background: none;
      cursor: pointer;
      font-size: 12px;
      color: var(--chocolate-light);
      font-family: inherit;
      font-weight: 700;
      padding: 6px 16px 4px;
      border-radius: 16px;
      transition: all 0.2s;
      line-height: 1.15;
    }
    .tab-bar .tab-item.active {
      color: #2563EB;
      background: var(--sky-light);
    }
    .tab-bar .tab-item .tab-icon {
      font-size: 26px;
      line-height: 1.1;
    }

    /* 录音动画 */
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.18); }
    }
    .recording-pulse {
      animation: pulse 1s infinite;
    }

    /* ===== 补充意见（卡片内联展示） ===== */
    .assignment-card { cursor: default; }
    .assignment-card:active { transform: none; border-color: transparent; }
    .card-main { cursor: pointer; }
    .card-main:active { opacity: 0.85; }
    .card-image-tip {
      margin-top: 8px;
      font-size: 12px;
      font-weight: 700;
      color: var(--chocolate-light);
    }
    .card-time { font-size: 12px; font-weight: 700; color: var(--chocolate-light); }

    .supplement-block {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 2px dashed var(--sky-light);
    }
    .supplement-title {
      font-size: 14px;
      font-weight: 800;
      color: var(--chocolate);
      margin-bottom: 12px;
    }
    .supplement-empty {
      font-size: 12px;
      font-weight: 500;
      color: var(--chocolate-light);
      padding: 2px 2px 0;
    }
    .supplement {
      background: #F0F9FF;
      border-radius: var(--radius-md);
      padding: 12px 14px;
      margin-bottom: 10px;
      border: 2px solid #fff;
    }
    .supplement:last-child { margin-bottom: 0; }
    .supplement-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
      flex-wrap: wrap;
    }
    .supplement-author { font-size: 13px; font-weight: 800; color: var(--chocolate); }
    .supplement-tag {
      font-size: 10px;
      font-weight: 800;
      color: #0369A1;
      background: #fff;
      padding: 2px 8px;
      border-radius: 50px;
    }
    .supplement-time {
      font-size: 11px;
      font-weight: 700;
      color: var(--chocolate-light);
      margin-left: auto;
    }
    .supplement-text { font-size: 14px; color: var(--chocolate); line-height: 1.65; }

    .supplement-actions { display: flex; gap: 8px; margin-top: 10px; }
    .vote-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 14px 5px 10px;
      border-radius: 50px;
      border: 2px solid transparent;
      background: #fff;
      font-size: 13px;
      font-weight: 800;
      color: var(--chocolate-light);
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
      box-shadow: 0 3px 0 rgba(93, 64, 55, 0.10);
    }
    .vote-btn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(93, 64, 55, 0.10); }
    .vote-btn .vote-icon { font-size: 14px; line-height: 1; }
    .vote-btn .vote-num { font-weight: 800; }
    .vote-btn.agree.on {
      background: var(--mint-light);
      color: #15803D;
      border-color: var(--mint);
      box-shadow: 0 3px 0 var(--mint);
    }
    .vote-btn.disagree.on {
      background: var(--candy-light);
      color: #BE123C;
      border-color: var(--candy);
      box-shadow: 0 3px 0 var(--candy);
    }

    .supplement-add {
      border: 2px dashed var(--sky);
      background: #fff;
      color: #0369A1;
      font-size: 13px;
      font-weight: 800;
      padding: 8px 18px;
      border-radius: 50px;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
    }
    .supplement-add:active { transform: scale(0.95); background: var(--grape-light); }
    .assignment-card .card-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .assignment-card .card-delete {
      border: 2px dashed #FECDD3;
      background: #fff;
      color: #E11D48;
      font-size: 13px;
      font-weight: 800;
      padding: 8px 14px;
      border-radius: 50px;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
    }
    .assignment-card .card-delete:active { transform: scale(0.95); background: #FFF1F2; }
    .supplement-more {
      font-size: 13px;
      font-weight: 800;
      color: #2563EB;
      padding: 8px 0 0;
      cursor: pointer;
    }

    /* 补充意见通用语音播放器 */
    .voice-player {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #fff;
      padding: 6px 14px 6px 8px;
      border-radius: 50px;
      margin-top: 6px;
    }
    .voice-player .play-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(135deg, #A78BFA 0%, var(--grape) 100%);
      color: #fff;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 0 #7C3AED;
      transition: all 0.15s;
      padding: 0;
      flex-shrink: 0;
    }
    .voice-player .play-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #7C3AED; }
    .voice-player .duration { font-size: 13px; font-weight: 700; color: var(--chocolate-light); }

    /* 详情页补充意见区 */
    .supplement-section { margin-top: 20px; }
    .supplement-section .section-title {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 16px;
      color: var(--chocolate);
    }

    /* 上传页提示条 */
    .upload-hint:empty { display: none; }
    .hint-warn, .hint-ok {
      border-radius: var(--radius-md);
      padding: 14px 16px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.65;
      margin-bottom: 18px;
      border: 3px solid;
    }
    .hint-warn { background: var(--lemon-light); border-color: var(--lemon); color: #854D0E; }
    .hint-ok { background: var(--mint-light); border-color: var(--mint); color: #15803D; }

    /* 登录页注册说明 */
    .login-tip {
      margin-top: 18px;
      font-size: 12px;
      line-height: 1.75;
      color: var(--chocolate-light);
      text-align: center;
      font-weight: 600;
    }
    .login-tip b { color: #2563EB; }

    /* 我的页面 - 账号卡 */
    .profile-card {
      background: linear-gradient(135deg, var(--sky-light) 0%, var(--grape-light) 100%);
      border-radius: var(--radius-lg);
      padding: 18px;
      margin-bottom: 16px;
      border: 3px solid #fff;
      box-shadow: 0 6px 18px var(--shadow);
    }
    /* 上半：头像 + 身份 + 糖豆余额；下半：等级与进度条。原先五行文字挤在头像右侧，
       等级/糖豆/进度层次混在一起，改为上下两块更清楚。 */
    .profile-card-top { display: flex; align-items: center; gap: 14px; }
    .profile-candy {
      margin-left: auto;
      flex: 0 0 auto;
      display: flex;
      align-items: baseline;
      gap: 4px;
      padding: 8px 14px;
      border-radius: 50px;
      background: #fff;
      box-shadow: 0 3px 10px var(--shadow);
    }
    .profile-candy-emoji { font-size: 16px; }
    .profile-candy b { font-size: 20px; font-weight: 800; color: #B45309; line-height: 1; }
    .profile-candy-label { font-size: 11px; font-weight: 700; color: var(--chocolate-light); }
    .profile-level {
      margin-top: 14px;
      padding: 13px 15px;
      border-radius: var(--radius-md);
      background: rgba(255, 255, 255, 0.82);
      cursor: pointer;
      transition: background 0.2s;
    }
    .profile-level:active { background: rgba(255, 255, 255, 1); }
    .profile-level-head { display: flex; align-items: center; gap: 8px; }
    .profile-level-name { font-size: 15px; font-weight: 800; color: var(--chocolate); }
    .profile-level-next { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--chocolate-light); }
    .profile-level-foot { margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--chocolate-light); }
    .profile-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: linear-gradient(135deg, #60A5FA 0%, var(--sky) 100%);
      color: #fff;
      font-size: 28px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 0 #3B82F6;
      flex-shrink: 0;
    }
    .profile-info { min-width: 0; }
    .profile-name {
      font-size: 20px;
      font-weight: 800;
      color: var(--chocolate);
      line-height: 1.3;
    }
    .profile-sub {
      font-size: 12px;
      font-weight: 600;
      color: var(--chocolate-light);
      margin-top: 3px;
    }

    /* 我的页面 - 数据统计 */
    .stats-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 26px;
    }
    .stat-item {
      background: #fff;
      border-radius: var(--radius-md);
      padding: 14px 8px;
      text-align: center;
      box-shadow: 0 4px 12px var(--shadow);
    }
    .stat-num {
      font-size: 22px;
      font-weight: 800;
      color: #2563EB;
      line-height: 1.2;
    }
    .stat-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--chocolate-light);
      margin-top: 3px;
    }

    /* 我的页面 - 历史记录条目 */
    .mine-item {
      background: #fff;
      border-radius: var(--radius-md);
      padding: 14px 16px;
      margin-bottom: 10px;
      box-shadow: 0 4px 12px var(--shadow);
      cursor: pointer;
      transition: all 0.15s;
      border: 2px solid transparent;
    }
    .mine-item:active { transform: scale(0.98); border-color: var(--sky); }
    .mine-item-top {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }
    .mine-tag {
      font-size: 12px;
      font-weight: 800;
      color: #2563EB;
      background: var(--sky-light);
      padding: 3px 10px;
      border-radius: 50px;
    }
    .mine-tag.grape { color: #7C3AED; background: var(--grape-light); }
    .mine-tag.sky { color: #0369A1; background: var(--sky-light); }
    .mine-date {
      font-size: 11px;
      font-weight: 700;
      color: var(--chocolate-light);
      margin-left: auto;
    }
    .mine-item-text {
      font-size: 14px;
      color: var(--chocolate);
      line-height: 1.6;
    }
    .mine-item-foot {
      font-size: 12px;
      font-weight: 700;
      color: var(--chocolate-light);
      margin-top: 8px;
    }

    /* Toast */
    .toast {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--chocolate);
      color: #fff;
      padding: 14px 28px;
      border-radius: 50px;
      font-size: 15px;
      z-index: 999;
      pointer-events: none;
      font-weight: 700;
      box-shadow: 0 8px 24px rgba(93, 64, 55, 0.25);
    }

    /* 小装饰 */
    .decoration-stars {
      position: fixed;
      pointer-events: none;
      z-index: 0;
      opacity: 0.4;
    }

    /* ============================================================
       功能大厅 + 纸飞机（与作业帮同一套设计 Token）
       ============================================================ */

    /* navbar：大厅按钮 + 纸飞机紫色变体 */
    .navbar .home-btn {
      border: 1.5px solid rgba(255,255,255,0.5);
      background: rgba(255,255,255,0.18);
      color: #fff;
      font-family: inherit;
      font-weight: 800;
      font-size: 13px;
      letter-spacing: 0.4px;
      padding: 6px 13px 6px 8px;
      border-radius: 50px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
      transition: background 0.2s, transform 0.15s;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
    }
    /* 箭头/房子用矢量而不是 emoji：emoji 自带一套固定配色，压在渐变导航条上会跳出来 */
    .navbar .home-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
    .navbar .home-btn:active { background: rgba(255,255,255,0.34); transform: scale(0.95); }
    .navbar .logo { flex: 1; text-align: center; }
    .navbar .user-info { flex-shrink: 0; }
    .navbar.grape-nav {
      background: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%);
      box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25);
    }
    .back-bar.grape-nav {
      background: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%);
      box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25);
    }
    .back-bar .home-btn.light {
      margin-left: auto;
      border: 2px solid rgba(255,255,255,0.6);
      background: rgba(255,255,255,0.2);
      color: #fff;
      font-size: 15px;
      padding: 4px 10px;
      border-radius: 50px;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.2s;
    }
    .back-bar .home-btn.light:active { background: rgba(255,255,255,0.35); transform: scale(0.95); }

    /* tab 未读徽章 */
    .tab-bar .tab-item .tab-icon { position: relative; }
    .tab-badge {
      position: absolute;
      top: -6px;
      right: -12px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      background: #FB7185;
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      line-height: 18px;
      border-radius: 50px;
      text-align: center;
      border: 2px solid #fff;
      box-sizing: content-box;
    }

    /* ===== 功能大厅 ===== */
    .lobby-page { padding: 24px 0 104px; }
    /* 大厅问候语旁边放一张自己的头像——不然头像系统要进「我的」才看得见 */
    /* 头像在左、问候在右。问候能拿到的宽度 = 容器 332 - 头像 44 - 间距 10 ≈ 278px，
       所以头像和间距都收窄一点，尽量让一句话少折行。 */
    .lobby-hello {
      display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
    }
    .lobby-avatar {
      width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
      background: linear-gradient(135deg, #60A5FA 0%, var(--sky) 100%);
      color: #fff; font-size: 20px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 3px 0 rgba(93, 64, 55, 0.18);
      cursor: pointer; overflow: hidden;
    }
    .lobby-avatar:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(93, 64, 55, 0.18); }
    .lobby-avatar .avatar-img { width: 100%; height: 100%; }
    .lobby-greeting {
      font-family: inherit;
      /* 全站字号梯度：导航标题 22 / 卡片标题 21 / 分区小标题 16 / 正文 14~15。
         打招呼属于正文，不该比导航条上的页面标题还大；18px 落在「分区小标题→正文」
         之间正好。亲切感靠名字加粗染色撑住，不靠字号。 */
      font-size: 18px;
      font-weight: 700;
      color: var(--chocolate);
      line-height: 1.5;
      min-width: 0;
      /* 不用 text-wrap: balance —— 它会把每行都压得一样短，
         右边空出一大块，字看着全堆在左边。自然换行反而更满。 */
    }
    .lobby-greeting b { font-weight: 800; color: #7C3AED; }
    .lobby-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .lobby-card {
      position: relative;
      border-radius: var(--radius-lg);
      padding: 18px 14px 16px;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 6px 18px var(--shadow);
      border: 3px solid #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
    }
    .lobby-card:active { transform: scale(0.98); box-shadow: 0 2px 8px var(--shadow); }
    .lobby-card.card-homework { background: linear-gradient(135deg, var(--sky-light) 0%, #BAE6FD 100%); }
    .lobby-card.card-plane { background: linear-gradient(135deg, var(--grape-light) 0%, #DDD6FE 100%); }
    .lobby-card.card-shop { background: linear-gradient(135deg, var(--lemon-light) 0%, #FED7AA 100%); }
    .lobby-card.card-play { background: linear-gradient(135deg, var(--mint-light) 0%, #BBF7D0 100%); }
    .lobby-card.card-admin { background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%); }
    /* ===== 班级管理 ===== */
    .admin-page { padding: 16px 0 104px; }
    .admin-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
    .admin-stat-card {
      background: #fff; border-radius: var(--radius-lg); padding: 16px;
      box-shadow: 0 4px 12px var(--shadow); text-align: center;
      border: 3px solid var(--sky-light);
    }
    .admin-stat-num { font-size: 30px; font-weight: 800; color: var(--chocolate); line-height: 1.1; }
    .admin-stat-label { font-size: 13px; font-weight: 800; color: var(--chocolate-light); margin-top: 6px; }
    .admin-chart {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 6px; background: #fff; border-radius: var(--radius-lg); padding: 14px 12px;
      box-shadow: 0 4px 12px var(--shadow); min-height: 130px;
    }
    .admin-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
    .admin-bar-num { font-size: 11px; font-weight: 800; color: var(--chocolate); margin-bottom: 3px; }
    .admin-bar { width: 100%; max-width: 26px; background: linear-gradient(180deg, var(--sky) 0%, #60A5FA 100%); border-radius: 6px 6px 0 0; }
    .admin-bar-label { font-size: 10px; font-weight: 700; color: var(--chocolate-light); margin-top: 5px; }
    .admin-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
    .admin-search {
      flex: 1; font-family: inherit; font-size: 15px; font-weight: 700;
      padding: 10px 14px; border: 3px solid var(--sky-light); border-radius: var(--radius-md);
      color: var(--chocolate); background: #fff; outline: none;
    }
    .admin-search:focus { border-color: var(--sky); }
    .admin-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
    .admin-chip {
      border: 3px solid var(--sky-light); background: #fff; border-radius: 50px;
      padding: 6px 12px; font-family: inherit; font-weight: 800; font-size: 13px;
      cursor: pointer; color: var(--chocolate);
    }
    .admin-chip.on { background: var(--sky); border-color: #0284C7; }
    .admin-user-row {
      display: flex; align-items: center; gap: 12px;
      background: #fff; border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 8px;
      box-shadow: 0 3px 10px var(--shadow); cursor: pointer;
    }
    .admin-user-row:active { transform: scale(0.99); }
    .admin-avatar {
      width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, #A78BFA 0%, var(--grape) 100%);
      color: #fff; font-size: 18px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
    }
    .admin-user-main { min-width: 0; flex: 1; }
    .admin-user-name { font-size: 15px; font-weight: 800; color: var(--chocolate); }
    .admin-user-meta { font-size: 12px; font-weight: 700; color: var(--chocolate-light); margin-top: 2px; }
    .admin-user-arrow { font-size: 22px; color: var(--chocolate-light); font-weight: 800; }
    .admin-avatar-flag { font-size: 12px; margin-left: 5px; opacity: 0.8; }
    .admin-avatar-reset { margin: 0 0 14px; }
    /* 管理页「指定头像」：按钮组 + 展开后的池子网格 */
    .admin-avatar-tools { margin: 0 0 14px; }
    /* 展开后是 96 个格子，管理页往往要一路滑到底，给个高度上限免得挤掉下面的行为时间线 */
    .admin-avatar-picker {
      max-height: 60vh; overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .admin-danger-zone {
      margin: 16px 0;
      padding: 14px;
      border: 2px solid #FECACA;
      border-radius: var(--radius-lg);
      background: #FFF7F7;
    }
    .admin-danger-title {
      font-size: 15px;
      font-weight: 800;
      color: #B91C1C;
    }
    .admin-danger-zone p {
      margin: 6px 0 10px;
      font-size: 12px;
      line-height: 1.7;
      font-weight: 700;
      color: #991B1B;
    }
    .admin-list-end { text-align: center; font-size: 12px; font-weight: 700; color: var(--chocolate-light); padding: 12px 0; }
    .admin-act-row {
      display: flex; gap: 12px; align-items: flex-start;
      background: #fff; border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 8px;
      box-shadow: 0 3px 10px var(--shadow);
    }
    .admin-act-icon { font-size: 20px; flex-shrink: 0; }
    .admin-act-main { min-width: 0; }
    .admin-act-text { font-size: 14px; font-weight: 700; color: var(--chocolate); }
    .admin-act-time { font-size: 11px; font-weight: 700; color: var(--chocolate-light); margin-top: 2px; }
    .lobby-badge.play-badge { background: #16A34A; box-shadow: 0 2px 6px rgba(22,163,74,0.35); }
    .navbar.mint-nav, .back-bar.mint-nav {
      background: linear-gradient(135deg, #86EFAC 0%, #4ADE80 100%);
      box-shadow: 0 4px 16px rgba(74, 222, 128, 0.3);
    }
    .navbar.mint-nav .logo, .back-bar.mint-nav .title { color: var(--chocolate); text-shadow: none; }
    .navbar.mint-nav .user-info, .navbar.mint-nav .home-btn,
    .back-bar.mint-nav .home-btn.light, .back-bar.mint-nav .back-btn {
      color: var(--chocolate);
    }
    .navbar.mint-nav .home-btn,
    .back-bar.mint-nav .home-btn.light, .back-bar.mint-nav .back-btn {
      border-color: rgba(93,64,55,0.25); background: rgba(255,255,255,0.45);
    }
    .play-page { padding: 16px 0 104px; }
    /* 来玩吧沿用纸飞机的 .mailbox-section 标题样式，但那圈紫色虚线在这里多余 */
    #play-mine .mailbox-section h3 { border-bottom: 0; padding-bottom: 0; }
    .game-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
    .game-chip {
      flex-shrink: 0; border: 3px solid var(--mint-light); background: #fff; border-radius: 50px;
      padding: 6px 12px; font-family: inherit; font-weight: 800; font-size: 13px; cursor: pointer; color: var(--chocolate);
    }
    .game-chip.on { background: var(--mint); border-color: #16A34A; }
    .game-chip small { font-size: 11px; opacity: .72; }
    .play-accounts-intro {
      display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
      padding: 16px; border: 3px solid var(--mint-light); border-radius: var(--radius-lg);
      background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
    }
    .play-accounts-intro-icon { font-size: 36px; flex: 0 0 auto; }
    .play-accounts-intro h2 { font-size: 18px; line-height: 1.35; color: var(--chocolate); }
    .play-accounts-intro p, .form-help {
      margin-top: 4px; color: var(--chocolate-light); font-size: 12px; line-height: 1.55; font-weight: 700;
    }
    .play-account-section-title { margin-top: 18px; margin-bottom: 10px; }
    .play-account-search { display: flex; gap: 8px; margin: 2px 0 14px; }
    .play-account-search input {
      min-width: 0; flex: 1; padding: 11px 13px; border: 3px solid var(--mint-light);
      border-radius: var(--radius-md); font: inherit; color: var(--chocolate); outline: none;
    }
    .play-account-search input:focus { border-color: var(--mint); box-shadow: 0 0 0 4px #DCFCE7; }
    .play-account-list-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 8px 2px 10px; color: var(--chocolate); }
    .play-account-list-head span { color: var(--chocolate-light); font-size: 12px; font-weight: 800; }
    .play-account-empty-card {
      padding: 16px; margin-bottom: 12px; border: 2px dashed var(--mint); border-radius: var(--radius-lg);
      background: #F0FDF4; color: var(--chocolate); font-weight: 800;
    }
    .play-account-empty-card p { margin: 5px 0 10px; color: var(--chocolate-light); font-size: 12px; }
    .play-account-card {
      padding: 15px; margin-bottom: 12px; border-radius: var(--radius-lg); background: #fff;
      box-shadow: 0 4px 12px var(--shadow); border: 2px solid transparent;
    }
    .play-account-card.mine { border-color: var(--mint-light); background: #FBFFFC; }
    .play-account-head { display: flex; align-items: center; gap: 10px; }
    .play-account-person { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
    .play-account-person b { color: var(--chocolate); font-size: 16px; overflow-wrap: anywhere; }
    .play-account-person span { color: var(--chocolate-light); font-size: 12px; font-weight: 700; }
    .play-account-body { margin: 12px 0 10px; padding: 12px; border-radius: var(--radius-md); background: #F8FAFC; }
    .play-account-label { color: var(--chocolate-light); font-size: 11px; font-weight: 800; }
    .play-account-name { margin-top: 2px; color: var(--chocolate); font-size: 20px; font-weight: 900; overflow-wrap: anywhere; }
    .play-account-id { margin-top: 8px; color: var(--chocolate); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
    .play-account-id.muted { color: var(--chocolate-light); }
    .play-account-description { margin-top: 10px; color: #166534; font-size: 13px; font-weight: 800; line-height: 1.5; overflow-wrap: anywhere; }
    .play-account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .play-accounts-page { scroll-margin-bottom: 104px; }
    .play-accounts-page .play-accounts-intro { padding: 12px; margin-bottom: 10px; }
    .play-accounts-page .play-accounts-intro-icon { font-size: 28px; }
    .play-accounts-page .play-accounts-intro h2 { font-size: 16px; }
    .play-account-mine-panel {
      margin-top: 12px; padding: 12px; background: #F0FDF4;
      border-radius: var(--radius-md); color: var(--chocolate);
    }
    .play-account-mine-panel summary { cursor: pointer; font-size: 14px; font-weight: 800; }
    .play-account-mine-panel summary span { margin-left: 6px; color: #166534; font-size: 11px; }
    .play-account-mine-panel[open] summary { margin-bottom: 12px; }
    .play-account-mine-panel[open] summary span { display: none; }
    .play-account-mine-panel .play-account-card:last-child { margin-bottom: 0; }
    .play-account-list-head { scroll-margin-top: 90px; }
    .play-account-directory-hint {
      margin-bottom: 10px; color: var(--chocolate-light); font-size: 12px; line-height: 1.5;
    }
    .play-account-directory {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start;
    }
    .play-account-directory .play-account-card {
      min-width: 0; margin-bottom: 0; padding: 12px; border-radius: 18px;
    }
    .play-account-directory .play-account-head { align-items: flex-start; gap: 8px; }
    .play-account-directory .play-account-person { gap: 2px; }
    .play-account-directory .play-account-person b { font-size: 14px; }
    .play-account-directory .play-account-person span { font-size: 11px; }
    .play-account-glance {
      min-width: 0; margin: 10px 0 8px; padding: 9px 10px;
      border-radius: 12px; background: #F8FAFC;
    }
    .play-account-glance .play-account-label { display: block; }
    .play-account-glance .play-account-name {
      margin-top: 1px; font-size: 16px; line-height: 1.35;
    }
    .play-account-directory .play-account-actions { gap: 6px; }
    .play-account-directory .play-account-actions .btn-small {
      min-width: 0; flex: 1; padding-left: 8px; padding-right: 8px;
      scroll-margin-top: 90px; scroll-margin-bottom: 104px;
    }
    .play-account-expanded {
      margin-top: 9px; padding-top: 9px; border-top: 1px solid #E2E8F0;
    }
    .play-account-expanded .play-account-actions { margin-top: 8px; }
    .play-account-expanded[hidden] { display: none; }
    .play-account-pagination { margin-top: 16px; text-align: center; }
    .play-account-pagination p { color: var(--chocolate-light); font-size: 12px; margin-bottom: 8px; }
    .play-account-pagination > div { display: flex; align-items: center; justify-content: center; gap: 16px; }
    .play-account-pagination span { font-size: 13px; color: var(--chocolate); font-weight: 800; }
    .play-account-pagination button { min-width: 84px; scroll-margin-bottom: 104px; }
    .play-account-pagination button:disabled { opacity: .45; cursor: default; }
    .play-account-select-wrap { position: relative; }
    .play-account-select-wrap select {
      appearance: none; -webkit-appearance: none; padding-right: 48px;
      border-color: var(--mint-light);
    }
    .play-account-select-wrap::after {
      content: ''; position: absolute; top: 50%; right: 20px; width: 8px; height: 8px;
      border-right: 2px solid #16A34A; border-bottom: 2px solid #16A34A;
      transform: translateY(-70%) rotate(45deg); pointer-events: none;
    }
    .play-account-select-wrap select:focus { border-color: var(--mint); box-shadow: 0 0 0 4px #DCFCE7; }
    .play-account-select-wrap select:disabled { opacity: .6; }
    .play-account-select-wrap:focus-within::after { border-color: #15803D; }
    .btn-small { min-height: 34px; padding: 7px 11px; font-size: 12px; }
    .play-account-private { margin-top: 9px; color: #B45309; font-size: 11px; font-weight: 800; }
    .play-account-guild-entry {
      display: flex; align-items: center; gap: 10px; width: 100%; margin: 14px 0 2px; padding: 12px;
      border: 2px solid var(--mint-light); border-radius: var(--radius-lg); background: #F0FDF4;
      color: var(--chocolate); text-align: left; font-family: inherit; cursor: pointer;
    }
    .play-account-guild-entry:active { transform: scale(.985); }
    .play-account-guild-entry-icon { font-size: 28px; flex: 0 0 auto; }
    .play-account-guild-entry span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
    .play-account-guild-entry b { font-size: 14px; }
    .play-account-guild-entry small { color: var(--chocolate-light); font-size: 11px; font-weight: 700; line-height: 1.4; }
    .play-account-guild-entry strong { font-size: 22px; color: #16A34A; }
    .play-account-form-page { max-width: 620px; margin: 0 auto; }
    .play-account-form-game {
      padding: 14px; border-radius: var(--radius-lg); background: #F0FDF4; border: 3px solid var(--mint-light);
      color: var(--chocolate); font-size: 20px; font-weight: 900; text-align: center; margin-bottom: 10px;
    }
    .play-account-guild-hint {
      margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius-md);
      color: #92400E; background: #FFFBEB; border: 2px dashed #FDE68A; font-size: 12px; font-weight: 800; line-height: 1.5;
    }
    .play-account-guild-hint.joined { color: #166534; background: #F0FDF4; border-color: var(--mint-light); }
    .play-account-guild-hint.existing {
      color: #92400E; background: #FFFBEB; border-color: #FDE68A;
    }
    .play-account-guild-hint.existing .btn {
      display: inline-flex; min-height: 28px; margin-left: 3px; padding: 4px 9px;
      vertical-align: middle; font-size: 11px;
    }
    .play-account-presets { flex-wrap: wrap; overflow: visible; }
    .play-account-public-toggle {
      display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; color: var(--chocolate); font-size: 13px; font-weight: 800;
    }
    .play-account-public-toggle input { width: 18px; height: 18px; accent-color: #16A34A; }
    .play-account-delete { margin-top: 10px; color: #B91C1C; border-color: #FECACA; background: #FFF7F7; }
    .play-account-plaza-card { border: 2px solid var(--mint-light); }
    .play-account-plaza-card .post-header { flex-wrap: wrap; }
    .play-account-plaza-card .post-header .post-author {
      max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
    }
    .play-account-plaza-card .post-header .mine-tag {
      max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; flex-shrink: 0;
    }
    .guild-card, .team-card {
      background: #fff; border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 10px;
      box-shadow: 0 4px 12px var(--shadow); cursor: pointer; display: flex; align-items: center; gap: 12px;
    }
    .guild-card:active, .team-card:active { transform: scale(0.98); }
    .btn-mint { background: linear-gradient(135deg, #4ADE80 0%, #86EFAC 100%); color: var(--chocolate); }
    /* 小队卡片（大气版）：成员头像叠层暗示人气，申请按钮轻量化 */
    .team-card-rich { padding: 16px; }
    .team-faces { display: flex; flex-shrink: 0; padding-left: 4px; min-width: 84px; }
    .team-faces img, .team-faces > span {
      width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
      border: 2.5px solid #fff; margin-left: -10px; background: #ECFDF5;
      display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #059669;
      box-shadow: 0 2px 6px rgba(5, 150, 105, 0.18); position: relative;
    }
    .team-faces img:first-child, .team-faces > span:first-child { margin-left: 0; }
    .team-face-more {
      background: #D1FAE5; color: #047857; font-size: 12px; font-weight: 800;
    }
    .team-join-mini {
      min-width: 64px; padding: 7px 16px; font-size: 14px; border-radius: 999px;
      font-weight: 800; flex-shrink: 0;
    }
    /* 右上角"建小队"轻按钮（挂在返回栏上） */
    .team-create-mini {
      margin-left: auto; padding: 7px 14px; border-radius: 999px; border: 0;
      background: #fff; color: #047857; font-family: inherit; font-size: 13px;
      font-weight: 800; box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25); cursor: pointer;
      flex-shrink: 0; -webkit-tap-highlight-color: transparent;
    }
    .team-create-mini:active { transform: scale(0.95); }
    @media (max-width: 560px) {
      .play-account-directory { grid-template-columns: 1fr; gap: 8px; }
    }
    .lobby-card-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      box-shadow: 0 4px 0 rgba(93, 64, 55, 0.08);
      flex-shrink: 0;
    }
    .lobby-card-text { min-width: 0; width: 100%; }
    .lobby-card-name { font-size: 17px; font-weight: 800; color: var(--chocolate); }
    .lobby-card-desc { font-size: 12px; font-weight: 700; color: var(--chocolate-light); margin-top: 2px; line-height: 1.4; }
    .lobby-badge {
      position: absolute;
      top: -8px;
      right: -6px;
      background: #FB7185;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 50px;
      box-shadow: 0 2px 6px rgba(251, 113, 133, 0.4);
      border: 2px solid #fff;
    }
    .lobby-badge.plane-badge { background: #7C3AED; box-shadow: 0 2px 6px rgba(124, 58, 237, 0.35); }

    /* ===== 纸飞机 · 广场 ===== */
    .plaza-page { padding: 20px 0 104px; }
    .post-card {
      background: #fff;
      border-radius: var(--radius-lg);
      padding: 18px;
      margin-bottom: 14px;
      box-shadow: 0 6px 18px var(--shadow);
    }
    .post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .post-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #A78BFA 0%, var(--grape) 100%);
      color: #fff;
      font-size: 18px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 0 #7C3AED;
      flex-shrink: 0;
    }
    /* 内置角色头像图：填满圆形容器，盖掉原来的渐变底色 */
    .avatar-img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      display: block;
      pointer-events: none;
      user-select: none;
    }
    /* 3D 头像源文件是静态 webp：给一个轻微的上下浮动让头像"活"起来。
       相位按名字错开（见 avatarHtml 的 animation-delay）；换头像页 97 个格子
       一起动太吵，禁用；系统开了减弱动态时也关闭。
       容器圆底是白色，图上浮露出的白边不可见，不会出现"跳出圆框"。 */
    @keyframes avatarBob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    .avatar-img { animation: avatarBob 2.8s ease-in-out infinite; }
    .avatar-grid .avatar-img { animation: none; }
    @media (prefers-reduced-motion: reduce) {
      .avatar-img { animation: none; }
    }
    /* 图片头像：四角透明，容器的彩色渐变会从边角透出来变成一圈怪色底，所以换成白圆底
       （和「换头像」页的大预览一致）；3D 硬底阴影（紫/蓝）和图片撞色，也一并去掉贴干净圆底。
       标记 has-avatar-img 由 app.js 的 avatarImgClass() 打，不靠 CSS :has()——旧 iOS 和
       微信安卓 X5 内核不认 :has()，而 CSS 规定「选择器列表里有一个不认的整条作废」，
       那样 background 和 box-shadow 会一起失效，紫色 0 3px 0 就从图片底下漏出来。
       写成「容器 + 标记类」两个类（特异性 0,2,0）是为了压得住上面的 .lobby-avatar:active。 */
    .post-avatar.has-avatar-img,
    .lobby-avatar.has-avatar-img,
    .profile-avatar.has-avatar-img,
    .admin-avatar.has-avatar-img {
      background: #fff;
      box-shadow: none;
    }
    .post-author { font-size: 15px; font-weight: 800; color: var(--chocolate); }
    .post-time { font-size: 12px; font-weight: 700; color: var(--chocolate-light); margin-left: auto; }
    .post-icon-btn {
      border: none;
      background: var(--cream);
      cursor: pointer;
      font-size: 14px;
      padding: 4px 8px;
      border-radius: 10px;
      font-family: inherit;
      transition: all 0.15s;
      flex-shrink: 0;
    }
    .post-icon-btn:active { transform: scale(0.9); }
    .post-content { font-size: 15px; color: var(--chocolate); line-height: 1.7; white-space: pre-wrap; }
    .post-images { display: grid; gap: 8px; margin-top: 10px; }
    .post-images.n1 { grid-template-columns: 1fr; }
    .post-images.n2, .post-images.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .post-images img {
      width: 100%;
      max-height: 240px;
      object-fit: cover;
      border-radius: var(--radius-sm);
      border: 3px solid #fff;
      box-shadow: 0 3px 10px var(--shadow);
      cursor: pointer;
      display: block;
      background: var(--cream);
    }
    .post-images.n2 img, .post-images.n3 img { aspect-ratio: 1; max-height: none; }
    .post-footer { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
    .post-like {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: none;
      background: var(--candy-light);
      color: var(--chocolate-light);
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      padding: 6px 14px;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .post-like.liked { color: #E11D48; background: #FFE4E8; }
    .post-like:active { transform: scale(0.92); }
    .post-reply-btn {
      margin-left: auto;
      border: 2px dashed var(--grape);
      background: #fff;
      color: #7C3AED;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      padding: 6px 16px;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .post-reply-btn:active { transform: scale(0.95); background: var(--grape-light); }
    .reply-preview {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 3px dashed var(--grape-light);
      cursor: pointer;
    }
    .reply-preview-item { font-size: 13px; color: var(--chocolate); line-height: 1.6; padding: 2px 0; }
    .reply-preview-item b { color: #7C3AED; }
    .reply-more { font-size: 13px; font-weight: 800; color: #2563EB; padding-top: 6px; }
    .reply-item {
      background: #fff;
      border-radius: var(--radius-lg);
      padding: 14px 16px;
      margin-bottom: 10px;
      box-shadow: 0 4px 14px var(--shadow);
    }
    .reply-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .reply-author { font-size: 14px; font-weight: 800; color: var(--chocolate); }
    .reply-time { font-size: 11px; font-weight: 700; color: var(--chocolate-light); margin-left: auto; }
    .reply-body { font-size: 14px; color: var(--chocolate); line-height: 1.65; white-space: pre-wrap; }

    /* ===== 纸飞机 · 发布页 ===== */
    .publish-page { padding: 20px 0 104px; }
    .publish-toggle { display: flex; gap: 10px; margin-bottom: 20px; }
    .pub-seg {
      flex: 1;
      padding: 14px 8px;
      border-radius: var(--radius-md);
      border: 3px solid var(--grape-light);
      background: #fff;
      color: var(--chocolate-light);
      font-family: inherit;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.2s;
    }
    .pub-seg.on {
      background: linear-gradient(135deg, #A78BFA 0%, var(--grape) 100%);
      border-color: #8B5CF6;
      color: #fff;
    }
    .pub-seg.on:active { transform: translateY(2px); }
    .secret-info-card {
      background: var(--grape-light);
      border: 3px dashed var(--grape);
      border-radius: var(--radius-md);
      padding: 14px 16px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.7;
      color: #6D28D9;
      margin-bottom: 18px;
    }
    .char-count { text-align: right; font-size: 12px; font-weight: 700; color: var(--chocolate-light); margin-top: 4px; }
    .btn-grape { background: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%); color: #fff; }
    .btn:disabled { opacity: 0.55; cursor: default; }
    .img-preview-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
    .img-preview-item { position: relative; width: 84px; height: 84px; }
    .img-preview-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--radius-sm);
      border: 3px solid #fff;
      box-shadow: 0 3px 10px var(--shadow);
    }
    .img-remove {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #FB7185;
      color: #fff;
      border: 2px solid #fff;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: inherit;
    }
    .img-add-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 3px dashed var(--sky);
      background: var(--sky-light);
      color: #2563EB;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      padding: 12px 20px;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all 0.15s;
    }
    .img-add-btn:active { transform: scale(0.96); }
    .img-add-btn input[type="file"] { display: none; }

    /* ===== 纸飞机 · 秘密信箱 ===== */
    .mailbox-page { padding: 20px 0 104px; }
    /* 信箱页两个小标题下方的虚线在这里是多余的，标题本身已经能分段 */
    #mailbox-page .mailbox-section h3 { border-bottom: 0; padding-bottom: 0; }
    .mailbox-section { margin-bottom: 28px; }
    .mailbox-section h3 {
      font-size: 17px;
      font-weight: 800;
      color: var(--chocolate);
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 3px dashed var(--grape);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    /* 未读数挂在信封图标右上角，不占标题行；与底部 tab 角标同一套观感 */
    .mailbox-head-icon { position: relative; display: inline-flex; }
    .mailbox-count {
      position: absolute;
      top: -7px;
      left: 100%;
      margin-left: -9px;
      min-width: 17px;
      height: 17px;
      padding: 0 4px;
      background: #FB7185;
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      line-height: 17px;
      border-radius: 50px;
      text-align: center;
      border: 2px solid #fff;
      box-shadow: 0 1px 4px rgba(251, 113, 133, 0.45);
    }
    .letter-card {
      background: var(--cream);
      border: 3px dashed var(--grape);
      border-radius: var(--radius-lg);
      padding: 16px;
      margin-bottom: 14px;
      cursor: pointer;
      position: relative;
      transition: all 0.2s;
      box-shadow: 0 4px 14px var(--shadow);
    }
    .letter-card:active { transform: scale(0.98); border-color: #8B5CF6; }
    .letter-card::before {
      content: "";
      position: absolute;
      top: -9px;
      left: 50%;
      width: 64px;
      height: 16px;
      transform: translateX(-50%) rotate(-2deg);
      background: rgba(196, 181, 253, 0.5);
      border-radius: 4px;
    }
    .letter-head {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 800;
      color: #6D28D9;
      margin-bottom: 8px;
    }
    .letter-head .letter-time { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--chocolate-light); }
    .unread-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #FB7185;
      flex-shrink: 0;
      animation: pulse 1.2s infinite;
    }
    .letter-content { font-size: 14px; color: var(--chocolate); line-height: 1.7; white-space: pre-wrap; }
    .letter-foot { font-size: 12px; font-weight: 700; color: var(--chocolate-light); margin-top: 8px; }

    /* 秘密对话页：匿名气泡 */
    .secret-thread-page { padding: 20px 0 130px; }
    .secret-thread-page .report-line { text-align: right; margin-bottom: 10px; }
    .report-link {
      border: none;
      background: none;
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      color: var(--chocolate-light);
      cursor: pointer;
      padding: 4px 0;
      text-decoration: underline dashed;
    }
    .report-link:active { color: #E11D48; }
    .bubble-row { display: flex; margin-bottom: 4px; }
    .bubble-row.me { justify-content: flex-end; }
    .bubble-row.with-name { margin-top: 10px; }
    .bubble-col { display: flex; flex-direction: column; max-width: 76%; }
    .bubble-row.me .bubble-col { align-items: flex-end; }
    .bubble-sender { font-size: 11px; font-weight: 800; color: var(--chocolate-light); margin: 0 4px 3px; }
    .bubble {
      width: fit-content;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 15px;
      line-height: 1.4;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .bubble-img {
      display: block;
      width: 100%;
      max-width: 200px;
      max-height: 220px;
      object-fit: cover;
      border-radius: 4px;
      margin-top: 4px;
    }
    .bubble-row.me .bubble {
      background: #95EC69;
      color: #103A0B;
      border-top-right-radius: 1px;
    }
    .bubble-row.other .bubble {
      background: #FFFFFF;
      color: var(--chocolate);
      border-top-left-radius: 1px;
    }
    .bubble-time { font-size: 10px; font-weight: 700; color: var(--chocolate-light); margin-top: 2px; padding: 0 4px; text-align: right; }
    .bubble-row .bubble-time { display: none; }
    .bubble-row:last-child .bubble-time,
    .bubble-row.time-show .bubble-time { display: block; }
    .chat-img-btn {
      flex-shrink: 0;
      font-size: 22px;
      width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      background: var(--mint-light);
      border: 3px solid var(--mint);
      cursor: pointer;
      user-select: none;
    }
    .chat-img-btn input[type="file"] { display: none; }
    .chat-img-btn:active { transform: scale(0.94); }
    .voice-bubble {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,0.6);
      border-radius: 50px; padding: 6px 12px 6px 6px;
      cursor: pointer; min-width: 120px;
    }
    .voice-bubble.mine { background: rgba(255,255,255,0.75); }
    .voice-bubble .play-btn {
      border: none; background: #fff; width: 30px; height: 30px; border-radius: 50%;
      font-size: 13px; cursor: pointer; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    }
    .voice-bubble .voice-bars { display: flex; align-items: center; gap: 2px; flex: 1; }
    .voice-bubble .voice-bars i { width: 3px; background: currentColor; opacity: 0.45; border-radius: 2px; }
    .voice-bubble .duration { font-size: 12px; font-weight: 800; flex-shrink: 0; }
    /* 状态文字默认隐藏，只给读屏；播放/加载时显示，明确当前状态 */
    .voice-bubble .voice-state, .voice-player .voice-state {
      font-size: 11px; font-weight: 800; color: var(--grape); white-space: nowrap; display: none;
    }
    .voice-bubble.loading .voice-state, .voice-bubble.playing .voice-state,
    .voice-player.loading .voice-state, .voice-player.playing .voice-state { display: block; }
    .voice-player { position: relative; }
    /* 播放中的声浪跳动；等待加载时呼吸，点按后立刻可见 */
    .voice-bubble.loading { opacity: .82; }
    .voice-bubble.loading .play-btn { animation: voiceWait .9s ease-in-out infinite; }
    .voice-bubble.playing { background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 2px rgba(124,58,237,.35); }
    .voice-bubble.playing .voice-bars i { animation: voiceBar 0.9s ease-in-out infinite; }
    .voice-player.loading { opacity: .85; }
    .voice-player.playing { background: #F5F3FF; box-shadow: inset 0 0 0 2px rgba(124,58,237,.3); }
    .voice-player.playing .play-btn { box-shadow: 0 3px 0 #7C3AED; }
    @keyframes voiceBar { 0%,100% { transform: scaleY(.6); opacity: .45; } 50% { transform: scaleY(1.4); opacity: .95; } }
    @keyframes voiceWait { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) {
      .voice-bubble.playing .voice-bars i, .voice-bubble.loading .play-btn { animation: none; }
    }
    .voice-btn-inline {
      font-family: inherit; font-size: 15px; font-weight: 800;
      padding: 10px 18px; border-radius: 50px; cursor: pointer;
      border: 3px solid var(--grape); background: #fff; color: var(--chocolate);
      margin-right: 10px;
    }
    .voice-btn-inline.recording {
      background: #FEE2E2; border-color: #EF4444; color: #B91C1C;
      animation: voicePulse 1s infinite;
    }
    @keyframes voicePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
    .voice-hint { font-size: 12px; font-weight: 700; color: var(--chocolate-light); }
    .voice-pending {
      display: flex; align-items: center; gap: 8px;
      background: var(--grape-light); border-radius: var(--radius-md);
      padding: 8px 10px; margin-bottom: 10px; color: var(--chocolate);
    }
    .voice-pending-remove {
      border: none; background: #fff; border-radius: 50%; width: 26px; height: 26px;
      cursor: pointer; font-weight: 800; color: #DC2626; flex-shrink: 0;
    }
    .post-card .voice-bubble, .detail-header .voice-bubble {
      margin-top: 10px; background: var(--grape-light);
    }
    .chat-manage-btn {
      margin-left: auto;
      font-size: 20px; font-weight: 800;
      width: 36px; height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,0.45);
      border: none;
      color: var(--chocolate);
      cursor: pointer;
      line-height: 1;
      flex-shrink: 0;
    }
    .chat-manage-btn:active { transform: scale(0.92); }
    .team-panel {
      position: fixed;
      top: 64px; right: 12px;
      z-index: 150;
      animation: fadeIn 0.15s;
    }
    .team-panel-card {
      background: #fff;
      border-radius: 14px;
      padding: 16px;
      width: 240px;
      box-shadow: 0 10px 32px rgba(0,0,0,0.18);
      border: 2px solid var(--mint-light);
    }
    .team-panel-title { font-size: 16px; font-weight: 800; color: var(--chocolate); }
    .team-panel-sub { font-size: 12px; font-weight: 700; color: var(--chocolate-light); margin: 4px 0 10px; }
    .team-panel-members { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .team-member-chip {
      font-size: 12px; font-weight: 800;
      background: var(--mint-light);
      color: var(--chocolate);
      border-radius: 50px; padding: 4px 10px;
    }
    .team-danger { color: #DC2626; border-color: #FECACA; background: #FEF2F2; }
    .chat-img-preview {
      position: fixed;
      left: 0; right: 0;
      bottom: 88px;
      padding: 8px 14px calc(10px + env(safe-area-inset-bottom));
      display: flex; gap: 8px;
      background: rgba(255, 255, 255, 0.95);
      border-top: 2px dashed var(--mint-light);
      z-index: 90;
      overflow-x: auto;
    }
    .chat-img-full {
      max-width: 92vw;
      max-height: 80vh;
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }

    /* 秘密信纸卡（对话页顶部原始秘密） */
    .letter-static { cursor: default; margin-bottom: 20px; }
    .letter-static:active { transform: none; }

    /* ===== 飞行动画 ===== */
    .fly-overlay {
      position: fixed;
      inset: 0;
      z-index: 998;
      background: rgba(255, 253, 245, 0.92);
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeIn 0.2s;
    }
    .fly-plane { font-size: 72px; animation: fly-away 1.3s ease-in forwards; }
    @keyframes fly-away {
      0% { transform: translate(-30vw, 12vh) rotate(15deg) scale(0.8); opacity: 0; }
      20% { opacity: 1; }
      100% { transform: translate(45vw, -32vh) rotate(-10deg) scale(1.15); opacity: 0; }
    }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    /* 我的页：纸飞机摘要（可点的统计格） */
    .stat-item.clickable { cursor: pointer; transition: all 0.15s; }
    .stat-item.clickable:active { transform: scale(0.95); }

    /* 我的页：去纸飞机入口卡 */
    .plane-entry {
      background: linear-gradient(135deg, var(--grape-light) 0%, var(--candy-light) 100%);
      border: 3px solid #fff;
      border-radius: var(--radius-lg);
      padding: 16px 18px;
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
      box-shadow: 0 6px 18px var(--shadow);
      cursor: pointer;
      transition: all 0.2s;
    }
    .plane-entry:active { transform: scale(0.98); }
    .plane-entry-icon { font-size: 34px; }
    .plane-entry-title { font-size: 16px; font-weight: 800; color: var(--chocolate); }
    .plane-entry-sub { font-size: 12px; font-weight: 700; color: var(--chocolate-light); margin-top: 2px; }
    .plane-entry-arrow { margin-left: auto; font-size: 20px; color: var(--chocolate-light); font-weight: 800; }

    /* ============================================================
       小卖部（柠檬黄 / 蜜橙，第三功能色）
       ============================================================ */
    .navbar.lemon-nav, .back-bar.lemon-nav {
      background: linear-gradient(135deg, #FDE047 0%, #FDBA74 100%);
      box-shadow: 0 4px 16px rgba(253, 186, 116, 0.35);
    }
    .navbar.lemon-nav .logo, .back-bar.lemon-nav .title { color: var(--chocolate); text-shadow: none; }
    .navbar.grape-nav .candy-chip { box-shadow: 0 3px 0 rgba(124,58,237,0.25); }
    .navbar.lemon-nav .user-info,
    .navbar.lemon-nav .home-btn { color: var(--chocolate); }
    .navbar.lemon-nav .home-btn,
    .back-bar.lemon-nav .home-btn.light, .back-bar.lemon-nav .back-btn {
      border-color: rgba(93,64,55,0.25);
      background: rgba(255,255,255,0.45);
      color: var(--chocolate);
    }
    .candy-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #fff;
      color: var(--chocolate);
      font-weight: 800;
      font-size: 13px;
      padding: 4px 10px;
      border-radius: 50px;
      cursor: pointer;
      box-shadow: 0 3px 0 rgba(93,64,55,0.12);
      border: none;
      font-family: inherit;
    }
    .candy-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(93,64,55,0.12); }
    .level-chip {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      background: var(--lemon-light);
      color: var(--chocolate);
      font-weight: 800;
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 50px;
      cursor: pointer;
      border: none;
      font-family: inherit;
      box-shadow: 0 3px 0 rgba(93,64,55,0.10);
    }
    .level-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(93,64,55,0.10); }
    .level-line {
      font-size: 13px;
      font-weight: 800;
      color: var(--chocolate);
      margin-bottom: 10px;
      padding-left: 4px;
      cursor: pointer;
    }
    .level-bar {
      height: 10px;
      background: #fff;
      border-radius: 50px;
      overflow: hidden;
      border: 2px solid var(--lemon);
      margin-top: 8px;
    }
    .level-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #FDE047, #86EFAC);
      border-radius: 50px;
    }
    .level-row {
      display: flex;
      justify-content: space-between;
      padding: 10px 12px;
      background: #fff;
      border-radius: 12px;
      margin-bottom: 8px;
      font-weight: 800;
      font-size: 14px;
      color: var(--chocolate-light);
      box-shadow: 0 3px 10px var(--shadow);
    }
    .level-row.done { color: var(--chocolate); }
    .level-row.current { border: 3px solid var(--lemon); background: var(--lemon-light); }
    .lobby-card.card-shop { background: linear-gradient(135deg, var(--lemon-light) 0%, #FED7AA 100%); }
    .lobby-badge.shop-badge { background: #FB923C; box-shadow: 0 2px 6px rgba(251,146,60,0.4); }
    .btn-orange { background: linear-gradient(135deg, #FB923C 0%, #FDBA74 100%); color: #fff; }

    .shop-page { padding: 16px 0 104px; }
    .checkin-bar {
      background: var(--lemon-light);
      border: 3px dashed var(--lemon);
      border-radius: var(--radius-md);
      padding: 12px 14px;
      font-size: 14px;
      font-weight: 800;
      color: #854D0E;
      margin-bottom: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .checkin-bar:active { transform: scale(0.98); }
    .checkin-bar.done {
      cursor: default;
      background: var(--mint-light);
      border-color: var(--mint);
      color: #166534;
    }
    .checkin-bar.done:active { transform: none; }
    /* 签到按钮：条本身不再整块可点，按钮才是明确的可点目标 */
    .checkin-bar { gap: 10px; }
    .checkin-hint { min-width: 0; }
    .checkin-btn {
      flex-shrink: 0;
      border: none;
      background: linear-gradient(135deg, #FBBF24 0%, #FB923C 100%);
      color: #fff;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      padding: 7px 16px;
      border-radius: 50px;
      cursor: pointer;
      box-shadow: 0 2px 0 #D97706;
      transition: transform 0.15s, box-shadow 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .checkin-btn:active { transform: translateY(2px); box-shadow: 0 0 0 #D97706; }
    /* 签到条上那颗糖豆数：签完鼓一下 */
    .checkin-bar.done b { display: inline-block; font-weight: 800; }
    .checkin-bar.done b.pop { animation: checkinNumPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes checkinNumPop {
      0%   { transform: scale(1); color: inherit; }
      35%  { transform: scale(1.5); color: #F59E0B; }
      100% { transform: scale(1); color: inherit; }
    }
    /* 签到条本身闪一下薄荷光 */
    .checkin-bar.done.flash { animation: checkinFlash 0.9s ease-out; }
    @keyframes checkinFlash {
      0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.9); background-color: #DCFCE7; }
      100% { box-shadow: 0 0 0 16px rgba(52, 211, 153, 0); background-color: var(--mint-light); }
    }
    /* 撒糖豆：从签到按钮位置扇形散开再落下 */
    .candy-burst { position: fixed; inset: 0; pointer-events: none; z-index: 300; }
    .candy-burst span {
      position: absolute;
      font-size: 20px;
      line-height: 1;
      will-change: transform, opacity;
      animation: candyBurstFly 1.5s cubic-bezier(0.22, 0.8, 0.35, 1) forwards;
    }
    @keyframes candyBurstFly {
      0%   { transform: translate(-50%, -50%) scale(0.3) rotate(0deg); opacity: 0; }
      15%  { opacity: 1; }
      70%  { opacity: 1; }
      100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 90px)) scale(1) rotate(var(--rot)); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .checkin-bar.done b.pop,
      .checkin-bar.done.flash,
      .candy-burst span { animation: none; }
    }
    /* 卖出赚糖豆的战果弹窗：大数字弹跳 + 糖豆雨，突出颗数 */
    .candy-win-mask {
      position: fixed; inset: 0; z-index: 320; display: grid; place-items: center;
      background: rgba(93, 64, 55, 0.35); pointer-events: auto;
      animation: candyWinFade 0.25s ease-out;
    }
    @keyframes candyWinFade { from { opacity: 0; } to { opacity: 1; } }
    .candy-win-card {
      background: linear-gradient(160deg, #FFFBEB, #FEF3C7);
      border-radius: 24px; padding: 28px 36px 22px; text-align: center;
      box-shadow: 0 18px 48px rgba(180, 83, 9, 0.35);
      animation: candyWinPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes candyWinPop {
      0% { transform: scale(0.6); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
    .candy-win-title { font-size: 15px; font-weight: 800; color: #92400E; letter-spacing: 1px; }
    .candy-win-num {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      font-size: 52px; font-weight: 900; color: #D97706; line-height: 1.15; margin: 8px 0 2px;
    }
    .candy-win-num .candy-glyph {
      display: inline-block; font-size: 40px;
      animation: candySpin 1.2s ease-in-out infinite;
    }
    @keyframes candySpin {
      0%, 100% { transform: rotate(-12deg) scale(1); }
      50% { transform: rotate(12deg) scale(1.15); }
    }
    .candy-win-num .candy-count {
      display: inline-block;
      animation: checkinNumPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards;
    }
    .candy-win-unit { font-size: 16px; font-weight: 800; color: #B45309; }
    .candy-win-sub { font-size: 13px; font-weight: 700; color: #A16207; margin-bottom: 14px; }
    .candy-win-card .btn { min-width: 130px; }
    .candy-rain { position: fixed; inset: 0; pointer-events: none; z-index: 330; overflow: hidden; }
    .candy-rain span {
      position: absolute; top: -30px; font-size: 22px; line-height: 1;
      animation: candyRainFall 1.4s ease-in forwards;
    }
    @keyframes candyRainFall {
      0% { transform: translateY(0) rotate(0deg); opacity: 0; }
      10% { opacity: 1; }
      100% { transform: translateY(78vh) rotate(var(--rot)); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .candy-win-card, .candy-win-num .candy-count,
      .candy-win-num .candy-glyph, .candy-rain span { animation: none; }
    }
    .shop-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      overflow-x: auto;
    }
    .shop-tab {
      flex: 1;
      min-width: 64px;
      padding: 8px 6px;
      border-radius: 50px;
      border: 3px solid var(--lemon-light);
      background: #fff;
      color: var(--chocolate-light);
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }
    .shop-tab.on {
      background: linear-gradient(135deg, #FDE047 0%, #FDBA74 100%);
      border-color: #F59E0B;
      color: var(--chocolate);
      box-shadow: 0 3px 0 #F59E0B;
    }
    .goods-card {
      background: #fff;
      border-radius: var(--radius-lg);
      padding: 14px;
      margin-bottom: 12px;
      box-shadow: 0 6px 18px var(--shadow);
      display: flex;
      gap: 12px;
      cursor: pointer;
      border: 3px solid transparent;
    }
    .goods-card:active { transform: scale(0.98); }
    .goods-card.urgent { border-color: var(--candy); }
    .goods-thumb {
      width: 88px;
      height: 88px;
      border-radius: var(--radius-sm);
      object-fit: cover;
      background: var(--lemon-light);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      overflow: hidden;
    }
    .goods-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .goods-body { min-width: 0; flex: 1; }
    .goods-title { font-size: 16px; font-weight: 800; color: var(--chocolate); }
    .goods-meta { font-size: 13px; font-weight: 700; color: var(--chocolate-light); margin-top: 4px; }
    .goods-price { font-size: 15px; font-weight: 800; color: #C2410C; margin-top: 6px; }
    .tier-pill {
      display: inline-block; font-size: 11px; font-weight: 800; line-height: 1;
      padding: 3px 6px; border-radius: 6px; margin-left: 4px; vertical-align: 2px; color: #fff;
    }
    .tier-low { background: #9CA3AF; }
    .tier-mid { background: #16A34A; }
    .tier-high { background: #2563EB; }
    .tier-legend { background: #D97706; }
    .tier-hidden { background: #9333EA; }
    .tier-spp { background: linear-gradient(90deg, #DC2626, #DB2777); }
    .want-card {
      background: #fff;
      border-radius: var(--radius-lg);
      padding: 16px;
      margin-bottom: 12px;
      box-shadow: 0 6px 18px var(--shadow);
      cursor: pointer;
      border-left: 6px solid var(--lemon);
    }
    .wallet-card {
      background: linear-gradient(135deg, var(--lemon-light) 0%, #FED7AA 100%);
      border: 3px solid #fff;
      border-radius: var(--radius-lg);
      padding: 18px;
      margin-bottom: 16px;
      box-shadow: 0 6px 18px var(--shadow);
    }
    .wallet-balance { font-size: 32px; font-weight: 800; color: var(--chocolate); line-height: 1.2; }
    .wallet-sub { font-size: 12px; font-weight: 700; color: var(--chocolate-light); margin-top: 4px; }
    .wallet-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-content: flex-start; }
    .todo-card {
      background: #fff;
      border-radius: var(--radius-md);
      padding: 14px;
      margin-bottom: 10px;
      box-shadow: 0 4px 12px var(--shadow);
      border: 2px dashed var(--candy);
    }
    .ledger-item {
      background: #fff;
      border-radius: var(--radius-md);
      padding: 12px 14px;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 3px 10px var(--shadow);
    }
    .ledger-amt { font-weight: 800; font-size: 16px; }
    .ledger-amt.plus { color: #15803D; }
    .ledger-amt.minus { color: #C2410C; }
    .bid-row { font-size: 14px; padding: 8px 0; border-bottom: 2px dashed var(--lemon-light); font-weight: 700; }
    .shop-modal {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(93,64,55,0.35);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
    }
    .shop-modal-card {
      background: #fff;
      border-radius: var(--radius-lg);
      padding: 24px 20px;
      width: 100%;
      max-width: 340px;
      border: 4px solid var(--lemon);
      box-shadow: 0 12px 40px var(--shadow);
    }
    .app-dialog-mask {
      position: fixed; inset: 0; z-index: 260;
      background: rgba(93, 64, 55, 0.45);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
    }
    .app-dialog {
      background: #fff;
      border-radius: var(--radius-lg);
      padding: 22px 20px 18px;
      width: 100%;
      max-width: 320px;
      border: 4px solid var(--sky);
      box-shadow: 0 12px 36px var(--shadow);
      text-align: center;
    }
    /* 弹窗跟随模块主题色（showAppDialog 按 currentSpace 加 theme class） */
    .app-dialog.theme-lemon { border-color: var(--lemon); }
    .app-dialog.theme-lemon .qty-stepper { background: #FFFBEB; border-color: var(--lemon); }
    .app-dialog.theme-lemon .app-dialog-actions .btn-primary { background: linear-gradient(135deg, #FB923C 0%, #FDBA74 100%); }
    .app-dialog.theme-lemon .app-dialog-actions .btn-outline { border-color: #FED7AA; }
    .app-dialog.theme-mint { border-color: var(--mint); }
    .app-dialog.theme-mint .qty-stepper { background: var(--mint-light); border-color: var(--mint); }
    .app-dialog.theme-mint .app-dialog-actions .btn-primary { background: linear-gradient(135deg, #34D399 0%, var(--mint) 100%); }
    .app-dialog.theme-grape { border-color: var(--grape); }
    .app-dialog.theme-grape .qty-stepper { background: var(--grape-light); border-color: var(--grape); }
    .app-dialog.theme-grape .app-dialog-actions .btn-primary { background: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%); }
    .app-dialog-emoji { font-size: 36px; line-height: 1; margin-bottom: 8px; }
    .app-dialog-title {
      font-size: 18px; font-weight: 800; color: var(--chocolate); margin-bottom: 8px;
    }
    .app-dialog-body {
      font-size: 14px; font-weight: 700; color: var(--chocolate-light);
      line-height: 1.55; white-space: pre-wrap;
    }
    .app-dialog-input {
      width: 100%; margin-top: 12px; text-align: center;
      font-size: 18px; font-weight: 800; font-family: inherit;
      padding: 12px 14px; border-radius: var(--radius-lg);
      border: 3px solid #BFDBFE; background: #EFF6FF; color: var(--chocolate);
      outline: none; transition: border-color 0.15s, box-shadow 0.15s;
      box-sizing: border-box;
    }
    .app-dialog-input:focus {
      border-color: var(--sky);
      box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18);
    }
    .app-dialog-input::placeholder { color: #93C5FD; font-weight: 700; }
    .app-dialog.theme-mint .app-dialog-input {
      border-color: #A7F3D0; background: var(--mint-light); color: var(--chocolate);
    }
    .app-dialog.theme-mint .app-dialog-input:focus {
      border-color: var(--mint);
      box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.2);
    }
    .app-dialog.theme-mint .app-dialog-input::placeholder { color: #6EE7B7; }
    .app-dialog.theme-lemon .app-dialog-input {
      border-color: #FDE68A; background: #FFFBEB;
    }
    .app-dialog.theme-lemon .app-dialog-input:focus {
      border-color: var(--lemon);
      box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.2);
    }
    .app-dialog.theme-lemon .app-dialog-input::placeholder { color: #FCD34D; }
    .app-dialog.theme-grape .app-dialog-input {
      border-color: #DDD6FE; background: var(--grape-light);
    }
    .app-dialog.theme-grape .app-dialog-input:focus {
      border-color: var(--grape);
      box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2);
    }
    /* 数量步进器：移动端大按钮点按，替代浏览器原生数字小箭头 */
    .qty-stepper {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; margin-top: 14px; padding: 8px;
      background: var(--sky-light);
      border: 3px solid var(--sky);
      border-radius: var(--radius-lg);
    }
    .qty-btn {
      flex: 0 0 auto;
      width: 56px; height: 56px;
      border: none; border-radius: 50%;
      background: #fff; color: var(--chocolate);
      font-family: inherit; font-size: 26px; font-weight: 800; line-height: 1;
      cursor: pointer; padding: 0;
      box-shadow: 0 4px 0 rgba(93, 64, 55, 0.18);
      transition: transform 0.1s, box-shadow 0.1s;
      touch-action: manipulation;
      user-select: none; -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    .qty-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(93, 64, 55, 0.18); }
    .qty-btn:disabled {
      opacity: 0.35; cursor: default; transform: none;
      box-shadow: 0 4px 0 rgba(93, 64, 55, 0.08);
    }
    .qty-value {
      flex: 1 1 0; min-width: 0;
      border: none; background: transparent; outline: none;
      text-align: center;
      font-family: inherit; font-size: 30px; font-weight: 800;
      color: var(--chocolate);
      -moz-appearance: textfield; appearance: textfield;
    }
    .qty-value::-webkit-outer-spin-button,
    .qty-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .qty-chips { display: flex; gap: 8px; margin-top: 10px; justify-content: center; }
    .qty-chip {
      border: 3px solid var(--mint); background: #fff;
      border-radius: 50px; padding: 8px 14px; min-height: 40px;
      font-family: inherit; font-weight: 800; font-size: 14px;
      color: var(--chocolate); cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .qty-chip:active { transform: translateY(2px); }
    .qty-hint {
      margin-top: 8px; font-size: 14px; font-weight: 800;
      color: var(--chocolate-light);
    }
    .qty-hint:empty { display: none; }
    .app-dialog-actions {
      display: flex; gap: 10px; margin-top: 18px;
    }
    .app-dialog-actions .btn { flex: 1; }
    .cat-pills { display: flex; flex-wrap: wrap; gap: 8px; }
    .cat-pill {
      border: 3px solid var(--lemon-light);
      background: #fff;
      border-radius: 50px;
      padding: 6px 12px;
      font-family: inherit;
      font-weight: 800;
      font-size: 13px;
      cursor: pointer;
      color: var(--chocolate);
    }
    .cat-pill.on { background: var(--lemon); border-color: #F59E0B; }
    .plane-entry.shop-entry {
      background: linear-gradient(135deg, var(--lemon-light) 0%, #FED7AA 100%);
    }
    .market-banner {
      border-radius: var(--radius-lg);
      padding: 14px 16px;
      margin-bottom: 14px;
      border: 3px solid #fff;
      box-shadow: 0 4px 12px var(--shadow);
      background: var(--lemon-light);
    }
    .market-banner.gold { background: linear-gradient(135deg, #FDE047 0%, #FDBA74 100%); }
    .market-banner.red { background: linear-gradient(135deg, #FECACA 0%, #FDBA74 100%); }
    .market-banner.rainbow { background: linear-gradient(135deg, #FDE68A 0%, #BBF7D0 50%, #BFDBFE 100%); }
    .market-banner.gray { background: #E7E5E4; }
    .market-card.auc-wait {
  opacity: 0.82;
  border: 2px dashed #FDBA74;
  background: #FFFBEB;
}
.market-card.auc-wait .market-item::after {
  content: '未上架';
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #FED7AA;
  color: #9A3412;
  vertical-align: 2px;
}

.market-card.chest {
      border: 3px dashed var(--lemon);
      background: linear-gradient(135deg, #FFF7ED 0%, var(--lemon-light) 100%);
    }
    .market-card.chest.done { border-style: solid; }
    .market-card.hidden-order { border-left: 5px solid #A855F7; }
    .market-card.buy .hold-line {
      color: #15803D; background: var(--mint-light);
      border-radius: 8px; padding: 4px 10px; margin-top: 6px;
    }
    .can-afford-hint {
      color: var(--chocolate-light);
      background: var(--cream);
      border-radius: 8px; padding: 4px 10px; margin-top: 8px; text-align: center;
    }
    .hidden-tag {
      font-size: 11px; font-weight: 800; color: #fff;
      background: #A855F7; border-radius: 50px; padding: 2px 8px; margin-left: 4px;
    }
    .chest-layer {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(93, 64, 55, 0.55);
      display: flex; align-items: center; justify-content: center;
    }
    .chest-box { font-size: 96px; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3)); }
    .chest-box.shaking { animation: chestShake 0.3s infinite; }
    @keyframes chestShake {
      0%, 100% { transform: rotate(-8deg); }
      50% { transform: rotate(8deg) scale(1.05); }
    }
    .chest-result {
      background: #fff; border-radius: var(--radius-lg);
      padding: 28px 24px; width: 86%; max-width: 360px; text-align: center;
      box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    }
    /* 开箱动效分三档：普通款 / 糖豆 / 隐藏款。同一套骨架，颜色、速度、光晕强度
       靠变量区分，隐藏款最花、糖豆其次、普通款最克制。
       描边用「双背景 + background-position」扫动，而不是 @property 转 conic 角，
       老 Safari 也能动。 */
    .chest-result {
      --ring1: #93C5FD; --ring2: #BFDBFE; --ring3: #A5B4FC; --ring4: #93C5FD;
      --glow: 96, 165, 250;
      --glow-min: 12px; --glow-max: 22px;
      --shimmer-dur: 4.4s;
      border: 4px solid transparent;
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(115deg, var(--ring1) 0%, var(--ring2) 32%, var(--ring3) 64%, var(--ring4) 100%) border-box;
      background-size: 100% 100%, 300% 300%;
      animation: chestShimmer var(--shimmer-dur) linear infinite, chestGlow 2.6s ease-in-out infinite;
    }
    @keyframes chestShimmer {
      from { background-position: 0 0, 0% 50%; }
      to   { background-position: 0 0, 300% 50%; }
    }
    @keyframes chestGlow {
      0%, 100% { box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 0 var(--glow-min) rgba(var(--glow), 0.3); }
      50%      { box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 0 var(--glow-max) rgba(var(--glow), 0.7); }
    }
    .chest-result.candy-got {
      --ring1: #FB7185; --ring2: #FDA4AF; --ring3: #FDBA74; --ring4: #FDE68A;
      --glow: 251, 113, 133;
      --glow-min: 16px; --glow-max: 30px;
      --shimmer-dur: 3.4s;
    }
    .chest-result.hidden-got {
      --ring1: #A855F7; --ring2: #F0ABFC; --ring3: #60A5FA; --ring4: #FBBF24;
      --glow: 168, 85, 247;
      --glow-min: 18px; --glow-max: 34px;
      --shimmer-dur: 3.2s;
    }
    /* 标题弹一下，奖品名轻轻浮——三档都有，只是隐藏款更用力 */
    .chest-result .chest-result-title { animation: chestPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
    .chest-result.candy-got .chest-result-title { color: #BE123C; }
    .chest-result.hidden-got .chest-result-title { color: #7E22CE; }
    @keyframes chestPop {
      0%   { transform: scale(0.4); opacity: 0; }
      60%  { transform: scale(1.14); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }
    .chest-result .chest-big { display: inline-block; animation: chestBob 2.6s ease-in-out infinite; }
    .chest-result.hidden-got .chest-big { animation-duration: 2.4s; }
    @keyframes chestBob {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50%      { transform: translateY(-5px) rotate(-2deg); }
    }
    /* 糖豆数：跳得比奖品名更明显，数字本身还会鼓一下 */
    .chest-candy-num {
      display: inline-block;
      color: #E11D48;
      animation: chestCandyBeat 1.2s ease-in-out infinite;
    }
    @keyframes chestCandyBeat {
      0%, 100% { transform: scale(1); }
      45%      { transform: scale(1.18); }
      60%      { transform: scale(0.98); }
    }
    .chest-result.hidden-got .chest-sparkle {
      display: inline-block; align-self: center;
      background: linear-gradient(135deg, #F3E8FF, #FCE7F3);
      border: 2px solid #A855F7; border-radius: 50px;
      padding: 3px 14px; margin-top: 2px;
      animation: chestSparkle 1.5s ease-in-out infinite;
    }
    @keyframes chestSparkle {
      0%, 100% { transform: scale(1) rotate(0deg); box-shadow: 0 0 0 0 rgba(168,85,247,0.5); }
      50%      { transform: scale(1.08) rotate(-3deg); box-shadow: 0 0 0 9px rgba(168,85,247,0); }
    }
    /* 弹窗暗处的飘浮图案：糖豆是糖豆，隐藏款是星星，普通款不飘 */
    .chest-layer.chest-layer-fx::before {
      content: var(--float-icons);
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: space-around;
      flex-wrap: wrap; align-content: space-around;
      padding: 8% 10%;
      font-size: 22px; pointer-events: none;
      opacity: var(--float-opacity, 0.75);
      animation: chestFloat var(--float-dur, 5s) ease-in-out infinite;
    }
    .chest-layer.candy-layer {
      --float-icons: '🍬 🍭 🍬 🍭 🍬 🍭';
      --float-opacity: 0.55;
      --float-dur: 4.2s;
    }
    .chest-layer.hidden-layer {
      --float-icons: '✨ ✨ ✨ ✨ ✨ ✨';
      --float-opacity: 0.75;
      --float-dur: 5s;
    }
    @keyframes chestFloat {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-14px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .chest-result,
      .chest-result .chest-result-title,
      .chest-result .chest-big,
      .chest-candy-num,
      .chest-result.hidden-got .chest-sparkle,
      .chest-layer.chest-layer-fx::before { animation: none; }
    }
    .chest-result-title { font-size: 20px; font-weight: 800; color: var(--chocolate); margin-bottom: 12px; }
    .chest-result-body { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--chocolate); }
    .chest-big { font-size: 26px; font-weight: 800; }
    .chest-sub { font-size: 13px; color: var(--chocolate-light); }
    .chest-sparkle { font-size: 16px; font-weight: 800; color: #A855F7; }
    /* 弹窗窄，两个按钮并排刚好差几个像素就换行，一换行高度还被拉伸得不一样高。
       收窄内边距让它们稳在一行，flex:1 平分宽度。 */
    .chest-result .wallet-actions .btn { flex: 1 1 0; min-width: 0; padding: 13px 10px; }
    .chest-line { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--chocolate-light); }
    .market-card {
      background: #fff;
      border-radius: var(--radius-lg);
      padding: 14px 16px;
      margin-bottom: 10px;
      box-shadow: 0 4px 12px var(--shadow);
    }
    .market-card.buy { border-left: 5px solid var(--mint); }
    .market-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
    .market-npc { font-weight: 800; color: var(--chocolate); }
    .market-item { font-size: 18px; font-weight: 800; color: var(--chocolate); margin: 4px 0; }

    /* ===== 今日市场紧凑重排：概览条 + 商品双列网格（仅今日市场页使用） ===== */
    .market-banner { padding: 10px 14px; margin-bottom: 12px; }
    .wallet-strip {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      background: linear-gradient(135deg, var(--lemon-light) 0%, #FED7AA 100%);
      border: 3px solid #fff; border-radius: var(--radius-md);
      padding: 10px 14px; margin-bottom: 12px;
      box-shadow: 0 4px 12px var(--shadow);
    }
    .wallet-strip .wallet-balance { font-size: 20px; }
    .wallet-strip .wallet-sub { margin-top: 0; text-align: right; }
    .market-card.chest-compact { padding: 10px 12px; }
    .chest-compact .chest-row { display: flex; align-items: center; gap: 10px; }
    .chest-compact .chest-emoji { font-size: 30px; }
    .chest-compact .chest-info { flex: 1; min-width: 0; }
    .chest-compact .market-item { font-size: 15px; margin: 0 0 2px; }
    .chest-compact .goods-meta { font-size: 11px; }
    .market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
    .market-grid .market-card { margin-bottom: 0; padding: 10px 12px; display: flex; flex-direction: column; align-items: flex-start; }
    .market-grid .market-card-top { margin-bottom: 2px; }
    .market-grid .market-npc { font-size: 13px; }
    .market-grid .mine-tag { font-size: 11px; padding: 2px 8px; }
    .market-grid .market-item { font-size: 16px; margin: 2px 0; }
    .market-grid .goods-price { font-size: 15px; margin-top: 2px; }
    .market-grid .goods-meta { font-size: 11px; }
    .market-grid .quote-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .market-grid .btn { padding: 10px 14px; font-size: 15px; }
    .market-grid .hold-line { padding: 3px 8px; }
    .market-grid .can-afford-hint { text-align: left; padding: 4px 0 0; }
    .discount-pill {
      display: inline-block; font-size: 11px; font-weight: 800;
      border-radius: 50px; padding: 2px 8px; margin-top: 4px;
    }
    .discount-pill.down { background: #FFEDD5; color: #C2410C; }
    .discount-pill.up { background: var(--mint-light); color: #15803D; }
    .goods-price-inline { font-size: 13px; font-weight: 800; color: #C2410C; margin-left: 6px; white-space: nowrap; }

    .plane-entry.play-entry {
      background: linear-gradient(135deg, var(--mint-light) 0%, #BBF7D0 100%);
    }

    /* ===== 换头像 ===== */
    .avatar-page { padding-bottom: 30px; }
    .avatar-me {
      display: flex; align-items: center; gap: 16px;
      background: linear-gradient(135deg, var(--mint-light) 0%, #F0FDF4 100%);
      border-radius: var(--radius-lg);
      padding: 16px 18px;
      margin-bottom: 14px;
      box-shadow: 0 4px 14px var(--shadow);
    }
    .avatar-me-img {
      width: 84px; height: 84px; flex-shrink: 0;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 3px 0 rgba(93, 64, 55, 0.18);
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      font-size: 34px; font-weight: 800; color: var(--chocolate);
    }
    .avatar-me-img .avatar-img { width: 100%; height: 100%; }
    .avatar-me-img.has-avatar-img { box-shadow: none; }
    .avatar-me-name { font-size: 19px; font-weight: 800; }
    .avatar-me-sub { font-size: 12.5px; color: var(--chocolate-light); font-weight: 700; margin-top: 3px; }

    .avatar-actions { display: flex; gap: 10px; }
    .avatar-actions .btn { flex: 1; }

    /* 分组筛选 chip：96 个一屏看不完，按类目收窄一下能少滑一段 */
    .avatar-filters {
      display: flex; flex-wrap: wrap; gap: 8px;
      margin-top: 14px;
    }
    .avatar-filter {
      font-family: inherit;
      font-size: 13px; font-weight: 800;
      color: var(--chocolate-light);
      background: #fff;
      border: 2.5px solid transparent;
      border-radius: 999px;
      padding: 6px 13px;
      cursor: pointer;
      box-shadow: 0 3px 0 rgba(93, 64, 55, 0.12);
      transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
    }
    .avatar-filter:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(93, 64, 55, 0.12); }
    .avatar-filter.on {
      color: var(--chocolate);
      background: var(--lemon-light);
      border-color: var(--lemon);
      box-shadow: 0 3px 0 #EAB308;
    }
    .avatar-filter em { font-style: normal; font-size: 11px; opacity: 0.6; margin-left: 3px; }

    /* 上传头像前的裁剪框：拖图片挪位置，滑块缩放。
       默认就是「短边填满 + 居中」，不调整直接确认等于老行为。 */
    .avatar-crop-box {
      position: relative;
      margin: 0 auto 10px;
      background: #2E2A27;
      border-radius: var(--radius-md);
      overflow: hidden;
      touch-action: none;          /* 拖动时别让浏览器抢去做页面滚动 */
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
    }
    .avatar-crop-box:active { cursor: grabbing; }
    .avatar-crop-box img {
      position: absolute; left: 0; top: 0;
      max-width: none;             /* 关键：不设会被父容器压回 100% 宽 */
      pointer-events: none;        /* 拖拽统一交给容器处理 */
      -webkit-user-drag: none;
    }
    /* 三分线，帮小朋友把脸放到中间 */
    .avatar-crop-grid {
      position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.32) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.32) 1px, transparent 1px);
      background-size: 33.333% 33.333%;
    }
    .avatar-crop-zoom {
      display: block; width: 100%;
      margin: 0 0 10px;
      accent-color: var(--mint);
    }

    .avatar-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
      gap: 10px;
      margin-top: 14px;
    }
    .avatar-pick {
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      background: #fff;
      border: 3px solid transparent;
      border-radius: var(--radius-md);
      padding: 8px 4px 6px;
      cursor: pointer;
      font-family: inherit;
      box-shadow: 0 3px 0 rgba(93, 64, 55, 0.12);
      transition: transform 0.08s, box-shadow 0.08s;
    }
    .avatar-pick:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(93, 64, 55, 0.12); }
    .avatar-pick img { width: 50px; height: 50px; display: block; }
    .avatar-pick span { font-size: 11px; font-weight: 700; color: var(--chocolate-light); }
    .avatar-pick.picked {
      border-color: var(--mint);
      background: var(--mint-light);
      box-shadow: 0 3px 0 #4ADE80;
    }
    .avatar-pick.picked span { color: var(--chocolate); }

    /* 个人主页头像：点一下就能换 */
    .profile-avatar-edit { position: relative; cursor: pointer; }
    .avatar-edit-badge {
      position: absolute; right: -3px; bottom: -3px;
      width: 24px; height: 24px; border-radius: 50%;
      background: #fff; box-shadow: 0 2px 6px rgba(93, 64, 55, 0.3);
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; line-height: 1;
    }
    .plane-entry.avatar-entry {
      background: linear-gradient(135deg, var(--mint-light) 0%, #BBF7D0 100%);
    }

    /* ===== 学生首页 / 学习与玩会分类 ===== */
    .student-home-page,
    .category-page,
    .reading-page {
      padding: 22px 0 calc(106px + env(safe-area-inset-bottom, 0px));
    }
    .home-section-label,
    .reading-section-title {
      margin: 20px 2px 10px;
      font-size: 16px;
      font-weight: 800;
      color: var(--chocolate);
    }
    .home-task-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    .home-task-card {
      position: relative;
      min-width: 0;
      min-height: 212px;
      padding: 20px 18px 16px;
      border-radius: var(--radius-lg);
      cursor: pointer;
      box-shadow: 0 7px 18px var(--shadow);
      display: flex;
      flex-direction: column;
      border: 3px solid rgba(255,255,255,0.72);
      overflow: hidden;
    }
    /* 任务卡插画：贴右下角，文字列让位 */
    .home-task-illus {
      position: absolute;
      right: 0;
      bottom: 0;
      height: 150px;
      width: auto;
      pointer-events: none;
      user-select: none;
    }
    /* 写字女孩的构图偏上，单独下移让人物更贴卡底 */
    .home-task-homework .home-task-illus { bottom: -14px; }
    .home-task-card:active,
    .category-card:active,
    .review-card:active { transform: translateY(2px); }
    .home-task-card::after {
      content: "";
      position: absolute;
      width: 96px;
      height: 96px;
      right: -34px;
      bottom: -36px;
      border-radius: 50%;
      background: rgba(255,255,255,0.35);
    }
    .home-task-homework { background: linear-gradient(145deg, #E0F7FF 0%, #BAE6FD 100%); }
    .home-task-reading { background: linear-gradient(145deg, #EDE9FE 0%, #DDD6FE 100%); }
    .home-admin-card {
      min-height: 132px;
      background: linear-gradient(145deg, #EEF2FF 0%, #C7D2FE 100%);
      border-color: rgba(255,255,255,0.86);
    }
    .home-admin-card .home-task-icon { margin-bottom: 10px; }
    .home-admin-card .home-task-title,
    .home-admin-card .home-task-desc,
    .home-admin-card .home-task-action { max-width: none; }
    .home-task-icon { font-size: 40px; line-height: 1; margin-bottom: 16px; }
    .home-task-title { font-size: 21px; font-weight: 800; }
    /* 插画占右侧，文字列预留宽度避免重叠 */
    .home-task-card .home-task-title,
    .home-task-card .home-task-desc,
    .home-task-card .home-task-action { max-width: calc(100% - 150px); }
    .home-task-desc {
      margin-top: 6px;
      margin-bottom: 14px;
      color: var(--chocolate-light);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.55;
    }
    .home-task-action {
      align-self: flex-start;
      margin-top: auto;
      border: 0;
      background: rgba(255,255,255,0.8);
      color: var(--chocolate);
      border-radius: 999px;
      padding: 7px 12px;
      font-family: inherit;
      font-weight: 800;
      cursor: pointer;
      position: relative;
      z-index: 1;
    }
    .lobby-badge.reading-badge,
    .home-task-card .lobby-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 2;
      max-width: calc(100% - 24px);
      border-radius: 999px;
      padding: 3px 9px;
      background: #FB7185;
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
    }
    .home-progress-card,
    .home-insight-card {
      margin-top: 14px;
      padding: 17px 18px;
      border-radius: var(--radius-lg);
      background: #fff;
      box-shadow: 0 5px 16px var(--shadow);
      border: 3px solid var(--lemon-light);
    }
    .home-progress-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-weight: 800;
    }
    .home-progress-meta {
      color: var(--chocolate-light);
      font-size: 12px;
      text-align: right;
    }
    .home-progress-body {
      margin-top: 8px;
      color: var(--chocolate-light);
      font-size: 13px;
      font-weight: 700;
    }
    .home-inline-action {
      width: 100%;
      border: 0;
      border-radius: var(--radius-sm);
      background: var(--mint-light);
      color: var(--chocolate);
      padding: 10px 12px;
      text-align: left;
      font-family: inherit;
      font-weight: 800;
      cursor: pointer;
    }
    .home-insight-card { margin-top: 0; border-color: var(--mint-light); }
    /* 签到/等级条上移到问候区下方，紧凑化为一行引导条 */
    .home-checkin {
      margin: -6px 0 4px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; flex-wrap: wrap;
      background: #FFFBEB;
      border: 2px dashed #FDE68A;
      border-radius: var(--radius-md);
      padding: 8px 12px;
    }
    .home-checkin .level-line { margin-bottom: 0; padding-left: 0; flex: 1 1 220px; min-width: 0; }
    .home-checkin .checkin-bar {
      margin-bottom: 0; flex: 0 0 auto;
      background: #fff; border: none;
      padding: 8px 14px; font-size: 13px; border-radius: 50px;
    }
    .home-checkin .checkin-bar.done { background: var(--mint-light); }
    /* 大厅这条更紧凑，按钮跟着缩一号 */
    .home-checkin .checkin-btn { padding: 6px 14px; font-size: 12.5px; }

    .category-hero {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 22px;
      margin-bottom: 16px;
      border-radius: var(--radius-xl);
      box-shadow: 0 6px 18px var(--shadow);
    }
    .learning-hero { background: linear-gradient(135deg, var(--sky-light), #DBEAFE); }
    .play-hero { background: linear-gradient(135deg, var(--mint-light), #D1FAE5); }
    .category-hero-icon { font-size: 48px; line-height: 1; }
    .category-hero h1 { font-size: 27px; line-height: 1.2; }
    .category-hero p { color: var(--chocolate-light); font-weight: 700; margin-top: 4px; }
    .category-card {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 12px;
      padding: 17px 18px;
      background: #fff;
      border-radius: var(--radius-lg);
      box-shadow: 0 5px 15px var(--shadow);
      cursor: pointer;
      border: 3px solid transparent;
    }
    .category-card:hover { border-color: var(--sky-light); }
    button.category-card { width: 100%; text-align: left; font: inherit; color: inherit; }
    .category-icon {
      width: 52px;
      height: 52px;
      flex: 0 0 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 17px;
      background: var(--cream);
      font-size: 28px;
    }
    .category-main { min-width: 0; display: flex; flex-direction: column; }
    .category-main b { font-size: 17px; }
    .category-main span {
      color: var(--chocolate-light);
      font-size: 13px;
      font-weight: 700;
      overflow-wrap: anywhere;
    }
    .category-arrow { margin-left: auto; font-size: 22px; font-weight: 800; color: #60A5FA; }

    /* ===== 读懂训练 ===== */
    .reading-welcome {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 16px;
    }
    .reading-welcome > span { font-size: 48px; }
    .reading-welcome h1 { font-size: 27px; line-height: 1.2; }
    .reading-welcome p { color: var(--chocolate-light); font-weight: 700; }
    .reading-intro-mask {
      position: fixed;
      inset: 0;
      z-index: 285;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 22px;
      background: rgba(62, 48, 43, .48);
    }
    .reading-intro-sheet {
      display: flex;
      flex-direction: column;
      width: min(100%, 560px);
      max-height: min(88vh, 760px);
      padding: 22px;
      border: 3px solid #C4B5FD;
      border-radius: 26px;
      background: #FFFEFB;
      box-shadow: 0 22px 60px rgba(62, 48, 43, .28);
    }
    .reading-intro-sheet-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding-bottom: 14px;
      border-bottom: 2px solid #EDE9FE;
    }
    .reading-intro-sheet-head > div { min-width: 0; }
    .reading-intro-sheet-head span {
      color: #7C3AED;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .05em;
    }
    .reading-intro-sheet-head h2 {
      margin-top: 4px;
      color: var(--chocolate);
      font-size: 24px;
      line-height: 1.3;
    }
    .reading-intro-close {
      flex: 0 0 auto;
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 50%;
      background: #EDE9FE;
      color: #6D28D9;
      font-family: inherit;
      font-size: 15px;
      font-weight: 900;
      cursor: pointer;
    }
    .reading-intro-sheet-body {
      min-height: 0;
      overflow-y: auto;
      padding: 4px 3px 6px;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .reading-intro-purpose {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin: 12px 0;
    }
    .reading-intro-purpose > div {
      display: flex;
      min-width: 0;
      flex-direction: column;
      padding: 12px 10px;
      border-radius: 14px;
      background: #F5F3FF;
    }
    .reading-intro-purpose span {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #8B5CF6;
      color: #fff;
      font-size: 12px;
      font-weight: 900;
      line-height: 25px;
      text-align: center;
    }
    .reading-intro-purpose b { margin-top: 8px; font-size: 13px; }
    .reading-intro-purpose small {
      margin-top: 4px;
      color: var(--chocolate-light);
      font-size: 10px;
      font-weight: 700;
      line-height: 1.5;
    }
    .reading-intro-subject {
      padding: 14px 15px;
      border-left: 4px solid #38BDF8;
      border-radius: 4px 14px 14px 4px;
      background: #F0F9FF;
    }
    .reading-intro-subject span {
      color: #0369A1;
      font-size: 10px;
      font-weight: 900;
    }
    .reading-intro-subject h3 { margin-top: 3px; font-size: 15px; }
    .reading-intro-subject p {
      margin-top: 5px;
      color: var(--chocolate-light);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.65;
    }
    .reading-intro-reopen {
      border: 0;
      border-radius: 999px;
      background: var(--grape-light);
      color: #6D28D9;
      padding: 7px 11px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      flex-shrink: 0;
      white-space: nowrap;
      line-height: 1.25;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .reading-intro-reopen {
      width: 100%;
      margin: 20px 0 22px;
      padding: 11px 14px;
      background: #fff;
      box-shadow: 0 4px 12px var(--shadow);
    }
    .reading-intro-lead {
      margin: 9px 0 10px;
      color: var(--chocolate-light);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.7;
    }
    .reading-problem-list {
      display: flex;
      flex-direction: column;
    }
    .reading-problem-list > div {
      min-width: 0;
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      column-gap: 8px;
      padding: 9px 0;
      border-bottom: 1px solid #F0ECE9;
    }
    .reading-problem-list > div:last-child { border-bottom: 0; }
    .reading-problem-list > div > span {
      grid-row: 1 / span 2;
      font-size: 19px;
      line-height: 1.45;
      filter: grayscale(.2);
    }
    .reading-problem-list b { font-size: 12px; }
    .reading-problem-list small { color: var(--chocolate-light); font-size: 10px; font-weight: 700; line-height: 1.45; }
    .reading-method-title {
      margin: 13px 0 7px;
      padding-top: 12px;
      border-top: 1px solid #EDE7E3;
      font-size: 13px;
      font-weight: 800;
    }
    .reading-method-flow {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: stretch;
      gap: 5px;
    }
    .reading-method-flow > div {
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding: 7px 5px;
      text-align: center;
    }
    .reading-method-flow > div > span {
      align-self: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #8B5CF6;
      color: #fff;
      line-height: 22px;
      font-size: 10px;
      font-weight: 800;
    }
    .reading-method-flow b { margin-top: 4px; font-size: 12px; }
    .reading-method-flow small { color: var(--chocolate-light); font-size: 9px; font-weight: 700; line-height: 1.4; }
    .reading-method-flow i { align-self: center; color: #A8A29E; font-size: 15px; font-style: normal; font-weight: 800; }
    .reading-intro-result {
      display: flex;
      flex-direction: column;
      margin-top: 9px;
      padding: 12px 0 0;
      border-top: 1px solid #EDE7E3;
    }
    .reading-intro-result b { font-size: 12px; }
    .reading-intro-result span { margin-top: 2px; color: var(--chocolate-light); font-size: 11px; font-weight: 700; line-height: 1.55; }
    .reading-intro-note {
      margin: 9px 0 12px;
      padding: 10px 12px;
      border-radius: 10px;
      background: #FFFBEB;
      color: var(--chocolate-light);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.55;
    }
    .reading-intro-note b { color: #92400E; }
    .reading-intro-ack { margin-top: 10px; flex: 0 0 auto; }
    .reading-feature-card {
      position: relative;
      overflow: hidden;
      padding: 24px;
      border-radius: var(--radius-xl);
      background: linear-gradient(145deg, #EDE9FE 0%, #DDD6FE 100%);
      border: 3px solid #fff;
      box-shadow: 0 8px 22px var(--shadow);
    }
    .reading-feature-card.continue { background: linear-gradient(145deg, var(--lemon-light), #FDE68A); }
    .reading-feature-card h2 { margin: 5px 0 8px; font-size: 23px; }
    .reading-feature-card p { max-width: 520px; color: var(--chocolate-light); font-weight: 700; margin-bottom: 16px; }
    .reading-card-kicker { color: #7C3AED; font-size: 12px; font-weight: 800; letter-spacing: .5px; }
    .reading-stat-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin: 14px 0 6px;
      padding: 15px 8px;
      border-radius: var(--radius-lg);
      background: #fff;
      box-shadow: 0 5px 16px var(--shadow);
    }
    .reading-stat-strip > div {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-right: 2px dashed var(--grape-light);
    }
    .reading-stat-strip > div:last-child { border-right: 0; }
    .reading-stat-strip b { font-size: 23px; color: #7C3AED; }
    .reading-stat-strip span { color: var(--chocolate-light); font-size: 11px; font-weight: 800; text-align: center; }
    .reading-insight,
    .reading-empty {
      padding: 15px 17px;
      border-radius: var(--radius-md);
      background: var(--sky-light);
      color: var(--chocolate);
      font-weight: 700;
    }
    .reading-insight.success { margin: 18px 0; background: var(--mint-light); }
    .reading-empty { background: #fff; color: var(--chocolate-light); box-shadow: 0 4px 12px var(--shadow); }
    .review-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 15px 17px;
      margin-bottom: 10px;
      border-radius: var(--radius-md);
      background: #fff;
      border: 0;
      box-shadow: 0 4px 12px var(--shadow);
      color: inherit;
      appearance: none;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: transparent;
      cursor: pointer;
    }
    .review-card > div { min-width: 0; display: flex; flex: 1; flex-direction: column; }
    .review-card b { font-size: 15px; }
    .review-card span { color: var(--chocolate-light); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
    .review-card > span { flex: 0 0 auto; font-size: 22px; color: #7C3AED; }
    /* 训练记录：列表保持紧凑，逐题复盘放在底部弹层里查看 */
    .history-card {
      margin-bottom: 10px;
      border-radius: var(--radius-md);
      background: #fff;
      box-shadow: 0 4px 12px var(--shadow);
      overflow: hidden;
    }
    .history-card-head {
      display: flex; align-items: center; gap: 12px; width: 100%;
      padding: 15px 17px; border: none; background: #fff; text-align: left;
      font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .history-card-head:active { background: #F5F3FF; }
    .history-card-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
    .history-card-main b { font-size: 15px; }
    .history-card-main span { color: var(--chocolate-light); font-size: 12px; font-weight: 700; }
    .history-caret { flex: 0 0 auto; color: #7C3AED; font-size: 13px; }
    .history-badge {
      align-self: flex-start;
      padding: 2px 8px;
      border-radius: 999px;
      background: #FEF3C7;
      color: var(--chocolate);
      font-size: 10px;
      font-weight: 800;
      font-style: normal;
    }
    .history-badge.ok { background: #DCFCE7; }
    .history-badge.math { background: #DBEAFE; color: #1D4ED8; }
    .history-badge.english { background: #D1FAE5; color: #047857; }

    /* 语文 / 数学 / 英语：孩子一眼要能分清自己在练什么，所以用色块 + 学科名，不只靠图标 */
    .reading-subject-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 18px;
    }
    .reading-subject-tab {
      padding: 12px 8px;
      border: 2px solid #E9D5FF;
      border-radius: var(--radius-md);
      background: #fff;
      color: var(--chocolate);
      font-family: inherit;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .reading-subject-tab.active {
      border-color: var(--grape);
      background: #F5F3FF;
      color: #6D28D9;
    }
    .reading-subject-tab:active { transform: scale(0.97); }

    .review-subject {
      flex: 0 0 auto;
      font-size: 12px !important;
      color: #6D28D9 !important;
      white-space: nowrap;
    }

    /* 数学题面：条件子句要能一眼分开，因为三格第一格就是让孩子在子句里挑「我看到的条件」 */
    .passage-line.math-clause {
      display: flex;
      align-items: baseline;
      gap: 8px;
      padding: 8px 10px;
      margin-bottom: 8px;
      border-radius: 10px;
      background: #F8FAFC;
    }
    .passage-line.math-clause:last-of-type { margin-bottom: 0; }
    .passage-line.math-clause em {
      flex: 0 0 auto;
      padding: 2px 7px;
      border-radius: 999px;
      background: #DBEAFE;
      color: #1D4ED8;
      font-size: 11px;
      font-weight: 800;
      font-style: normal;
      line-height: 1.6;
    }
    .history-tags { color: #B45309; }
    .history-detail-mask {
      position: fixed; inset: 0; z-index: 280;
      display: flex; align-items: flex-end; justify-content: center;
      background: rgba(93, 64, 55, 0.45);
    }
    .history-detail-sheet {
      display: flex; flex-direction: column; width: min(100%, 560px);
      max-height: 86vh; padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
      border: 4px solid var(--grape); border-bottom: none;
      border-radius: 24px 24px 0 0; background: #fff;
      box-shadow: 0 -10px 32px rgba(93, 64, 55, 0.22);
      animation: historySheetUp .2s ease-out;
    }
    @keyframes historySheetUp {
      from { transform: translateY(28px); opacity: .4; }
      to { transform: translateY(0); opacity: 1; }
    }
    .history-detail-head {
      display: flex; align-items: flex-start; gap: 10px; flex: 0 0 auto;
      padding-bottom: 12px; border-bottom: 2px solid #F3F0FF;
    }
    .history-detail-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
    .history-detail-main b { color: var(--chocolate); font-size: 18px; }
    .history-detail-main span { color: var(--chocolate-light); font-size: 12px; font-weight: 700; }
    .history-detail-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .history-detail-badges .history-badge { margin: 0; }
    .history-detail-close {
      flex: 0 0 auto; width: 44px; height: 44px; border: 2px solid #E9D5FF;
      border-radius: 50%; background: #fff; color: #6D28D9; font-size: 14px;
      font-weight: 900; line-height: 1; cursor: pointer;
    }
    .history-detail-body {
      flex: 1 1 auto; min-height: 0; overflow-y: auto;
      margin: 4px -3px 12px; padding: 4px 3px 6px;
      overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    }
    .history-detail-done { flex: 0 0 auto; }
    .reading-material { margin: 16px 0; }
    .reading-material summary {
      padding: 12px 14px; border-radius: 12px; background: #EFF6FF;
      color: #1E40AF; cursor: pointer; font-weight: 800; min-height: 44px;
    }
    .reading-material .passage-box { margin-top: 10px; }
    button.review-card { width: 100%; text-align: left; font: inherit; }
    .reading-detail-actions .btn { white-space: nowrap; }
    @media (prefers-reduced-motion: reduce) {
      .history-detail-sheet { animation: none; }
    }
    .history-loading { padding: 10px 0; color: var(--chocolate-light); font-size: 12px; font-weight: 700; }
    .history-q {
      padding: 12px 13px;
      margin-top: 10px;
      border-left: 4px solid #86EFAC;
      border-radius: 10px;
      background: #F0FDF4;
    }
    .history-q.bad { border-left-color: #F59E0B; background: #FFFBEB; }
    .history-q-head { font-size: 13px; font-weight: 800; }
    .history-q-head em { color: var(--chocolate-light); font-size: 11px; font-style: normal; }
    .history-q-prompt { margin: 6px 0 8px; color: var(--chocolate); font-size: 13px; font-weight: 700; line-height: 1.5; }
    .history-q-line { margin-top: 5px; color: var(--chocolate); font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
    .history-q-line.mine { color: #B45309; }
    .history-q-line.why { color: #C2410C; font-weight: 700; }
    .history-q-line.ev { color: var(--chocolate-light); }
    .reading-detail-page { padding-bottom: 34px; }
    .reading-detail-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--chocolate-light);
      font-size: 12px;
      font-weight: 800;
    }
    .reading-title { margin: 8px 0 4px; font-size: 28px; }
    .reading-help { color: var(--chocolate-light); font-weight: 700; margin-bottom: 14px; }
    .reading-step-progress {
      display: flex; justify-content: space-between; gap: 12px; align-items: center;
      margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
      background: #EFF6FF; color: #1E3A8A; font-size: 13px;
    }
    .reading-step-progress span { color: #475569; text-align: right; }
    .passage-box {
      padding: 17px;
      border-radius: var(--radius-lg);
      background: #fff;
      box-shadow: 0 6px 18px var(--shadow);
      border: 3px solid var(--lemon-light);
    }
    /* 必须排在 .passage-box 之后：上面那条 border 是简写，会把 border-color 重置回奶油色。 */
    .math-clause-box { border-color: var(--sky); }
    /* 文章就是文章：连续段落、无边框无交互，句子标记功能已下线 */
    .passage-line {
      display: block;
      margin: 0 0 6px;
      padding: 6px 8px;
      color: var(--chocolate);
      font-size: 15px;
      line-height: 1.9;
      overflow-wrap: anywhere;
    }
    .passage-line:last-of-type { margin-bottom: 0; }
    .reading-question-list { margin-top: 20px; }
    .evidence-chain-guide {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: stretch;
      gap: 8px;
      margin-top: 18px;
    }
    .evidence-chain-guide > div {
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding: 12px 10px;
      border-radius: var(--radius-md);
      background: var(--grape-light);
      text-align: center;
    }
    .evidence-chain-guide > div > span {
      align-self: center;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #8B5CF6;
      color: #fff;
      line-height: 25px;
      font-size: 11px;
      font-weight: 800;
    }
    .evidence-chain-guide b { margin-top: 5px; font-size: 12px; }
    .evidence-chain-guide small { color: var(--chocolate-light); font-size: 10px; font-weight: 700; line-height: 1.4; }
    .evidence-chain-guide i { align-self: center; color: #8B5CF6; font-size: 18px; font-style: normal; font-weight: 800; }
    .reading-chain {
      display: grid;
      gap: 8px;
      margin-top: 14px;
      padding: 12px;
      border: 2px solid var(--grape-light);
      border-radius: var(--radius-md);
      background: #FCFAFF;
    }
    .reading-chain-group { min-width: 0; }
    .reading-chain-group > b {
      display: block;
      margin-bottom: 7px;
      color: #6D28D9;
      font-size: 12px;
    }
    .reading-chain-options {
      display: grid;
      gap: 7px;
    }
    .reading-chain-option {
      width: 100%;
      padding: 10px 11px;
      border: 2px solid #E9D5FF;
      border-radius: var(--radius-md);
      background: #fff;
      color: var(--chocolate);
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.55;
      text-align: left;
      cursor: pointer;
      overflow-wrap: anywhere;
    }
    .reading-chain-option.selected {
      border-color: #8B5CF6;
      background: var(--grape-light);
      color: #5B21B6;
    }
    .reading-chain-arrow {
      color: #8B5CF6;
      font-size: 18px;
      font-weight: 900;
      line-height: 1;
      text-align: center;
    }
    .reading-question {
      padding: 20px;
      margin-bottom: 16px;
      border-radius: var(--radius-lg);
      background: #fff;
      box-shadow: 0 6px 18px var(--shadow);
    }
    .question-number { color: #7C3AED; font-size: 12px; font-weight: 800; }
    .reading-question h2 { margin: 6px 0 14px; font-size: 18px; line-height: 1.55; }
    .reading-options { display: grid; gap: 9px; }
    .reading-option {
      width: 100%;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 13px;
      border: 3px solid var(--sky-light);
      border-radius: var(--radius-md);
      background: #fff;
      color: var(--chocolate);
      font: inherit;
      font-weight: 700;
      line-height: 1.55;
      text-align: left;
      cursor: pointer;
      overflow-wrap: anywhere;
    }
    .reading-option > span {
      flex: 0 0 26px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--sky-light);
      line-height: 26px;
      text-align: center;
      font-size: 12px;
      font-weight: 800;
    }
    .reading-option.selected { border-color: #8B5CF6; background: var(--grape-light); }
    .reading-option.selected > span { background: #8B5CF6; color: #fff; }
    .reading-parts { display: grid; gap: 14px; }
    .reading-support-chip {
      justify-self: start; padding: 5px 10px; border-radius: 999px;
      background: #EFF6FF; color: #1D4ED8; font-size: 12px; font-weight: 800;
    }
    .reading-parts.independent .reading-support-chip { background: #ECFDF5; color: #047857; }
    .reading-part { display: grid; gap: 9px; }
    .reading-part + .reading-part { padding-top: 13px; border-top: 1px dashed #CBD5E1; }
    .reading-part > b { display: flex; gap: 8px; align-items: center; font-size: 14px; line-height: 1.45; }
    .reading-part > b > span {
      width: 24px; height: 24px; border-radius: 50%; display: inline-flex;
      align-items: center; justify-content: center; flex: 0 0 24px;
      background: #DBEAFE; color: #1D4ED8; font-size: 12px;
    }
    .inline-hint {
      min-height: 20px;
      margin-top: 12px;
      color: var(--chocolate-light);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.65;
    }
    .chain-error-note {
      display: block;
      margin-top: 6px;
      color: #B45309;
      font-size: 11px;
      font-weight: 800;
    }
    .reading-hint-btn {
      min-height: 44px;
      margin-top: 8px;
      border: 0;
      border-radius: 999px;
      background: var(--lemon-light);
      color: var(--chocolate);
      padding: 8px 12px;
      font-family: inherit;
      font-weight: 800;
      cursor: pointer;
    }
    .reading-hint-btn:disabled { opacity: .55; cursor: default; }
    .reading-detail-actions {
      position: static;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
      gap: 10px;
      margin-top: 18px;
      padding: 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.92);
      box-shadow: 0 7px 22px rgba(93,64,55,.18);
      backdrop-filter: blur(8px);
    }
    .reading-detail-actions .btn { min-width: 0; padding: 12px 14px; }
    .reading-detail-actions.has-previous {
      grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.1fr);
      gap: 8px;
    }
    .reading-detail-actions.has-previous .btn { padding: 12px 10px; font-size: 14px; }
    /* 读懂训练的主按钮沿用全站 btn-primary 的蓝色，次要按钮用同色系的浅蓝描边：
       同一屏只有「深蓝实心 = 主操作」和「浅蓝描边 = 次操作」两个色，都属于蓝色一族。
       全站 .btn-outline 仍是薄荷绿（其他模块在用），这里只压读懂训练这一个模块。 */
    .reading-page .btn-outline { border-width: 2px; border-color: #7DD3FC; }
    /* v2 把「读什么」和「答什么」分成两张卡，训练说明不再插入孩子作答视线。 */
    .reading-detail-v2 .passage-box {
      border-color: #FDE68A;
      background: #FFFBEB;
    }
    .section-kicker {
      display: block;
      margin-bottom: 9px;
      color: #B45309;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .04em;
    }
    .reading-v2-progress {
      margin-bottom: 9px;
      color: var(--chocolate-light);
      font-size: 12px;
      font-weight: 800;
      text-align: right;
    }
    .reading-detail-v2 .reading-question {
      border: 3px solid #BFDBFE;
    }
    .reading-detail-v2 .question-number {
      display: inline-flex;
      align-items: center;
      margin-bottom: 8px;
      padding: 4px 9px;
      border-radius: 999px;
      background: #DBEAFE;
      color: #1D4ED8;
      font-size: 12px;
    }
    .reading-detail-v2 .reading-question h2 {
      font-size: 20px;
    }
    .inline-hint:empty {
      min-height: 0;
      margin-top: 0;
    }
    .result-hero {
      padding: 26px 20px;
      border-radius: var(--radius-xl);
      background: linear-gradient(145deg, var(--mint-light), #BBF7D0);
      text-align: center;
      box-shadow: 0 7px 20px var(--shadow);
    }
    .result-emoji { font-size: 54px; line-height: 1; }
    .result-hero h1 { font-size: 35px; margin: 7px 0 2px; }
    .result-hero p { color: var(--chocolate-light); font-weight: 700; }
    .result-summary {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin: 13px 0;
    }
    .result-summary span {
      padding: 7px 11px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 3px 9px var(--shadow);
      color: var(--chocolate-light);
      font-size: 12px;
      font-weight: 800;
    }
    .feedback-card,
    .variant-next {
      padding: 17px;
      margin-bottom: 12px;
      border-radius: var(--radius-lg);
      background: #fff;
      box-shadow: 0 5px 15px var(--shadow);
    }
    .feedback-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
    .feedback-card > b { color: #E11D48; font-size: 17px; }
    .feedback-card > span { color: var(--chocolate-light); font-weight: 700; }
    .feedback-card .btn { padding: 8px 13px; font-size: 13px; box-shadow: none; }
    .full-explanation {
      width: 100%;
      margin-top: 4px;
      padding: 12px 13px;
      border-radius: var(--radius-sm);
      background: var(--grape-light);
      line-height: 1.75;
      font-size: 13px;
      font-weight: 700;
    }
    .variant-next {
      display: flex;
      align-items: center;
      gap: 14px;
      background: var(--lemon-light);
      border: 3px solid var(--lemon);
    }
    .variant-next > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
    .variant-next span { color: var(--chocolate-light); font-size: 12px; font-weight: 700; }
    .variant-next .btn { flex: 0 0 auto; padding: 11px 15px; font-size: 14px; }
    .reading-profile-card {
      margin: 14px 0;
      padding: 17px;
      border-radius: var(--radius-lg);
      background: linear-gradient(145deg, var(--grape-light), #F5F3FF);
      border: 3px solid #DDD6FE;
      box-shadow: 0 5px 15px var(--shadow);
      cursor: pointer;
    }
    .reading-profile-head { display: flex; align-items: center; gap: 12px; }
    .reading-profile-head > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
    .reading-profile-head b { font-size: 17px; }
    .reading-profile-head span { color: var(--chocolate-light); font-size: 12px; font-weight: 700; }
    .reading-profile-head > span { flex: 0 0 auto; color: #7C3AED; font-size: 22px; }
    .reading-profile-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 13px;
    }
    .reading-profile-stats > div {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 9px 5px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,.72);
    }
    .reading-profile-stats b { color: #7C3AED; font-size: 19px; }
    .reading-profile-stats span { color: var(--chocolate-light); font-size: 10px; font-weight: 800; text-align: center; }

    @media (max-width: 480px) {
      .container { padding-left: 14px; padding-right: 14px; }
      .tab-bar .tab-item { flex: 1; min-width: 0; padding-left: 4px; padding-right: 4px; }
      .home-task-grid { grid-template-columns: 1fr; }
      .home-task-card { min-height: 178px; }
      .home-progress-head { align-items: flex-start; flex-direction: column; gap: 3px; }
      .home-progress-meta { text-align: left; }
      .category-hero { padding: 18px; }
      .category-hero-icon { font-size: 40px; }
      .reading-feature-card { padding: 20px; }
      .reading-intro-mask { align-items: flex-end; padding: 0; }
      .reading-intro-sheet {
        width: 100%;
        max-height: 90vh;
        padding: 18px 15px calc(15px + env(safe-area-inset-bottom));
        border-width: 3px 0 0;
        border-radius: 24px 24px 0 0;
      }
      .reading-intro-sheet-head h2 { font-size: 21px; }
      .reading-intro-purpose { grid-template-columns: 1fr; gap: 6px; }
      .reading-intro-purpose > div {
        display: grid;
        grid-template-columns: 25px minmax(0, 1fr);
        column-gap: 9px;
        padding: 10px 11px;
      }
      .reading-intro-purpose span { grid-row: 1 / span 2; }
      .reading-intro-purpose b { margin-top: 0; }
      .reading-intro-purpose small { margin-top: 2px; }
      .reading-method-flow {
        grid-template-columns: 1fr auto 1fr auto 1fr;
        gap: 2px;
      }
      .reading-method-flow > div { padding-left: 2px; padding-right: 2px; }
      .reading-method-flow i { transform: none; }
      .reading-question { padding: 17px 14px; }
      .evidence-chain-guide {
        grid-template-columns: 1fr;
      }
      .evidence-chain-guide i {
        transform: rotate(90deg);
        line-height: 1;
      }
      .passage-box { padding: 13px 10px; }
      .passage-line { padding: 5px 4px; }
      .reading-detail-actions { bottom: 7px; border-radius: var(--radius-lg); }
      .variant-next { align-items: stretch; flex-direction: column; }
      .variant-next .btn { width: 100%; }
    }

    /* ===== 窄屏（真机 360px 级）防换行加固 =====
       真机上比模拟视口更窄，短词按钮/标签/时间被挤成两行。统一禁止换行。 */
    .btn { white-space: nowrap; flex-shrink: 0; }
    .navbar .logo {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }
    .navbar .user-info { flex-shrink: 0; }
    .post-time, .reply-time, .mine-date, .card-time { white-space: nowrap; flex-shrink: 0; }
    .post-header .post-author {
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mine-tag { white-space: nowrap; }
    .post-header .mine-tag { flex-shrink: 0; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
    .wallet-strip { flex-wrap: wrap; }
    .wallet-strip .wallet-balance { white-space: nowrap; flex: 0 0 auto; }
    .wallet-strip .wallet-sub { flex: 1 1 180px; }
    .home-checkin .level-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    @media (max-width: 400px) {
      .navbar .logo { font-size: 20px; letter-spacing: 0; max-width: calc(100% - 132px); }
      .navbar .user-info { font-size: 12px; }
      .navbar .user-info > span { display: none; }
    }
    /* ===== 听故事 ===== */
    .navbar.orange-nav { background: linear-gradient(135deg, #FFEDD5, #FED7AA); box-shadow: 0 4px 16px rgba(254, 215, 170, 0.45); }
    .navbar.orange-nav .logo, .navbar.orange-nav .user-info { color: #9A3412; }
    .navbar.orange-nav .home-btn { border-color: #FDBA74; background: #fff; color: #9A3412; }
    .back-bar.orange-nav { background: linear-gradient(135deg, #FFEDD5, #FED7AA); box-shadow: 0 4px 16px rgba(254, 215, 170, 0.45); }
    .back-bar.orange-nav .back-btn, .back-bar.orange-nav .title { color: #9A3412; }
    .back-bar.orange-nav .back-btn { border-color: #FDBA74; background: #fff; }
    /* 这里原来还有一条 .category-card.category-story .category-icon { background:#FFF1E2 }，
       给听故事图标单独上了橙调。2026-09-27 按要求去掉：六张卡的图标底色统一走基色
       var(--cream)，不再按模块分色。模块主题色仍由 navbar / back-bar 的 -nav 类承担。 */
    .story-sync-btn { display: block; margin: 0 0 10px; padding: 8px 12px; border: 1px dashed #FDBA74; background: #FFFBF5; color: #9A3412; border-radius: 10px; font-size: 13px; }
    .story-section-title { font-weight: 700; margin: 14px 2px 8px; color: #7C2D12; }
    .story-page { padding: 18px 0 calc(96px + env(safe-area-inset-bottom, 0px)); }
    /* minmax(0,1fr) 防止长标题把某一列撑宽，导致两列卡片封面大小不一致 */
    .story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .story-card { min-width: 0; background: #fff; border: none; border-radius: 14px; padding: 10px; box-shadow: 0 2px 10px rgba(154, 52, 18, 0.08); }
    .story-cover { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; background: linear-gradient(135deg, #FED7AA, #FDBA74); display: flex; align-items: center; justify-content: center; font-size: 38px; }
    .story-cover.big { width: 72px; height: 72px; flex: 0 0 72px; font-size: 32px; }
    .story-cover.huge { width: 150px; height: 150px; margin: 6px auto; font-size: 64px; box-shadow: 0 4px 16px rgba(249, 115, 22, 0.25); }
    .story-cover-img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; pointer-events: none; }
    .story-card-title { margin-top: 8px; font-weight: 700; color: #7C2D12; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .story-card-meta { margin-top: 3px; font-size: 12px; color: #C2410C; }
    .story-empty { text-align: center; padding: 36px 0; color: #9A3412; font-size: 34px; }
    .story-empty p { font-size: 14px; margin-top: 8px; }
    .story-history-card { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #FED7AA; border-radius: 14px; padding: 10px; margin-bottom: 10px; }
    .story-history-main { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; }
    .story-history-main .story-cover { width: 48px; height: 48px; flex: 0 0 48px; font-size: 22px; border-radius: 10px; }
    .story-history-info { flex: 1; min-width: 0; }
    .story-history-info b { display: block; color: #7C2D12; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .story-history-info span { font-size: 12px; color: #C2410C; }
    .story-history-bar { height: 5px; background: #FFEDD5; border-radius: 3px; margin-top: 5px; overflow: hidden; }
    .story-history-bar i { display: block; height: 100%; background: #F97316; border-radius: 3px; }
    .story-play-btn { padding: 9px 12px; border-radius: 999px; background: #F97316; color: #fff; font-weight: 700; border: none; }
    /* 正在播的那条：描边点亮 + 浅橙底，一眼能从一列里挑出来 */
    .story-history-card.playing { border-color: #F97316; background: #FFF7ED; }
    .story-history-card.playing .story-cover { animation: storyBeat 1.4s ease-in-out infinite; }
    @keyframes storyBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
    /* 「暂停」用深色实心，和「继续」的橙色区分开，孩子不用细读也知道当前在放 */
    .story-play-btn-pause { background: #7C2D12; }
    .story-detail-head { display: flex; gap: 12px; margin-bottom: 14px; }
    .story-detail-info { flex: 1; min-width: 0; }
    .story-detail-info h2 { color: #7C2D12; }
    .story-detail-info > span { font-size: 12px; color: #C2410C; }
    .story-detail-info p { margin: 6px 0; font-size: 13px; color: #9A3412; }
    .story-detail-info .btn { margin-top: 4px; }
    .story-detail-info .btn.btn-primary, .story-play-btn { background: #F97316; border-color: #F97316; }
    .story-ep-list { background: #fff; border: 1px solid #FED7AA; border-radius: 14px; overflow: hidden; }
    .story-pager { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
    .story-pager button { width: 40px; height: 36px; border-radius: 10px; border: 1px solid #FED7AA; background: #fff; color: #9A3412; font-size: 14px; }
    .story-pager button:disabled { opacity: 0.35; }
    .story-pager span { flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: #7C2D12; }
    .story-ep-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid #FFF1E2; cursor: pointer; }
    .story-ep-item:last-child { border-bottom: none; }
    .story-ep-item.at { background: #FFF7ED; }
    .story-ep-idx { width: 26px; height: 26px; border-radius: 50%; background: #FFEDD5; color: #9A3412; display: flex; align-items: center; justify-content: center; font-size: 12px; flex: 0 0 26px; }
    .story-ep-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #431407; font-weight: 600; }
    .story-ep-dur { font-size: 12px; color: #C2410C; flex-shrink: 0; }
    .story-player { text-align: center; padding: 22px 4px 40px; }
    .story-player-count { font-size: 13px; color: #C2410C; margin-bottom: 8px; }
    .story-player-title { font-size: 18px; font-weight: 800; color: #7C2D12; margin-top: 8px; }
    .story-player-ep { font-size: 14px; color: #9A3412; margin-top: 3px; }
    .story-player input[type="range"] { width: 100%; margin-top: 14px; accent-color: #F97316; }
    .story-player-times { display: flex; justify-content: space-between; font-size: 12px; color: #C2410C; }
    .story-player-ctrls { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 14px; }
    .story-player-ctrls button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid #FED7AA; background: #fff; font-size: 18px; }
    .story-player-ctrls button:disabled { opacity: 0.35; }
    .story-play-big { width: 72px !important; height: 72px !important; background: #F97316 !important; border: none !important; color: #fff !important; font-size: 28px !important; }
    .story-player-tip { margin-top: 16px; font-size: 12px; color: #C2410C; }

    /* ===== 听故事 · 悬浮迷你播放器 =====
       一开始播就浮在右下角，切到别的页面也继续响。挂 body 上，不在 #app 里。
       z-index 95：压得住底部导航(50)，但低于顶栏(100)和所有弹窗遮罩(200+)。 */
    .story-mini {
      position: fixed;
      right: 12px;
      bottom: calc(72px + env(safe-area-inset-bottom, 0px));
      z-index: 95;
      display: none;
      align-items: center;
      gap: 6px;
      padding: 6px 8px 6px 6px;
      background: #fff;
      border: 1px solid #FED7AA;
      border-radius: 999px;
      box-shadow: 0 4px 16px rgba(249, 115, 22, 0.25);
      /* 不写这个，手机上拖胶囊会变成滚页面，pointermove 直接被 pointercancel 掐断 */
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      animation: fadeIn 0.2s;
    }
    .story-mini.on { display: flex; }
    .story-mini.dragging { box-shadow: 0 8px 24px rgba(249, 115, 22, 0.35); }
    /* 纸飞机聊天页底部有固定输入条，抬高避让 */
    .story-mini.above-bar { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
    /* 封面：正圆必须把宽高锁死且 padding 清零，否则 border-radius:50% 渲成椭圆 */
    .story-mini-cover {
      width: 44px; height: 44px; flex: 0 0 44px;
      padding: 0;
      border: none;
      border-radius: 50%;
      overflow: hidden;
      background: linear-gradient(135deg, #FED7AA, #FDBA74);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; line-height: 1;
      cursor: pointer;
      transition: transform 0.1s;
    }
    .story-mini-cover:active { transform: scale(0.94); }
    /* 另起类名，不复用 .avatar-img——那个类自带 avatarBob 浮动动画，胶囊上会抖 */
    .story-mini-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; pointer-events: none; }
    .story-mini-btn {
      width: 36px; height: 36px; flex: 0 0 36px;
      padding: 0;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      font-size: 15px; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.1s, box-shadow 0.1s;
    }
    .story-mini-play { background: #F97316; color: #fff; box-shadow: 0 3px 0 #C2410C; }
    .story-mini-play:active { transform: translateY(3px); box-shadow: 0 0 0 #C2410C; }
    .story-mini-play.bad { background: #9CA3AF; box-shadow: 0 3px 0 #6B7280; }
    .story-mini-close { background: #FFEDD5; color: #9A3412; box-shadow: 0 3px 0 #FDBA74; }
    .story-mini-close:active { transform: translateY(3px); box-shadow: 0 0 0 #FDBA74; }
    @media (prefers-reduced-motion: reduce) {
      .story-mini { animation: none; }
      .story-history-card.playing .story-cover { animation: none; }
    }
    @media (max-width: 480px) {
      .story-grid { gap: 8px; }
    }
    /* 纸飞机、来玩吧和小队聊天共用站内图片预览。 */
    .image-preview-trigger { cursor: zoom-in; }
    .image-preview-trigger:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
    .image-preview-dialog {
      position: fixed; inset: 0; margin: 0; border: 0;
      width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none;
      box-sizing: border-box;
      padding: max(12px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px))
        max(12px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
      background: rgba(15, 23, 42, 0.96); color: #fff;
      overflow: hidden;
    }
    .image-preview-dialog[open] { display: flex; flex-direction: column; gap: 12px; }
    .image-preview-dialog::backdrop { background: rgba(15, 23, 42, 0.96); }
    .image-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; font-weight: 800; }
    .image-preview-dialog button {
      min-height: 48px; padding: 10px 16px; border: 0; border-radius: 999px;
      background: #fff; color: #0F172A; font: inherit; font-weight: 800; cursor: pointer;
    }
    .image-preview-dialog button:disabled { opacity: 0.4; cursor: default; }
    .image-preview-dialog button:focus-visible { outline: 3px solid #7DD3FC; outline-offset: 3px; }
    .image-preview-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
    .image-preview-full { max-width: 100%; max-height: 100%; object-fit: contain; }
    .image-preview-status { text-align: center; }
    .image-preview-controls { display: flex; align-items: center; justify-content: center; gap: 16px; flex-shrink: 0; }
    .image-preview-dialog [hidden] { display: none; }
    .image-preview-counter { min-width: 44px; text-align: center; }
    .image-preview-hint { margin: 0; color: #CBD5E1; font-size: 12px; text-align: center; flex-shrink: 0; }

    /* 放在组件样式之后，并提高优先级，避免正文的 14/15px 覆盖表情字号。 */
    .post-content.emoji-only,
    .reply-body.emoji-only,
    .letter-content.emoji-only,
    .supplement-text.emoji-only,
    .bubble.emoji-only,
    .announcement-comment-card p.emoji-only {
      font-size: 34px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    .bubble.emoji-only { padding: 10px 16px; }
    .reply-body.emoji-only, .supplement-text.emoji-only { margin: 4px 0; }
    .letter-content.emoji-only { margin: 6px 0; }