.sentence-builder[hidden]{display:none!important}
.sentence-builder{order:3;width:min(980px,100%);margin:8px auto 32px}
.builder-mode .dictionary-dropdown,.builder-mode .study,.builder-mode .summary,.builder-mode .lesson-result,.builder-mode .hero{display:none!important}
.builder-mode .section-tabs{margin-bottom:8px}
.builder-shell{position:relative;overflow:hidden;border:1px solid rgba(86,76,210,.22);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,241,255,.94));box-shadow:0 24px 64px rgba(58,48,128,.16)}
.builder-shell::before{content:"";position:absolute;inset:0 0 auto;height:8px;background:linear-gradient(90deg,#ff6fae,#ffbd59,#dfff70,#67d7f5,#7c6cf2)}
.builder-header{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:28px 30px 20px;border-bottom:1px solid #ebe7f8;background:radial-gradient(circle at 8% 5%,rgba(255,235,112,.35),transparent 27%),linear-gradient(135deg,rgba(255,241,249,.9),rgba(234,250,255,.86))}
.builder-kicker{margin:0 0 6px;color:#6558d3;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.builder-title{margin:0;color:#25213b;font:800 clamp(27px,5vw,43px)/1.08 Georgia,serif}
.builder-subtitle{max-width:580px;margin:8px 0 0;color:#676277;font-size:14px;line-height:1.5}
.builder-level-control{display:grid;flex:0 0 min(260px,38vw);gap:6px;color:#655f78;font-size:11px;font-weight:850}
.builder-level-select{width:100%;padding:12px 38px 12px 14px;border:1px solid #d5d0ef;border-radius:14px;background:#fff;color:#29263c;font:800 14px inherit}
.builder-content{padding:28px clamp(18px,5vw,54px) 34px}
.builder-prompt-card{position:relative;padding:20px 60px 20px 22px;border:1px solid rgba(255,178,75,.35);border-radius:20px;background:linear-gradient(135deg,#fff8d9,#fff0f7);box-shadow:0 10px 26px rgba(171,105,32,.1)}
.builder-label{display:block;margin-bottom:7px;color:#8a5a19;font-size:10px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.builder-prompt{margin:0;color:#342c45;font-size:clamp(18px,3vw,23px);font-weight:800;line-height:1.45}
.builder-listen{position:absolute;top:15px;right:15px;width:42px;height:42px;border:0;border-radius:13px;background:linear-gradient(135deg,#7c6cf2,#55c8ee);color:#fff;font-size:19px;cursor:pointer;box-shadow:0 8px 20px rgba(92,80,214,.25)}
.builder-workspace{margin-top:24px}
.builder-answer{display:flex;min-height:88px;flex-wrap:wrap;align-items:center;gap:10px;padding:16px;border:2px dashed rgba(92,80,214,.28);border-radius:20px;background:rgba(255,255,255,.8)}
.builder-position-unit{display:inline-flex;align-items:flex-end;gap:2px}
.builder-punctuation{align-self:center;color:#4b455d;font:900 20px/1 Georgia,serif}
.builder-slot{display:inline-flex;min-width:74px;min-height:48px;align-items:center;justify-content:center;padding:9px 12px;border:2px dashed #c8c0ef;border-radius:13px;background:#f8f6ff;color:#302b46;font:850 15px/1.2 inherit;transition:.16s;touch-action:manipulation}
.builder-slot:empty::before{content:attr(data-position);color:#aaa4bd;font-size:11px}
.builder-slot.is-filled{border-style:solid;border-color:#8274e7;background:linear-gradient(135deg,#fff,#eeebff);cursor:pointer;box-shadow:0 7px 16px rgba(85,72,190,.13)}
.builder-slot.is-drop-target{border-color:#ff8f4c;background:#fff0b3;transform:translateY(-2px)}
.builder-input-wrap{display:inline-grid;gap:4px}
.builder-input{width:clamp(94px,18vw,155px);min-height:48px;padding:9px 11px;border:2px solid #ffb257;border-radius:13px;background:#fffaf0;color:#302b46;font:850 16px/1.2 inherit;text-align:center}
.builder-input::placeholder{color:#b89b73;font-weight:700}
.builder-input:focus{outline:3px solid rgba(103,215,245,.58);outline-offset:2px}
.builder-token-bank{display:flex;min-height:82px;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;padding:16px;border:1px solid rgba(103,215,245,.46);border-radius:20px;background:linear-gradient(135deg,rgba(232,251,255,.86),rgba(245,255,221,.84))}
.builder-tile{display:inline-flex;min-height:46px;align-items:center;justify-content:center;padding:9px 15px;border:1px solid rgba(72,66,155,.18);border-radius:13px;background:#fff;color:#312c49;font:850 15px/1.2 inherit;cursor:grab;box-shadow:0 7px 16px rgba(48,42,112,.13);transition:transform .16s,box-shadow .16s,opacity .16s;touch-action:manipulation}
.builder-tile::before{content:"⋮⋮";margin-right:7px;color:#a29abc;font-size:10px;letter-spacing:-2px}
.builder-tile:hover,.builder-tile:focus-visible{outline:0;transform:translateY(-2px);box-shadow:0 11px 22px rgba(48,42,112,.19)}
.builder-tile.is-selected{outline:3px solid #ffb257;outline-offset:2px;background:#fff8d1;transform:translateY(-2px)}
.builder-tile.is-dragging{opacity:.42;cursor:grabbing}
.builder-token-bank.is-drop-target{outline:3px solid rgba(103,215,245,.62);outline-offset:2px}
.builder-feedback{min-height:28px;margin:18px 0 0;color:#655f78;font-size:14px;font-weight:800;line-height:1.45}
.builder-feedback[data-state="correct"]{color:#16765a}
.builder-feedback[data-state="wrong"]{color:#bc3e5d}
.builder-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:12px}
.builder-action{min-height:46px;padding:10px 18px;border:1px solid rgba(92,80,214,.22);border-radius:14px;background:#fff;color:#493eb6;font:900 14px/1 inherit;cursor:pointer}
.builder-action--primary{border:0;background:linear-gradient(135deg,#7c6cf2,#55bde8);color:#fff;box-shadow:0 9px 22px rgba(92,80,214,.24)}
.builder-action:hover{transform:translateY(-1px)}
.builder-navigation{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;margin-top:24px;padding-top:22px;border-top:1px solid #ebe7f8}
.builder-nav{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:9px;padding:10px 15px;border:1px solid rgba(124,108,242,.22);border-radius:15px;background:linear-gradient(135deg,#fff,#f2efff);color:#493eb6;font:850 14px/1.2 inherit;cursor:pointer}
.builder-nav--previous{justify-self:start}
.builder-nav--next{justify-self:end;background:linear-gradient(135deg,#7c6cf2,#5ab9e8);color:#fff}
.builder-nav:disabled{opacity:.38;cursor:not-allowed}
.builder-position{min-width:66px;color:#77718e;font-size:13px;font-weight:850;text-align:center;font-variant-numeric:tabular-nums}
.builder-empty{padding:50px 20px;color:#6e697e;text-align:center}
.builder-slot.is-correct,.builder-input.is-correct{border-color:#35b98b;background:#e8fff5}
.builder-slot.is-wrong,.builder-input.is-wrong{border-color:#e95d79;background:#fff0f4}
@media(max-width:720px){.builder-shell{border-radius:22px}.builder-header{display:grid;padding:23px 18px 17px}.builder-level-control{width:100%;max-width:none}.builder-content{padding:22px 16px 28px}.builder-prompt-card{padding:18px 57px 18px 17px}.builder-answer,.builder-token-bank{gap:8px;padding:12px}.builder-slot{min-width:62px;min-height:44px;padding:8px 10px;font-size:14px}.builder-tile{min-height:43px;padding:8px 12px;font-size:14px}.builder-input{width:112px;min-height:44px}.builder-actions{display:grid;grid-template-columns:1fr 1fr}.builder-action{width:100%}.builder-navigation{grid-template-columns:1fr 1fr;gap:10px}.builder-position{grid-column:1/-1;grid-row:1}.builder-nav{width:100%;padding:10px 8px}.builder-nav--previous{grid-column:1;grid-row:2}.builder-nav--next{grid-column:2;grid-row:2}}
@media(prefers-reduced-motion:reduce){.builder-slot,.builder-tile,.builder-action{transition:none}}