:root {
  --bg: #f6f5f2;
  --card: #ffffff;
  --ink: #1c2230;
  --muted: #6b7280;
  --primary: #0f4c5c;
  --primary-dark: #0a3743;
  --accent: #c0392b;
  --green: #1e8e5a;
  --green-bg: #e7f6ee;
  --orange: #b8720b;
  --orange-bg: #fdf1de;
  --yellow: #a4870a;
  --yellow-bg: #fbf3d6;
  --red: #c0392b;
  --red-bg: #fbe9e7;
  --border: #e4e1da;
  --radius: 16px;
  --tap: 56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans Arabic", Tahoma, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

.ko { direction: ltr; unicode-bidi: isolate; font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif; }
.ar { direction: rtl; unicode-bidi: isolate; }

.ltr-block { direction: ltr; text-align: left; }

/* ---- top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--primary);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar .title { font-size: 16px; font-weight: 700; }
.topbar .icon-btn {
  background: rgba(255,255,255,.14);
  border: none;
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 12px;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}

.screen { flex: 1; padding: 16px; padding-bottom: 32px; }

/* ---- home ---- */
.hero {
  background: linear-gradient(160deg, var(--primary), var(--primary-dark));
  color: #fff;
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.hero .exam-name { font-size: 14px; opacity: .85; margin-bottom: 4px;}
.hero .exam-name .ko { font-size: 13px; opacity: .8; }
.hero .countdown { font-size: 34px; font-weight: 800; margin: 6px 0 2px; }
.hero .countdown-label { font-size: 13px; opacity: .85; }
.hero .date-line { font-size: 13px; opacity: .8; margin-top: 10px; }

.msg-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14.5px;
  line-height: 1.7;
}

.cta-btn {
  display: block;
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 18px;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 18px;
  min-height: var(--tap);
}
.cta-btn small { display: block; font-weight: 400; opacity: .9; font-size: 13px; margin-top: 3px; }

.grid-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  min-height: 84px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
}
.tile .emoji { font-size: 22px; }
.tile .label-ar { font-size: 13.5px; font-weight: 700; }
.tile .label-ko { font-size: 11.5px; color: var(--muted); }
.tile.locked { opacity: .55; }
.tile.locked .lock-note { font-size: 10px; color: var(--muted); }

button, .btn { font-family: inherit; cursor: pointer; }

.section-title { font-size: 15px; font-weight: 700; margin: 18px 0 10px; }

/* ---- session player ---- */
.session-header {
  display:flex; align-items:center; justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px; color: var(--muted);
}
.progress-track {
  height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 16px;
}
.progress-fill { height: 100%; background: var(--primary); }

.q-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px;
  margin-bottom: 14px;
  position: relative;
}
.q-badges { display:flex; gap:6px; margin-bottom: 10px; flex-wrap: wrap;}
.badge { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: #eef1f0; color: var(--muted); }
.badge.status-official { background: #dff1e6; color: #1e6b46; }
.badge.status-expected { background: #eef1f7; color: #3b4a68; }

.help-btn {
  position: absolute; top: 14px; inset-inline-end: 14px;
  background: #eef1f7; color: var(--primary-dark);
  border: none; border-radius: 10px; padding: 6px 10px;
  font-size: 12.5px; font-weight: 700;
}

.q-text {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 700;
  margin: 6px 0 18px;
}

.choices { display: flex; flex-direction: column; gap: 10px; }
.choice-btn {
  min-height: var(--tap);
  border-radius: 14px;
  border: 2px solid var(--border);
  background: #fff;
  padding: 14px 16px;
  font-size: 17px;
  text-align: start;
  display: flex; align-items: center; gap: 10px;
  line-height: 1.4;
}
.choice-btn .num { font-weight: 800; color: var(--muted); }
.choice-btn:active { background: #f2f2f2; }
.choice-btn.selected { border-color: var(--primary); background: #eef6f7; }
.choice-btn.correct { border-color: var(--green); background: var(--green-bg); }
.choice-btn.incorrect { border-color: var(--red); background: var(--red-bg); }
.choice-btn:disabled { opacity: 1; }

.help-panel {
  margin-top: 14px;
  background: #f4f7fb;
  border: 1px dashed #b9c6d6;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
}
.help-panel .hp-row { margin-bottom: 8px; }
.help-panel .hp-label { font-weight: 700; font-size: 12px; color: var(--primary-dark); margin-bottom: 2px; }

.explain-card {
  border-radius: var(--radius);
  padding: 18px 16px;
  margin-bottom: 16px;
}
.explain-card.ok { background: var(--green-bg); border: 1px solid #bfe3cf; }
.explain-card.no { background: var(--red-bg); border: 1px solid #f0c3bd; }
.explain-title { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.explain-title.ok { color: var(--green); }
.explain-title.no { color: var(--red); }
.explain-row { margin-bottom: 10px; font-size: 14.5px; line-height: 1.7; }
.explain-row .lbl { font-weight: 700; font-size: 12.5px; color: var(--muted); display:block; margin-bottom: 2px;}
.confusion-box { background: #fff8e6; border: 1px solid #efd98f; border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 13.5px; }
.vocab-list { margin: 6px 0 0; padding: 0; list-style: none; }
.vocab-list li { padding: 6px 0; border-top: 1px dashed #d8d4c9; font-size: 14px; }
.vocab-list li:first-child { border-top: none; }
.mastery-chip {
  display: inline-flex; align-items:center; gap:6px;
  font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  background: #fff; margin-bottom: 10px;
}
.toast {
  background: var(--primary-dark); color: #fff; border-radius: 10px;
  padding: 10px 12px; font-size: 13px; margin-bottom: 10px;
}

.continue-btn {
  width: 100%; min-height: var(--tap);
  background: var(--primary); color: #fff; border: none;
  border-radius: 14px; font-size: 17px; font-weight: 700;
}

.secondary-btn {
  width: 100%; min-height: 48px;
  background: #fff; color: var(--primary-dark);
  border: 2px solid var(--border); border-radius: 14px;
  font-size: 15px; font-weight: 700; margin-top: 10px;
}

.link-btn {
  background: none; border: none; color: var(--primary-dark);
  font-size: 14px; font-weight: 700; padding: 8px;
}

/* commute mode: bigger, calmer */
.commute .q-text { font-size: 23px; }
.commute .choice-btn { min-height: 64px; font-size: 19px; }
.commute .continue-btn { min-height: 64px; font-size: 19px; }

/* ---- lists (wrong answers, chapters) ---- */
.list-item {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; margin-bottom: 10px;
}
.list-item .li-top { display:flex; justify-content: space-between; align-items:flex-start; gap: 8px; margin-bottom:6px;}
.list-item .li-q { font-size: 15.5px; font-weight: 700; }
.list-item .li-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.li-row { font-size: 13.5px; margin-top: 4px; }
.li-row .lbl { color: var(--muted); }

.pill { font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill.weak { background: var(--red-bg); color: var(--red); }
.pill.needs_review { background: var(--orange-bg); color: var(--orange); }
.pill.improving { background: var(--yellow-bg); color: var(--yellow); }
.pill.mastered { background: var(--green-bg); color: var(--green); }
.pill.new { background: #eee; color: var(--muted); }

.empty-state {
  text-align: center; padding: 40px 16px; color: var(--muted); font-size: 14.5px; line-height: 1.8;
}

/* ---- flashcards ---- */
.flash-wrap { perspective: 1000px; margin-bottom: 16px; }
.flash-card {
  min-height: 220px; border-radius: var(--radius); background: var(--card);
  border: 1px solid var(--border);
  display: flex; align-items:center; justify-content:center; text-align:center; padding: 20px;
  font-size: 22px; font-weight: 700; cursor: pointer;
}
.flash-card .flip-hint { display:block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 10px; }
.flash-back { font-size: 17px; font-weight: 400; }
.flash-back .note { font-size: 13px; color: var(--muted); margin-top: 10px; }

.flash-actions { display:flex; gap: 10px; }
.flash-actions button {
  flex: 1; min-height: var(--tap); border-radius: 14px; border: none; font-size: 15.5px; font-weight: 700;
}
.flash-actions .know { background: var(--green-bg); color: var(--green); }
.flash-actions .again { background: var(--orange-bg); color: var(--orange); }

/* ---- progress screen ---- */
.stat-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom: 16px;}
.stat-box { background: var(--card); border:1px solid var(--border); border-radius: 14px; padding: 14px; text-align:center;}
.stat-box .num { font-size: 24px; font-weight: 800; }
.stat-box .lbl { font-size: 12px; color: var(--muted); margin-top: 2px;}

/* ---- modal ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display:flex; align-items:flex-end; justify-content:center; z-index: 50;
}
.modal-sheet {
  background: #fff; width:100%; max-width: 480px; border-radius: 20px 20px 0 0;
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  max-height: 80vh; overflow-y: auto;
}
.modal-sheet h3 { margin: 4px 0 14px; font-size: 17px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; padding: 12px 0; border-top: 1px solid var(--border); }
.setting-row:first-of-type { border-top:none; }

.toggle {
  width: 52px; height: 30px; border-radius: 999px; background: var(--border); position: relative; border: none;
}
.toggle.on { background: var(--primary); }
.toggle .knob { position:absolute; top:3px; inset-inline-start:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition: none; }
.toggle.on .knob { inset-inline-start: 25px; }

.confirm-danger { color: var(--red); font-weight:700; }

.size-picker { display:flex; gap:10px; margin-bottom: 16px; }
.size-picker button {
  flex:1; min-height: 56px; border-radius:14px; border:2px solid var(--border); background:#fff; font-weight:700; font-size:16px;
}

.footer-note { font-size: 12px; color: var(--muted); text-align:center; margin-top: 18px; line-height:1.7; }