.v-wrap { max-width: 860px; margin: 0 auto; padding: 40px 20px 80px; }
.v-h1 { font-size: clamp(22px, 4vw, 30px); font-weight: 700; margin-bottom: 6px; }
.v-lead { color: var(--text-muted); font-size: 15px; line-height: 1.7; margin-bottom: 24px; }

.v-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.v-stat { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.v-stat b { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; }
.v-stat span { font-size: 12.5px; color: var(--text-muted); }
.v-stat.due b { color: var(--st-no); }

button { font: inherit; cursor: pointer; border-radius: var(--radius-btn); padding: 9px 16px; font-size: 14px; background: transparent; color: var(--heading); border: 1px solid var(--border-strong); }
.b-main { background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); font-weight: 600; }
.b-main:hover { background: var(--heading); border-color: var(--heading); color: var(--on-primary); }
.b-ghost { background: transparent; color: var(--heading); border: 1px solid var(--border-strong); }
.b-good { background: var(--st-ok-fill); border: 1px solid var(--st-ok-fill); color: var(--on-status); font-weight: 600; }
.b-bad  { background: transparent; border: 1px solid var(--st-no); color: var(--st-no); font-weight: 600; }
button[disabled] { opacity: .55; cursor: default; }

/* 复习卡。一次只给一个词 —— 一屏列十个词等于在读词表，那不是背 */
.card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
        padding: 30px 26px; text-align: center; margin-bottom: 14px; }
.card .w { font-size: 34px; font-weight: 700; letter-spacing: .4px; }
.card .ph { color: var(--text-muted); font-size: 14px; margin-top: 6px; }
.card .ctx { margin-top: 18px; font-size: 15px; line-height: 1.85; color: var(--text);
             background: var(--surface); border-radius: var(--radius-sm); padding: 12px 14px; text-align: left; }
.card .ctx u { text-decoration: none; border-bottom: 2px solid var(--link); padding: 0 2px; font-weight: 600; }
.card .ctx i { font-style: normal; color: var(--text-muted); letter-spacing: 2px; }
.card .cn { margin-top: 18px; font-size: 17px; line-height: 1.8; white-space: pre-line; text-align: left; }
.card .en { margin-top: 8px; font-size: 13px; color: var(--text-muted); font-style: italic; text-align: left; }
.card .acts { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.card .acts button { min-width: 130px; }
.card .box { margin-top: 14px; font-size: 12.5px; color: var(--text-muted); }

.v-sec { font-size: 18px; font-weight: 700; margin: 30px 0 10px; }
.v-note { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; margin-bottom: 14px; }

.w-row { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
         padding: 13px 16px; margin-bottom: 8px; }
.w-row .top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.w-row .w { font-size: 16px; font-weight: 700; }
.w-row .ph { font-size: 12.5px; color: var(--text-muted); }
.w-row .sp { flex: 1 }
.w-row .box { font-size: 11.5px; font-weight: 600; color: var(--link); background: var(--info-bg);
              border-radius: 999px; padding: 1px 9px; }
.w-row .box.done { color: var(--st-ok); background: var(--ok-bg); }
.w-row .cn { margin-top: 5px; font-size: 14px; color: var(--text); white-space: pre-line; }
.w-row .ctx { margin-top: 6px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.w-row .del { border: none; background: none; color: var(--text-muted); font-size: 13px; padding: 2px 4px; }
.w-row .del:hover { color: var(--st-no); }

.v-empty { background: var(--bg); border: 1px dashed var(--border-strong); border-radius: var(--radius);
           padding: 36px 24px; text-align: center; color: var(--text-muted); line-height: 1.8; }
.v-empty a { color: var(--link); }
.v-more { text-align: center; margin-top: 22px; font-size: 14px; }
.v-more a { color: var(--link); }
.v-src { margin-top: 34px; font-size: 12px; color: var(--text-muted); line-height: 1.7; }
.v-src a { color: var(--text-muted); }
.v-msg { font-size: 13.5px; margin-bottom: 14px; padding: 9px 12px; border-radius: var(--radius-sm); }
.v-msg.ok { background: var(--ok-bg); color: var(--st-ok); }
.v-msg.no { background: var(--caution-bg); color: var(--caution-text); }
.v-search, .v-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0; }
.v-search input { flex:1; min-width:160px; }
.v-toolbar input { max-width:100%; }
input, select { font:inherit; border:1px solid var(--field-line); border-radius:var(--radius-sm); padding:9px; min-width:0; background:var(--field-bg); color:var(--text); }
.source-label { color:var(--link); font-size:12px; }
.card audio { max-width:100%; }
#exitReview { margin-top:18px; }
#lookupResult { margin-top:12px; }
.w-row .en { margin-top:6px; font-size:14px; color:var(--text-muted); }
.test-options {display:grid;gap:10px;}
.test-options button {text-align:left;min-height:48px;white-space:normal;overflow-wrap:anywhere;}
.test-options small {display:block;margin-top:5px;color:var(--text-muted);font-size:13px;}
.test-options [aria-pressed="true"] {border:2px solid var(--link);background:var(--selected-bg);}
.v-actions {display:flex;flex-wrap:wrap;gap:10px;margin:12px 0;}
a.b-main, a.b-ghost {display:inline-block;padding:10px 14px;border-radius:var(--radius-btn);text-decoration:none;font-size:14px;}
@media(max-width:420px) { .v-wrap {padding:20px 14px 50px;} .v-stat {padding:12px 8px;} .card {padding:24px 14px;} .card .acts {flex-wrap:wrap;} .card .acts button {min-width:110px;} }

/* 「在哪里出现过」（vocab.js showWhere） */
.w-row .where-btn { margin-top: 10px; padding: 6px 12px; font-size: 14px; }
.where-list ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.where-list li { border-left: 3px solid var(--border-strong); padding: 4px 0 4px 10px; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.where-list li.where-own { border-left-color: var(--link); }
.where-list li.where-count, .where-list li.where-wait, .where-list li.where-none { border-left: 0; padding-left: 0; color: var(--text-muted); }
.where-list a { color: var(--text); text-decoration: none; display: block; }
.where-list a:hover .where-s, .where-list a:focus-visible .where-s { text-decoration: underline; }
.where-list .source-label { display: block; font-size: 12.5px; }
.where-list b { font-weight: 700; color: var(--heading); border-bottom: 2px solid var(--link); }
.where-list p { margin: 0; }