/** Phrason Writing — Sentence Reordering */
.ph-wr-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:12px; }
.ph-wr-head h3 { margin:5px 0 0; font-size:1.08rem; line-height:1.35; }
.ph-wr-card-label { font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; opacity:.65; }
.ph-wr-local-score { display:flex; gap:16px; flex-wrap:wrap; font-size:.82rem; margin:0 0 14px; opacity:.8; }
.ph-wr-level { border:1px solid rgba(127,127,127,.22); border-radius:14px; padding:14px; margin:0 0 14px; background:rgba(255,255,255,.035); }
.ph-wr-level-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.ph-wr-level-badge { display:inline-flex; padding:4px 9px; border-radius:999px; font-size:.75rem; font-weight:800; background:rgba(127,127,127,.14); }
.ph-wr-level-help { font-size:.76rem; opacity:.65; text-align:right; }
.ph-wr-slots { display:grid; gap:8px; margin-bottom:12px; }
.ph-wr-slot { width:100%; min-height:48px; display:grid; grid-template-columns:28px 1fr; gap:9px; align-items:center; text-align:left; padding:9px 11px; border:1.5px dashed rgba(127,127,127,.42); border-radius:10px; background:transparent; color:inherit; cursor:pointer; }
.ph-wr-slot-number { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; background:rgba(127,127,127,.15); }
.ph-wr-slot-text { line-height:1.3; }
.ph-wr-slot.is-filled { border-style:solid; background:rgba(127,127,127,.06); }
.ph-wr-slot.is-over { outline:2px solid currentColor; outline-offset:1px; }
.ph-wr-slot.correct { border-style:solid; box-shadow:inset 3px 0 0 #2e9d60; }
.ph-wr-slot.wrong { border-style:solid; box-shadow:inset 3px 0 0 #c75050; }
.ph-wr-pool { display:flex; flex-wrap:wrap; gap:8px; padding:10px; border-radius:11px; background:rgba(127,127,127,.07); min-height:48px; }
.ph-wr-part { display:inline-flex; align-items:center; gap:6px; text-align:left; padding:8px 10px; border:1px solid rgba(127,127,127,.25); border-radius:9px; background:var(--ph-window-bg, #fff); color:inherit; cursor:grab; line-height:1.28; }
.ph-wr-part:active { cursor:grabbing; }
.ph-wr-part.is-selected { outline:2px solid currentColor; outline-offset:2px; }
.ph-wr-part.is-dragging { opacity:.55; }
.ph-wr-grip { opacity:.45; letter-spacing:-3px; padding-right:2px; }
.ph-wr-level-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.ph-wr-reset, .ph-wr-check, .ph-wr-next { border:0; border-radius:9px; padding:9px 13px; font-weight:700; cursor:pointer; }
.ph-wr-reset { background:rgba(127,127,127,.13); color:inherit; }
.ph-wr-check, .ph-wr-next { background:#173f5f; color:#fff; }
.ph-wr-check:disabled, .ph-wr-next:disabled { opacity:.45; cursor:default; }
.ph-wr-feedback, .ph-wr-card-result { margin-top:10px; border-radius:10px; padding:10px 12px; font-size:.86rem; line-height:1.4; }
.ph-wr-feedback.is-correct, .ph-wr-card-result.is-correct { background:rgba(46,157,96,.12); }
.ph-wr-feedback.is-wrong { background:rgba(199,80,80,.10); }
.ph-wr-nav { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; font-size:.8rem; }
.ph-wr-empty { padding:18px; text-align:center; opacity:.7; }
@media (max-width:768px) {
    .ph-wr-level { padding:11px; }
    .ph-wr-level-head { align-items:flex-start; flex-direction:column; }
    .ph-wr-level-help { text-align:left; }
    .ph-wr-pool { flex-direction:column; }
    .ph-wr-part { width:100%; }
    .ph-wr-nav { align-items:stretch; flex-direction:column; }
    .ph-wr-next { width:100%; }
}

/** Phrason Writing — Cloze-fill */
.ph-cloze-level { border:1px solid rgba(127,127,127,.22); border-radius:14px; padding:15px; margin:0 0 14px; background:rgba(255,255,255,.035); }
.ph-cloze-text { font-size:.96rem; line-height:2.05; letter-spacing:.002em; }
.ph-cloze-target { white-space:nowrap; }
.ph-cloze-word { display:inline-flex; align-items:baseline; white-space:nowrap; }
.ph-cloze-prefix { font-weight:650; }
.ph-cloze-fixed { white-space:nowrap; }
.ph-cloze-input {
    width:calc(var(--ph-cloze-ch, 3) * .72em + .35em) !important;
    min-width:1.1em !important;
    max-width:10em !important;
    height:auto !important;
    margin:0 2px !important;
    padding:0 1px 1px !important;
    border:0 !important;
    border-width:0 !important;
    border-style:none !important;
    border-radius:0 !important;
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    color:inherit !important;
    font:inherit !important;
    font-weight:600 !important;
    line-height:1.25 !important;
    outline:none !important;
    text-align:left !important;
    letter-spacing:.035em !important;
}
.ph-cloze-input::placeholder { color:rgba(70,70,70,.62) !important; opacity:1; letter-spacing:.08em; font-weight:500; }
.ph-cloze-input:focus { border:0 !important; background:transparent !important; box-shadow:none !important; outline:none !important; }
.ph-cloze-input.correct { color:#257a4b !important; background:transparent !important; box-shadow:none !important; }
.ph-cloze-input.wrong { color:#a43f3f !important; background:transparent !important; box-shadow:none !important; }
.ph-cloze-input:disabled { opacity:1; -webkit-text-fill-color:currentColor; cursor:default; }
@media (max-width:768px) {
    .ph-cloze-level { padding:11px; }
    .ph-cloze-text { font-size:.92rem; line-height:2.15; }
}


/** Phrason Writing — Vocab Swap */
.ph-swap-instruction { font-size:.82rem; opacity:.72; margin:0 0 12px; }
.ph-swap-text { font-size:.97rem; line-height:1.85; padding:15px 16px; border:1px solid rgba(127,127,127,.20); border-radius:14px; background:rgba(255,255,255,.035); }
.ph-swap-target { display:inline; margin:0 1px; padding:1px 4px 2px; border:0; border-bottom:2px dashed currentColor; border-radius:3px; background:rgba(127,127,127,.10); color:inherit; font:inherit; font-weight:750; cursor:pointer; }
.ph-swap-target:hover { background:rgba(127,127,127,.18); }
.ph-swap-target.is-solved { border-bottom-style:solid; background:rgba(46,157,96,.12); color:#257a4b; cursor:default; }
.ph-swap-choicebox { margin-top:12px; padding:12px 14px; border:1px solid rgba(127,127,127,.22); border-radius:12px; background:rgba(127,127,127,.06); }
.ph-swap-choice-head { font-size:.84rem; margin-bottom:9px; }
.ph-swap-options { display:flex; flex-wrap:wrap; gap:8px; }
.ph-swap-option { border:1px solid rgba(127,127,127,.28); border-radius:9px; padding:8px 12px; background:var(--ph-window-bg,#fff); color:inherit; font:inherit; font-weight:650; cursor:pointer; }
.ph-swap-option:hover { border-color:currentColor; }
.ph-swap-option.is-wrong { opacity:.55; text-decoration:line-through; }
.ph-swap-feedback { margin-top:9px; font-size:.82rem; }
.ph-swap-feedback.is-correct { color:#257a4b; }
.ph-swap-feedback.is-wrong { color:#a43f3f; }
@media (max-width:768px) {
    .ph-swap-text { padding:12px; font-size:.94rem; }
    .ph-swap-options { flex-direction:column; }
    .ph-swap-option { width:100%; text-align:left; }
}


/** Phrason Writing — Email Reply */
.ph-email-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"original reply" "pool pool"; gap:12px; }
.ph-email-original { grid-area:original; }
.ph-email-reply { grid-area:reply; }
.ph-email-pool { grid-area:pool; }
.ph-email-original, .ph-email-reply, .ph-email-pool { border:1px solid rgba(127,127,127,.22); border-radius:14px; padding:14px; background:rgba(255,255,255,.035); min-width:0; }
.ph-email-panel-title { font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; opacity:.68; margin-bottom:10px; }
.ph-email-message { font-size:.88rem; line-height:1.55; max-height:360px; overflow:auto; padding-right:5px; }
.ph-email-slots { display:grid; gap:7px; }
.ph-email-slot { display:grid; grid-template-columns:25px minmax(0,1fr) 26px; gap:7px; align-items:start; min-height:44px; padding:8px; border:1.5px dashed rgba(127,127,127,.38); border-radius:9px; }
.ph-email-slot.is-filled { border-style:solid; background:rgba(127,127,127,.055); }
.ph-email-slot.correct { box-shadow:inset 3px 0 0 #2e9d60; }
.ph-email-slot.wrong { box-shadow:inset 3px 0 0 #c75050; }
.ph-email-slot-num { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:800; background:rgba(127,127,127,.14); }
.ph-email-slot-empty { opacity:.48; font-size:.8rem; padding-top:2px; }
.ph-email-slot-text { font-size:.8rem; line-height:1.38; }
.ph-email-remove { border:0; background:transparent; color:inherit; font-size:1.25rem; line-height:1; opacity:.55; cursor:pointer; padding:0; }
.ph-email-remove:hover { opacity:1; }
.ph-email-pool-help { font-size:.78rem; opacity:.65; margin:-4px 0 9px; }
.ph-email-pool-items { display:flex; flex-wrap:wrap; gap:7px; }
.ph-email-piece { flex:1 1 260px; text-align:left; border:1px solid rgba(127,127,127,.24); border-radius:9px; padding:8px 10px; background:var(--ph-window-bg,#fff); color:inherit; font:inherit; font-size:.79rem; line-height:1.35; cursor:pointer; }
.ph-email-piece:hover { border-color:currentColor; }
.ph-email-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
@media (max-width:768px) {
    .ph-email-workspace { grid-template-columns:1fr; grid-template-areas:"original" "reply" "pool"; }
    .ph-email-message { max-height:260px; }
    .ph-email-piece { flex-basis:100%; }
    .ph-email-actions { flex-wrap:wrap; }
    .ph-email-check, .ph-email-next { flex:1 1 160px; }
}


/** Phrason Writing — Structural Analysis */
.ph-struct-status { display:flex; justify-content:space-between; gap:12px; margin-bottom:9px; font-size:.76rem; font-weight:800; opacity:.65; }
.ph-struct-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:13px; align-items:stretch; }
.ph-struct-text, .ph-struct-question { min-width:0; border:1px solid rgba(127,127,127,.22); border-radius:14px; padding:16px; background:rgba(255,255,255,.035); }
.ph-struct-reading { font-size:.9rem; line-height:1.72; max-height:470px; overflow:auto; padding-right:6px; }
.ph-struct-highlight { background:rgba(244,197,66,.23); color:inherit; border-radius:5px; padding:2px 1px; }
.ph-struct-type { display:inline-block; font-size:.7rem; font-weight:850; letter-spacing:.05em; text-transform:uppercase; padding:4px 8px; border-radius:999px; background:rgba(127,127,127,.13); margin-bottom:7px; }
.ph-struct-target { font-size:.75rem; opacity:.58; margin-bottom:9px; }
.ph-struct-question h3 { font-size:.98rem; line-height:1.42; margin:0 0 13px; }
.ph-struct-options { display:grid; gap:8px; }
.ph-struct-option { width:100%; display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px; align-items:start; text-align:left; border:1px solid rgba(127,127,127,.25); border-radius:10px; padding:9px 10px; background:var(--ph-window-bg,#fff); color:inherit; font:inherit; font-size:.8rem; line-height:1.4; cursor:pointer; }
.ph-struct-option:hover:not(:disabled) { border-color:currentColor; }
.ph-struct-option.correct { box-shadow:inset 3px 0 0 #2e9d60; border-color:rgba(46,157,96,.45); }
.ph-struct-option.wrong { box-shadow:inset 3px 0 0 #c75050; border-color:rgba(199,80,80,.45); }
.ph-struct-letter { font-weight:850; }
.ph-struct-feedback { margin-top:12px; padding:10px 11px; border-radius:9px; font-size:.79rem; line-height:1.45; background:rgba(127,127,127,.07); }
.ph-struct-feedback.is-correct { box-shadow:inset 3px 0 0 #2e9d60; }
.ph-struct-feedback.is-wrong { box-shadow:inset 3px 0 0 #c75050; }
.ph-struct-next { margin-top:11px; float:right; }
@media (max-width:768px) {
    .ph-struct-layout { grid-template-columns:1fr; }
    .ph-struct-reading { max-height:300px; }
    .ph-struct-status { position:sticky; top:0; }
}