.home-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) 330px;
      gap: 34px;
      align-items: stretch;
      padding: 48px 6px 0;
    }

    .input-column {
      min-height: 100%;
      display: flex;
    }

    .composer {
      width: 100%;
      height: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      background: var(--paper-soft);
      border: 1.5px solid var(--paper-line);
      box-shadow: var(--shadow-md);
    }

    .article-input {
      display: block;
      width: 100%;
      flex: 1;
      min-height: 360px;
      padding: 27px 26px 18px;
      border: 0;
      outline: 0;
      resize: vertical;
      color: var(--ink);
      background: transparent;
      font-family: var(--font-en);
      font-size: 22px;
      line-height: 40px;
      letter-spacing: 0;
    }

    .article-input::placeholder {
      color: var(--faint);
    }

    .article-input:focus {
      box-shadow: inset 0 0 0 2px rgba(226, 72, 61, .14);
    }

    .composer-foot {
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 0 22px;
      border-top: 1px solid var(--paper-line);
      color: var(--faint);
      font-size: 13px;
    }

    .composer-foot strong {
      color: var(--red);
      font-weight: 700;
    }

    .side-stack {
      display: grid;
      gap: 18px;
    }

    .side-section {
      padding-top: 4px;
      border-top: 2px solid var(--ink);
    }

    .section-title {
      margin: 0 0 14px;
      color: var(--ink);
      font-family: var(--font-cn);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 1px;
    }

    .mode-list {
      display: grid;
      gap: 10px;
    }

    .mode-card {
      width: 100%;
      min-height: 86px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 14px;
      padding: 16px 18px;
      color: var(--ink);
      text-align: left;
      background: transparent;
      border: 1.5px solid var(--paper-line-strong);
      border-radius: 6px;
      cursor: pointer;
      transition: transform .18s var(--ease), border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .mode-card:hover {
      transform: translateY(-1px);
      border-color: var(--red);
      background: rgba(252, 250, 243, .56);
    }

    .mode-card.selected {
      border-color: var(--red);
      background: var(--red-soft);
      box-shadow: 0 6px 18px rgba(226, 72, 61, .14);
    }

    .mode-name {
      display: block;
      font-family: var(--font-cn);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 1px;
    }

    .mode-desc {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 13px;
    }

    .mode-mark {
      color: var(--red);
      font-size: 24px;
      line-height: 1;
    }

    .primary-btn,
    .secondary-btn,
    .plain-btn,
    .danger-btn,
    .icon-btn {
      appearance: none;
      border-radius: 6px;
      cursor: pointer;
      transition: transform .16s var(--ease), background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
    }

    .primary-btn {
      width: 100%;
      border: 1px solid var(--red);
      background: var(--red);
      color: #fff;
      padding: 17px 22px;
      font-family: var(--font-cn);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 2px;
      box-shadow: 0 6px 18px rgba(226, 72, 61, .28);
    }

    .primary-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(226, 72, 61, .32);
    }

    .primary-btn.is-success {
      border-color: var(--green);
      background: var(--green);
      box-shadow: 0 6px 18px rgba(46, 125, 91, .28);
    }

    .primary-btn.is-success:hover {
      box-shadow: 0 8px 24px rgba(46, 125, 91, .34);
    }

    .primary-btn:disabled {
      color: var(--faint);
      background: var(--paper-line);
      border-color: var(--paper-line);
      box-shadow: none;
      cursor: not-allowed;
      transform: none;
    }

    .secondary-btn {
      border: 1.5px solid var(--paper-line-strong);
      background: transparent;
      color: var(--ink);
      padding: 13px 18px;
      font-size: 15px;
      font-weight: 600;
    }

    .secondary-btn:hover {
      border-color: var(--red);
      color: var(--red-deep);
      background: var(--red-soft);
    }

    .plain-btn {
      border: 0;
      background: transparent;
      color: var(--muted);
      padding: 9px 0;
      font-size: 14px;
    }

    .plain-btn:hover {
      color: var(--red-deep);
    }

    .danger-btn {
      border: 1px solid transparent;
      background: transparent;
      color: var(--faint);
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      line-height: 1;
    }

    .danger-btn:hover {
      color: var(--red-deep);
      border-color: var(--red-soft);
      background: var(--red-soft);
    }

    .icon-btn {
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1.5px solid var(--paper-line-strong);
      background: transparent;
      color: var(--muted);
      font-size: 24px;
      line-height: 1;
    }

    .icon-btn:hover {
      border-color: var(--red);
      color: var(--red);
      background: var(--red-soft);
    }

    .recent-list,
    .history-list {
      display: grid;
    }

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

    .recent-item,
    .history-item {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 17px 0;
      border-top: 1px solid var(--paper-line);
    }

    .recent-item:last-child,
    .history-item:last-child {
      border-bottom: 1px solid var(--paper-line);
    }

    .history-item {
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 20px;
    }

    .history-item.is-read .item-title {
      color: var(--muted);
    }

    .history-item-practice {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      color: var(--faint);
      font-size: 12px;
    }

    .history-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .history-list {
      margin-top: 8px;
    }

    .history-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 18px;
      padding: 44px 6px 8px;
    }

    .history-header h1 {
      margin: 0;
      font-family: var(--font-cn);
      font-size: clamp(30px, 4vw, 42px);
      line-height: 1.15;
      letter-spacing: 1px;
    }

    .history-meta {
      color: var(--faint);
      font-size: 13px;
      white-space: nowrap;
    }

    .item-kicker {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 7px;
    }

    .mode-pill {
      display: inline-flex;
      align-items: center;
      border: 1px solid currentColor;
      border-radius: 4px;
      padding: 4px 8px;
      color: var(--red);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      line-height: 1;
      white-space: nowrap;
    }

    .mode-pill.zh {
      color: var(--violet);
    }

    .item-date {
      color: var(--faint);
      font-size: 13px;
    }

    .item-title {
      color: var(--ink);
      font-family: var(--font-en);
      font-size: 18px;
      font-weight: 500;
      line-height: 1.38;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .score-box {
      width: 92px;
      text-align: right;
      color: var(--green);
      font-family: var(--font-serif);
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
    }

    .score-box span {
      display: block;
      margin-top: 5px;
      color: var(--faint);
      font-size: 12px;
      font-weight: 500;
    }

    .score-box.muted {
      color: var(--amber);
      font-size: 15px;
      line-height: 1.25;
    }