:root{ --green:#4CAF50; --light:#f6fff7; --dark:#2e7d32; }
*{box-sizing:border-box}
body{ margin:0; font-family:system-ui, Arial, sans-serif; background:var(--light); color:#222; }
header, footer{ padding:12px 16px; background:#fff; border-bottom:1px solid #e8e8e8; }
header .wrap{ max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:14px; }
.logo{ height:48px; }
h1.title{ flex:1; text-align:center; margin:0; color:var(--green); font-weight:800; letter-spacing:.3px; }
.main{ max-width:1100px; margin:20px auto; background:#fff; border:1px solid #eaeaea; border-radius:14px; padding:20px; box-shadow:0 6px 14px rgba(0,0,0,.05); }
.toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.button{ background:var(--green); color:#fff; border:none; border-radius:12px; padding:10px 14px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.button.secondary{ background:#eee; color:#333; }
.info{ padding:10px 12px; background:#f3fff4; border:1px solid #e6f8e8; border-radius:10px; }
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:10px 0; }
select, input, textarea{ padding:8px 10px; border:1px solid #ccc; border-radius:10px; }
.board{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.drop{ min-height:120px; border:2px dashed #cfead1; border-radius:12px; padding:8px; }
.drop h4{ margin:0 0 6px 0; }
.token{ display:inline-block; border:1px solid #ccc; border-radius:10px; padding:6px 8px; background:#fff; cursor:grab; margin:4px; user-select:none; }
.sentence{ line-height:2; font-size:1.2rem; padding:10px; border:1px dashed #cde9cf; border-radius:10px; margin:8px 0; }
.badge{ background:#e8f5e9; color:var(--dark); border:1px solid #cce8cf; padding:4px 8px; border-radius:999px; }
.table{ width:100%; border-collapse:collapse; } .table th,.table td{ border-bottom:1px solid #eee; padding:8px; text-align:left; } .table th{ background:#f9f9f9; }
.hidden{display:none}