:root{
  --primary:#FFA726; /* arancione */
  --primary-700:#FB8C00;
  --accent:#FFD54F;  /* giallo caldo */
  --bg:#FFF8E1;
  --text:#332211;
  --muted:#6b4f2a33;
  --ok:#2e7d32;
  --bad:#c62828;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text)}

.app-header{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;background:linear-gradient(180deg,var(--primary),var(--primary-700));
  color:#fff;box-shadow:0 2px 12px #00000022
}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:40px;height:40px;border-radius:12px;box-shadow:0 2px 6px #00000033}
h1{font-size:1.25rem;margin:0}
.app-header p{margin:0;opacity:.9}

main#app{max-width:920px;margin:18px auto;padding:0 12px;display:grid;gap:16px}
.card{
  background:#fff;border-radius:16px;padding:16px;
  box-shadow:0 6px 18px #00000014;border:1px solid #0000000a
}

.row{display:flex;gap:12px;align-items:center}
.row.between{justify-content:space-between}
.streak{background:var(--accent);padding:6px 10px;border-radius:999px;color:#5d3f06;font-weight:700}

.progress{height:10px;background:#00000010;border-radius:999px;overflow:hidden;margin:10px 0 8px}
#progressBar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--primary));transition:width .3s ease;border-radius:999px}

#timer{font-weight:700;margin:6px 0 2px;opacity:.85}

.section-title{margin:.5rem 0 .25rem;font-size:1.1rem}
.badge{display:inline-block;background:var(--muted);padding:4px 8px;border-radius:12px;margin-right:6px;font-size:.85rem}

.vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.vocab-item{background:#fff7e9;border:1px solid #ffe3b3;padding:8px;border-radius:12px}
.vocab-item b{color:#c06000}

.phrase{padding:10px;border:1px dashed #ffcc8044;border-radius:12px;background:#fff; margin:6px 0}
.phrase b{color:#c06000}

.quiz{margin:10px 0;padding:12px;border:1px solid #eee;border-radius:12px;background:#fff}
.quiz h4{margin:0 0 8px}
.options{display:flex;flex-direction:column;gap:6px}
.option{padding:10px;border:1px solid #ddd;border-radius:10px;background:#fafafa;cursor:pointer}
.option.correct{border-color:var(--ok)}
.option.wrong{border-color:var(--bad)}
.feedback{margin-top:6px;font-weight:700}
.feedback.ok{color:var(--ok)}
.feedback.bad{color:var(--bad)}

.actions{display:flex;justify-content:space-between;gap:8px;margin-top:10px}
.btn{background:var(--primary-700);color:#fff;border:none;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px #00000022}
.btn.secondary{background:#ffffff22;border:2px solid #fff;color:#fff}
.btn.tertiary{background:#fff;color:var(--primary-700);border:2px solid var(--primary-700)}

.app-footer{display:flex;gap:10px;justify-content:center;align-items:center;margin:20px 0;color:#6b4f2a}
.link{border:none;background:none;color:var(--primary-700);font-weight:700;cursor:pointer;text-decoration:underline}

.hide{display:none}
code.tag{background:#fff3cd;border:1px solid #ffeeba;border-radius:6px;padding:2px 6px}