:root{
  --bg1:#fff6e5; --bg2:#e6f7ff;
  --primary:#ff6f61; --secondary:#4ecdc4; --accent:#ffd93d;
  --purple:#a29bfe; --green:#6bcB77; --dark:#2d3436;
  --card:#ffffff; --shadow:0 6px 0 rgba(0,0,0,.08);
  --radius:20px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Comic Sans MS','Trebuchet MS',Verdana,sans-serif;
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  background-attachment:fixed;
  color:var(--dark);
  min-height:100vh;
}
#app{max-width:960px;margin:0 auto;padding:16px 16px 60px}

/* ---------- header ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border-radius:var(--radius);
  padding:14px 20px;box-shadow:var(--shadow);margin-bottom:18px;
  flex-wrap:wrap;gap:10px;
}
.topbar h1{font-size:1.4rem;margin:0;color:var(--primary)}
.topbar .points{
  background:var(--accent);border-radius:999px;padding:8px 16px;
  font-weight:bold;font-size:1.05rem;box-shadow:var(--shadow);
}
.progress-wrap{background:#eee;border-radius:999px;height:14px;overflow:hidden;flex:1;min-width:150px;margin:0 14px}
.progress-bar{background:linear-gradient(90deg,var(--secondary),var(--green));height:100%;border-radius:999px;transition:width .4s}

/* ---------- home grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.unit-card{
  background:var(--card);border-radius:var(--radius);padding:16px;
  box-shadow:var(--shadow);cursor:pointer;border:3px solid transparent;
  transition:transform .15s;text-align:center;position:relative;
}
.unit-card:hover{transform:translateY(-4px)}
.unit-card .emoji{font-size:2.6rem}
.unit-card h3{margin:8px 0 4px;font-size:1rem}
.unit-card .status{font-size:.8rem;color:#888}
.unit-card .badge{
  position:absolute;top:-10px;right:-10px;background:var(--green);
  color:#fff;border-radius:999px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  box-shadow:var(--shadow);
}
.unit-card.locked{opacity:.7}
.unit-card.locked .status{color:var(--primary);font-weight:bold}
.unit-card.final{border-color:var(--purple);background:linear-gradient(135deg,#fff,#f3f0ff)}
.free-tag{
  position:absolute;top:-10px;left:-10px;background:var(--green);color:#fff;
  border-radius:999px;padding:3px 10px;font-size:.7rem;font-weight:bold;box-shadow:var(--shadow);
}

/* ---------- paywall ---------- */
.paywall{text-align:center;max-width:420px;margin:0 auto}
.paywall-emoji{font-size:3rem}
.paywall .price{font-size:1.8rem;font-weight:bold;color:var(--primary);margin:14px 0}
.paywall .price span{font-size:.9rem;color:#888;font-weight:normal}
.paywall .qr-image{width:220px;height:220px;object-fit:contain;border-radius:16px;border:4px solid var(--accent);margin:10px 0}
.paywall .waiting{color:#888;font-weight:bold}
.restore-box{margin-top:22px;padding-top:16px;border-top:1px dashed #ddd}

/* ---------- auth ---------- */
.user-badge{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#666;background:var(--bg2);border-radius:999px;padding:6px 12px}
.logout-btn{border:none;background:var(--primary);color:#fff;border-radius:999px;padding:4px 12px;font-size:.75rem;cursor:pointer;font-family:inherit}
.auth-panel{max-width:380px;margin:0 auto}
.auth-sub{text-align:center;color:#777;font-size:.9rem;margin-bottom:16px}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-form input{font-size:1rem;padding:12px 16px;border-radius:14px;border:2px solid #ddd;font-family:inherit}
.auth-form button{margin-top:4px}

/* ---------- buttons ---------- */
.btn{
  border:none;border-radius:999px;padding:10px 22px;font-size:1rem;font-weight:bold;
  cursor:pointer;box-shadow:var(--shadow);font-family:inherit;
}
.btn-primary{background:var(--primary);color:#fff}
.btn-secondary{background:var(--secondary);color:#fff}
.btn-outline{background:#fff;color:var(--dark);border:2px solid #ddd}
.btn:active{transform:translateY(3px);box-shadow:none}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- unit view ---------- */
.unit-header{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.unit-header h2{margin:0;flex:1}
.tabs{display:flex;gap:8px;margin-bottom:16px}
.tab{
  padding:8px 18px;border-radius:999px;background:#fff;cursor:pointer;
  font-weight:bold;box-shadow:var(--shadow);
}
.tab.active{background:var(--primary);color:#fff}
.panel{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}

/* ---------- content blocks ---------- */
.block{margin-bottom:26px}
.block h4{color:var(--primary);margin-bottom:10px}
.flash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.flash-card{
  background:var(--bg2);border-radius:16px;padding:14px 8px;text-align:center;
  cursor:pointer;user-select:none;box-shadow:var(--shadow);
}
.flash-card .emoji{font-size:2rem;display:block}
.flash-card .en{font-weight:bold;margin-top:4px}
.flash-card .id{font-size:.8rem;color:#777;display:none}
.flash-card.flipped .id{display:block}
.flash-card .speak{margin-top:4px;font-size:1.1rem}

.sentence-list .sentence{
  background:var(--bg1);border-radius:14px;padding:10px 14px;margin-bottom:8px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.sentence .en{font-weight:bold}
.sentence .id{color:#777;font-size:.85rem}
.speak-btn{background:var(--secondary);color:#fff;border:none;border-radius:50%;
  width:30px;height:30px;cursor:pointer;font-size:.9rem;flex-shrink:0}

.dialog-box .line{display:flex;margin-bottom:10px;gap:8px;align-items:flex-start}
.dialog-box .bubble{background:var(--bg2);border-radius:14px;padding:8px 14px;max-width:80%}
.dialog-box .who{font-weight:bold;color:var(--primary);min-width:56px}

.tip{background:#fff8d6;border-left:6px solid var(--accent);padding:12px 16px;border-radius:10px}

table.datatable{width:100%;border-collapse:collapse}
table.datatable td,table.datatable th{padding:8px;border-bottom:1px solid #eee;text-align:center}

.spell-box{text-align:center}
.spell-box input{font-size:1.2rem;padding:8px 14px;border-radius:10px;border:2px solid #ddd;width:200px;text-align:center}
.spell-letters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.spell-letters .letter{
  background:var(--purple);color:#fff;width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:bold;
  cursor:pointer;
}

/* ---------- quiz ---------- */
.quiz-progress{font-weight:bold;color:#888;margin-bottom:10px}
.quiz-q{font-size:1.15rem;margin-bottom:16px}
.options{display:flex;flex-direction:column;gap:10px}
.option{
  background:#fff;border:2px solid #eee;border-radius:14px;padding:12px 16px;
  cursor:pointer;text-align:left;font-size:1rem;font-family:inherit;
}
.option:hover{border-color:var(--secondary)}
.option.correct{background:#d4f7dc;border-color:var(--green)}
.option.wrong{background:#ffe0e0;border-color:var(--primary)}
.option:disabled{cursor:default}
.type-answer{display:flex;gap:10px;flex-wrap:wrap}
.type-answer input{flex:1;min-width:160px;font-size:1.05rem;padding:10px 14px;border-radius:12px;border:2px solid #ddd}
.feedback{margin-top:14px;font-weight:bold}
.feedback.ok{color:#2ecc71}
.feedback.no{color:#e74c3c}
.quiz-result{text-align:center}
.quiz-result .stars{font-size:2.2rem;margin:10px 0}
.quiz-result .score{font-size:1.6rem;font-weight:bold;color:var(--primary)}

.exam-note{background:#f0eaff;border-radius:14px;padding:12px 16px;margin-bottom:14px;color:#555}

footer.appfoot{text-align:center;color:#999;font-size:.8rem;margin-top:30px}

@media (max-width:520px){
  .topbar h1{font-size:1.1rem}
  .progress-wrap{order:3;flex-basis:100%;margin:6px 0 0}
}