.card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0 40px; }
.card-actions > * { margin: 0; }
.training-component { font-family: "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; }
.training-component, .training-component * { box-sizing: border-box; }
.training-component button { font: inherit; }
.training-trigger { display: inline-grid; grid-template-columns: 26px auto 22px; gap: 9px; align-items: center; min-width: 202px; padding: 9px 11px; border: 1px solid #e2dbd5; border-radius: 9px; color: #766d67; background: #faf8f4; box-shadow: 0 3px 12px rgb(67 58 50 / 3%); text-align: left; cursor: pointer; transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
.training-trigger:hover { border-color: #cfc4bc; transform: translateY(-1px); box-shadow: 0 6px 16px rgb(67 58 50 / 6%); }
.training-trigger-mark { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #ded8d2; border-radius: 7px; color: #83786f; background: #f4f0eb; font-size: 15px; }
.training-trigger-copy { display: grid; gap: 1px; }
.training-trigger-copy strong { font-size: 13px; letter-spacing: .04em; }
.training-trigger-copy small { color: #929b95; font-size: 10px; font-weight: 500; }
.training-trigger-count { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: #827970; background: #eeeae5; font-size: 10px; font-weight: 800; }
.training-backdrop { position: fixed; inset: 0; z-index: 70; background: rgb(47 39 33 / 24%); }
.training-panel { position: fixed; left: 50%; top: 50%; z-index: 71; width: min(610px, calc(100vw - 64px)); max-height: 76vh; opacity: 0; pointer-events: none; transform: translate(-50%, -47%) scale(.975); transition: opacity 180ms ease, transform 220ms ease; }
.training-panel.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.training-panel-scroll { max-height: 76vh; overflow-y: auto; border: 1px solid #e4dcd5; border-radius: 14px; background: #fffefa; box-shadow: 0 20px 54px rgb(50 36 28 / 16%); }
.training-panel-scroll > header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; background: rgb(255 254 250 / 97%); color: var(--red); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.training-panel-scroll > header button { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: #fffefa; font-size: 20px; cursor: pointer; }
.training-group-tabs { display: flex; flex-wrap: wrap; gap: 7px; padding: 5px 20px 0; }
.training-group-tabs button { padding: 6px 11px; border: 1px solid #ddd8d1; border-radius: 999px; color: #877e77; background: #f3f0eb; box-shadow: 0 2px 7px rgb(67 58 50 / 0%); font-size: 11px; font-weight: 700; cursor: pointer; transition: color 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
.training-group-tabs button:hover { border-color: #c8beb6; color: #675f59; background: #faf7f2; box-shadow: 0 4px 10px rgb(67 58 50 / 7%); transform: translateY(-1px); }
.training-group-tabs button[aria-selected="true"] { border-color: #c8d0ca; color: #657069; background: #f2f5f2; }
.training-body { padding: 18px 21px 22px; }
.training-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.training-head b { font-weight: 500; }
.training-body h3 { margin: 8px 0 18px; color: #302925; font-size: 16px; line-height: 1.8; font-weight: 500; }
.training-body h3 strong, .training-option strong { color: var(--ink); font-weight: 800; }
.training-options { display: grid; gap: 10px; }
.training-option { display: block; width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); text-align: left; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; cursor: pointer; }
.training-option:hover, .training-option.is-selected { border-color: rgba(161,63,59,.65); background: rgba(161,63,59,.045); }
.training-option.is-correct { border-color: #5f8b63; background: #eff7ef; }
.training-option.is-wrong { border-color: var(--red); background: #fbefed; }
.training-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.training-submit { padding: 9px 22px; border: 0; border-radius: 8px; background: var(--red); color: white; font-size: 13px; cursor: pointer; }
.training-arrow { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #d8d1ca; border-radius: 50%; color: #857b73; background: transparent; font-size: 10px; cursor: pointer; }
.training-arrow:hover:not(:disabled) { border-color: #bcaea4; background: rgb(118 109 103 / 5%); }
.training-arrow:disabled { opacity: .28; cursor: default; }
.training-submit:disabled { opacity: .4; cursor: default; }
.training-result { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--red); background: var(--soft); font-size: 13px; line-height: 1.8; }
.training-result.is-correct { border-color: #5f8b63; }
body.has-training-panel { overflow: hidden; }
@media (max-width: 620px) {
  .card-actions { margin-left: 0; }
  .card-actions > * > button { min-width: 190px; }
  .training-panel { width: calc(100vw - 24px); max-height: 86vh; }
  .training-panel-scroll { max-height: 86vh; }
  .training-body { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .training-panel, .training-group-tabs button { transition: none; } }