.vocabulary-section {
      overflow: hidden;
    }

    .vocabulary-head {
      align-items: flex-end;
    }

    .vocabulary-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-bottom: 1px solid var(--paper-line);
    }

    .vocabulary-stats div {
      min-height: 108px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 8px;
      padding: 24px 30px;
      border-right: 1px solid var(--paper-line);
    }

    .vocabulary-stats div:last-child {
      border-right: 0;
    }

    .vocabulary-stats strong {
      color: var(--ink);
      font-family: var(--font-display);
      font-size: clamp(34px, 4vw, 52px);
      font-weight: 400;
      line-height: .95;
    }

    .vocabulary-stats span {
      color: var(--faint);
      font-family: var(--font-sans);
      font-size: 13px;
    }

    .vocabulary-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 18px 30px;
      border-bottom: 1px solid var(--paper-line);
    }

    .vocab-filter {
      min-height: 34px;
      padding: 0 14px;
      border: 1px solid var(--paper-line-strong);
      border-radius: 4px;
      color: var(--ink-soft);
      background: transparent;
      font-family: var(--font-sans);
      font-size: 13px;
      cursor: pointer;
    }

    .vocab-filter.active,
    .vocab-filter:hover {
      color: #fff;
      border-color: var(--red);
      background: var(--red);
    }

    .vocabulary-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border-bottom: 1px solid var(--paper-line);
    }

    .vocab-card {
      min-width: 0;
      padding: 26px 30px 28px;
      border-right: 1px solid var(--paper-line);
      border-bottom: 1px solid var(--paper-line);
      background: transparent;
    }

    .vocab-card:nth-child(2n) {
      border-right: 0;
    }

    .vocab-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .vocab-word {
      margin: 0;
      color: var(--red);
      font-family: var(--font-serif);
      font-size: 34px;
      line-height: 1.05;
      letter-spacing: 0;
    }

    .vocab-phonetic {
      margin-top: 4px;
      color: var(--faint);
      font-family: var(--font-serif);
      font-size: 16px;
    }

    .vocab-definition {
      display: grid;
      gap: 6px;
      margin: 18px 0 0;
      color: var(--ink-soft);
      font-family: var(--font-cn);
      font-size: 16px;
      line-height: 1.5;
    }

    .vocab-sentence {
      margin: 18px 0 0;
      color: var(--ink);
      font-family: var(--font-en);
      font-size: 18px;
      line-height: 1.62;
    }

    .vocab-sentence mark {
      padding: 0 .12em;
      color: var(--ink);
      background: rgba(255, 235, 92, .48);
      border-radius: 4px;
    }

    .vocab-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 15px;
      color: var(--faint);
      font-family: var(--font-sans);
      font-size: 12px;
    }

    .vocab-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px;
    }

    .vocab-actions .secondary-btn,
    .vocab-actions .primary-btn {
      width: auto;
      min-height: 38px;
      padding: 9px 13px;
      font-size: 13px;
      letter-spacing: 0;
      box-shadow: none;
    }

    .vocabulary-review {
      padding: 28px 30px;
      border-bottom: 1px solid var(--paper-line);
      background: #F6F2EB;
    }

    .vocabulary-review[hidden] {
      display: none;
    }

    .review-card {
      display: grid;
      gap: 18px;
      max-width: 760px;
      margin: 0 auto;
    }

    .review-kicker {
      color: var(--faint);
      font-family: var(--font-sans);
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .review-word {
      margin: 0;
      color: var(--red);
      font-family: var(--font-serif);
      font-size: clamp(38px, 6vw, 66px);
      line-height: .95;
    }

    .review-sentence {
      margin: 0;
      color: var(--ink);
      font-family: var(--font-en);
      font-size: clamp(23px, 3vw, 34px);
      line-height: 1.42;
    }

    .review-sentence mark {
      padding: 0 .16em;
      border-radius: 5px;
      color: var(--ink);
      background: rgba(255, 235, 92, .55);
    }

    .review-answer {
      display: grid;
      gap: 8px;
      padding-top: 4px;
      color: var(--ink-soft);
      font-family: var(--font-cn);
      font-size: 18px;
      line-height: 1.5;
    }

    .review-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

        .review-actions .primary-btn,
        .review-actions .secondary-btn {
          width: auto;
          min-height: 42px;
          padding: 10px 16px;
          font-size: 14px;
          letter-spacing: 0;
          box-shadow: none;
        }

        .feedback-section {
          overflow: visible;
        }

        .feedback-head {
          align-items: flex-end;
        }

        .feedback-toggle {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .feedback-stats {
          display: grid;
          grid-template-columns: repeat(12, minmax(0, 1fr));
          border-bottom: 1px solid var(--paper-line);
        }

        .feedback-stat {
          position: relative;
          min-height: 112px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 8px;
          grid-column: span 3;
          padding: 22px 28px;
          border-right: 1px solid var(--paper-line);
          border-bottom: 1px solid var(--paper-line);
        }

        .feedback-stat:nth-child(2),
        .feedback-stat:nth-child(6) {
          border-right: 0;
        }

        .feedback-stat:nth-last-child(-n + 4) {
          border-bottom: 0;
        }

        .feedback-stat.is-primary {
          grid-column: span 6;
          min-height: 150px;
          justify-content: flex-end;
          gap: 12px;
          padding: 30px 44px 34px;
        }

        .feedback-stat.is-support {
          background: rgba(250, 248, 241, .46);
        }

        .feedback-stat strong {
          color: var(--ink);
          font-family: var(--font-display);
          font-size: 42px;
          font-weight: 400;
          line-height: .92;
          letter-spacing: 0;
          white-space: nowrap;
        }

        .feedback-stat span {
          color: var(--faint);
          font-family: var(--font-sans);
          font-size: 13px;
        }

        .feedback-stat.is-support strong {
          font-size: 34px;
        }

        .feedback-stat-label {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          min-width: 0;
          line-height: 1.35;
        }

        .feedback-help {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 16px;
          height: 16px;
          flex: 0 0 auto;
          border: 1px solid rgba(35, 32, 27, .22);
          border-radius: 50%;
          color: var(--ink-soft);
          font-size: 11px;
          line-height: 1;
          cursor: help;
        }

        .feedback-help-tip {
          position: absolute;
          left: 50%;
          bottom: calc(100% + 8px);
          z-index: 30;
          width: min(280px, 72vw);
          padding: 10px 12px;
          color: rgb(255, 255, 252);
          background: rgba(35, 32, 27, .96);
          border-radius: 6px;
          box-shadow: var(--shadow-md);
          font-size: 12px;
          line-height: 1.55;
          white-space: normal;
          opacity: 0;
          pointer-events: none;
          transform: translate(-50%, 4px);
          transition: opacity .16s ease, transform .16s ease;
        }

        .feedback-help:hover .feedback-help-tip,
        .feedback-help:focus .feedback-help-tip {
          opacity: 1;
          transform: translate(-50%, 0);
        }

        .feedback-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          border-bottom: 1px solid var(--paper-line);
        }

        .feedback-chart {
          min-width: 0;
          padding: 28px 30px 30px;
          border-right: 1px solid var(--paper-line);
          border-bottom: 1px solid var(--paper-line);
        }

        .feedback-chart:nth-child(2n) {
          border-right: 0;
        }

        .feedback-chart-head {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 18px;
          margin-bottom: 18px;
        }

        .feedback-chart-title {
          margin: 0;
          color: var(--ink);
          font-family: var(--font-cn);
          font-size: 20px;
          line-height: 1.25;
          letter-spacing: 0;
        }

        .feedback-chart-subtitle {
          margin: 6px 0 0;
          color: var(--faint);
          font-size: 13px;
          line-height: 1.45;
        }

        .feedback-chart-value {
          color: var(--red);
          font-family: var(--font-serif);
          font-size: 28px;
          font-weight: 700;
          line-height: 1;
          white-space: nowrap;
        }

        .feedback-svg {
          width: 100%;
          height: 190px;
          display: block;
        }

        .feedback-point {
          cursor: pointer;
          outline: none;
        }

        .feedback-hit {
          fill: transparent;
        }

        .feedback-marker {
          transition: r .16s ease, stroke-width .16s ease;
        }

        .feedback-point:hover .feedback-marker,
        .feedback-point:focus .feedback-marker,
        .feedback-point.is-active .feedback-marker {
          r: 6;
          stroke: rgba(255, 255, 252, .96);
          stroke-width: 3;
        }

        .feedback-tip {
          opacity: 0;
          pointer-events: none;
          transition: opacity .14s ease;
        }

        .feedback-point:hover .feedback-tip,
        .feedback-point:focus .feedback-tip,
        .feedback-point.is-active .feedback-tip {
          opacity: 1;
        }

        .feedback-bars {
          display: grid;
          gap: 12px;
        }

        .feedback-bar-row {
          display: grid;
          grid-template-columns: minmax(90px, 140px) 1fr auto;
          align-items: center;
          gap: 12px;
          color: var(--ink-soft);
          font-size: 13px;
        }

        .feedback-bar-track {
          height: 10px;
          border-radius: 999px;
          background: var(--paper-line);
          overflow: hidden;
        }

        .feedback-bar-fill {
          height: 100%;
          border-radius: inherit;
          background: var(--red);
        }

        .feedback-pie-layout {
          display: grid;
          grid-template-columns: 180px minmax(0, 1fr);
          align-items: center;
          gap: 24px;
        }

        .feedback-pie-svg {
          width: 180px;
          height: 180px;
          display: block;
        }

        .feedback-pie-total {
          fill: var(--ink);
          font-family: var(--font-serif);
          font-size: 30px;
          font-weight: 700;
        }

        .feedback-pie-label {
          fill: var(--faint);
          font-size: 12px;
        }

        .feedback-legend {
          display: grid;
          gap: 10px;
        }

        .feedback-legend-row {
          display: grid;
          grid-template-columns: 12px minmax(0, 1fr) auto;
          align-items: center;
          gap: 10px;
          color: var(--ink-soft);
          font-size: 13px;
        }

        .feedback-dot {
          width: 10px;
          height: 10px;
          border-radius: 999px;
        }

        .feedback-legend-label {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .feedback-legend-value {
          color: var(--ink);
          font-weight: 700;
          white-space: nowrap;
        }

        .feedback-empty {
          padding: 28px 0;
          color: var(--faint);
          font-size: 14px;
          border-top: 1px solid var(--paper-line);
          border-bottom: 1px solid var(--paper-line);
        }

        .report-section {
          padding: 26px 0;
          border-top: 1px solid var(--paper-line);
        }

        .report-section:first-child {
          padding-top: 0;
          border-top: 0;
        }

        .report-section h2 {
          margin: 0 0 16px;
          color: var(--ink);
          font-family: var(--font-cn);
          font-size: 22px;
          line-height: 1.28;
        }

        .report-empty {
          margin: 0;
          color: var(--faint);
          font-size: 14px;
          line-height: 1.7;
        }

        .report-error-list,
        .report-word-list {
          display: grid;
          gap: 16px;
        }

        .report-error-card,
        .report-word-card {
          padding: 18px 20px;
          border: 1px solid var(--paper-line);
          border-radius: 8px;
          background: rgba(255, 255, 252, .62);
        }

        .report-error-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          color: var(--faint);
          font-size: 12px;
          letter-spacing: .08em;
          text-transform: uppercase;
        }

        .report-source,
        .report-final,
        .report-user {
          margin: 12px 0 0;
          color: var(--ink);
          font-size: 16px;
          line-height: 1.65;
        }

        .report-source {
          font-family: var(--font-en);
          font-size: 18px;
        }

        .report-user {
          color: var(--red-deep);
        }

        .report-detail {
          margin-top: 10px;
          color: var(--ink-soft);
          font-size: 14px;
          line-height: 1.62;
        }

        .report-attempts {
          display: grid;
          gap: 10px;
          margin-top: 14px;
        }

        .report-attempt {
          padding: 12px 14px;
          border-left: 3px solid var(--red);
          background: rgba(226, 72, 61, .06);
        }

        .report-word-card h3 {
          margin: 0;
          color: var(--red);
          font-family: var(--font-serif);
          font-size: 26px;
          line-height: 1.08;
        }

        .report-word-card p {
          margin: 10px 0 0;
          color: var(--ink-soft);
          font-size: 15px;
          line-height: 1.62;
        }