/* Review reference: review-redesign.html. Scoped to the review book. */
.review-redesign {
  --word: #3E6FA8; --word-soft: #E2ECF8;
  --phrase: #5C8A4A; --phrase-soft: #E6F0DF;
  --sentence: #B15C2E; --sentence-soft: #F6E4D6;
  --review-surface: #fff; --review-sunk: #F4F5F7;
  --review-ink: #1F2329; --review-muted: #80858F;
  --review-border: #EAECEF; --review-accent: #DD7A2E;
  --review-accent-soft: #FCE7D2; --review-danger: #C0472F;
  --review-practice-bg: #F5F6F8; --review-practice-border: #E4E7EB; --review-practice-text: #5F6570;
  --review-stat-total: #5F6570; --review-stat-new: #E0502A; --review-stat-weak: #D89A1E; --review-stat-mastered: #2E9A5A; --review-stat-text: #fff;
  color: var(--review-ink);
}
.review-redesign .word { --type-color: var(--word); }
.review-redesign .phrase { --type-color: var(--phrase); }
.review-redesign .sentence { --type-color: var(--sentence); }
.review-redesign .review-view-tabs { display: flex; gap: 8px; margin-bottom: 0; }
.review-redesign .review-view-tabs .chip { display: inline-flex; gap: 8px; align-items: center; border-radius: 20px; font-weight: 600; color: var(--review-muted); background: var(--review-surface); border: 1px solid var(--review-border); }
.review-redesign .review-view-tabs .active { background: var(--review-ink); color: var(--review-surface); border-color: var(--review-ink); }
.review-view-tabs .chip span { font-variant-numeric: tabular-nums; opacity: .75; }
.review-stats-scope { margin: 0; color: var(--review-muted); font-size: 12px; }
.review-stat-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.review-stat-strip.has-total { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.review-stat { background: var(--review-stat-total); border-radius: 12px; padding: 12px; display: grid; gap: 3px; }
.review-stat strong { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--review-stat-text); }
.review-stat span { font-size: 12px; color: var(--review-stat-text); white-space: nowrap; }
.review-stat.new { background: var(--review-stat-new); }
.review-stat.weak { background: var(--review-stat-weak); }
.review-stat.mastered { background: var(--review-stat-mastered); }
.review-type-filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; }
.review-type-chip { flex: none; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--review-border); background: var(--review-surface); color: var(--review-muted); font-size: 12px; font-weight: 600; }
.review-type-chip i, .review-type-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--type-color); flex: none; }
.review-type-chip span { padding: 1px 6px; border-radius: 20px; font-size: 11px; font-variant-numeric: tabular-nums; background: var(--review-sunk); }
.review-type-chip.active { color: var(--review-surface); background: var(--review-ink); border-color: var(--review-ink); }
.review-type-chip.active span { color: var(--review-ink); }
.review-start-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 10px 16px; border: 0; border-radius: 10px; background: var(--review-accent); color: #fff; font-size: 14px; font-weight: 600; }
.review-start-line small { margin-left: 8px; font-size: 12px; font-weight: 400; }
.review-start-action { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: inherit; font-weight: inherit; }
.review-start-action svg { display: block; width: 1em; height: 1em; flex: none; }
.review-start-line:disabled { opacity: .55; cursor: default; }
.review-redesign .review-all-list, .review-redesign .review-today-list { display: flex; flex-direction: column; gap: 10px; }
.review-redesign .review-date-sep { color: var(--review-muted); margin: 8px 0 0; }
.review-redesign .review-date-sep::after { background: var(--review-border); }
.review-collection-card, .review-queue-card { position: relative; border: 1px solid var(--review-border); border-radius: 14px; background: var(--review-surface); }
.review-collection-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.review-type-label { display: flex; align-items: center; gap: 5px; padding-right: 42px; color: var(--type-color); font-size: 12px; font-weight: 600; }
.review-collection-card h3 { margin: 0; padding-right: 35px; color: var(--review-ink); font-size: 16px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.review-collection-card.sentence h3 { font-size: 14.5px; }
.review-redesign .review-translation { margin: 0; text-align: left; color: var(--review-muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.review-collection-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 4px; }
.review-collection-foot > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.review-collection-foot small, .review-schedule { color: var(--review-muted); font-size: 11px; overflow-wrap: anywhere; }
.review-schedule.mastered { color: var(--phrase); }
.review-redesign .review-practice-button { flex: none; background: var(--review-practice-bg); color: var(--review-practice-text); border: 1px solid var(--review-practice-border); border-radius: 9px; font-size: 12px; font-weight: 500; min-height: 34px; padding: 6px 13px; box-shadow: none; }
.review-redesign .review-practice-button:hover { background: var(--review-surface); border-color: var(--review-muted); }
.review-delete-anchor { position: absolute; top: 8px; right: 8px; }
.review-delete-anchor.is-open { z-index: 10; }
.review-delete-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--review-muted); }
.review-delete-button span { position: relative; width: 20px; height: 20px; box-sizing: border-box; border: 1px solid var(--review-practice-border); border-radius: 50%; background: var(--review-surface); }
.review-delete-button span::before, .review-delete-button span::after { content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.review-delete-button span::after { transform: translate(-50%, -50%) rotate(-45deg); }
.review-delete-button:hover { color: var(--review-danger); }
.review-remove-popover { position: absolute; top: 0; right: calc(100% + 8px); width: 260px; box-sizing: border-box; padding: 24px 20px 20px; border: 1px solid var(--review-border); border-radius: 16px; background: var(--review-surface); box-shadow: 0 4px 24px rgba(0,0,0,.10); color: var(--review-ink); text-align: left; }
.review-remove-popover::after { content: ''; position: absolute; top: clamp(12px, var(--review-popover-arrow-top, 12px), calc(100% - 20px)); right: -5px; width: 8px; height: 8px; background: var(--review-surface); border-top: 1px solid var(--review-border); border-right: 1px solid var(--review-border); transform: rotate(45deg); }
.review-remove-popover strong { font-size: 16px; font-weight: 500; line-height: 1.5; }
.review-remove-popover p { margin: 8px 0 20px; font-size: 12px; line-height: 1.6; color: var(--review-muted); }
.review-remove-popover > div { display: flex; gap: 10px; }
.review-remove-popover button { flex: 1; min-height: 36px; padding: 7px 10px; border: 0; border-radius: 7px; background: var(--review-sunk); color: var(--review-ink); font-size: 13px; font-weight: 500; }
.review-remove-popover [data-confirm-review-remove] { background: #E8302E; color: #fff; }
.review-remove-popover button:disabled { opacity: .55; cursor: wait; }
.review-redesign button:focus-visible { outline: 2px solid var(--review-accent); outline-offset: 3px; }
.review-redesign .review-delete-button:focus, .review-redesign .review-remove-popover button:focus { outline: none; box-shadow: none; }
.review-queue-card { display: flex; align-items: center; gap: 10px; padding: 12px; }
.review-type-rail { width: 4px; align-self: stretch; border-radius: 3px; background: var(--type-color); flex: none; }
.review-queue-index { font-size: 12px; color: var(--review-muted); font-variant-numeric: tabular-nums; flex: none; }
.review-queue-body { flex: 1; min-width: 0; }
.review-queue-body strong { color: var(--review-ink); font-size: 15px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.review-queue-card.sentence strong { font-size: 14px; }
.review-queue-body p { margin: 3px 0; color: var(--review-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.review-queue-body small { color: var(--review-muted); font-size: 11px; }
.review-queue-side { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; min-width: 46px; min-height: 58px; padding-top: 40px; flex: none; }
.review-progress { display: flex; gap: 4px; align-items: center; }
.review-progress i { width: 6px; height: 6px; border-radius: 50%; background: var(--review-border); }
.review-progress i.on { background: var(--review-accent); }
.review-redesign .review-template-empty { background: var(--review-surface); color: var(--review-muted); border-color: var(--review-border); }
@media (max-width: 480px) {
  .review-delete-button { width: 36px; height: 36px; }
  .review-remove-popover { width: min(260px, calc(100vw - 88px)); padding: 20px 16px 16px; }
  .review-stat { padding: 10px 8px; }
  .review-stat strong { font-size: 19px; }
  .review-stat span { font-size: 11px; }
  .review-type-filters { gap: 6px; }
  .review-type-chip { padding-inline: 9px; gap: 4px; }
  .review-collection-foot > div { flex-direction: column; align-items: flex-start; gap: 5px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .review-redesign {
    --word: #7FA8DC; --word-soft: #243346; --phrase: #8FBF77; --phrase-soft: #26301F;
    --sentence: #D98F5F; --sentence-soft: #3A2A1E;
    --review-surface: #1F2329; --review-sunk: #2F333A; --review-ink: #F5F6F8;
    --review-muted: #A3A8B0; --review-border: #3C414A; --review-accent: #E8925A;
    --review-accent-soft: #3A2A19; --review-danger: #E0715A;
    --review-practice-bg: #2F333A; --review-practice-border: #454B55; --review-practice-text: #D5D8DD;
  }
}
:root[data-theme="dark"] .review-redesign {
  --word: #7FA8DC; --word-soft: #243346; --phrase: #8FBF77; --phrase-soft: #26301F;
  --sentence: #D98F5F; --sentence-soft: #3A2A1E;
  --review-surface: #1F2329; --review-sunk: #2F333A; --review-ink: #F5F6F8;
  --review-muted: #A3A8B0; --review-border: #3C414A; --review-accent: #E8925A;
  --review-accent-soft: #3A2A19; --review-danger: #E0715A;
  --review-practice-bg: #2F333A; --review-practice-border: #454B55; --review-practice-text: #D5D8DD;
}

/* Review v3 changes only the overview and completed-items disclosure. */
.rv-top{display:grid;gap:14px;margin:4px 0 0;min-width:0}
.review-redesign .review-view-tabs.rv-seg{display:inline-flex;background:#F4F5F7;border-radius:10px;padding:3px;gap:2px;width:max-content;max-width:100%}
.review-redesign .rv-seg .chip{border:0;background:transparent;border-radius:8px;padding:8px 16px;font-size:14px;color:#5F6570;font-weight:400}
.review-redesign .rv-seg .chip.active{background:#fff;color:#1F2329;font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.review-redesign .rv-seg .chip span{font-weight:600;color:#A3A8B0;background:transparent}
.rv-sum{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;border:1px solid #EAECEF;border-radius:14px;padding:20px 24px;background:#fff;color:#1F2329}
.rv-big strong{font-size:42px;font-weight:900;color:#1F2329;letter-spacing:-.02em;line-height:1}
.rv-big span{font-size:14px;color:#80858F;margin-left:6px}
.rv-big p{font-size:12.5px;color:#80858F;margin:8px 0 0}
.rv-mid{min-width:0}.rv-row{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:#5F6570;margin-bottom:8px}.rv-row b{color:#1F2329}
.rv-bar{display:flex;gap:2px;height:10px;border-radius:99px;overflow:hidden;background:#F5F6F8}
.rv-bar progress{appearance:none;display:block;width:100%;height:100%;border:0;background:transparent;color:#EE7A2C}
.rv-bar progress::-webkit-progress-bar{background:transparent}.rv-bar progress::-webkit-progress-value{background:#EE7A2C}.rv-bar progress::-moz-progress-bar{background:#EE7A2C}
.rv-sum.is-complete .rv-big strong{color:#3D9A6B}.rv-sum.is-complete progress::-webkit-progress-value{background:#3D9A6B}.rv-sum.is-complete progress::-moz-progress-bar{background:#3D9A6B}
.rv-mastery svg{display:block;width:100%;height:10px;min-width:0}.rv-mastery rect{stroke:#fff;stroke-width:.06}.rv-mastery .new{fill:#E0663F}.rv-mastery .weak{fill:#E3A63B}.rv-mastery .mastered{fill:#3D9A6B}
.rv-legend{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.rv-legend button{display:flex;align-items:center;gap:6px;border:1px solid #EAECEF;background:#fff;border-radius:99px;padding:6px 10px;font:inherit;font-size:12px;color:#5F6570;cursor:pointer}
.rv-legend button i{width:7px;height:7px;border-radius:50%;background:#E0663F}.rv-legend .weak i{background:#E3A63B}.rv-legend .mastered i{background:#3D9A6B}
.rv-legend button strong{color:#1F2329;font-size:inherit}.rv-legend button.on{border-color:#1F2329;box-shadow:0 0 0 1px #1F2329}
.rv-type{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}.rv-type span{font-size:12.5px;background:#F5F6F8;border-radius:8px;padding:6px 10px;color:#5F6570}.rv-type b{color:#1F2329;margin-left:4px}
.rv-go{display:flex;align-items:center;justify-content:center;gap:8px;background:#EE7A2C;color:#fff;border:0;border-radius:12px;padding:15px 24px;font:inherit;font-size:16px;font-weight:800;box-shadow:0 6px 16px rgba(238,122,44,.25);cursor:pointer;white-space:nowrap}
.rv-go svg{width:14px;height:14px;fill:currentColor}.rv-go.ghost{background:#fff;color:#1F2329;border:1px solid #E4E7EB;box-shadow:none;font-size:15px}.rv-go:disabled{color:#80858F;background:#F4F5F7;box-shadow:none;cursor:default}
.rv-done{border:1px dashed #E4E7EB;border-radius:12px;padding:12px 16px;font-size:13.5px;color:#6B8F7A;background:#F5F6F8}
.rv-done>summary{cursor:pointer;list-style:none}.rv-done>summary::-webkit-details-marker{display:none}.rv-done>summary span{font-size:0;margin-left:8px}.rv-done>summary span:after{content:'展开';font-size:13px;color:#80858F}.rv-done[open]>summary span:after{content:'收起'}.rv-done[open] .review-today-list{margin-top:14px}
.rv-top button:focus-visible,.rv-done summary:focus-visible{outline:2px solid #EE7A2C;outline-offset:3px}
@media(max-width:1200px){.rv-sum{gap:20px}.rv-go{padding-inline:18px}.rv-legend{gap:6px}}
@media(max-width:980px){.rv-sum{grid-template-columns:1fr;gap:18px;padding:20px}.rv-go{width:100%}.rv-big strong{font-size:42px}.review-redesign .rv-seg .chip{padding:8px 12px;font-size:13px}.rv-legend{gap:7px}.rv-legend button{font-size:12px;padding:6px 9px}}