:root {
  color-scheme: light;
  font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  --bg: #f3fbf6;
  --sidebar: #e5f7ec;
  --panel: #ffffff;
  --ink: #1d3228;
  --muted: #6d8076;
  --line: #cfeadd;
  --line-strong: #add7c4;
  --green: #52b788;
  --green-dark: #2d8f68;
  --mint: #b9f3d0;
  --blue: #71a7d8;
  --gold: #f0bd58;
  --red: #ee7b73;
  --shadow: 0 16px 34px rgba(71, 137, 103, 0.14);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at top left, #e0f7ea 0, var(--bg) 360px); }
h1, h2, p { margin: 0; }
button, input, select { font: inherit; }
button { min-height: 40px; border: 0; border-radius: 6px; padding: 0 14px; color: #fff; background: var(--green); cursor: pointer; font-weight: 850; }
button:hover { background: var(--green-dark); }
button:disabled { cursor: default; opacity: 0.72; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(47, 95, 143, 0.22); outline-offset: 2px; }

.launch-screen { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
html.is-embedded .launch-screen { min-height: 0; }
.launch-screen[hidden], .app-shell[hidden] { display: none; }
.launch-panel { display: grid; gap: 18px; width: min(560px, 100%); border: 1px solid var(--line); border-radius: 8px; padding: 28px; background: var(--panel); box-shadow: var(--shadow); }
.launch-copy { color: var(--muted); line-height: 1.5; }
.launch-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.launch-stats div { display: grid; gap: 2px; min-width: 0; border: 1px solid #d6eee1; border-radius: 6px; padding: 10px; background: #f8fffb; }
.launch-stats strong { font-size: 20px; line-height: 1.1; }
.launch-stats span { color: var(--muted); font-size: 11px; font-weight: 750; }
.launch-search { padding-top: 2px; }
.launch-modes { display: grid; gap: 10px; }
.launch-mode { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 72px; color: var(--ink); border: 1px solid var(--line); background: #f8fffb; text-align: left; }
.launch-mode:hover { border-color: var(--green); background: #e9f8ef; }
.launch-mode strong { font-size: 18px; }
.launch-mode span { color: var(--muted); font-size: 13px; font-weight: 750; text-align: right; }
.app-shell { display: block; min-height: 0; }
.sidebar { display: none; }
.brand span { color: var(--green-dark); font-size: 12px; font-weight: 850; text-transform: uppercase; }
.brand h1 { margin-top: 6px; font-size: 27px; line-height: 1.15; }
.field, .filter-block { display: grid; gap: 9px; }
.field span, .block-title, .search-box span { color: #34463d; font-size: 13px; font-weight: 850; }
select, input:not([type="checkbox"]) { width: 100%; min-height: 42px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 11px; color: var(--ink); background: #fff; }
.toggle-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; background: #fff; font-weight: 750; }
.toggle-line span { min-width: 0; }
.toggle-line { justify-content: start; color: #33443b; }
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.segmented button { color: #426052; background: transparent; }
.segmented button.active { color: #fff; background: var(--green); }
.script-toggle { color: var(--green-dark); border: 1px solid var(--line-strong); background: #fff; }
.script-toggle:hover { background: #f1f7f3; }
.script-toggle.active { color: #fff; border-color: var(--blue); background: var(--blue); }
.main-panel { display: grid; align-content: start; gap: 16px; width: min(860px, 100%); margin: 0 auto; padding: 22px; }
.study-header, .memory-panel, .level-panel, .toolbar, .word-card, .quiz-card, .table-wrap { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); }
.study-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(360px, 0.85fr); gap: 18px; align-items: center; padding: 18px; }
.title-block { min-width: 0; }
#bank-description { margin-bottom: 6px; color: var(--muted); font-size: 14px; line-height: 1.5; }
h2 { overflow-wrap: anywhere; font-size: 25px; line-height: 1.25; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(76px, 1fr)); gap: 8px; }
.stats div { display: grid; gap: 2px; min-width: 0; border: 1px solid #d6eee1; border-radius: 6px; padding: 10px; background: #f8fffb; }
.stats strong { font-size: 22px; line-height: 1.1; }
.stats span { color: var(--muted); font-size: 12px; font-weight: 750; }
.change-setup { color: var(--green-dark); border: 1px solid var(--line-strong); background: #fff; white-space: nowrap; }
.change-setup:hover { background: #f1f7f3; }
.study-utility { display: flex; justify-content: flex-start; }

.dashboard-row { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr); gap: 16px; }
.memory-panel, .level-panel { padding: 16px; }
.memory-summary { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; }
.donut { position: relative; width: 128px; height: 128px; border-radius: 50%; background: conic-gradient(#dfe6df 0deg 360deg); }
.donut::after { content: attr(data-center); position: absolute; inset: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: #fff; font-size: 22px; font-weight: 900; }
.legend { display: grid; gap: 8px; }
.legend-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center; color: #31443b; font-weight: 800; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; }
.legend-row small { color: var(--muted); font-size: 12px; font-weight: 750; }
.chart-title { margin-bottom: 12px; color: #34463c; font-size: 13px; font-weight: 900; }
#level-chart { display: grid; gap: 10px; }
.level-bar-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 82px; gap: 10px; align-items: center; }
.level-name { font-weight: 900; }
.stacked-bar { display: flex; overflow: hidden; height: 18px; border-radius: 999px; background: #e4e9e4; }
.bar-segment { min-width: 0; height: 100%; }
.bar-new, .dot-new { background: #dceee5; }
.bar-fuzzy, .dot-fuzzy { background: var(--gold); }
.bar-known, .dot-known { background: var(--green); }
.level-total { color: var(--muted); font-size: 12px; font-weight: 800; text-align: right; }

.toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 14px; align-items: end; padding: 14px; }
.search-box { display: grid; gap: 7px; }
.toolbar-actions { display: flex; gap: 10px; }
.danger { background: var(--red); }
.danger:hover { background: #813424; }
.mode-view { display: none; }
.mode-view.active { display: block; }

.card-wrap, .quiz-card { width: 100%; max-width: 820px; margin: 0 auto; }
.card-wrap { display: grid; gap: 12px; }
.word-card { position: relative; display: grid; grid-template-rows: auto minmax(130px, 1fr) auto auto auto; gap: 16px; min-height: 340px; padding: 24px; overflow: hidden; touch-action: none; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; user-select: none; }
.word-card.dragging { cursor: grabbing; transition: none; }
.word-card.swipe-preview-left { border-color: rgba(238, 123, 115, 0.72); box-shadow: 0 18px 38px rgba(238, 123, 115, 0.18); }
.word-card.swipe-preview-right { border-color: rgba(82, 183, 136, 0.72); box-shadow: 0 18px 38px rgba(82, 183, 136, 0.2); }
.word-card.swipe-preview-vertical { border-color: rgba(240, 189, 88, 0.78); box-shadow: 0 18px 38px rgba(240, 189, 88, 0.2); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-weight: 800; }
.card-meta { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.card-meta span { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: #f8fffb; }
.card-top .script-toggle { display: inline-grid; place-items: center; min-height: 34px; min-width: 52px; border-radius: 999px; padding: 0 12px; font-size: 15px; letter-spacing: 0; line-height: 1; }
.card-top .script-toggle.traditional-icon { direction: rtl; font-family: "Microsoft Uighur", "Noto Naskh Arabic", "Segoe UI", serif; font-size: 22px; }
.ug-word, .quiz-word { direction: rtl; color: #101714; font-family: "Segoe UI", "Microsoft Uighur", "Noto Naskh Arabic", serif; font-size: clamp(48px, 7vw, 84px); line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.ug-word { align-self: center; }
.ug-word.latin-text, .quiz-word.latin-text { direction: ltr; font-family: "Segoe UI", Arial, sans-serif; letter-spacing: 0; }
.card-valency { justify-self: center; max-width: min(620px, 100%); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; color: var(--muted); background: #f8fffb; font-family: "Segoe UI", "Microsoft Uighur", "Noto Naskh Arabic", serif; font-size: 18px; font-weight: 800; line-height: 1.35; text-align: center; direction: rtl; overflow-wrap: anywhere; }
.card-valency.latin-text { direction: ltr; font-family: "Segoe UI", Arial, sans-serif; }
.card-valency[hidden] { display: none; }
.ghost { justify-self: center; color: var(--green-dark); border: 1px solid var(--line-strong); background: #fff; }
.ghost:hover { background: #f1f7f3; }
.meaning { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 16px; text-align: center; }
.meaning[hidden] { display: none; }
.meaning strong { font-size: 24px; line-height: 1.35; }
.meaning span { color: var(--muted); font-weight: 750; }
.review-actions, .pager { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.review-actions { align-self: end; }
.review-button { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 48px; border: 1px solid transparent; text-align: left; }
.review-button span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: currentColor; background: rgba(255, 255, 255, 0.74); font-size: 19px; font-weight: 950; line-height: 1; }
.review-actions button[data-review="again"] { color: #6f302b; border-color: #f5b4ae; background: #ffd7d3; }
.review-actions button[data-review="again"]:hover { background: #ffc3bd; }
.review-actions button[data-review="hard"] { color: #6e5015; border-color: #f5d386; background: #ffedbe; }
.review-actions button[data-review="hard"]:hover { background: #ffe39e; }
.review-actions button[data-review="known"] { color: #1f654b; border-color: #93dab9; background: #cbf4dd; }
.review-actions button[data-review="known"]:hover { background: #b7edcf; }
.swipe-cue { position: absolute; top: 70px; z-index: 0; border-radius: 999px; padding: 8px 14px; opacity: 0; transform: scale(0.94); font-size: 14px; font-weight: 900; pointer-events: none; transition: opacity 120ms ease, transform 120ms ease; }
.swipe-left { left: 18px; color: #7a332d; background: #ffd7d3; }
.swipe-right { right: 18px; color: #1f654b; background: #cbf4dd; }
.swipe-vertical { top: 50%; left: 50%; color: #6e5015; background: #ffedbe; transform: translate(-50%, -50%) scale(0.94); }
.word-card.swipe-preview-left .swipe-left,
.word-card.swipe-preview-right .swipe-right { opacity: 1; transform: scale(1); }
.word-card.swipe-preview-vertical .swipe-vertical { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pager { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.pager span { min-width: 68px; color: var(--muted); font-weight: 800; text-align: center; }

.quiz-card { display: grid; gap: 14px; padding: 22px; }
.quiz-meta { color: var(--muted); text-align: center; font-weight: 800; }
.choices { display: grid; gap: 10px; }
.choices button { min-height: 52px; color: var(--ink); border: 1px solid #d9e1da; background: #f8faf8; text-align: left; }
.choices button:hover:not(:disabled) { border-color: var(--blue); background: #eef5fb; }
.choices button.correct { color: var(--green-dark); border-color: var(--green); background: #e6f4eb; }
.choices button.wrong { color: #743225; border-color: var(--red); background: #faece8; }
.quiz-result { min-height: 24px; color: var(--muted); font-weight: 800; }

.table-wrap { overflow: auto; max-height: 680px; }
table { width: 100%; min-width: 860px; border-collapse: collapse; }
th, td { border-bottom: 1px solid #e4e9e4; padding: 10px 12px; text-align: left; vertical-align: top; }
th { position: sticky; top: 0; z-index: 1; color: #34463c; background: #f3f7f4; font-size: 13px; }
td:first-child { direction: rtl; font-family: "Segoe UI", "Microsoft Uighur", "Noto Naskh Arabic", serif; font-size: 22px; }
td.latin-text:first-child { direction: ltr; font-family: "Segoe UI", Arial, sans-serif; font-size: 18px; }
td.latin-text { direction: ltr; font-family: "Segoe UI", Arial, sans-serif; }
td.uyghur-text { direction: rtl; font-family: "Segoe UI", "Microsoft Uighur", "Noto Naskh Arabic", serif; }
.status-known { color: var(--green); font-weight: 850; }
.status-fuzzy { color: var(--gold); font-weight: 850; }
.status-new { color: var(--muted); font-weight: 750; }

@media (max-width: 760px) {
  .launch-screen { align-items: start; padding: 16px; }
  .launch-panel { gap: 16px; padding: 20px; }
  .launch-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .launch-mode { grid-template-columns: 1fr; gap: 4px; min-height: 78px; }
  .launch-mode span { text-align: left; }
  .main-panel { padding: 16px; }
  .dashboard-row, .toolbar { grid-template-columns: 1fr; }
  .toolbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .memory-summary { grid-template-columns: 1fr; justify-items: center; }
  .table-wrap { max-height: 680px; }
  table { min-width: 0; border-collapse: separate; border-spacing: 0 10px; }
  thead { display: none; }
  tbody { display: grid; gap: 10px; }
  tr { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--panel); box-shadow: var(--shadow); }
  td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: start; border-bottom: 1px solid #e9f3ed; padding: 8px 0; text-align: right; overflow-wrap: anywhere; }
  td:last-child { border-bottom: 0; }
  td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 900; text-align: left; text-transform: uppercase; }
  td:first-child { justify-items: end; font-size: 26px; }
  td:first-child::before { align-self: center; justify-self: start; }
  td.latin-text:first-child { font-size: 20px; }
}

@media (max-width: 520px) {
  .brand h1 { font-size: 24px; }
  h2 { font-size: 21px; }
  .toolbar-actions { grid-template-columns: 1fr; }
  .review-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .review-button { grid-template-columns: 1fr; justify-items: center; gap: 4px; min-height: 58px; padding: 6px 4px; text-align: center; }
  .review-icon { width: 28px; height: 28px; }
  .review-button span:last-child { max-width: 100%; font-size: 11px; }
  .pager { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  .pager button { min-width: 0; padding: 0 8px; }
  .pager span { min-width: 56px; font-size: 12px; }
  td { grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
  td:first-child { font-size: 24px; }
  .word-card { min-height: 340px; padding: 18px; }
  .ug-word, .quiz-word { font-size: clamp(40px, 15vw, 66px); }
}