@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Space+Grotesk:wght@300;400;500&display=swap');

    :root {
      --bg: #F2E3D5;
      --surface: #FFF7F0;
      --text: #1A2F2C;
      --text-muted: #6B7F7A;
      --oxidation: #0A5E55;
      --coral-bone: #F2E3D5;
      --alert-orange: #F28C38;
      --border-radius: 2px;
      --shadow-offset: 3px;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background-color: var(--bg);
      color: var(--text);
      font-family: 'Space Grotesk', sans-serif;
      line-height: 1.5;
      max-width: 480px;
      margin: 0 auto;
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* 页面容器 */
    .page {
      position: absolute;
      top: 0; left: 0; right: 0;
      min-height: 100vh;
      background: var(--bg);
      padding: 1rem 1.2rem;
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 1;
    }
    .page.active {
      transform: translateX(0);
    }
    .page.inactive-left {
      transform: translateX(-100%);
    }
    .page.inactive-right {
      transform: translateX(100%);
    }

    /* 头部 */
    .page-header {
      display: flex;
      align-items: center;
      margin-bottom: 1.5rem;
      padding-bottom: 0.8rem;
      border-bottom: 2px double var(--alert-orange);
      gap: 0.6rem;
    }
    .page-header h1 {
      font-family: 'Noto Serif SC', serif;
      font-size: 1.4rem;
      color: var(--oxidation);
    }
    .back-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--oxidation);
      background: transparent;
      color: var(--oxidation);
      cursor: pointer;
      border-radius: var(--border-radius);
      font-size: 0.9rem;
    }
    .user-tag {
      margin-left: auto;
      font-size: 0.75rem;
      color: var(--text-muted);
      background: var(--surface);
      padding: 0.3rem 0.6rem;
      box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 rgba(10, 94, 85, 0.08);
    }

    /* 卡片 */
    .card {
      background: var(--surface);
      border: 1px solid rgba(10, 94, 85, 0.08);
      padding: 0.9rem 1rem;
      margin-bottom: 0.9rem;
      box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 rgba(10, 94, 85, 0.08);
      font-size: 0.85rem;
    }
    .card h3 {
      font-family: 'Noto Serif SC', serif;
      color: var(--oxidation);
      font-size: 1.1rem;
    }

    button {
      background: transparent;
      border: 1px solid var(--oxidation);
      color: var(--oxidation);
      padding: 0.4rem 0.9rem;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 500;
      cursor: pointer;
      border-radius: var(--border-radius);
      font-size: 0.8rem;
      text-transform: lowercase;
      transition: all 0.15s;
      margin: 0.15rem;
    }
    button.primary {
      background: var(--oxidation);
      color: var(--surface);
      border: none;
    }
    button.primary:hover {
      background: transparent;
      color: var(--oxidation);
      border: 1px solid var(--oxidation);
    }
    button:hover {
      background: var(--oxidation);
      color: var(--surface);
      border-color: var(--oxidation);
    }

    input {
      padding: 0.5rem;
      border: 1px solid rgba(10, 94, 85, 0.3);
      border-radius: var(--border-radius);
      font-family: inherit;
      background: var(--surface);
      color: var(--text);
      font-size: 0.85rem;
      width: 100%;
    }

    /* 时间线 */
    .timeline {
      position: relative;
      padding-left: 1.2rem;
      margin: 0.8rem 0;
    }
    .timeline::before {
      content: '';
      position: absolute;
      left: 4px; top: 0; bottom: 0;
      width: 2px;
      background: var(--oxidation);
      opacity: 0.15;
    }
    .timeline-item {
      position: relative;
      margin-bottom: 0.9rem;
      padding-left: 0.8rem;
    }
    .timeline-item::before {
      content: '';
      position: absolute;
      left: -1.15rem; top: 0.3rem;
      width: 8px; height: 8px;
      background: var(--surface);
      border: 2px solid var(--oxidation);
      border-radius: 50%;
    }
    .exam-date {
      font-size: 0.7rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }
    .exam-name {
      font-weight: 500;
      font-size: 0.9rem;
    }

    /* 成绩网格 */
    .subject-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.5rem;
      margin-top: 0.8rem;
    }
    .subject-item {
      background: var(--coral-bone);
      padding: 0.6rem 0.8rem;
      border-radius: 2px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.8rem;
    }
    .subject-name {
      font-weight: 500;
    }
    .subject-score {
      font-size: 1rem;
      color: var(--oxidation);
      font-weight: 500;
    }
    .rank-tag {
      background: var(--oxidation);
      color: white;
      padding: 0.1rem 0.3rem;
      font-size: 0.65rem;
      margin-left: 0.3rem;
      border-radius: 2px;
    }
    .total-score {
      font-family: 'Noto Serif SC', serif;
      font-size: 1.8rem;
      color: var(--oxidation);
      text-align: right;
      border-top: 2px solid var(--alert-orange);
      margin-top: 0.8rem;
      padding-top: 0.5rem;
    }
    .avg-text {
      font-size: 0.6rem;
      color: var(--text-muted);
    }

    .empty-state {
      color: var(--text-muted);
      font-style: italic;
      padding: 1.5rem;
      text-align: center;
      border: 1px dashed rgba(10, 94, 85, 0.2);
      font-size: 0.85rem;
    }

    .improved { color: #0A5E55; font-weight: 500; }
    .declined { color: #F28C38; font-weight: 500; }

.hidden { display: none !important; }
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
    .modal {
      background: var(--surface);
      padding: 1.5rem;
      box-shadow: 6px 6px 0 0 rgba(10, 94, 85, 0.2);
      width: 88%;
      max-width: 360px;
      font-size: 0.85rem;
    }
    .modal h3 {
      font-family: 'Noto Serif SC', serif;
      margin-bottom: 0.8rem;
    }
    .modal input {
      margin-bottom: 0.8rem;
    }
    .modal-buttons {
      display: flex;
      justify-content: flex-end;
      gap: 0.4rem;
      margin-top: 0.5rem;
    }
.page.hidden-page {
  display: none;
}
.xuanzekemu {
    border: none;
    border-radius: 10px;
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 rgba(10, 94, 85, 0.1);
    padding: 4px;
}