/* SP46 - shared styles for educational materials */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Georgia,serif;color:#2c2416;line-height:1.7}
.print-body{background:#fdfcf7;max-width:780px;margin:30px auto;padding:30px 40px;font-size:15px}
.print-body h1{text-align:center;color:#6b4423;border-bottom:3px double #8b6f47;padding-bottom:12px;margin-bottom:8px;font-size:26px}
.print-body h2{color:#6b4423;font-size:18px;margin-top:25px;border-bottom:1px dashed #b39a6b;padding-bottom:4px}
.print-body p{text-align:justify;text-indent:1.5em;margin:14px 0}
.meta{display:flex;justify-content:space-between;font-size:13px;color:#7a6a4f;border-bottom:1px solid #d4c4a0;padding-bottom:10px;margin-bottom:25px}
.meta span{border-bottom:1px solid #b39a6b;min-width:160px;display:inline-block}
.instruction{background:#f5ecd7;border-left:4px solid #8b6f47;padding:10px 16px;margin-bottom:25px;font-style:italic;font-size:14px}
.blank{display:inline-block;min-width:130px;border-bottom:1.5px solid #6b4423;text-align:center;font-weight:bold;color:#6b4423;padding:0 6px}
.num{display:inline-block;background:#6b4423;color:#fdfcf7;border-radius:50%;width:18px;height:18px;font-size:11px;text-align:center;line-height:18px;font-weight:bold;vertical-align:super;margin-right:2px}
.wordbank{background:#eadfbf;border:1px dashed #8b6f47;padding:14px 20px;margin-top:30px;border-radius:6px;font-size:14px;page-break-inside:avoid}
.footer{margin-top:40px;text-align:center;font-size:12px;color:#9a8868;font-style:italic}
@media print{.print-body{margin:0;box-shadow:none}}

/* Interactive */
.app{max-width:900px;margin:0 auto;background:#fdfcf7;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.4);overflow:hidden}
.app-header{color:#fdfcf7;padding:30px;text-align:center;border-bottom:5px double #d4b878}
.app-header h1{margin:0;font-size:30px;letter-spacing:2px}
.app-header p{margin:8px 0 0;font-style:italic;opacity:0.9}
.tabs{display:flex;background:#eadfbf;border-bottom:2px solid #8b6f47;flex-wrap:wrap}
.tab{flex:1;min-width:140px;padding:14px 10px;text-align:center;cursor:pointer;font-weight:bold;color:#6b4423;border-right:1px solid #b39a6b;font-size:14px}
.tab:last-child{border-right:none}
.tab:hover{background:#d4c4a0}
.tab.active{background:#fdfcf7;color:#3d2817;border-bottom:3px solid #b8860b}
.content{padding:35px;min-height:400px}
.panel{display:none;animation:fadeIn 0.4s}
.panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel h2{color:#6b4423;border-bottom:2px dashed #b39a6b;padding-bottom:8px;margin-bottom:15px}
.story-box{background:#f5ecd7;padding:25px 30px;border-radius:8px;border:1px solid #d4c4a0;line-height:1.9;font-size:16px}
.story-box .highlight{background:#e8d080;padding:1px 5px;border-radius:3px;font-weight:bold}
.question{background:#f5ecd7;border-left:4px solid #8b6f47;padding:15px 20px;margin-bottom:15px;border-radius:0 8px 8px 0}
.question p{margin:0 0 10px;font-weight:bold}
.options label{display:block;padding:8px 14px;margin:5px 0;background:#fff;border:2px solid #d4c4a0;border-radius:6px;cursor:pointer}
.options label:hover{background:#eadfbf}
.options input{margin-right:10px}
.options label.correct{background:#d4edbc;border-color:#4a7c2a}
.options label.wrong{background:#f5c6c6;border-color:#a83232}
button.btn{background:#6b4423;color:#fdfcf7;border:none;padding:12px 28px;font-size:15px;font-weight:bold;border-radius:6px;cursor:pointer;margin-top:15px;font-family:Georgia,serif}
button.btn:hover{background:#8b6f47}
.result{margin-top:20px;padding:15px;background:#eadfbf;border-radius:8px;font-weight:bold;text-align:center;font-size:18px}
.tf-item{display:flex;justify-content:space-between;align-items:center;background:#f5ecd7;padding:12px 18px;margin:8px 0;border-radius:8px;border-left:4px solid #8b6f47}
.tf-item span{flex:1;padding-right:15px}
.tf-btns button{padding:6px 14px;margin:0 3px;font-size:13px;border:none;color:#fff;border-radius:4px;cursor:pointer;font-family:Georgia,serif;font-weight:bold}
.yes{background:#4a7c2a}
.no{background:#a83232}
.tf-item.ok{background:#d4edbc}
.tf-item.bad{background:#f5c6c6}
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.match-item{background:#f5ecd7;padding:12px;border-radius:6px;border:2px solid #b39a6b;cursor:pointer;text-align:center}
.match-item:hover{background:#eadfbf}
.match-item.selected{background:#b8860b;color:#fff}
.match-item.matched{background:#d4edbc;border-color:#4a7c2a;cursor:default;opacity:0.7}
.fact-card{background:rgba(184,134,11,0.15);border-left:3px solid #b8860b;padding:10px 15px;margin:15px 0;font-style:italic;border-radius:0 4px 4px 0}