/* Visual learning guide — bilingual instructional overlays, derived from textbook lesson topics. */
.visual-guide{background:linear-gradient(160deg,#f7fbfe 0%,#f1f8fc 100%);border:1px solid #d8e6f0;border-radius:20px;margin:20px 0 26px;overflow:hidden;box-shadow:0 12px 34px #102c4310}
.visual-guide-head{padding:22px 24px;background:#fff;border-bottom:1px solid #dfebf3;display:flex;gap:16px;justify-content:space-between;align-items:start;flex-wrap:wrap}
.visual-guide-head .sgk-eyebrow{font-size:11px;font-weight:850;letter-spacing:.09em;color:#146a83}
.visual-guide-head h3{font-size:21px;color:#1b3952;margin:7px 0 5px;line-height:1.3}
.visual-guide-head .guide-en{font-style:italic;color:#517187;margin:0;font-size:14px}
.visual-guide-head .source-reference{background:#eaf4f9;color:#315a72;border:1px solid #cee4ee;border-radius:12px;padding:10px 13px;font-size:12px;line-height:1.6;max-width:270px}
.visual-guide-main{padding:22px 24px}
.guide-summary{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:17px}
.guide-summary>div{background:#fff;border:1px solid #e0eaf0;border-radius:14px;padding:16px;min-height:95px}
.guide-summary h4,.guide-steps h4{margin:0 0 8px;font-size:13px;color:#256e8b}
.guide-summary p{margin:0;color:#344e64;font-size:14px;line-height:1.7}
.guide-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 18px}
.guide-step{border:1px solid #dbe5ef;background:#fff;border-radius:16px;padding:15px;min-width:0;line-height:1.7}
.guide-step .counter{display:inline-flex;background:#e4eff9;border-radius:9px;width:30px;height:30px;align-items:center;justify-content:center;font-weight:800;color:#256485;margin-bottom:9px}
.guide-step p{font-size:13px;color:#3e5569;margin:3px 0 8px;overflow-wrap:anywhere}
.guide-step em{font-size:13px;color:#37748b}
.guide-step details{margin-top:10px;background:#f5fafc;border:1px solid #e1edf4;border-radius:9px;padding:7px 10px;font-size:13px}
.guide-step summary{cursor:pointer;font-weight:650;color:#265b70}
.guide-vocab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0}
.guide-vocab strong{font-size:13px;color:#304a5b;margin-right:7px}
.guide-word{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid #cce4e9;border-radius:999px;background:#fff;font-size:12px;color:#245b6a}
.guide-word small{color:#6a8693;font-size:11px}
.guide-tools{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0 8px}
.guide-tools button{border:1px solid #bbd7e3;border-radius:10px;background:#fff;color:#1b5c78;padding:10px 14px;font-weight:700;cursor:pointer;font-size:13px}
.guide-tools button:hover{background:#e8f4f8}
.guide-disclaimer{color:#6b8292;font-size:12px;line-height:1.65;border-top:1px solid #dae9f0;padding-top:14px;margin-top:14px}
.dialog-visual{width:min(94vw,1050px);max-height:93vh;border:0;border-radius:20px;padding:16px 20px;background:white;box-shadow:0 20px 90px #0005}
.dialog-visual::backdrop{background:#081d32bc}
.dialog-visual svg{width:100%;max-height:71vh;height:auto;border-radius:12px;background:#f9fcff}
.dialog-visual h3{color:#153b5a;margin:0 0 12px}
.dialog-visual .dialog-actions{display:flex;justify-content:flex-end;margin-bottom:8px}
.dialog-visual button{border:0;border-radius:9px;background:#183d60;color:#fff;padding:9px 16px;cursor:pointer}
@media(max-width:800px){.guide-steps{grid-template-columns:1fr}.guide-summary{grid-template-columns:1fr}.visual-guide-head,.visual-guide-main{padding:17px}.visual-guide-head h3{font-size:18px}}
@media print{.guide-tools,.guide-step summary{display:none}.visual-guide{break-inside:avoid}}