/* قدراتك — متابعة الفهم والحفظ في بنوك الأسئلة */
.bs-panel { background: var(--paper, #fff); border: 1px solid var(--border, #DCE3EE); border-radius: 16px; padding: 14px 16px; margin: 0 0 16px; box-shadow: 0 1px 2px rgba(22,35,63,.06); font-size: 14px; }
.bs-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bs-head b { font-size: 15px; }
.bs-sync { font-size: 12px; color: var(--ink-soft, #5C6B85); } .bs-sync.ok { color: #2E6E4A; } .bs-sync.bad { color: #C9686B; } .bs-sync.warn { color: #B9771A; }
.bs-resume { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: #FDF3E1; border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; font-weight: 600; }
.bs-btn { font-family: inherit; font-size: 14px; font-weight: 800; background: #F2A93C; color: #16233F; border: 0; border-radius: 9px; padding: 9px 16px; cursor: pointer; }
.bs-btn.ghost { background: transparent; border: 1px solid var(--border, #DCE3EE); color: var(--ink, #16233F); font-weight: 700; }
.bs-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 10px; }
.bs-bar-h { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-soft, #5C6B85); margin-bottom: 4px; } .bs-bar-h b { color: var(--ink, #16233F); }
.bs-bar { height: 10px; background: #EEF2F7; border-radius: 999px; overflow: hidden; } .bs-bar i { display: block; height: 100%; width: 0; background: #4C8FA0; border-radius: 999px; transition: width .4s; } .bs-bar i.green { background: #4C8F6A; }
.bs-counts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-soft, #5C6B85); margin-bottom: 10px; } .bs-counts b { color: var(--ink, #16233F); font-size: 14px; margin-left: 4px; }
.bs-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bs-chip { font-family: inherit; font-size: 13px; font-weight: 700; border: 1.5px solid var(--border, #DCE3EE); background: var(--paper, #fff); color: var(--ink, #16233F); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.bs-chip.on { background: #16233F; color: #fff; border-color: #16233F; }
.bs-adv { font-size: 12.5px; color: var(--ink-soft, #5C6B85); margin-inline-start: auto; } .bs-adv select { font-family: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border, #DCE3EE); border-radius: 8px; background: var(--paper, #fff); }
.bs-done { background: #E6F2EC; border-radius: 12px; padding: 10px 14px; margin-top: 10px; font-weight: 700; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bs-empty-filter { background: #F5F7FB; border: 1px dashed var(--border, #DCE3EE); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* بطاقة السؤال */
.mc-question { position: relative; transition: background-color .25s, border-color .25s; }
.bs-num { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-soft, #5C6B85); font-weight: 700; margin-bottom: 6px; }
.bs-mastered-tag { display: none; color: #2E6E4A; font-weight: 800; font-size: 13px; }
.mc-question.bs-mastered { background: rgba(76,143,106,.09) !important; border-color: #4C8F6A !important; }
.mc-question.bs-mastered .bs-mastered-tag { display: inline; }
.mc-question.bs-mastered::before { content: "✓"; position: absolute; top: -12px; right: 14px; width: 26px; height: 26px; border-radius: 50%; background: #4C8F6A; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.mc-question.bs-u .bs-num::after, .mc-question.bs-m .bs-num::after { font-size: 12px; font-weight: 700; color: #4C8FA0; }
.mc-question.bs-u .bs-num::after { content: "✔ فهمت الحل"; } .mc-question.bs-m .bs-num::after { content: "✔ حفظت الإجابة"; }
.bs-status { display: none; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0 4px; padding-top: 10px; border-top: 1px dashed var(--border, #DCE3EE); font-size: 14px; }
.bs-status.bs-show { display: flex; }
.bs-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; cursor: pointer; } .bs-check input { width: 18px; height: 18px; accent-color: #4C8F6A; cursor: pointer; }
.bs-saved { color: #2E6E4A; font-weight: 800; min-width: 14px; }
.mc-question.bs-hidden { display: none !important; }
.mc-question.bs-focus { outline: 3px solid #F2A93C; outline-offset: 3px; }
@media (max-width: 640px) { .bs-bars { grid-template-columns: 1fr; } .bs-adv { margin-inline-start: 0; } }