.sentence-board{--tile:52px;--tile-gap:9px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;min-width:0}
.sentence-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.sentence-stage{font-size:12px;color:var(--green);line-height:1.5}.sentence-top button{flex-shrink:0}
.sentence-intro{font-size:14px;margin:14px 0 8px;color:#546d5d}.sentence-hint{font-size:12px;color:#7b896b;margin-bottom:18px}.sentence-hint summary{cursor:pointer;padding:7px 0}.sentence-hint p{margin:6px 0;line-height:1.7}
.sentence-zone-label{font-size:12px;color:#788870;margin:16px 0 9px}.sentence-answer{overflow-x:auto;overscroll-behavior-x:contain;border:1px dashed #b5c6a5;background:#f6f8f0;border-radius:15px;min-height:98px;scrollbar-width:thin;scroll-padding-inline:12px}
.sentence-line{display:flex;align-items:center;justify-content:center;gap:var(--tile-gap);width:max-content;min-width:100%;padding:20px 12px;min-height:96px}.sentence-placeholder{font-size:13px;color:#9aa78e;white-space:nowrap;padding:12px}
.sentence-readout{font-size:15px;line-height:1.8;min-height:27px;margin:10px 0;color:#45644c;overflow-wrap:anywhere}.sentence-bank{display:grid;grid-template-columns:repeat(auto-fill,var(--tile));gap:var(--tile-gap);justify-content:center;padding:16px 10px;background:#f9f6ef;border:1px solid #eee7d9;border-radius:15px;min-height:90px}
.sentence-slot,.sentence-tile,.sentence-gap{width:var(--tile);height:var(--tile);flex:0 0 var(--tile);border-radius:11px}.sentence-slot{border:1px dashed #d6d9c9;background:#eeeee480}.sentence-slot:has(.sentence-tile){border:0;background:transparent}
.sentence-tile{display:grid;place-items:center;padding:0;border:1px solid #d3dcc8;background:#fffef9;color:#31543e;box-shadow:0 3px 0 #dce3d1;font-family:KaiTi,STKaiti,serif;font-size:32px;line-height:1;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}
.sentence-tile:hover{background:#f0f5e9;border-color:#98ad7f}.sentence-tile:active{cursor:grabbing}.sentence-tile.is-dragging{visibility:hidden}.sentence-gap{border:2px dashed #81a364;background:#dfebd4;box-shadow:inset 0 0 0 3px #f8fbf4}.sentence-slot.drop-target{border:2px solid #7f9b65;background:#e3edd7}
.sentence-ghost{--tile:52px;position:fixed;transform:translate(-50%,-58%) rotate(-4deg);pointer-events:none;z-index:150;box-shadow:0 10px 25px #254f4340;background:#fffdf1}.sentence-board.is-dragging{user-select:none}
.sentence-help{font-size:11px;color:#8c9783;line-height:1.7;margin:12px 0 20px}.sentence-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.sentence-tools>label{font-size:12px;color:#788870}.sentence-model{flex:1;min-width:120px;max-width:100%;height:42px;padding:0 10px;border:1px solid #dbe3d2;border-radius:10px;background:#f8faf4;color:#50624b;font-size:12px}.sentence-actions{display:flex;justify-content:flex-end;gap:10px;flex-basis:100%;margin-top:8px}.sentence-actions button{min-width:90px;min-height:44px}.sentence-connection{font-size:11px;color:#8c9783;width:100%}
.sentence-feedback{margin-top:20px;padding:18px;background:#f7f3e9;border:1px solid #e8dfcb;border-radius:15px;font-size:14px;line-height:1.8}.sentence-feedback strong{font-size:16px}.sentence-feedback p{margin-top:7px}.sentence-feedback.is-success{background:#eff6e8;border-color:#cbdcba}.sentence-feedback.is-error{background:#fcf1e9;border-color:#e7cdb9}.sentence-feedback details{margin-top:12px}.sentence-feedback summary{cursor:pointer}.sentence-correction{font-weight:600;color:#496247}
@media(max-width:650px){.sentence-board{--tile:46px;--tile-gap:8px;padding:16px 12px;border-radius:18px}.sentence-ghost{--tile:46px}.sentence-tile{font-size:30px}.sentence-top button{font-size:13px;min-height:44px;padding:10px 14px}.sentence-intro{font-size:15px}.sentence-model{font-size:16px}.sentence-bank{padding:16px 8px}.sentence-feedback{font-size:15px}.sentence-actions{justify-content:stretch}.sentence-actions button{flex:1;font-size:15px}.sentence-help{font-size:12px}.sentence-line{padding-inline:10px}.sentence-stage{font-size:12px}}