:root{
  --bg:#f4f1ea; --card:#fff; --ink:#2b2b2b; --muted:#6b6b6b;
  --accent:#2f6f4f; --accent2:#c47a3a; --line:#e3ddd0;
  --good:#2f7d4f; --bad:#b23b3b; --pending:#b07d2a;
}
*{box-sizing:border-box}
body{margin:0;font-family:Georgia,'Times New Roman',serif;background:var(--bg);color:var(--ink);line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{display:flex;align-items:center;justify-content:space-between;
  background:var(--accent);color:#fff;padding:.8rem 1.4rem}
.topbar a{color:#fff}
.brand{font-size:1.2rem;font-weight:bold}
.topbar nav{display:flex;gap:1.2rem;align-items:center}
.level-badge{background:#fff;color:var(--accent);padding:.15rem .6rem;border-radius:1rem;font-size:.85rem;font-weight:bold}

.container{max-width:820px;margin:0 auto;padding:1.6rem 1.2rem 4rem}
.hero h1{margin:.2rem 0;font-size:1.8rem}
.sub{color:var(--muted);margin-top:0}

.status{background:#eef4ee;border:1px solid var(--line);border-left:4px solid var(--accent);
  padding:.8rem 1rem;border-radius:8px;margin:1rem 0}
.status.ready{background:#fbf3e6;border-left-color:var(--accent2)}

.cards{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.2rem}
@media(min-width:680px){.cards{grid-template-columns:1fr 1fr 1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem;
  display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.tag{background:var(--accent);color:#fff;font-size:.72rem;padding:.1rem .5rem;border-radius:1rem;font-family:sans-serif}
.score-pill{background:#eef4ee;color:var(--accent);font-size:.72rem;padding:.1rem .5rem;border-radius:1rem;font-family:sans-serif}
.card h2{font-size:1.15rem;margin:.3rem 0}
.book{color:var(--muted);font-size:.92rem;margin:.2rem 0}
.meta{color:var(--muted);font-size:.8rem;font-family:sans-serif}
.card-actions{margin-top:auto;display:flex;gap:.5rem;padding-top:.6rem}

.btn{display:inline-block;background:var(--accent);color:#fff;padding:.5rem .9rem;border-radius:8px;
  border:none;cursor:pointer;font-family:sans-serif;font-size:.92rem}
.btn:hover{text-decoration:none;opacity:.92}
.btn.ghost{background:#fff;color:var(--accent);border:1px solid var(--accent)}
.btn.big{font-size:1.05rem;padding:.7rem 1.3rem;margin-top:1rem}
.btn.small{font-size:.82rem;padding:.3rem .7rem}

.back{display:inline-block;margin-bottom:1rem;font-family:sans-serif;font-size:.9rem}
.center{text-align:center;margin-top:1.6rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

.reading{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.6rem 1.8rem;font-size:1.12rem}
.reading h1{margin-top:0}

.quiz .question{border:1px solid var(--line);background:var(--card);border-radius:10px;margin:1rem 0;padding:1rem}
.question legend{font-weight:bold;padding:0 .3rem}
.pts{color:var(--muted);font-weight:normal;font-size:.85rem;font-family:sans-serif}
.opt{display:block;padding:.35rem .2rem;cursor:pointer;font-size:1.02rem}
.text-in{width:100%;padding:.55rem;font-size:1rem;border:1px solid var(--line);border-radius:8px}
.text-area{width:100%;padding:.6rem;font-size:1rem;border:1px solid var(--line);border-radius:8px;font-family:Georgia,serif}
.hint{color:var(--muted);font-size:.85rem;font-style:italic;font-family:sans-serif}

.result-score{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.2rem;margin:1rem 0}
.big-score{font-size:3rem;font-weight:bold;color:var(--accent)}
.review{list-style:none;padding:0}
.rev{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;padding:.8rem 1rem;margin:.7rem 0}
.rev.good{border-left-color:var(--good)}
.rev.bad{border-left-color:var(--bad)}
.rev.pending{border-left-color:var(--pending)}
.rev .q{font-weight:bold;margin:.1rem 0}
.ok-tag{color:var(--good)}
.correct-tag{color:var(--bad)}
.pending-tag{color:var(--pending)}
.fb{background:#eef4ee;padding:.5rem .7rem;border-radius:8px}

.history{width:100%;border-collapse:collapse;background:var(--card);border-radius:10px;overflow:hidden}
.history th,.history td{padding:.5rem .6rem;border-bottom:1px solid var(--line);text-align:left;font-size:.92rem}
.history th{background:#efe9dd;font-family:sans-serif}

.foot{text-align:center;color:var(--muted);font-size:.85rem;padding:1.5rem;font-family:sans-serif}