*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;line-height:1.5;color:#1d2125;background:#fff}
a{color:#0f6cbf;text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}

/* ---------- NAVBAR ---------- */
.navbar{background:#0e2a47;color:#fff;height:50px;display:flex;align-items:center;padding:0 16px;gap:22px;position:sticky;top:0;z-index:60}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer}
.brand .shield{width:26px;height:30px;background:#fff;color:#0e2a47;border-radius:3px 3px 12px 12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;letter-spacing:-.5px}
.brand .btxt{display:flex;flex-direction:column;line-height:1.05}
.brand .btxt .l1{display:flex;align-items:baseline;gap:5px}
.brand .btxt b{font-size:19px;letter-spacing:.5px}
.brand .btxt i{display:block;font-size:9px;font-style:normal;letter-spacing:1.2px;opacity:.85;margin-top:2px}
.brand .btxt .sub{font-size:8px;letter-spacing:1.5px;opacity:.75}
.navlinks{display:flex;gap:20px;font-size:14px}
.navlinks a{color:#fff;opacity:.95;cursor:pointer}
.navlinks a.active{font-weight:700;text-decoration:none}
.navright{margin-left:auto;display:flex;align-items:center;gap:14px}
.icon-btn{background:none;border:0;color:#fff;font-size:15px;cursor:pointer;opacity:.9;padding:4px;border-radius:50%}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.avatar{width:28px;height:28px;border-radius:50%;background:#c9d6e2;color:#0e2a47;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}

/* ---------- LAYOUT ---------- */
.wrap{display:flex;min-height:calc(100vh - 50px);align-items:flex-start}
.drawer{width:250px;flex:0 0 250px;border-right:1px solid #dee2e6;padding:14px 0 40px;background:#fff;font-size:14px;position:sticky;top:50px;max-height:calc(100vh - 50px);overflow:auto}
.drawer .closex{background:none;border:0;font-size:16px;color:#0f6cbf;cursor:pointer;padding:0 16px 8px}
.drawer h6{margin:6px 0 4px;padding:0 16px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;cursor:pointer}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer li a{display:block;padding:7px 16px 7px 30px;color:#0f6cbf;border-left:3px solid transparent;cursor:pointer}
.drawer li a:hover{background:#f2f6fa;text-decoration:none}
.drawer li a.active{background:#cfe2f3;color:#0e2a47;font-weight:600;border-radius:0 6px 6px 0;text-decoration:none}
.main{flex:1 1 auto;min-width:0;padding:16px 24px 60px}
.rightblock{width:190px;flex:0 0 190px;padding:16px 16px 40px 0}

/* ---------- PAGE HEAD ---------- */
.pagehead{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.actv-icon{width:34px;height:34px;border-radius:6px;background:#f7a1c4;display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;flex:0 0 34px}
h1.title{font-size:26px;margin:0;font-weight:700;color:#1d2125}
.crumbs{margin-left:auto;font-size:12.5px;color:#5b6b7a;padding-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs a{color:#0f6cbf}
.closepage{background:none;border:0;font-size:16px;color:#495057;cursor:pointer}

/* ---------- SUMMARY TABLE ---------- */
table.quizreviewsummary{width:100%;border-collapse:collapse;margin:10px 0 22px;font-size:14px}
table.quizreviewsummary th{width:33%;text-align:right;font-weight:700;padding:5px 12px;border-bottom:1px solid #f0f0f0;color:#1d2125;vertical-align:top}
table.quizreviewsummary td{padding:5px 12px;border-bottom:1px solid #f0f0f0}

/* ---------- QUESTION ---------- */
.que{display:flex;gap:0;border:1px solid #cfe0e0;background:#e7f3f3;border-radius:4px;margin:0 0 22px;overflow:hidden}
.que .info{flex:0 0 92px;background:#fff;padding:10px 8px 12px 10px;font-size:11.5px;color:#3d4b57;line-height:1.35}
.que .info h3{font-size:12px;margin:0 0 5px;font-weight:700}
.que .info h3 span{font-size:14px}
.que .info .state{margin-bottom:3px}
.que .info .grade{margin-bottom:8px}
.que .info .topic{margin-bottom:8px;font-size:10.5px;color:#7a8a99}
.que .info .flag{color:#0f6cbf;font-size:11px;display:inline-flex;gap:4px;align-items:center;cursor:pointer;background:none;border:0;padding:0;text-align:left}
.que .info .flag u{text-decoration:underline}
.que .info .flag.on{color:#b3261e}
.que .content{flex:1 1 auto;padding:14px 18px 18px;min-width:0}
.qtext{font-size:15px;margin-bottom:14px}
.qtext p{margin:0 0 8px}
.stembox{background:#fff;border:1px solid #cfe0e0;border-radius:4px;padding:10px 14px;margin-bottom:12px;font-size:14.5px;line-height:1.6}
.answer{margin:0}
.answer .option{display:flex;gap:9px;align-items:flex-start;padding:5px 4px;border-radius:4px;cursor:pointer}
.answer .option:hover{background:rgba(255,255,255,.55)}
.answer .option input{margin:5px 0 0;flex:0 0 auto;accent-color:#0f6cbf}
.answer .option .optlabel{flex:0 0 auto;color:#3d4b57;padding-top:1px}
.answer .option .opttext{flex:1 1 auto}
.answer .option.correctopt{background:#dff3e2;box-shadow:inset 0 0 0 1px #b6dfc0}
.answer .option.wrongopt{background:#fbe0de;box-shadow:inset 0 0 0 1px #efb9b4}
.feedback{margin-top:12px;font-size:13.5px;border-top:1px dashed #b9d4d4;padding-top:10px}
.feedback .right{color:#25683a;font-weight:600}
.feedback .wrong{color:#a1231a;font-weight:600}
.figure{display:flex;justify-content:center;margin:6px 0 14px}
.figure svg{background:#fff;border-radius:4px;max-width:100%;height:auto}

/* ---------- NAV BLOCK ---------- */
.block{border:1px solid #e0e3e6;border-radius:6px;padding:12px 14px 14px;font-size:13px;background:#fff}
.block h5{margin:0 0 10px;font-size:15px;font-weight:700}
.block .user{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.block .user .av{width:56px;height:56px;border-radius:50%;background:#e9ecef;color:#495057;display:flex;align-items:center;justify-content:center;font-size:20px}
.block .user .uname{font-size:11.5px;color:#3d4b57}
.block .quizname{font-size:20px;font-weight:700;margin:6px 0 8px}
.qnbuttons{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.qnbutton{width:22px;text-align:center;font-size:11px;color:#0f6cbf;cursor:pointer;background:none;border:0;padding:0;line-height:1.2}
.qnbutton .num{border:1px solid #adb5bd;border-bottom:0;border-radius:2px 2px 0 0;display:block;background:#fff}
.qnbutton .bar{display:block;height:11px;border:1px solid #adb5bd;border-radius:0 0 2px 2px;background:#dee2e6}
.qnbutton.answered .bar{background:#495057;border-color:#495057}
.qnbutton.current .num,.qnbutton.current .bar{border-color:#0f6cbf;border-width:2px}
.qnbutton.current .num{font-weight:700;color:#0e2a47}
.qnbutton.flagged .num{background:#ffe9c7}
.qnbutton.correct .bar{background:#1f7a3f;border-color:#1f7a3f}
.qnbutton.incorrect .bar{background:#b3261e;border-color:#b3261e}
.block .blocklink{display:block;margin-top:6px;font-size:13px;cursor:pointer}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;border:1px solid #0f6cbf;background:#0f6cbf;color:#fff;padding:7px 16px;border-radius:4px;font-size:14px;cursor:pointer}
.btn:hover{background:#0d5ca3}
.btn.sec{background:#fff;color:#0f6cbf}
.btn.sec:hover{background:#eaf2fa}
.btn.ghost{background:#f8f9fa;color:#1d2125;border-color:#ced4da}
.btn.ghost:hover{background:#e9ecef}
.btn.danger{background:#b3261e;border-color:#b3261e}
.navbtns{display:flex;justify-content:space-between;gap:10px;margin:6px 0 30px}
.finishlink{text-align:right;margin:4px 0 18px;font-size:14px}

/* ---------- ACTIVITY NAV FOOTER ---------- */
.actnav{border:1px solid #e0e3e6;border-radius:6px;display:flex;align-items:center;gap:14px;padding:10px 16px;margin:26px 0 0;font-size:13px;background:#fff}
.actnav .side{flex:1 1 0;min-width:0}
.actnav .side.r{text-align:right}
.actnav .lbl{color:#5b6b7a;font-size:12px}
.actnav select{padding:5px 8px;border:1px solid #ced4da;border-radius:4px;font-size:13px;min-width:210px}
.actnav .arrow{color:#adb5bd;font-size:18px}
.actnav .next{display:inline-block;background:#cfe2f3;border-radius:4px;padding:6px 12px;color:#0f6cbf}

/* ---------- FOOTER ---------- */
.sitefooter{background:#0e2a47;color:#fff;padding:22px 26px 26px;margin-top:34px;display:flex;gap:30px;font-size:13px}
.sitefooter b{display:block;margin-bottom:8px}
.sitefooter .mid{flex:1 1 auto;text-align:center}
.sitefooter .contactbtn{display:inline-block;border:1px solid #fff;border-radius:4px;padding:6px 14px;color:#fff;margin-bottom:8px}
.sitefooter .soc{display:flex;gap:8px}
.sitefooter .soc i{width:24px;height:24px;border-radius:50%;background:#1b6ec2;display:flex;align-items:center;justify-content:center;font-size:12px;font-style:normal}

/* ---------- HOME ---------- */
.homehero{background:#0e2a47;color:#fff;padding:34px 26px}
.homehero h2{margin:0 0 6px;font-size:27px}
.homehero p{margin:0;opacity:.85;font-size:14px}
.homehero .stats{display:flex;gap:26px;margin-top:16px;flex-wrap:wrap}
.homehero .stats div b{display:block;font-size:22px}
.homehero .stats div span{font-size:12px;opacity:.8;letter-spacing:.5px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:22px}
.card{border:1px solid #e0e3e6;border-radius:8px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.card .cimg{height:88px;display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff}
.card .cbody{padding:12px 14px 16px;flex:1 1 auto;display:flex;flex-direction:column}
.card h3{margin:0 0 4px;font-size:16px}
.card p{margin:0 0 12px;font-size:13px;color:#5b6b7a;flex:1 1 auto}
.card .cbtns{display:flex;gap:8px;flex-wrap:wrap}
.badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;background:#e9ecef;color:#495057;margin-bottom:8px;align-self:flex-start}
.badge.ok{background:#dff3e2;color:#25683a}

/* ---------- MODAL ---------- */
.modalbg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;overflow:auto}
.modal{background:#fff;border-radius:8px;max-width:560px;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.25);overflow:hidden;margin:auto}
.modal header{padding:14px 18px;border-bottom:1px solid #e9ecef;font-weight:700;font-size:17px;display:flex;align-items:center}
.modal header button{margin-left:auto;background:none;border:0;font-size:18px;cursor:pointer;color:#495057}
.modal .body{padding:16px 18px}
.modal .foot{padding:12px 18px;border-top:1px solid #e9ecef;display:flex;justify-content:flex-end;gap:10px;background:#f8f9fa}
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;font-size:13.5px;margin-bottom:4px}
.field input,.field select{width:100%;padding:7px 9px;border:1px solid #ced4da;border-radius:4px;font-size:14px}
.field .hint{font-size:12px;color:#6c757d;margin-top:3px}
.switch{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:10px}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid #ced4da;background:#fff;border-radius:20px;padding:6px 14px;font-size:13px;cursor:pointer;color:#3d4b57}
.pill:hover{background:#f1f3f5}
.pill.on{background:#0f6cbf;border-color:#0f6cbf;color:#fff;font-weight:600}
.pill.f1.on{background:#1f7a3f;border-color:#1f7a3f}
.pill.f2.on{background:#0f6cbf;border-color:#0f6cbf}
.pill.f3.on{background:#d9822b;border-color:#d9822b}
.pill.f4.on{background:#b3261e;border-color:#b3261e}

/* ---------- ATTEMPT SUMMARY TABLE ---------- */
table.quizsummary{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:14px}
table.quizsummary th{background:#f1f3f5;text-align:left;padding:8px 12px;border:1px solid #dee2e6;font-size:13px}
table.quizsummary td{padding:8px 12px;border:1px solid #dee2e6}
table.quizsummary td a{cursor:pointer}
.timerbox{border:1px solid #e0e3e6;border-radius:6px;padding:10px 12px;font-size:13px;margin-bottom:14px;background:#fff}
.timerbox .t{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.timerbox.warn{border-color:#e0a800;background:#fff8e6}
.timerbox.crit{border-color:#b3261e;background:#fbe0de;color:#8f1d16}
.alertbox{border:1px solid #f5c6cb;background:#fbe0de;color:#7d1b14;padding:10px 14px;border-radius:6px;margin:10px 0 16px;font-size:14px}
.infobox{border:1px solid #bcd9f0;background:#eaf3fb;color:#0e3b63;padding:10px 14px;border-radius:6px;margin:10px 0 16px;font-size:14px}
.byarea{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 20px}
.byarea th,.byarea td{border:1px solid #dee2e6;padding:7px 12px;text-align:left}
.byarea th{background:#f1f3f5;font-size:13px}
.bar-outer{background:#e9ecef;border-radius:8px;height:10px;width:150px;overflow:hidden;display:inline-block;vertical-align:middle}
.bar-inner{background:#1f7a3f;height:100%}

/* ---------- APRENDE ---------- */
.th-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:16px 0 10px}
.th-card{border:1px solid #e0e3e6;border-radius:8px;padding:14px 16px;background:#fff;cursor:pointer;display:flex;gap:12px;align-items:flex-start}
.th-card:hover{border-color:#0f6cbf;background:#f7fbff}
.th-card .ic{font-size:22px}
.th-card b{display:block;font-size:15px;margin-bottom:2px}
.th-card span{font-size:12.5px;color:#6c757d}
.th-sub{font-size:13px;color:#5b6b7a;margin:2px 0 0}
.theory{max-width:820px;font-size:15.5px;line-height:1.72}
.theory h2{font-size:21px;margin:26px 0 8px;padding-bottom:5px;border-bottom:2px solid #e7f3f3;color:#0e2a47}
.theory h3{font-size:17px;margin:20px 0 6px;color:#12496f}
.theory h4{font-size:15px;margin:16px 0 4px;color:#25683a;text-transform:none}
.theory p{margin:9px 0}
.theory ul,.theory ol{margin:8px 0 8px 4px;padding-left:22px}
.theory li{margin:4px 0}
.theory blockquote{margin:12px 0;padding:11px 15px;background:#fff8e6;border-left:4px solid #e0a800;border-radius:0 6px 6px 0;font-size:14.5px}
.theory table{border-collapse:collapse;margin:12px 0;font-size:14px;width:100%}
.theory th,.theory td{border:1px solid #dee2e6;padding:6px 11px;text-align:left}
.theory th{background:#f1f3f5}
.theory hr{border:0;border-top:1px solid #e9ecef;margin:18px 0}
.theory code{background:#f1f3f5;padding:1px 5px;border-radius:3px;font-size:13.5px}
.th-nav{display:flex;justify-content:space-between;gap:10px;margin:26px 0 10px}

/* ---------- LAYOUT MEJORADO / RESPONSIVE ---------- */
.drawer.hide{display:none}
.drawerbtn{position:fixed;left:10px;bottom:14px;z-index:40;background:#0e2a47;color:#fff;border:0;border-radius:20px;padding:9px 15px;font-size:13px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.drawerbtn:hover{background:#164272}
.main.reading{max-width:880px;margin:0 auto;padding:16px 30px 70px}
.theory{max-width:none;font-size:17px;line-height:1.85;color:#26313a}
.theory h2{font-size:23px;margin:34px 0 10px;padding-bottom:7px}
.theory h3{font-size:19px;margin:24px 0 6px}
.theory h4{font-size:16px;margin:18px 0 4px}
.theory p{margin:12px 0}
.theory li{margin:7px 0}
.theory blockquote{font-size:16px;padding:13px 18px;margin:16px 0}
.theory blockquote.tip{background:#eef7ef;border-left-color:#1f7a3f}
.theory blockquote.warn{background:#fdeceb;border-left-color:#b3261e}
.theory table{font-size:15px}
.theory .mjx{font-size:1.08em}
.theory .mjx-display{margin:18px 0;font-size:1.24em}
.theory .exbox{background:#f6f9fc;border:1px solid #dbe6f0;border-left:4px solid #0f6cbf;border-radius:0 8px 8px 0;padding:12px 18px;margin:16px 0}
.theory .exbox>h4:first-child{margin-top:0}
.toc{background:#f8f9fa;border:1px solid #e3e6e8;border-radius:10px;padding:14px 20px;margin:6px 0 20px;font-size:15px}
.toc b{display:block;margin-bottom:6px;font-size:14px;color:#5b6b7a;text-transform:uppercase;letter-spacing:.04em}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:3px 0}
.toc a{cursor:pointer}
.readbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;font-size:13px;color:#5b6b7a}
.progressbar{position:fixed;top:50px;left:0;height:3px;background:#0f6cbf;z-index:30;transition:width .1s}
/* ---------- HISTORIAL Y ESTADÍSTICAS ---------- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin:14px 0 22px}
.statcard{border:1px solid #e0e3e6;border-radius:10px;padding:14px 16px;background:#fff}
.statcard .v{font-size:26px;font-weight:700;color:#0e2a47;line-height:1.2}
.statcard .l{font-size:12px;color:#6c757d;text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
.histtable{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0 18px;background:#fff}
.histtable th,.histtable td{border:1px solid #dee2e6;padding:8px 11px;text-align:left;vertical-align:middle}
.histtable th{background:#f1f3f5;font-size:13px}
.histtable tr:hover td{background:#f7fbff}
.gradepill{display:inline-block;padding:2px 9px;border-radius:11px;font-weight:700;font-size:13px;color:#fff}
.g-ok{background:#1f7a3f}.g-mid{background:#d9822b}.g-bad{background:#b3261e}.g-del{background:#98a2ab}
.histtable tr.delrow td{background:#f6f7f8;color:#8a949c;text-decoration:line-through}
.histtable tr.delrow td .btn,.histtable tr.delrow td .delbadge{text-decoration:none}
.delbadge{display:inline-block;background:#e4e7ea;color:#5b6b7a;border-radius:9px;padding:1px 8px;font-size:11px;letter-spacing:.03em;text-transform:uppercase}
.spark{background:#fff;border:1px solid #e0e3e6;border-radius:10px;padding:14px 16px;margin:8px 0 20px;overflow-x:auto}
.spark svg{max-width:100%;height:auto}
.emptybox{border:1px dashed #c9d2da;border-radius:10px;padding:26px;text-align:center;color:#6c757d;background:#fbfcfd;margin:14px 0}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 6px;border-bottom:1px solid #dee2e6}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:8px 14px;font-size:14px;cursor:pointer;color:#0f6cbf}
.tabs button.on{border-bottom-color:#0f6cbf;color:#0e2a47;font-weight:700}
.covbar{height:9px;border-radius:5px;background:#e9ecef;overflow:hidden;margin-top:6px}
.covbar span{display:block;height:100%;background:#0f6cbf}
.sechead{font-size:19px;margin:30px 0 6px;padding-bottom:6px;border-bottom:2px solid #e9ecef;color:#1d2125}
.herostats{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:14px 0 6px}
.bigdonut{flex:0 0 190px;display:flex;justify-content:center}
.bigdonut svg{width:170px;height:170px}
.statgrid.grow{flex:1 1 380px}
.reco{display:flex;gap:12px;background:#fff;border:1px solid #e3e8ee;border-left:5px solid #0f6cbf;border-radius:8px;padding:14px 16px;margin:10px 0;box-shadow:0 1px 3px rgba(16,24,40,.06)}
.reco .rank{flex:0 0 34px;height:34px;border-radius:50%;background:#0f6cbf;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.reco .recobody{flex:1;min-width:0}
.reco .recobody>b{font-size:16px}
.reco p{margin:8px 0 10px;color:#40484f;line-height:1.6}
.recobtns{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-block;padding:2px 9px;border-radius:11px;font-size:11.5px;font-weight:700;color:#fff;vertical-align:2px}
.chip.light{background:#e9ecef;color:#41494f}
.planbox,.topicbox{border:1px solid #e3e8ee;border-radius:8px;background:#fff;margin:12px 0;padding:0}
.planbox>summary,.topicbox>summary{cursor:pointer;padding:12px 16px;font-weight:700;color:#0f6cbf;list-style:none}
.planbox>summary::-webkit-details-marker,.topicbox>summary::-webkit-details-marker{display:none}
.planbox>summary:before,.topicbox>summary:before{content:'\25B8 ';display:inline-block;transition:transform .15s}
.planbox[open]>summary:before,.topicbox[open]>summary:before{transform:rotate(90deg)}
.planbox .planlist{margin:0;padding:0 20px 14px 38px;line-height:1.95}
.planbox .planlist a,.topicbox a{color:#0f6cbf;cursor:pointer;text-decoration:underline}
.topicbox .histtable{margin:0 0 8px}
.minicharts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:12px 0}
.minichart{background:#fff;border:1px solid #e3e8ee;border-radius:8px;padding:10px 12px}
.minichart>b{display:block;font-size:13px;color:#5b6b7a;margin-bottom:4px}
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:10px 0 4px}
.gcard{background:#fff;border:1px solid #e3e8ee;border-radius:10px;padding:14px 16px;box-shadow:0 1px 3px rgba(16,24,40,.06);cursor:pointer;transition:.12s}
.gcard:hover{border-color:#0f6cbf;box-shadow:0 3px 10px rgba(15,108,191,.16);transform:translateY(-1px)}
.gcard .gtop{display:flex;align-items:center;gap:10px}
.gcard .gic{font-size:24px}
.gcard .gt{font-weight:800;font-size:15.5px}
.gcard .gcode{font-size:11.5px;color:#8a97a3;font-weight:700;letter-spacing:.4px}
.gcard ul{margin:8px 0 0;padding-left:20px;color:#4a545c;font-size:13.5px;line-height:1.65}
.gcard .gmeta{margin-top:9px;font-size:12px;color:#6c757d;display:flex;gap:12px;flex-wrap:wrap}
.subjhead{display:flex;align-items:center;gap:10px;margin:30px 0 2px}
.subjhead .bar{width:6px;height:26px;border-radius:3px}
.subjhead h2{font-size:20px;margin:0}
.subjhead .cnt{font-size:12.5px;color:#6c757d;margin-left:auto}

.thgroups{display:flex;flex-direction:column;gap:16px;margin-top:12px}
.thgroup{border:1px solid #dfe4ea;border-radius:10px;background:#fff;padding:12px 14px 14px}
.thgh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.thgh b{font-size:15px;color:#0e2a47}
.thdot{width:12px;height:12px;border-radius:3px;display:inline-block}
.thgn{font-size:12.5px;color:#6b7783}
.thgh .btn.mini{margin-left:auto;padding:4px 12px;font-size:12.5px}
.thgroup .th-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
@media(max-width:700px){.thgroup .th-list{grid-template-columns:1fr}.thgh .btn.mini{margin-left:0}}

.solvebox{margin-top:10px;border:1px solid #cfd8e0;border-left:4px solid #0f6cbf;border-radius:8px;background:#f7fbff;padding:12px 14px}
.solvehead{font-weight:700;color:#0e2a47;font-size:14.5px;margin-bottom:8px}
.solvesteps{margin:0;padding-left:20px;color:#31404d;font-size:14.5px;line-height:1.65}
.solvesteps li{margin:5px 0}
.solvesteps li.apply{background:#fff6e5;border-radius:6px;padding:6px 8px;margin-left:-6px;list-style-position:inside}
.solvesteps li.final{background:#e8f5ec;border-radius:6px;padding:6px 8px;margin-left:-6px;list-style-position:inside}
.yourans{margin-top:8px;font-size:14px;color:#7a3b34;background:#fdeeec;border-radius:6px;padding:8px 10px}
.solvelink{margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
@media(max-width:1200px){.rightblock{width:170px;flex:0 0 170px}}
@media(max-width:980px){.drawer{position:fixed;left:0;top:50px;bottom:0;z-index:35;box-shadow:2px 0 14px rgba(0,0,0,.18);width:270px;flex:0 0 270px}.rightblock{width:auto;flex:1 1 100%;padding:0 16px 30px}.wrap{flex-wrap:wrap}.main{padding:14px 16px 50px}.main.reading{padding:14px 16px 60px}.navlinks{gap:10px}.qnbuttons{gap:6px}}
@media(max-width:700px){.navbar{padding:0 8px;gap:6px;overflow:hidden}.navright .icon-btn:nth-child(2){display:none}.brand .shield{margin-right:4px}.navlinks{overflow-x:auto;flex:1;min-width:0}.navlinks a{font-size:12.5px}.brand .sub{display:none}.pagehead .crumbs{display:none}.theory{font-size:16px}.homehero{padding:22px 16px}.homehero h2{font-size:20px}.cards{grid-template-columns:1fr}.que{flex-direction:column}.que .info{width:auto;border-right:0;border-bottom:1px solid #cfe0e0}.navbtns{flex-direction:column-reverse;gap:8px}.navbtns .btn{width:100%}.histtable{font-size:13px}.histtable th:nth-child(4),.histtable td:nth-child(4){display:none}}

/* ---------- MATH ---------- */
.mjx{font-family:"Latin Modern Math","STIX Two Math","Cambria Math",Georgia,"Times New Roman",serif;font-size:1.06em;white-space:nowrap;display:inline-block;vertical-align:middle;line-height:1.15;max-width:100%}
.theory .mjx,.qtext .mjx,.opttext .mjx,.stembox .mjx,.feedback .mjx{white-space:normal}
.theory table{display:block;overflow-x:auto;max-width:100%}
.theory p,.theory li,.qtext,.opttext{overflow-wrap:anywhere}
.mjx-display{display:block;text-align:center;margin:12px 0;font-size:1.2em;white-space:nowrap;font-family:"Latin Modern Math","STIX Two Math","Cambria Math",Georgia,"Times New Roman",serif}
.mi{font-style:italic}
.mo{padding:0 .16em}
.mfrac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 .14em;font-size:1em}
.mfrac>.num{display:block;padding:0 .25em .06em;border-bottom:1px solid currentColor;line-height:1.1}
.mfrac>.den{display:block;padding:.08em .25em 0;line-height:1.1}
.msqrt{display:inline-flex;align-items:stretch;vertical-align:-.18em;line-height:1.1}
.msqrt>.rad{flex:0 0 .58em;width:.58em;align-self:stretch}
.msqrt>.rad svg{display:block;width:100%;height:100%;overflow:visible}
.msqrt>.sqbody{border-top:1.1px solid currentColor;padding:.16em .2em .06em .05em;margin-left:-1px}
.msqrt>.msup{font-size:.6em;align-self:flex-start;margin-right:-.22em;position:relative;top:-.18em;z-index:1;line-height:1}
.mover{border-top:1px solid currentColor;padding-top:.05em}
sup.msup{font-size:.72em;vertical-align:.6em;line-height:0}
sub.msub{font-size:.72em;vertical-align:-.28em;line-height:0}
.mtext{font-style:normal}
.mtext .mi{font-style:normal}