:root{
  --bg:#fdf6ec;
  --card:#ffffff;
  --accent:#c0504d;
  --accent2:#4a7c59;
  --text:#3a3a3a;
  --muted:#8a8a8a;
}
*{box-sizing:border-box;}
body{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  background:var(--bg);
  color:var(--text);
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
}
.wrap{
  width:100%;
  max-width:560px;
  padding:20px;
}
h1{
  text-align:center;
  font-size:1.4rem;
  margin-bottom:4px;
}
.sub{
  text-align:center;
  color:var(--muted);
  font-size:0.85rem;
  margin-bottom:18px;
}
.card{
  background:var(--card);
  border-radius:14px;
  padding:22px;
  box-shadow:0 2px 10px rgba(0,0,0,0.06);
  margin-bottom:16px;
}
.tag{
  display:inline-block;
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  background:#eee2cf;
  color:#8a5a2b;
  padding:3px 8px;
  border-radius:6px;
  margin-bottom:12px;
}
.prompt{
  font-size:1.3rem;
  line-height:2.4;
  margin:10px 0 18px;
}
ruby rt{
  font-size:0.6rem;
  color:var(--muted);
}
.blank{
  display:inline-block;
  border-bottom:2px solid var(--accent);
  min-width:60px;
  padding:0 4px;
  color:var(--accent);
  font-weight:bold;
}
input[type=text]{
  width:100%;
  padding:10px 12px;
  font-size:1rem;
  border:1px solid #ddd;
  border-radius:8px;
  margin-bottom:12px;
  box-sizing:border-box;
}
.buttons{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
button{
  flex:1;
  padding:10px 14px;
  font-size:0.95rem;
  border:none;
  border-radius:8px;
  cursor:pointer;
  background:var(--accent);
  color:#fff;
  transition:opacity .15s;
}
button.secondary{
  background:#e7e0d4;
  color:#5a4a35;
}
button.ok{ background:var(--accent2); }
button.bad{ background:#b04632; }
button:hover{ opacity:0.85; }
.answer-box{
  margin-top:14px;
  padding:14px;
  background:#f6f1e6;
  border-radius:10px;
  font-size:1.15rem;
  line-height:2.2;
}
.answer-box .de{
  margin-top:8px;
  font-size:0.95rem;
  color:#555;
}
.feedback{
  margin-top:10px;
  font-weight:bold;
}
.feedback.correct{ color:var(--accent2); }
.feedback.wrong{ color:var(--accent); }
.stats{
  font-size:0.85rem;
  color:var(--muted);
  text-align:center;
  margin-top:6px;
}
.progress-list{
  font-size:0.85rem;
  max-height:160px;
  overflow:auto;
  margin-top:8px;
}
.progress-list div{
  display:flex;
  justify-content:space-between;
  padding:3px 0;
  border-bottom:1px solid #f0ece0;
}
.hint{
  font-size:0.85rem;
  color:var(--muted);
  margin-bottom:6px;
}
.flip-prompt{ cursor:pointer; }

/* Navigation */
.nav{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.nav a{
  flex:1;
  min-width:100px;
  display:block;
  text-align:center;
  padding:10px 6px;
  background:#e7e0d4;
  color:#5a4a35;
  border-radius:10px;
  text-decoration:none;
  font-size:0.9rem;
  transition:background .15s;
}
.nav a:hover, .nav a.active{
  background:var(--accent);
  color:#fff;
}

/* Wortauswahl */
.word-group-label{
  font-size:0.75rem;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--muted);
  margin:12px 0 6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.word-checklist{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 8px;
}
.word-checklist label{
  display:flex;
  align-items:baseline;
  gap:5px;
  font-size:0.88rem;
  cursor:pointer;
  line-height:1.6;
}
.word-checklist input[type=checkbox]{
  flex-shrink:0;
  accent-color:var(--accent);
}
.grp-all, .grp-none{
  padding:2px 7px !important;
  font-size:0.75rem !important;
  border-radius:5px !important;
  flex:none !important;
  min-width:0 !important;
}
.grp-all{ background:#d4e8d4 !important; color:#2a5a2a !important; }
.grp-none{ background:#f0d4d4 !important; color:#8a2a2a !important; }
.select-all-row{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.select-all-row button{
  padding:7px;
  font-size:0.85rem;
  background:#e7e0d4;
  color:#5a4a35;
}

/* Datenverwaltung */
.info-box{
  background:#f6f1e6;
  border-radius:10px;
  padding:14px;
  font-size:0.9rem;
  color:#555;
  margin-bottom:12px;
  line-height:1.6;
}
.warning-box{
  background:#fdf0ee;
  border:1px solid #e8b8b4;
  border-radius:10px;
  padding:14px;
  font-size:0.9rem;
  color:#8a2a2a;
  margin-bottom:12px;
}
.success-box{
  background:#eef6ee;
  border:1px solid #b4d8b4;
  border-radius:10px;
  padding:14px;
  font-size:0.9rem;
  color:#2a5a2a;
  margin-bottom:12px;
}
.section-title{
  font-size:1rem;
  font-weight:bold;
  margin-bottom:8px;
}