:root{ --accent:#2f7d4f; --ink:#0e2414; --bg:#f7fbf7; --card:#fff; --border:#cfe3cf;
  --s:#3a86ff; --p:#ef476f; --akk:#ffd166; --dat:#06d6a0; --gen:#7b2cbf; --adv:#ff924c;
}
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.header{display:flex;align-items:center;gap:10px;background:linear-gradient(0deg,var(--accent),#3fb56d);color:#fff;padding:12px 16px;position:sticky;top:0;z-index:5}
.logo{height:36px;border-radius:8px;background:#fff;padding:3px}
.container{max-width:960px;margin:14px auto;padding:0 10px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,.06);margin-bottom:12px}
.card.small{padding:10px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.input, select, textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#fff}
.btn{border:0;background:var(--accent);color:#fff;padding:10px 16px;border-radius:999px;font-size:16px;cursor:pointer}
.btn.light{background:#eaf6ea;color:#1f441f;border:1px solid var(--border)}
.btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:8px;text-align:left}
.footer{max-width:960px;margin:0 auto 18px auto;padding:8px 10px;color:#2d2d2d;opacity:.8;text-align:center}
.meta{margin-left:auto;font-size:14px;opacity:.9}
.sentence{font-size:20px;margin:10px 0;}
.drops{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:8px 0}
.drop{border:2px dashed var(--border);border-radius:12px;padding:8px}
.drop > span{display:inline-block;font-weight:700;margin-bottom:6px}
.drop .hole{background:#f0fff4;border:1px solid var(--border);border-radius:10px;padding:10px;min-height:44px}
.drop.s > span{color:var(--s)} .drop.p > span{color:var(--p)}
.drop.akk > span{color:var(--akk)} .drop.dat > span{color:var(--dat)}
.drop.gen > span{color:var(--gen)} .drop.adv > span{color:var(--adv)}
.drop.filled .hole{background:#fff}
.drags{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.drag{padding:10px 12px;border-radius:999px;border:1px solid var(--border);background:#fff;cursor:grab;user-select:none}
.drag.s{border-color:var(--s)} .drag.p{border-color:var(--p)}
.drag.akk{border-color:var(--akk)} .drag.dat{border-color:var(--dat)}
.drag.gen{border-color:var(--gen)} .drag.adv{border-color:var(--adv)}
.feedback{min-height:20px;margin-top:6px}
.feedback.good{color:#0a7a2a} .feedback.bad{color:#b21d1d}
.legend .chip{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--border);margin:2px}
.chip.s{border-color:var(--s)} .chip.p{border-color:var(--p)} .chip.akk{border-color:var(--akk)}
.chip.dat{border-color:var(--dat)} .chip.gen{border-color:var(--gen)} .chip.adv{border-color:var(--adv)}