* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased }
html, body { background: var(--bg); min-height: 100vh }
body { font-family: -apple-system, 'SF Pro Display', system-ui, sans-serif; color: var(--ink); transition: background .4s, color .4s; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) }

:root {
  --bg: #faf8f5; --bg2: #ffffff; --ink: #2b2722; --ink2: #6b6358; --line: #e8e2d9;
  --accent: #c0392b; --accent2: #a93226; --gold: #d4ac0d; --soft: #f3ede4;
  --ok: #27ae60; --no: #c0392b;
  --shadow: 0 1px 3px rgba(60,50,40,.06), 0 8px 24px rgba(60,50,40,.05);
  --radius: 20px;
}
.dark {
  --bg: #16140f; --bg2: #1f1c16; --ink: #ece6db; --ink2: #9c9486; --line: #2c2820;
  --accent: #e74c3c; --accent2: #f17a6e; --gold: #f1c40f; --soft: #221e17;
  --ok: #7faa8b; --no: #cc7d68;
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
}

#app { max-width: 440px; margin: 0 auto; padding: 0 20px 80px; min-height: 100vh }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit }
a { color: var(--accent); text-decoration: none }

/* Cards */
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: all .3s }

/* Buttons */
.btn { display: block; background: var(--accent); color: #fff; border-radius: 16px; padding: 16px; font-size: 16px; font-weight: 600; width: 100%; transition: transform .15s, opacity .2s; letter-spacing: .02em; text-align: center }
.btn:active { transform: scale(.97) }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink) }
.btn-soft { background: var(--soft); color: var(--ink) }
.btn-ok { background: var(--ok); color: #fff }
.btn-small { padding: 10px 18px; font-size: 14px; width: auto; display: inline-block; border-radius: 12px }

/* Inputs */
input, textarea { font-family: inherit; width: 100%; padding: 14px 16px; font-size: 16px; background: var(--soft); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); outline: none; transition: border .2s }
input:focus, textarea:focus { border-color: var(--accent) }

/* Progress bar */
.progbar { height: 10px; background: var(--soft); border-radius: 6px; overflow: hidden }
.progfill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 6px; transition: width .6s cubic-bezier(.4,0,.2,1) }

/* Chips */
.chip { font-size: 13px; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink2); font-weight: 500; cursor: pointer; transition: all .15s; display: inline-block }
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent) }

/* Animations */
.fade { animation: fade .4s ease }
@keyframes fade { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.slideup { animation: su .45s cubic-bezier(.2,.8,.2,1) }
@keyframes su { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
.pop { animation: pop .3s cubic-bezier(.2,1,.3,1) }
@keyframes pop { from { transform: scale(.85); opacity: 0 } to { transform: scale(1); opacity: 1 } }

/* Typography */
.h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2 }
.h2 { font-size: 22px; font-weight: 600; letter-spacing: -.01em }
.h3 { font-size: 18px; font-weight: 600 }
.muted { color: var(--ink2) }
.small { font-size: 13px }
.center { text-align: center }

/* Tab bar */
.tabbar { display: flex; gap: 4px; background: var(--soft); padding: 4px; border-radius: 14px }
.tab { flex: 1; padding: 10px; border-radius: 11px; font-size: 13px; font-weight: 500; color: var(--ink2); transition: all .25s; text-align: center }
.tab.on { background: var(--bg2); color: var(--ink); box-shadow: var(--shadow) }

/* Bottom nav */
.bottomnav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg2); border-top: 1px solid var(--line); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 0; z-index: 100 }
.bottomnav .navitem { flex: 1; max-width: 90px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; color: var(--ink2); font-size: 11px; font-weight: 500; transition: color .2s }
.bottomnav .navitem.on { color: var(--accent) }
.bottomnav .navitem svg { width: 24px; height: 24px }

/* Lesson card */
.lesson-node { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; transition: background .2s; cursor: pointer }
.lesson-node:active { background: var(--soft) }
.lesson-circle { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; border: 3px solid var(--line); transition: all .3s }
.lesson-circle.done { border-color: var(--ok); background: var(--ok); color: #fff }
.lesson-circle.current { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 0 0 4px rgba(192,57,43,.15) }
.lesson-circle.locked { opacity: .4 }

/* Exercise */
.exercise-option { padding: 14px 18px; border: 2px solid var(--line); border-radius: 14px; margin-bottom: 10px; font-size: 16px; transition: all .2s; cursor: pointer }
.exercise-option:active { transform: scale(.98) }
.exercise-option.selected { border-color: var(--accent); background: rgba(192,57,43,.05) }
.exercise-option.correct { border-color: var(--ok); background: rgba(39,174,96,.08) }
.exercise-option.wrong { border-color: var(--no); background: rgba(192,57,43,.08) }

/* Word bank */
.wordbank { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: var(--soft); border-radius: 14px; min-height: 54px }
.wordchip { padding: 8px 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; font-size: 15px; cursor: pointer; transition: all .15s; user-select: none }
.wordchip:active { transform: scale(.95) }
.wordchip.used { opacity: .3; pointer-events: none }

/* Sentence area */
.sentence-area { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; min-height: 54px; border: 2px dashed var(--line); border-radius: 14px; margin-bottom: 14px }
.sentence-area .wordchip { background: var(--accent); color: #fff; border-color: var(--accent) }

/* Toggle */
.toggle { width: 52px; height: 30px; border-radius: 16px; background: var(--line); position: relative; transition: background .3s; cursor: pointer }
.toggle.on { background: var(--accent) }
.toggle::after { content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: left .3s; box-shadow: 0 1px 3px rgba(0,0,0,.2) }
.toggle.on::after { left: 25px }

/* Streak badge */
.streak { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 20px; background: linear-gradient(135deg, #f39c12, #e74c3c); color: #fff; font-size: 13px; font-weight: 700 }

/* Misc */
.gap-8 { gap: 8px } .gap-12 { gap: 12px } .gap-16 { gap: 16px }
.mt-8 { margin-top: 8px } .mt-12 { margin-top: 12px } .mt-16 { margin-top: 16px } .mt-24 { margin-top: 24px }
.mb-8 { margin-bottom: 8px } .mb-12 { margin-bottom: 12px } .mb-16 { margin-bottom: 16px }
.flex { display: flex } .flex-col { flex-direction: column } .items-center { align-items: center } .justify-between { justify-content: space-between }
.grow { flex: 1 }