:root{
    --bg:#f4f1ea;
    --panel:#ffffff;
    --ink:#2b2620;
    --muted:#7a7266;
    --accent:#a6321b;
    --accent2:#c74a2c;
    --gold:#b7893c;
    --good:#2f6f45;
    --good-bg:#e7f3ea;
    --bad:#a6321b;
    --bad-bg:#fbe9e5;
    --border:#e4ddce;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--ink);
    min-height:100vh;
  }
  .wrap{max-width:880px;margin:0 auto;padding:24px 18px 80px;}
  header.top{
    text-align:center;
    padding:18px 0 10px;
    border-bottom:3px solid var(--accent);
    margin-bottom:20px;
  }
  header.top .flag{
    font-size:28px;
    letter-spacing:2px;
    color: var(--gold);
  }
  header.top h1{
    font-size:1.5rem;
    margin:6px 0 4px;
    color: var(--accent);
  }
  header.top p{margin:0;color:var(--muted);font-size:.92rem;}

  .screen{display:none;}
  .screen.active{display:block;}

  /* HOME */
  .cards{
    display:grid;
    grid-template-columns: 1fr;
    gap:14px;
    margin-top:10px;
  }
  .card{
    background:var(--panel);
    border:1px solid var(--border);
    border-left:6px solid var(--accent2);
    border-radius:10px;
    padding:16px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
  }
  .card h3{margin:0 0 4px;font-size:1.08rem;color:var(--ink);}
  .card p.desc{margin:0 0 12px;color:var(--muted);font-size:.9rem;}
  .card .row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
  .count-pill{
    background:#f1ece0;color:var(--accent);
    border-radius:20px;padding:3px 12px;font-size:.82rem;font-weight:bold;
  }
  .btnset{display:flex;gap:8px;flex-wrap:wrap;}
  button, .btn{
    font-family:inherit;
    cursor:pointer;
    border:none;
    border-radius:7px;
    padding:9px 16px;
    font-size:.92rem;
    font-weight:bold;
    transition:transform .06s ease, opacity .15s ease;
  }
  button:active{transform:scale(0.97);}
  .btn-primary{background:var(--accent);color:#fff;}
  .btn-primary:hover{background:var(--accent2);}
  .btn-secondary{background:#efe9da;color:var(--ink);}
  .btn-secondary:hover{background:#e5decb;}
  .btn-ghost{background:transparent;color:var(--accent);border:1px solid var(--accent);}
  .btn-ghost:hover{background:#fbeee9;}
  .btn-mini{padding:5px 10px;font-size:.78rem;border-radius:6px;}

  .all-card{
    background: linear-gradient(135deg, #a6321b, #c74a2c);
    color:#fff;
    border:none;
  }
  .all-card h3{color:#fff;}
  .all-card p.desc{color:#f3d9cf;}
  .all-card .count-pill{background:rgba(255,255,255,.18);color:#fff;}
  .all-card .btn-secondary{background:rgba(255,255,255,.85);color:var(--accent);}

  .settings-note{
    margin-top:16px;font-size:.82rem;color:var(--muted);text-align:center;line-height:1.5;
  }

  /* QUIZ */
  .quiz-top{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:10px;flex-wrap:wrap;gap:8px;
  }
  .quiz-top .title{font-weight:bold;color:var(--accent);}
  .progress-wrap{
    background:#eee5d2;border-radius:20px;height:10px;overflow:hidden;margin-bottom:18px;
  }
  .progress-bar{
    height:100%;background:linear-gradient(90deg,var(--gold),var(--accent2));
    width:0%;transition:width .25s ease;
  }
  .stat-row{
    display:flex;gap:14px;font-size:.85rem;color:var(--muted);margin-bottom:14px;flex-wrap:wrap;
  }
  .stat-row span b{color:var(--ink);}
  .qcard{
    background:var(--panel);border:1px solid var(--border);border-radius:12px;
    padding:22px 20px;box-shadow:0 2px 6px rgba(0,0,0,.05);
  }
  .qnum{color:var(--gold);font-weight:bold;font-size:.85rem;letter-spacing:.5px;text-transform:uppercase;}
  .qtext{font-size:1.12rem;line-height:1.55;margin:8px 0 18px;color:var(--ink);}
  .opts{display:flex;flex-direction:column;gap:10px;}
  .opt{
    display:flex;gap:10px;align-items:flex-start;
    border:1.5px solid var(--border);border-radius:9px;
    padding:12px 14px;cursor:pointer;font-size:.98rem;line-height:1.45;
    background:#fffdf8;
  }
  .opt:hover{border-color:var(--gold);background:#fff8ec;}
  .opt .lab{
    flex:0 0 auto;width:26px;height:26px;border-radius:50%;
    background:#efe9da;color:var(--ink);font-weight:bold;font-size:.82rem;
    display:flex;align-items:center;justify-content:center;
  }
  .opt.selected{border-color:var(--gold);background:#fff3de;}
  .opt.correct{border-color:var(--good);background:var(--good-bg);}
  .opt.correct .lab{background:var(--good);color:#fff;}
  .opt.incorrect{border-color:var(--bad);background:var(--bad-bg);}
  .opt.incorrect .lab{background:var(--bad);color:#fff;}
  .opt.disabled{cursor:default;}
  .opt.dim{opacity:.55;}

  .feedback{
    margin-top:16px;padding:12px 14px;border-radius:8px;font-size:.92rem;
    display:none;
  }
  .feedback.show{display:block;}
  .feedback.good{background:var(--good-bg);color:var(--good);border:1px solid #bfe0c8;}
  .feedback.bad{background:var(--bad-bg);color:var(--bad);border:1px solid #f0c6bb;}

  .nav-row{
    display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:10px;flex-wrap:wrap;
  }
  .nav-row .left-btns, .nav-row .right-btns{display:flex;gap:8px;flex-wrap:wrap;}

  .jumpbar{
    display:flex;flex-wrap:wrap;gap:6px;margin-top:22px;padding-top:16px;border-top:1px dashed var(--border);
  }
  .jumpbar .jbtn{
    width:30px;height:30px;border-radius:6px;font-size:.72rem;font-weight:bold;
    background:#efe9da;color:var(--muted);border:1px solid transparent;padding:0;
  }
  .jumpbar .jbtn.current{border-color:var(--accent);color:var(--accent);}
  .jumpbar .jbtn.done-correct{background:var(--good);color:#fff;}
  .jumpbar .jbtn.done-incorrect{background:var(--bad);color:#fff;}

  /* RESULT */
  .result-card{
    background:var(--panel);border:1px solid var(--border);border-radius:12px;
    padding:28px 24px;text-align:center;
  }
  .result-score{font-size:2.6rem;font-weight:bold;color:var(--accent);margin:6px 0;}
  .result-sub{color:var(--muted);margin-bottom:18px;}
  .result-bar-wrap{background:#eee5d2;border-radius:20px;height:16px;overflow:hidden;margin:14px 0 22px;}
  .result-bar{height:100%;background:linear-gradient(90deg,var(--good),#4f9a68);}
  .review-list{text-align:left;margin-top:20px;}
  .review-item{
    border:1px solid var(--border);border-radius:9px;padding:14px 16px;margin-bottom:12px;
  }
  .review-item .rq{font-weight:bold;margin-bottom:8px;}
  .review-item .ra{font-size:.9rem;margin:3px 0;padding:4px 8px;border-radius:6px;}
  .review-item .ra.your-wrong{background:var(--bad-bg);color:var(--bad);}
  .review-item .ra.correct{background:var(--good-bg);color:var(--good);}

  .topbar-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px;}

  footer.note{
    text-align:center;color:var(--muted);font-size:.78rem;margin-top:34px;line-height:1.6;
  }
  @media (max-width:480px){
    .qtext{font-size:1.03rem;}
    .result-score{font-size:2.1rem;}
  }