/* v317 · 🗣️ Shadowing (src/js/354-shadowing.js) */
.shd-intro{ margin:0 0 12px; max-width:760px; }
.shd-bar{ display:flex; flex-direction:column; gap:8px; margin:0 0 14px; }
.shd-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.shd-row2{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.shd-row2 .lf-ctl{ min-height:40px; border-radius:12px; border:1px solid #cfe0da; padding:0 10px; background:#fff; font:inherit; }
.shd-row2 .teacher-search{ flex:1 1 180px; margin:0; min-height:40px; }
.shd-row2 .check-btn{ margin:0; min-height:40px; }
.shd-list{ display:flex; flex-direction:column; gap:12px; }
.shd-set{ border:1px solid #dde9e4; border-radius:16px; background:#fff; padding:12px 14px; }
.shd-set-h{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.shd-set-h b{ font-size:16px; color:#123b33; } .shd-set-h small{ display:block; color:#55665f; font-size:12.5px; margin-top:2px; }
.shd-set-acts{ display:flex; flex-wrap:wrap; gap:6px; } .shd-set-acts button{ margin:0; min-height:38px; }
.shd-by{ appearance:none; border:0; background:none; padding:0; font:inherit; color:#0F766E; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.shd-lines{ list-style:none; margin:0; padding:0; }
.shd-line{ display:flex; align-items:center; gap:10px; padding:8px 2px; border-top:1px solid #eef3f1; }
.shd-line:first-child{ border-top:0; }
.shd-line .shd-play{ flex:0 0 auto; width:38px; height:38px; }
.shd-open{ appearance:none; border:0; background:none; padding:2px 0; font:inherit; text-align:left; cursor:pointer; flex:1; min-width:0; color:inherit; }
.shd-open:hover .shd-vn{ text-decoration:underline; text-decoration-color:#9fd6c3; }
.shd-vn{ font-size:16.5px; font-weight:700; } .shd-open small{ display:block; color:#55665f; font-size:13px; margin-top:1px; }
.shd-tags{ display:flex; gap:4px; flex:0 0 auto; }
.shd-tag{ font-size:11.5px; font-weight:700; padding:2px 7px; border-radius:999px; background:#eef5f2; color:#2f5048; white-space:nowrap; }
.shd-tag.ok{ background:#e3f6ec; color:var(--ok-ink,#166534); }
.shd-line.done .shd-vn{ opacity:.92; }
.shd-empty > div{ margin-top:10px; }
/* practice */
.shd-p{ display:flex; flex-direction:column; gap:12px; }
.shd-p-top{ display:flex; justify-content:space-between; color:#55665f; font-size:13px; font-weight:700; }
.shd-p-set{ background:#e9f7f2; color:#0b4f49; padding:3px 10px; border-radius:999px; }
.shd-p-media video{ width:100%; max-height:46vh; border-radius:14px; background:#0b1f1a; display:block; cursor:pointer; }
.shd-p-wave{ height:84px; border-radius:14px; background:linear-gradient(135deg,#e9f7f2,#f6fbf9); display:flex; align-items:center; justify-content:center; font-size:34px; }
.shd-p-line{ text-align:center; position:relative; }
.shd-p-vn{ font-size:24px; font-weight:800; line-height:1.3; } .shd-p-en{ color:#4b6158; font-size:15px; margin-top:4px; }
.shd-p-reveal{ display:none; }
.shd-p-line.hide .shd-p-vn, .shd-p-line.hide .shd-p-en{ filter:blur(9px); user-select:none; }
.shd-p-line.hide .shd-p-reveal{ display:inline-block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid #cfe0da; background:#fff; border-radius:999px; padding:6px 14px; font:inherit; font-weight:700; cursor:pointer; }
.shd-p-by{ text-align:center; color:#55665f; font-size:13px; }
.shd-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; counter-reset:shd; }
.shd-steps li{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; counter-increment:shd; }
.shd-steps li::before{ content:counter(shd); width:24px; height:24px; border-radius:50%; background:#0F766E; color:#fff; font-size:12.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.shd-steps button{ margin:0 !important; min-height:42px; }
.shd-steps button.on{ box-shadow:0 0 0 3px #9fd6c3; }
.shd-rates{ display:inline-flex; gap:4px; }
.shd-rates .cat-chip{ min-height:36px; }
.shd-tip{ margin:0; }
.shd-p-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; justify-content:space-between; border-top:1px solid #eef3f1; padding-top:10px; }
.shd-p-foot button{ margin:0; min-height:40px; }
.shd-hide{ display:flex; align-items:center; gap:6px; font-size:13.5px; color:#3b4d46; }
.shd-p-more{ display:flex; gap:14px; justify-content:center; }
.shd-link{ appearance:none; border:0; background:none; padding:4px; font:inherit; font-size:13px; color:#55665f; cursor:pointer; text-decoration:underline; }
/* studio */
.shd-st-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:6px 0 10px; }
.shd-st-grid label, .shd-st-full{ display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:700; color:#3b4d46; }
.shd-st-full{ margin-bottom:10px; } .shd-st-full textarea, .shd-st-full input, .shd-st-grid input{ margin:0; font-weight:400; }
.shd-st-grid .lf-ctl{ min-height:40px; border-radius:12px; border:1px solid #cfe0da; padding:0 10px; background:#fff; font:inherit; font-weight:400; }
.shd-src{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:4px 0 10px; }
.shd-src button, .shd-file{ margin:0 !important; min-height:42px; display:inline-flex; align-items:center; cursor:pointer; }
.shd-src button.on{ background:#b91c1c !important; color:#fff !important; border-color:#b91c1c !important; }
.shd-st-vid{ width:100%; max-width:420px; border-radius:12px; background:#0b1f1a; display:block; }
.shd-st-save{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:10px 0 4px; } .shd-st-save button{ margin:0; }
.shd-mine{ list-style:none; padding:0; margin:6px 0 0; } .shd-mine li{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-top:1px solid #eef3f1; }
.shd-mine small{ display:block; color:#55665f; font-size:12px; font-weight:400; }
@media (max-width:520px){ .shd-st-grid{ grid-template-columns:1fr; } .shd-tags{ display:none; } .shd-p-vn{ font-size:21px; } }
@media (min-width:1024px){ #tab-shadow{ max-width:980px; } }
body.dark-mode .shd-set{ background:#14211e; border-color:#2b3d38; } body.dark-mode .shd-set-h b{ color:#e6f1ec; }
body.dark-mode .shd-line{ border-color:#22332e; } body.dark-mode .shd-tag{ background:#1b2b26; color:#cfe3da; }
body.dark-mode .shd-p-wave{ background:#14211e; } body.dark-mode .shd-p-en, body.dark-mode .shd-open small, body.dark-mode .shd-set-h small{ color:#b9cdc5; }
body.dark-mode .shd-row2 .lf-ctl, body.dark-mode .shd-st-grid .lf-ctl{ background:#14211e; color:#e3eeea; border-color:#2b3d38; }
@media (max-width:520px){ .shd-set-acts{ width:100%; } .shd-set-acts button{ flex:1 1 0; padding-left:8px; padding-right:8px; } }
/* v317 · Survival: study the category as flashcards (0310 paintSurvivalStudy) */
.sv-study{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 12px; }
.sv-study .check-btn{ margin:0; min-height:42px; } .sv-study .section-note{ margin:0; }
@media (max-width:520px){ .vc-add-pill .vc-add-t{ display:none; } .vc-add-pill{ min-width:40px; justify-content:center; } }
/* v326 · one studio: "Who can hear it" sits on top */
.shd-who-l{ margin-bottom:10px; }
.shd-who-l select{ font-weight:700; }
.shd-who-l small{ display:block; margin-top:4px; }
#vcShadowStudio .shd-st-grid label[hidden]{ display:none !important; }