.wl-root {
  --wl-bg: #f5f7fb;
  --wl-surface: #fff;
  --wl-surface-soft: #f1f3fb;
  --wl-text: #172033;
  --wl-muted: #69748a;
  --wl-faint: #98a1b3;
  --wl-line: rgba(40, 49, 73, .09);
  --wl-accent: #6657e8;
  --wl-accent-soft: #eeeafd;
  --wl-green: #258d68;
  --wl-yellow: #a86815;
  --wl-red: #b5545e;
  width: 100%; min-height: 100dvh; color: var(--wl-text); background: var(--wl-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px; line-height: 1.45; -webkit-tap-highlight-color: transparent; color-scheme: light;
}
#tab-words { padding: 0; background: var(--wl-bg, #f5f7fb); }
#tab-words > #wordLearningRoot { width: 100%; min-height: 100dvh; }
.wl-empty-card { text-align: center; }
.wl-empty-card .wl-status-icon { margin: 0 auto 14px; }
.wl-empty-card h2 { margin: 0 0 8px; font-size: 1.18rem; }
.wl-empty-card p { margin: 0 0 20px; color: var(--wl-muted); font-size: .86rem; line-height: 1.65; }
.wl-profile-note { margin: -4px 0 0; color: var(--wl-muted); font-size: .82rem; line-height: 1.65; text-align: center; }
.wl-sound-settings { padding-bottom: 4px; }
.wl-sound-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.wl-sound-controls button { min-width: 0; min-height: 62px; padding: 8px 4px; border: 1px solid var(--wl-line); border-radius: 14px; color: var(--wl-muted); background: var(--wl-surface); font-size: .68rem; cursor: pointer; }
.wl-sound-controls b { display: block; margin-bottom: 4px; color: var(--wl-accent); font-size: .95rem; }
.wl-sound-controls button:active, .wl-quick:active, .wl-primary:active, .wl-feedback button:active { transform: translateY(1px); }
.wl-feedback > div button:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.35); }
.wl-answer small + button, .wl-answer p + button { margin-top: 8px; }
.wl-answer > div strong { overflow-wrap: anywhere; }
.wl-word-button:focus-visible, .wl-primary:focus-visible, .wl-quick:focus-visible, .wl-bottom-nav button:focus-visible, .wl-feedback button:focus-visible, .wl-reveal:focus-visible, .wl-icon-btn:focus-visible, .wl-sound-mode:focus-visible, .wl-sound-controls button:focus-visible, .wl-browse-main:focus-visible, .wl-browse-sound:focus-visible, .wl-browse-star:focus-visible, .wl-filter-row button:focus-visible, .wl-browse-search input:focus-visible { outline: 3px solid color-mix(in srgb, var(--wl-accent) 38%, transparent); outline-offset: 2px; }
[data-theme="dark"] .wl-root, .wl-root[data-theme="dark"] {
  --wl-bg: #151824; --wl-surface: #202432; --wl-surface-soft: #292e3d; --wl-text: #f3f5fb;
  --wl-muted: #b1b8ca; --wl-faint: #858da1; --wl-line: rgba(255,255,255,.09);
  --wl-accent: #9488ff; --wl-accent-soft: #302d55; --wl-green: #6fd4ad; --wl-yellow: #e3b569; --wl-red: #ef909a;
  color-scheme: dark;
}
.wl-root *, .wl-root *::before, .wl-root *::after { box-sizing: border-box; }
.wl-root button { color: inherit; font: inherit; }
.wl-root button:focus-visible { outline: 3px solid color-mix(in srgb, var(--wl-accent) 45%, transparent); outline-offset: 2px; }
.wl-home, .wl-session, .wl-status { width: min(100%, 720px); min-height: 100dvh; margin: 0 auto; }
.wl-home { padding: max(18px, env(safe-area-inset-top)) 16px calc(92px + env(safe-area-inset-bottom)); }
.wl-topbar, .wl-session-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wl-topbar { margin: 0 2px 18px; }
.wl-eyebrow { margin: 0 0 2px; color: var(--wl-accent); font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
.wl-topbar h1 { margin: 0; font-size: clamp(1.35rem, 7vw, 1.8rem); line-height: 1.18; }
.wl-top-actions { display: flex; gap: 8px; }
.wl-icon-btn { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0; border: 1px solid var(--wl-line); border-radius: 14px; background: var(--wl-surface); cursor: pointer; }
.wl-offline-strip { width: 100%; min-height: 44px; margin: -4px 0 12px; border: 0; border-radius: 13px; color: var(--wl-yellow); background: color-mix(in srgb, var(--wl-yellow) 12%, transparent); font-size: .82rem; font-weight: 700; }
.wl-today-card { padding: 20px; border: 1px solid var(--wl-line); border-radius: 24px; background: var(--wl-surface); box-shadow: 0 16px 44px rgba(47, 40, 104, .07); }
.wl-book-row, .wl-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wl-book-pill { padding: 6px 10px; border-radius: 999px; color: var(--wl-accent); background: var(--wl-accent-soft); font-size: .78rem; font-weight: 800; }
.wl-book-list { display: grid; gap: 8px; }
.wl-book-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 8px 10px; border: 1px solid var(--wl-line); border-radius: 16px; color: var(--wl-text); background: var(--wl-surface); text-align: left; cursor: pointer; }
.wl-book-option:active { transform: translateY(1px); }
.wl-book-option.is-selected { border-color: color-mix(in srgb, var(--wl-accent) 48%, var(--wl-line)); background: color-mix(in srgb, var(--wl-accent-soft) 68%, var(--wl-surface)); box-shadow: 0 6px 18px rgba(88,72,220,.10); }
.wl-book-icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--book-color, #6657e8) 15%, var(--wl-surface)); font-size: 1.12rem; }
.wl-book-copy { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 1px; }
.wl-book-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.wl-book-copy small { overflow: hidden; color: var(--wl-muted); text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.wl-book-option > b { flex: 0 0 auto; color: var(--wl-accent); font-size: .72rem; }
.wl-book-option > i { flex: 0 0 auto; width: 24px; color: var(--wl-faint); font-size: 1rem; font-style: normal; text-align: center; }
.wl-book-option.is-selected > i { color: var(--wl-accent); font-weight: 900; }
.wl-book-more { min-height: 44px; border: 0; color: var(--wl-accent); background: transparent; font-size: .76rem; font-weight: 800; text-align: left; cursor: pointer; }
.wl-book-list-large { gap: 10px; }
.wl-book-list-large .wl-book-option { min-height: 72px; padding: 11px 12px; }
.wl-book-list-large .wl-book-icon { width: 44px; height: 44px; font-size: 1.3rem; }
.wl-book-list-large .wl-book-copy strong { font-size: .92rem; }
.wl-book-list-large .wl-book-copy small { font-size: .72rem; line-height: 1.45; white-space: normal; }
.wl-book-tip { padding: 15px; border: 1px dashed var(--wl-line); border-radius: 16px; color: var(--wl-muted); background: color-mix(in srgb, var(--wl-surface-soft) 60%, transparent); font-size: .76rem; text-align: center; }
.wl-book-tip p { margin: 0; line-height: 1.6; }
.wl-book-tip .wl-text-btn { margin-top: 4px; }
.wl-time, .wl-section-title > span { color: var(--wl-muted); font-size: .76rem; }
.wl-counts { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; align-items: center; margin: 25px 0 18px; text-align: center; }
.wl-counts div { display: flex; flex-direction: column; gap: 1px; }
.wl-counts strong { font-size: 1.65rem; line-height: 1.2; }
.wl-counts span { color: var(--wl-muted); font-size: .75rem; }
.wl-counts i { width: 1px; height: 30px; background: var(--wl-line); }
.wl-progress { height: 7px; margin-bottom: 17px; overflow: hidden; border-radius: 99px; background: var(--wl-surface-soft); }
.wl-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8d80ff, var(--wl-accent)); }
.wl-primary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 10px 18px; border: 0; border-radius: 17px; color: #fff !important; background: linear-gradient(135deg, #7768ef, #5848dc); box-shadow: 0 10px 25px rgba(88,72,220,.24); font-weight: 800; cursor: pointer; }
.wl-primary span { font-size: 1.25rem; }
.wl-secondary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 9px 16px; border: 1px solid var(--wl-line); border-radius: 15px; color: var(--wl-accent); background: var(--wl-surface); font-size: .82rem; font-weight: 800; cursor: pointer; }
.wl-secondary:active, .wl-study-tool:active { transform: translateY(1px); }
.wl-study-tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.wl-study-tool { display: flex; align-items: flex-start; min-width: 0; min-height: 94px; padding: 13px 11px; border: 1px solid var(--wl-line); border-radius: 17px; color: var(--wl-text); background: var(--wl-surface); flex-direction: column; text-align: left; cursor: pointer; }
.wl-study-tool strong { color: var(--wl-accent); font-size: 1.25rem; line-height: 1; }
.wl-study-tool span { margin-top: 9px; font-size: .82rem; font-weight: 800; }
.wl-study-tool small { margin-top: 2px; overflow: hidden; color: var(--wl-muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.wl-complete-actions { display: grid; gap: 8px; margin: 24px 0 2px; }
.wl-browse-search { padding: 15px; border: 1px solid var(--wl-line); border-radius: 20px; background: var(--wl-surface); }
.wl-browse-search label { display: block; margin-bottom: 7px; color: var(--wl-muted); font-size: .72rem; }
.wl-browse-search input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid var(--wl-line); border-radius: 14px; outline: 0; color: var(--wl-text); background: var(--wl-surface-soft); font: inherit; font-size: .86rem; }
.wl-browse-search input:focus { border-color: var(--wl-accent); box-shadow: 0 0 0 3px var(--wl-accent-soft); }
.wl-filter-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 10px; }
.wl-filter-row button { min-height: 38px; padding: 4px 2px; border: 1px solid var(--wl-line); border-radius: 11px; color: var(--wl-muted); background: var(--wl-surface); font-size: .68rem; }
.wl-filter-row button.is-active { border-color: var(--wl-accent); color: var(--wl-accent); background: var(--wl-accent-soft); font-weight: 800; }
.wl-browse-count { margin: 11px 0 0; color: var(--wl-muted); font-size: .72rem; }
.wl-browse-count strong { color: var(--wl-accent); }
.wl-browse-list { display: grid; gap: 7px; margin-top: 14px; padding-bottom: 12px; }
.wl-browse-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px 40px; gap: 4px; align-items: stretch; padding: 9px; border: 1px solid var(--wl-line); border-radius: 16px; background: var(--wl-surface); }
.wl-browse-main { min-width: 0; padding: 2px 4px; border: 0; color: var(--wl-text); background: transparent; text-align: left; }
.wl-browse-main strong, .wl-browse-main span, .wl-browse-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-browse-main strong { font-size: .96rem; }
.wl-browse-main span { margin-top: 1px; color: var(--wl-muted); font-size: .68rem; }
.wl-browse-main small { margin-top: 4px; color: var(--wl-muted); font-size: .7rem; }
.wl-browse-main small b { margin-right: 5px; color: var(--wl-accent); font-size: .64rem; }
.wl-browse-sound, .wl-browse-star { align-self: center; min-height: 38px; border: 1px solid var(--wl-line); border-radius: 11px; color: var(--wl-accent); background: var(--wl-surface-soft); font-size: 1rem; }
.wl-browse-star { color: var(--wl-faint); font-size: 1.15rem; }
.wl-browse-star.is-on { color: #e4a72d; background: color-mix(in srgb, #e4a72d 12%, var(--wl-surface)); }
.wl-browse-empty { display: grid; place-items: center; min-height: 180px; padding: 20px; border: 1px dashed var(--wl-line); border-radius: 18px; color: var(--wl-muted); text-align: center; }
.wl-browse-empty strong { color: var(--wl-text); font-size: .9rem; }
.wl-browse-empty span { margin-top: 5px; font-size: .74rem; }
.wl-browse-more { margin: 3px 0 0; color: var(--wl-faint); font-size: .68rem; text-align: center; }
.wl-detail-hero { padding: 12px 16px 18px; border: 1px solid var(--wl-line); border-radius: 24px; background: var(--wl-surface); text-align: center; }
.wl-detail-hero .wl-word-button { min-height: 124px; }
.wl-detail-hero .wl-primary { min-height: 48px; border-radius: 14px; }
.wl-details-screen .wl-topbar h1 { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-icon-btn.is-starred { color: #e4a72d; border-color: color-mix(in srgb, #e4a72d 35%, var(--wl-line)); background: color-mix(in srgb, #e4a72d 12%, var(--wl-surface)); }
.wl-detail-section { padding: 16px; border: 1px solid var(--wl-line); border-radius: 20px; background: var(--wl-surface); }
.wl-detail-definitions { display: grid; gap: 12px; }
.wl-detail-definition { display: flex; align-items: flex-start; gap: 10px; }
.wl-detail-definition .wl-pos { flex: 0 0 auto; min-width: 52px; padding: 4px 6px; border-radius: 8px; color: var(--wl-accent); background: var(--wl-accent-soft); font-size: .68rem; font-weight: 800; text-align: center; }
.wl-detail-definition p { margin: 0 0 4px; font-size: .9rem; line-height: 1.5; }
.wl-detail-example { margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--wl-line); }
.wl-detail-example strong { color: var(--wl-text); font-size: .78rem; }
.wl-detail-example p { margin: 7px 0 3px; font-size: .86rem; line-height: 1.55; }
.wl-detail-example small, .wl-detail-line span, .wl-detail-source small { color: var(--wl-muted); font-size: .73rem; line-height: 1.5; }
.wl-detail-line { display: grid; grid-template-columns: 44px 1fr; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wl-line); }
.wl-detail-line b { color: var(--wl-accent); font-size: .72rem; }
.wl-detail-source { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 11px; border-top: 1px solid var(--wl-line); }
.wl-detail-source span { color: var(--wl-faint); font-size: .68rem; }
.wl-detail-source small { text-align: right; }
.wl-detail-muted { margin: 0; color: var(--wl-muted); font-size: .8rem; }
.wl-section { margin-top: 22px; }
.wl-section-title { margin: 0 2px 11px; }
.wl-section-title h2 { margin: 0; font-size: 1rem; }
.wl-section-title button { min-height: 44px; border: 0; color: var(--wl-accent); background: transparent; font-size: .8rem; font-weight: 700; }
.wl-quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.wl-quick { min-width: 0; min-height: 120px; padding: 14px 7px; border: 1px solid var(--wl-line); border-radius: 18px; background: var(--wl-surface); text-align: left; cursor: pointer; }
.wl-quick strong, .wl-quick span, .wl-quick em { display: block; }
.wl-quick strong { color: var(--wl-accent); font-size: 1.45rem; }
.wl-quick small { margin-left: 2px; font-size: .62rem; }
.wl-quick span { margin-top: 10px; font-size: .82rem; font-weight: 800; }
.wl-quick em { color: var(--wl-muted); font-size: .68rem; font-style: normal; }
.wl-rhythm { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 16px 14px; border: 1px solid var(--wl-line); border-radius: 17px; background: var(--wl-surface); color: var(--wl-muted); font-size: .72rem; text-align: center; }
.wl-rhythm b { color: var(--wl-faint); }
.wl-bottom-nav { position: fixed; z-index: 10; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4, 1fr); width: min(100%, 720px); min-height: calc(64px + env(safe-area-inset-bottom)); margin: auto; padding: 5px 8px env(safe-area-inset-bottom); border-top: 1px solid var(--wl-line); background: color-mix(in srgb, var(--wl-surface) 92%, transparent); backdrop-filter: blur(18px); }
.wl-bottom-nav button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; min-height: 54px; border: 0; border-radius: 13px; color: var(--wl-muted); background: transparent; font-size: .68rem; }
.wl-bottom-nav i { font-size: 1.15rem; font-style: normal; }
.wl-bottom-nav .is-active { color: var(--wl-accent); background: var(--wl-accent-soft); font-weight: 800; }
.wl-session { display: flex; flex-direction: column; padding: max(12px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom)); background: var(--wl-bg); }
.wl-session-head { min-height: 48px; }
.wl-session-meta { display: flex; flex-direction: column; align-items: center; font-size: .76rem; }
.wl-session-meta span { color: var(--wl-muted); font-size: .68rem; }
.wl-sound-mode { min-height: 44px; padding: 0 11px; border: 0; border-radius: 13px; color: var(--wl-accent); background: var(--wl-accent-soft); font-size: .72rem; font-weight: 800; }
.wl-sound-mode.is-muted { color: var(--wl-muted); background: var(--wl-surface-soft); }
.wl-group-progress { padding: 16px 5px 4px; }
.wl-five-track { display: grid; grid-template-columns: repeat(var(--wl-group-size, 5), minmax(0, 1fr)); gap: 7px; }
.wl-group-choice-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 11px; }
.wl-group-choice { min-height: 38px; padding: 4px 2px; border: 1px solid var(--wl-line); border-radius: 11px; color: var(--wl-muted); background: var(--wl-surface); font-size: .7rem; font-weight: 700; cursor: pointer; }
.wl-group-choice.is-active { border-color: var(--wl-accent); color: var(--wl-accent); background: var(--wl-accent-soft); }
.wl-five-track button { position: relative; height: 10px; padding: 0; border: 0; border-radius: 99px; background: var(--wl-surface-soft); }
.wl-five-track button.is-done { background: var(--wl-green); }
.wl-five-track button.is-current { background: var(--wl-accent); box-shadow: 0 0 0 3px var(--wl-accent-soft); }
.wl-five-track span { position: absolute; top: 14px; left: 50%; color: var(--wl-faint); font-size: .58rem; transform: translateX(-50%); }
.wl-round { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 44px; margin-top: 17px; border: 0; color: var(--wl-muted); background: transparent; font-size: .72rem; }
.wl-round span { display: flex; gap: 3px; }
.wl-round i { width: 5px; height: 5px; border-radius: 50%; background: var(--wl-line); }
.wl-round i.is-on { background: var(--wl-accent); }
.wl-word-stage { display: flex; align-items: center; justify-content: center; flex: 1; flex-direction: column; min-height: 315px; padding: 18px 6px 12px; }
.wl-word-button { position: relative; min-width: min(100%, 330px); min-height: 142px; padding: 20px 48px; border: 0; background: transparent; cursor: pointer; }
.wl-word-button strong, .wl-word-button span { display: block; overflow-wrap: anywhere; }
.wl-word-button strong { font-size: clamp(2.25rem, 13vw, 3.65rem); line-height: 1.12; letter-spacing: -.035em; }
.wl-word-button span { margin-top: 10px; color: var(--wl-muted); font-size: 1rem; }
.wl-word-button i { position: absolute; right: 16px; bottom: 24px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--wl-accent); background: var(--wl-accent-soft); font-style: normal; }
.wl-answer { width: 100%; padding: 18px 17px 12px; border: 1px solid var(--wl-line); border-radius: 20px; background: var(--wl-surface); }
.wl-answer-hidden { display: none; }
.wl-answer-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--wl-line); }
.wl-answer-heading span { color: var(--wl-text); font-size: .78rem; font-weight: 800; }
.wl-answer-heading small { color: var(--wl-faint); font-size: .66rem; }
.wl-definitions { display: grid; gap: 8px; padding-top: 11px; }
.wl-definition { display: flex; align-items: flex-start; gap: 8px; }
.wl-definition .wl-pos { flex: 0 0 auto; min-width: 42px; margin-top: 2px; padding: 3px 6px; border-radius: 7px; color: var(--wl-accent); background: var(--wl-accent-soft); font-size: .67rem; font-weight: 800; text-align: center; }
.wl-definition strong { overflow-wrap: anywhere; font-size: 1.02rem; line-height: 1.5; }
.wl-answer p { margin: 15px 0 2px; color: var(--wl-text); font-size: .88rem; }
.wl-answer small { color: var(--wl-muted); }
.wl-answer button, .wl-text-btn { width: 100%; min-height: 44px; margin-top: 9px; border: 0; color: var(--wl-accent); background: transparent; font-size: .76rem; font-weight: 700; }
.wl-reveal { min-height: 48px; padding: 0 18px; border: 1px solid var(--wl-line); border-radius: 15px; color: var(--wl-muted); background: var(--wl-surface); }
.wl-feedback { padding-top: 8px; }
.wl-feedback > p { margin: 0 0 8px; color: var(--wl-muted); font-size: .72rem; text-align: center; }
.wl-feedback > div { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; }
.wl-feedback > div button { min-height: 57px; padding: 5px 2px; border: 1px solid currentColor; border-radius: 16px; background: var(--wl-surface); font-size: .78rem; font-weight: 800; }
.wl-feedback > div i { display: block; font-size: 1.05rem; font-style: normal; }
.wl-feedback .is-no { color: var(--wl-red); }.wl-feedback .is-fuzzy { color: var(--wl-yellow); }.wl-feedback .is-yes { color: var(--wl-green); }
.wl-get-off { width: 100%; min-height: 44px; margin-top: 4px; border: 0; color: var(--wl-muted); background: transparent; font-size: .72rem; }
.wl-status { display: grid; place-items: center; padding: max(32px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
.wl-status-card { width: min(100%, 410px); padding: 30px 22px; border: 1px solid var(--wl-line); border-radius: 25px; background: var(--wl-surface); text-align: center; }
.wl-status-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 20px; color: var(--wl-accent); background: var(--wl-accent-soft); font-size: 1.7rem; font-style: normal; font-weight: 800; }
.wl-status h1 { margin: 0; font-size: 1.25rem; }.wl-status p { margin: 10px 0 24px; color: var(--wl-muted); font-size: .88rem; }
.wl-loader { display: block; width: 28px; height: 28px; margin: 25px auto 4px; border: 3px solid var(--wl-line); border-top-color: var(--wl-accent); border-radius: 50%; animation: wl-spin .8s linear infinite; }
.wl-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 24px 0; }
.wl-result-grid div { padding: 12px 4px; border-radius: 14px; background: var(--wl-surface-soft); }
.wl-result-grid strong, .wl-result-grid span { display: block; }.wl-result-grid strong { font-size: 1.05rem; }.wl-result-grid span { margin-top: 3px; color: var(--wl-muted); font-size: .63rem; }
.wl-oral-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 9px 0 0; padding: 11px 13px; border-radius: 14px; color: var(--wl-green); background: color-mix(in srgb, var(--wl-green) 10%, var(--wl-surface-soft)); }.wl-oral-result strong { font-size: 1.25rem; }.wl-oral-result span { color: var(--wl-muted); font-size: .7rem; }

/* Extended word-book, review and personal-list experience */
.wl-custom-list { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 66px; margin-top: 12px; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--wl-accent) 42%, var(--wl-line)); border-radius: 17px; color: var(--wl-text); background: color-mix(in srgb, var(--wl-accent-soft) 38%, var(--wl-surface)); text-align: left; cursor: pointer; }
.wl-custom-list > i { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; color: #fff; background: var(--wl-accent); font-size: 1.2rem; font-style: normal; }
.wl-custom-list > span { display: flex; flex: 1; min-width: 0; flex-direction: column; }.wl-custom-list strong { font-size: .86rem; }.wl-custom-list small { margin-top: 2px; color: var(--wl-muted); font-size: .69rem; }.wl-custom-list > b { color: var(--wl-accent); font-size: 1rem; }
.wl-custom-title { margin-top: 19px; }.wl-custom-lists { margin-top: 8px; }
.wl-custom-form { padding: 17px; border: 1px solid var(--wl-line); border-radius: 22px; background: var(--wl-surface); box-shadow: 0 14px 34px rgba(47,40,104,.06); }
.wl-custom-form > label { display: block; color: var(--wl-muted); font-size: .72rem; font-weight: 700; }
.wl-custom-form input { width: 100%; min-height: 49px; margin-top: 7px; padding: 0 13px; border: 1px solid var(--wl-line); border-radius: 14px; outline: 0; color: var(--wl-text); background: var(--wl-surface-soft); font: inherit; }
.wl-custom-form input:focus { border-color: var(--wl-accent); box-shadow: 0 0 0 3px var(--wl-accent-soft); }
.wl-custom-sources, .wl-queue-options { display: grid; gap: 8px; margin-top: 15px; }
.wl-custom-sources button, .wl-queue-options button { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 62px; padding: 9px 11px; border: 1px solid var(--wl-line); border-radius: 15px; color: var(--wl-text); background: var(--wl-surface); text-align: left; }
.wl-custom-sources button.is-active, .wl-queue-options button.is-active { border-color: color-mix(in srgb, var(--wl-accent) 58%, var(--wl-line)); background: var(--wl-accent-soft); }
.wl-custom-sources i, .wl-queue-options i { color: var(--wl-accent); font-style: normal; font-weight: 900; }.wl-custom-sources span, .wl-queue-options span { display: flex; min-width: 0; flex-direction: column; }.wl-custom-sources strong, .wl-queue-options strong { font-size: .8rem; }.wl-custom-sources small, .wl-queue-options small { margin-top: 2px; color: var(--wl-muted); font-size: .67rem; }.wl-custom-sources b { color: var(--wl-accent); font-size: .7rem; }
.wl-custom-preview { display: flex; margin: 14px 0; padding: 12px; border-radius: 14px; background: var(--wl-surface-soft); flex-direction: column; }.wl-custom-preview strong { font-size: .78rem; }.wl-custom-preview span { margin-top: 4px; color: var(--wl-muted); font-size: .7rem; line-height: 1.55; }
.wl-custom-words-label { display: grid; gap: 6px; margin-top: 14px; color: var(--wl-muted); font-size: .72rem; font-weight: 700; }.wl-custom-words-label textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--wl-line); border-radius: 13px; outline: 0; resize: vertical; color: var(--wl-text); background: var(--wl-surface-soft); font: inherit; font-size: .82rem; line-height: 1.55; }.wl-custom-words-label textarea:focus { border-color: var(--wl-accent); box-shadow: 0 0 0 3px var(--wl-accent-soft); }
.wl-book-library-tools { display: grid; grid-template-columns: auto auto; align-items: center; gap: 7px; margin: 0 0 14px; padding: 11px; border: 1px solid var(--wl-line); border-radius: 16px; background: var(--wl-surface); }.wl-book-library-tools button, .wl-import-label { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 11px; border: 1px solid var(--wl-line); border-radius: 10px; color: var(--wl-accent); background: var(--wl-accent-soft); font-size: .68rem; font-weight: 800; cursor: pointer; }.wl-import-label input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }.wl-book-library-tools small { grid-column: 1 / -1; color: var(--wl-muted); font-size: .64rem; }

.wl-book-tools { display: grid; gap: 10px; margin-bottom: 11px; padding: 13px; border: 1px solid var(--wl-line); border-radius: 18px; background: var(--wl-surface); }
.wl-book-tools label { display: grid; gap: 6px; color: var(--wl-muted); font-size: .7rem; font-weight: 750; }
.wl-book-tools input { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--wl-line); border-radius: 13px; outline: 0; color: var(--wl-text); background: var(--wl-surface-soft); font: inherit; font-size: .82rem; }
.wl-book-tools input:focus { border-color: var(--wl-accent); box-shadow: 0 0 0 3px var(--wl-accent-soft); }
.wl-book-filter-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.wl-book-filter-row::-webkit-scrollbar { display: none; }
.wl-book-filter-row button, .wl-book-sort-row button { flex: 0 0 auto; min-height: 35px; padding: 0 10px; border: 1px solid var(--wl-line); border-radius: 10px; color: var(--wl-muted); background: var(--wl-surface); font-size: .66rem; font-weight: 700; cursor: pointer; }
.wl-book-filter-row button.is-active, .wl-book-sort-row button.is-active { border-color: var(--wl-accent); color: var(--wl-accent); background: var(--wl-accent-soft); }
.wl-book-sort-row { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.wl-book-sort-row::-webkit-scrollbar { display: none; }
.wl-book-sort-row > span { flex: 0 0 auto; color: var(--wl-muted); font-size: .68rem; font-weight: 700; }
.wl-book-result-count { margin: 0 2px 9px; color: var(--wl-muted); font-size: .72rem; }
.wl-book-result-count strong { color: var(--wl-accent); }
.wl-book-page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 11px; padding: 9px; border: 1px solid var(--wl-line); border-radius: 16px; background: var(--wl-surface); }
.wl-book-page-toolbar > div { display: flex; gap: 5px; }.wl-book-page-toolbar button { min-height: 39px; padding: 0 10px; border: 1px solid var(--wl-line); border-radius: 11px; color: var(--wl-muted); background: var(--wl-surface-soft); font-size: .68rem; font-weight: 700; }.wl-book-page-toolbar button.is-active { border-color: var(--wl-accent); color: var(--wl-accent); background: var(--wl-accent-soft); }
.wl-book-page-toolbar .wl-use-book { color: #fff; border-color: transparent; background: var(--wl-accent); }
.wl-book-page-list, .wl-learned-list { display: grid; gap: 9px; }
.wl-chapter-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 8px 2px -2px; padding: 0 2px; color: var(--wl-accent); font-size: .72rem; font-weight: 850; }
.wl-chapter-heading small { color: var(--wl-faint); font-size: .62rem; font-weight: 600; }
.wl-book-word { position: relative; overflow: hidden; border: 1px solid var(--wl-line); border-radius: 17px; background: var(--wl-surface); box-shadow: 0 7px 18px rgba(35,38,65,.035); }
.wl-book-word.is-stopped { opacity: .72; border-style: dashed; }.wl-book-word.is-selected { border-color: color-mix(in srgb, var(--wl-accent) 55%, var(--wl-line)); box-shadow: 0 0 0 2px var(--wl-accent-soft); }.wl-book-word-main { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 9px; width: 100%; padding: 12px; border: 0; color: var(--wl-text); background: transparent; text-align: left; cursor: pointer; }
.wl-row-select { position: absolute; z-index: 1; top: 12px; left: 10px; display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 1px solid var(--wl-line); border-radius: 8px; color: var(--wl-muted); background: var(--wl-surface-soft); font-size: .72rem; font-weight: 900; cursor: pointer; }.wl-row-select.is-selected { color: #fff; border-color: var(--wl-accent); background: var(--wl-accent); }.wl-book-word:has(.wl-row-select) .wl-book-word-main { padding-left: 45px; }
.wl-book-word-index { color: var(--wl-faint); font-size: .68rem; text-align: center; }.wl-book-word-copy { display: grid; min-width: 0; gap: 4px; }.wl-word-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }.wl-book-word-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }.wl-book-word-copy > small { overflow: hidden; color: var(--wl-muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }.wl-word-definitions { display: grid; gap: 2px; min-width: 0; }.wl-word-definitions span { display: block; overflow: hidden; color: var(--wl-text); font-size: .75rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }.wl-word-definitions b { display: inline-block; min-width: 35px; margin-right: 4px; color: var(--wl-accent); font-size: .64rem; }.wl-word-history { overflow: hidden; margin-top: 1px; color: var(--wl-muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.wl-duplicate-badge { display: inline-flex; align-items: center; max-width: 90px; min-height: 25px; padding: 3px 7px; border-radius: 999px; color: var(--wl-accent); background: var(--wl-accent-soft); font-size: .6rem; font-weight: 800; text-align: center; }
.wl-word-row-actions, .wl-word-inline-actions, .wl-detail-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--wl-line); }
.wl-word-row-actions button, .wl-word-inline-actions button, .wl-detail-actions button { min-height: 40px; padding: 4px 5px; border: 1px solid var(--wl-line); border-radius: 11px; color: var(--wl-muted); background: var(--wl-surface-soft); font-size: .66rem; font-weight: 750; }.wl-word-row-actions button.is-active { color: #b27b11; }.wl-word-row-actions .is-chop, .wl-word-inline-actions button:nth-child(2), .wl-detail-actions button:nth-child(2) { color: var(--wl-green); }.wl-word-row-actions .is-stop, .wl-word-inline-actions button:nth-child(3), .wl-detail-actions button:nth-child(3) { color: var(--wl-red); }
.wl-word-inline-actions { width: 100%; margin-top: 10px; padding: 8px 0 0; }.wl-detail-actions { margin-top: 11px; padding: 10px 0 0; }
.wl-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 13px; padding: 10px; border: 1px solid var(--wl-line); border-radius: 16px; background: var(--wl-surface); }.wl-pagination button { min-height: 43px; border: 0; border-radius: 12px; color: var(--wl-accent); background: var(--wl-accent-soft); font-size: .72rem; font-weight: 800; }.wl-pagination button:last-child { justify-self: stretch; }.wl-pagination button:disabled { opacity: .38; }.wl-pagination span { color: var(--wl-muted); font-size: .68rem; white-space: nowrap; }.wl-pagination strong { color: var(--wl-text); }
.wl-load-more { width: 100%; min-height: 44px; margin-top: 12px; border: 1px solid var(--wl-accent); border-radius: 13px; color: var(--wl-accent); background: var(--wl-accent-soft); font-size: .72rem; font-weight: 800; cursor: pointer; }.wl-list-end { margin: 13px 0 0; color: var(--wl-faint); font-size: .68rem; text-align: center; }
.wl-batch-bar { position: sticky; z-index: 4; bottom: calc(68px + env(safe-area-inset-bottom)); display: grid; gap: 8px; margin: 10px 0; padding: 11px; border: 1px solid color-mix(in srgb, var(--wl-accent) 35%, var(--wl-line)); border-radius: 15px; background: color-mix(in srgb, var(--wl-accent-soft) 88%, var(--wl-surface)); box-shadow: 0 10px 25px rgba(47,40,104,.12); }.wl-batch-bar strong { color: var(--wl-accent); font-size: .76rem; }.wl-batch-bar > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }.wl-batch-bar button { min-height: 38px; padding: 0 3px; border: 1px solid var(--wl-line); border-radius: 10px; color: var(--wl-muted); background: var(--wl-surface); font-size: .63rem; font-weight: 750; cursor: pointer; }.wl-batch-bar button:last-child { color: #fff; border-color: transparent; background: var(--wl-accent); }.wl-batch-bar button:disabled { opacity: .45; cursor: not-allowed; }

.wl-review-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.wl-review-summary button { min-height: 84px; padding: 10px 4px; border: 1px solid var(--wl-line); border-radius: 17px; color: var(--wl-text); background: var(--wl-surface); }.wl-review-summary strong, .wl-review-summary span { display: block; }.wl-review-summary strong { color: var(--wl-accent); font-size: 1.35rem; }.wl-review-summary span { margin-top: 4px; color: var(--wl-muted); font-size: .7rem; }
.wl-scope-options, .wl-learned-filters { display: flex; gap: 7px; overflow-x: auto; padding: 2px 1px 7px; scrollbar-width: none; }.wl-scope-options::-webkit-scrollbar, .wl-learned-filters::-webkit-scrollbar { display: none; }.wl-scope-options button, .wl-learned-filters button { flex: 0 0 auto; min-height: 42px; padding: 0 13px; border: 1px solid var(--wl-line); border-radius: 13px; color: var(--wl-muted); background: var(--wl-surface); font-size: .7rem; }.wl-scope-options button.is-active, .wl-learned-filters button.is-active { border-color: var(--wl-accent); color: var(--wl-accent); background: var(--wl-accent-soft); font-weight: 800; }
.wl-review-preview { margin-top: 17px; padding: 16px; border: 1px solid var(--wl-line); border-radius: 20px; background: var(--wl-surface); }.wl-review-preview > div { display: flex; margin-bottom: 12px; flex-direction: column; }.wl-review-preview strong { font-size: .9rem; }.wl-review-preview span { margin-top: 3px; color: var(--wl-muted); font-size: .7rem; }.wl-review-preview .wl-text-btn { margin-bottom: -7px; }
.wl-learned-filters { margin: -5px 0 12px; }.wl-learned-list { padding-bottom: 12px; }

.wl-detail-duplicate { max-width: 100%; margin: 0 auto 10px; }.wl-relations { display: grid; gap: 9px; }.wl-relations .wl-section-title { margin-bottom: 2px; }.wl-relation-layer { display: grid; grid-template-columns: 35px minmax(0,1fr); gap: 10px; padding: 12px; border: 1px solid var(--wl-line); border-radius: 15px; background: var(--wl-surface-soft); }.wl-relation-layer > i { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: var(--wl-accent); background: var(--wl-accent-soft); font-size: .64rem; font-style: normal; font-weight: 900; }.wl-relation-layer h3 { margin: 2px 0 8px; font-size: .8rem; }.wl-relation-layer p { display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 7px; margin: 6px 0; }.wl-relation-layer b { color: var(--wl-muted); font-size: .66rem; }.wl-relation-layer span { overflow-wrap: anywhere; font-size: .74rem; line-height: 1.5; }.wl-relation-empty { padding: 16px; border: 1px dashed var(--wl-line); border-radius: 14px; color: var(--wl-muted); font-size: .72rem; line-height: 1.6; text-align: center; }
.wl-history-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.wl-history-summary div { padding: 10px 4px; border-radius: 13px; background: var(--wl-surface-soft); text-align: center; }.wl-history-summary strong, .wl-history-summary span { display: block; }.wl-history-summary strong { font-size: 1.02rem; }.wl-history-summary span { margin-top: 2px; color: var(--wl-muted); font-size: .62rem; }.wl-history-list { margin: 13px 0 0; padding: 0; list-style: none; }.wl-history-list li { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--wl-line); font-size: .68rem; }.wl-history-list time, .wl-history-list small { color: var(--wl-muted); }.wl-history-list .is-empty { display: block; color: var(--wl-muted); text-align: center; }
.wl-source-positions { display: grid; gap: 5px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--wl-line); }.wl-source-positions b { color: var(--wl-accent); font-size: .68rem; }.wl-source-positions span { color: var(--wl-muted); font-size: .68rem; line-height: 1.45; }
.wl-book-status-tabs { position: sticky; z-index: 5; top: 0; display: flex; gap: 6px; margin: -4px 0 12px; padding: 5px 0 8px; overflow-x: auto; background: color-mix(in srgb, var(--wl-bg) 94%, transparent); scrollbar-width: none; }
.wl-book-status-tabs::-webkit-scrollbar { display: none; }
.wl-book-status-tabs button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 5px; min-height: 40px; padding: 0 11px; border: 1px solid var(--wl-line); border-radius: 12px; color: var(--wl-muted); background: var(--wl-surface); font-size: .68rem; font-weight: 750; cursor: pointer; }
.wl-book-status-tabs button.is-active { border-color: var(--wl-accent); color: var(--wl-accent); background: var(--wl-accent-soft); box-shadow: 0 4px 13px color-mix(in srgb, var(--wl-accent) 13%, transparent); }
.wl-book-status-tabs b { min-width: 20px; padding: 2px 4px; border-radius: 999px; color: inherit; background: color-mix(in srgb, currentColor 12%, transparent); font-size: .6rem; text-align: center; }
.wl-sync-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 27px; padding: 3px 8px; border-radius: 999px; color: var(--wl-muted); background: var(--wl-surface-soft); font-size: .62rem; font-weight: 750; }
.wl-sync-badge.is-pending { color: var(--wl-yellow); background: color-mix(in srgb, var(--wl-yellow) 12%, var(--wl-surface)); }
.wl-sync-badge.is-error { color: var(--wl-red); background: color-mix(in srgb, var(--wl-red) 12%, var(--wl-surface)); }
.wl-oral-check { width: 100%; margin: 0 0 10px; padding: 12px; border: 1px solid color-mix(in srgb, var(--wl-accent) 30%, var(--wl-line)); border-radius: 16px; color: var(--wl-text); background: color-mix(in srgb, var(--wl-accent-soft) 60%, var(--wl-surface)); text-align: left; }
.wl-oral-check > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wl-oral-check strong { color: var(--wl-accent); font-size: .78rem; }
.wl-oral-check small { display: block; margin-top: 4px; color: var(--wl-muted); font-size: .66rem; line-height: 1.45; }
.wl-oral-check button { min-height: 38px; padding: 0 11px; border: 1px solid var(--wl-accent); border-radius: 10px; color: var(--wl-accent); background: var(--wl-surface); font-size: .68rem; font-weight: 800; cursor: pointer; }
.wl-oral-score { color: var(--wl-green); font-size: .76rem; font-weight: 850; }
.wl-feedback.is-oral-locked > p { color: var(--wl-yellow); }
.wl-feedback.is-oral-locked > div button:disabled { opacity: .38; }

@media (max-width: 430px) {
  .wl-book-page-toolbar { align-items: stretch; flex-direction: column; }.wl-book-page-toolbar > div { display: grid; grid-template-columns: repeat(2,1fr); }.wl-book-word-main { grid-template-columns: 25px minmax(0,1fr); }.wl-book-word-main .wl-duplicate-badge { grid-column: 2; justify-self: start; max-width: 100%; }.wl-word-row-actions, .wl-detail-actions { grid-template-columns: repeat(2,1fr); }.wl-word-row-actions button, .wl-word-inline-actions button, .wl-detail-actions button { min-height: 43px; font-size: .64rem; }.wl-pagination { gap: 5px; padding: 8px; }.wl-pagination button { padding: 0 7px; }.wl-relation-layer p { grid-template-columns: 62px minmax(0,1fr); }
}
@keyframes wl-spin { to { transform: rotate(360deg); } }
@media (min-width: 600px) { .wl-home { padding-right: 28px; padding-left: 28px; }.wl-session { padding-right: 28px; padding-left: 28px; }.wl-word-stage { min-height: 390px; } }
@media (max-width: 370px) { .wl-home { padding-right: 12px; padding-left: 12px; }.wl-today-card { padding: 17px 14px; }.wl-quick-grid { gap: 6px; }.wl-quick { padding-right: 6px; padding-left: 6px; }.wl-feedback > div { gap: 5px; }.wl-sound-controls { gap: 4px; }.wl-sound-controls button { font-size: .62rem; } }
@media (prefers-reduced-motion: reduce) { .wl-root *, .wl-root *::before, .wl-root *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (forced-colors: active) { .wl-primary, .wl-five-track button.is-current, .wl-five-track button.is-done { border: 1px solid ButtonText; } }