:root {
  --base-font-size: 18px; --chat-font-size: 19px; --conv-primary: #183f9f; --conv-blue: #1ea7ff; --conv-bg: #f4f7f9; --conv-teacher-bg: #fff; --conv-student-bg: #dcf8c6; --conv-text: #111b21;
}
.s2e-conv-wrapper { width: min(100%, 940px); height: 86vh !important; margin: 10px auto; background: #fff; border-radius: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.10); overflow: hidden; font-family: Tahoma, Arial, sans-serif; border: 1px solid #e0e0e0; font-size: var(--base-font-size); display: flex; flex-direction: column; position: relative }
.s2e-conv-header { background: linear-gradient(135deg, #183f9f, #1ea7ff); color: #fff; padding: 10px 14px; display: grid !important; grid-template-columns: max-content 1fr auto !important; align-items: center; min-height: 65px; gap: 14px; overflow: hidden; }
.s2e-header-left { display: flex; justify-content: flex-start; }
.s2e-header-right { display: flex; justify-content: flex-end; gap: 8px; }
.s2e-header-titles { position: static !important; transform: none !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; width: 100%; overflow: hidden; padding-left: 5px; padding-right: 5px; }
.s2e-title-en { font-size: 19px !important; font-weight: 900; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; direction: ltr; text-align: left;}
.s2e-title-ar { font-size: 14px !important; font-weight: 800; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; direction: rtl; text-align: left;}
.s2e-btn-lang { background: rgba(255,255,255,.22); border: none; color: #fff; height: 42px; border-radius: 22px; cursor: pointer; font-weight: 900; min-width: 70px; padding: 0 10px; font-size: 13px; white-space: nowrap; }
.s2e-btn-lang:hover { background: rgba(255,255,255,.35); }
.s2e-btn-back { background: transparent !important; border: none !important; color: #fff; height: 42px; cursor: pointer; padding: 0 5px; display: flex; align-items: center; justify-content: center; box-shadow: none !important; }
.s2e-btn-back:hover { background: transparent !important; opacity: 0.7; }
.s2e-toolbar { background: #f8f9fa; padding: 9px; border-bottom: 1px solid #eee; display: none; flex-direction: column; gap: 8px; position: relative; z-index: 10; }
.s2e-tool-row { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; direction: ltr !important; } 
.s2e-btn-tool { padding: 6px 14px; cursor: pointer; border-radius: 20px; border: 2px solid #183f9f; background: #fff; color: #183f9f; font-weight: 900; font-size: 14px; line-height: 1.2; white-space: nowrap; flex: 0 0 auto } 
.s2e-btn-tool.active, .s2e-btn-tool:hover { background: #183f9f; color: #fff }
.s2e-settings-panel { display: none; background: #fff; border: 1px solid #dfe8f2; border-radius: 16px; padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.15); direction: rtl; width: min(95%, 400px); box-sizing: border-box; position: absolute; top: 70px; right: 15px; z-index: 99999; } 
.s2e-settings-panel.active { display: block; animation: popIn 0.2s ease-out; }
.s2e-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #eef2f6; font-size: 14px; font-weight: 900; color: #183f9f } .s2e-setting-row:last-child { border-bottom: none } .s2e-setting-actions { display: flex; gap: 6px; flex-wrap: wrap } .s2e-small-option { border: 1px solid #183f9f; background: #fff; color: #183f9f; border-radius: 14px; padding: 4px 10px; font-size: 12px; font-weight: 900; cursor: pointer } .s2e-small-option.active { background: #183f9f; color: #fff }
.s2e-screen-container { flex: 1; overflow-y: auto; background: var(--conv-bg); position: relative; scroll-behavior: auto!important; } .s2e-screen { display: none; padding: 15px } .s2e-screen.active { display: block }



/* ================================
   النمط الموحد للكروت في كل القوائم
   Home / Categories / Topics / Lessons
================================ */

.s2e-card-item {
  background: #fff;
  border-radius: 18px;
  padding: 15px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  border: 1px solid #eef2f6;
  box-shadow: 0 4px 12px rgba(24,63,159,.05);
  transition: .2s;
  position: relative;
  overflow: hidden;
}

.s2e-card-item:hover {
  border-color: #1ea7ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(24,63,159,.10);
}

.s2e-home-main-card,
.s2e-category-card,
.s2e-topic-list-card,
.s2e-lesson-card {
  min-height: 82px !important;
  border-radius: 18px !important;
  background: #fff !important;
}

.s2e-icon-box {
  font-size: 34px;
  width: 60px;
  height: 60px;
  background: #f4f8ff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.s2e-card-text {
  flex: 1;
  min-width: 0;
}

.s2e-card-en,
.s2e-topic-en,
.s2e-lesson-en {
  display: block;
  direction: ltr;
  text-align: left;
  font-size: 21px !important;
  font-weight: 900 !important;
  color: #183f9f !important;
  line-height: 1.25;
  margin-bottom: 5px;
}

.s2e-card-ar,
.s2e-topic-ar,
.s2e-lesson-ar {
  display: block;
  color: #607ca7;
  font-size: 15px;
  font-weight: 900;
  margin-top: 4px;
  direction: rtl;
  text-align: right;
  line-height: 1.35;
}

.s2e-lesson-number {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: #f4f8ff;
  color: #183f9f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  flex-shrink: 0;
}
.s2e-topic-header-modern { background: linear-gradient(135deg, #f0f7ff, #e6f0fa); border: 2px dashed #b5d3f8; border-radius: 16px; padding: 12px 20px; margin: 24px auto 16px; text-align: center; max-width: 90%; cursor: default; user-select: none; box-shadow: 0 4px 10px rgba(24,63,159,0.05); }
.s2e-topic-modern-en { font-size: 19px; font-weight: 900; color: #183f9f; direction: ltr; margin-bottom: 4px; }
.s2e-topic-modern-ar { font-size: 15px; font-weight: 800; color: #607ca7; direction: rtl; }
.s2e-tabs { display: flex; background: #fff; border-bottom: 2px solid #eee; position: relative; z-index: 10 } .s2e-tab { flex: 1; padding: 12px 4px; text-align: center; font-weight: 900; color: #666; cursor: pointer; border-bottom: 3px solid transparent; font-size: 14px } .s2e-tab.active { color: #183f9f; border-bottom-color: #183f9f; background: #f8fbff } .s2e-simulator-body { padding: 14px } .s2e-tab-content { display: none } .s2e-tab-content.active { display: block }

.s2e-chat-wrapper { display: flex; flex-direction: column; gap: 14px; padding-bottom: 230px }

/* شكل فقاعات الواتساب الحقيقي */
.s2e-bubble { max-width: 85%; padding: 10px 14px 28px; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,.15); animation: popIn .4s ease-out; }
@keyframes popIn { 0% { transform: scale(.9) translateY(10px); opacity: 0 } 100% { transform: scale(1) translateY(0); opacity: 1 } }
.s2e-bubble-teacher { background: var(--conv-teacher-bg); align-self: flex-start; border-radius: 16px 16px 16px 0; border: 1px solid #e0e0e0; position: relative; margin-left: 10px; opacity: 1 !important; color: var(--conv-text) !important; }
.s2e-bubble-teacher::before { content: ""; position: absolute; bottom: 0px; left: -10px; width: 0; height: 0; border-bottom: 15px solid var(--conv-teacher-bg); border-left: 15px solid transparent; z-index: 1; filter: drop-shadow(-1px 1px 0px #e0e0e0); }
.s2e-bubble-student { background: var(--conv-student-bg); align-self: flex-end; border-radius: 16px 16px 0 16px; border: 1px solid #b7e4a3; text-align:right; position: relative; margin-right: 10px; opacity: 1 !important; color: var(--conv-text) !important; }
.s2e-bubble-student::before { content: ""; position: absolute; bottom: 0px; right: -10px; width: 0; height: 0; border-bottom: 15px solid var(--conv-student-bg); border-right: 15px solid transparent; z-index: 1; filter: drop-shadow(1px 1px 0px #b7e4a3); }
/* تصميم شاشة النهاية (Modal) الجديد */
.s2e-completed-modal { padding: 0 !important; border: none !important; background: #f8f9fa; }
.s2e-completed-header { background: #1ea7ff; color: #fff; padding: 25px 45px; text-align: center; font-size: 24px; font-weight: 900; border-radius: 20px 20px 0 0; }
.s2e-completed-body { padding: 30px 20px; display: flex; flex-direction: column; gap: 15px; background: #fff; border-radius: 0 0 20px 20px; }
.s2e-completed-btn { width: 100%; padding: 18px; border-radius: 16px; font-size: 18px; font-weight: 900; cursor: pointer; transition: 0.2s; border: 2px solid #183f9f; }
.s2e-completed-btn.primary { background: #183f9f; color: #fff; box-shadow: 0 6px 16px rgba(24,63,159,0.2); }
.s2e-completed-btn.primary:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(24,63,159,0.3); }
.s2e-completed-btn.secondary { background: #fff; color: #183f9f; }
.s2e-completed-btn.secondary:hover { background: #f4f8ff; }

.s2e-speaker { font-size: 12px; color: #777; font-weight: 900; margin-bottom: 5px }
.s2e-bubble-student .s2e-speaker { text-align: right }
.s2e-text-en { font-size: var(--chat-font-size); font-weight: 900; color: var(--conv-text); line-height: 1.35; direction: ltr; text-align: left }
.s2e-text-ar { font-size: calc(var(--chat-font-size) - 4px); color: #444; text-align: right; direction: rtl; margin-top: 8px; border-top: 1px dashed #bbb; padding-top: 8px; font-weight: 800; line-height: 1.45 }
.s2e-hidden, .s2e-msg-hidden { display: none !important }
.s2e-msg-trans-btn { position: absolute; bottom: 5px; left: 10px; border: none; background: rgba(24,63,159,.08); color: #183f9f; font-size: 12px; font-weight: 900; line-height: 1.2; border-radius: 12px; padding: 3px 9px; cursor: pointer; min-width: 54px; height: 22px } .s2e-msg-trans-btn.active { background: #183f9f; color: #fff }
.s2e-tick { position: absolute; bottom: 5px; right: 11px; font-size: 14px; color: #999; font-weight: 900; letter-spacing: -2px }
.s2e-tick.blue { color: #34b7f1 }

/* إزالة التمييز اللبني نهائياً */
.s2e-playing, .s2e-highlight { cursor: pointer; background-color: transparent !important; color: inherit !important; border-radius: 0; padding: 0; display: inline-block; transition: none;}
.s2e-bubble.s2e-playing { border-color: inherit !important; box-shadow: 0 1px 2px rgba(0,0,0,.15) !important; background-color: inherit !important;}
.s2e-bubble.s2e-bubble-student.s2e-playing { border-color: inherit !important; box-shadow: 0 1px 2px rgba(0,0,0,.15) !important; background-color: inherit !important;}

/* ================================
   أزرار اسمع تاني / كمل داخل الفقاعة بشكل منظم
================================ */

.s2e-manual-actions {
  display: none;
  position: static !important;
  transform: none !important;
  width: 100% !important;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(24,63,159,.18);
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  z-index: 3;
}

.s2e-bubble.s2e-show-actions {
  margin-bottom: 14px !important;
}

.s2e-bubble.s2e-show-actions .s2e-manual-actions {
  display: flex !important;
}

.s2e-action-mini {
  border: 2px solid #183f9f;
  background: #fff;
  color: #183f9f;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 15px !important;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(24,63,159,.12);
  white-space: nowrap;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
}

.s2e-action-mini:hover {
  background: linear-gradient(135deg, #183f9f, #1ea7ff);
  color: #fff;
}
.s2e-loading { text-align: center; padding: 30px 10px; font-weight: 900; font-size: 22px; color: #183f9f; direction: rtl } .s2e-coming-soon { min-height: 220px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; background: #fff; border-radius: 20px; border: 2px dashed #1ea7ff; margin: 18px; padding: 22px; text-align: center } .s2e-coming-en { font-size: 32px; font-weight: 900; color: #183f9f; direction: ltr } .s2e-coming-ar { font-size: 24px; font-weight: 900; color: #1ea7ff; direction: rtl } .s2e-missing-path { margin-top: 12px; font-size: 12px; color: #888; direction: ltr; word-break: break-all; max-width: 90% }

.s2e-inline-btn { background: #eaf5ff; border: none; color: #183f9f; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(24,63,159,0.1); }
.s2e-inline-btn:hover { background: #183f9f; color: #fff; transform: scale(1.1); }
.s2e-role-container { text-align: center; padding: 20px 10px; }
.s2e-role-title { font-size: 22px; font-weight: 900; color: #183f9f; margin-bottom: 10px; }
.s2e-role-btn-group { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-top: 20px; }
.s2e-role-btn { padding: 12px 25px; border-radius: 20px; background: #fff; border: 3px solid #183f9f; color: #183f9f; font-size: 18px; font-weight: 900; cursor: pointer; transition: .3s; }
.s2e-role-btn:hover { background: #183f9f; color: #fff; transform: translateY(-2px); }
.s2e-prac-badge { font-size: 14px; background: #eaf5ff; color: #183f9f; font-weight: 900; margin-bottom: 5px; text-align: center; border-radius:12px; padding:5px 10px; border:1px dashed #1ea7ff; }
.s2e-quiz-submit { margin: 0 auto !important; padding: 12px 40px !important; min-width: 160px; border-radius: 999px !important; font-size: 18px !important; box-shadow: 0 8px 18px rgba(24,63,159,.22); background: linear-gradient(135deg, #183f9f, #1ea7ff); color: white; border: none; cursor: pointer; }
.s2e-practice-controls { position: sticky; bottom: 10px; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px 8px calc(26px + env(safe-area-inset-bottom, 0px)) !important; margin-top: 0 !important; background: linear-gradient(180deg, rgba(244,247,249,0), rgba(244,247,249,.96) 35%, rgba(244,247,249,1)); pointer-events: none; }
.s2e-practice-controls > * { pointer-events: auto; }

.s2e-quiz-opt { display: flex; flex-direction: column; justify-content: center; width: 100%; background: #fff; border: 1px solid #d1d7db; border-radius: 12px; padding: 12px 40px 12px 16px; margin-bottom: 8px; text-align: left; position: relative; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.s2e-quiz-opt::after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 2px solid #ccc; border-radius: 50%; }
.s2e-quiz-opt:hover { background: #f8f9fa; }
.s2e-poll-en { font-size: 17px; font-weight: bold; color: #111b21; }
.s2e-poll-ar { font-size: 14px; font-weight: normal; color: #555; margin-top: 5px; }

.s2e-btn-today{background:rgba(255,255,255,.22);border:none;color:#fff;height:38px;border-radius:999px;cursor:pointer;font-weight:900;min-width:42px;padding:0 10px;font-size:18px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.s2e-btn-today:hover{background:rgba(255,255,255,.35)}
.s2e-home-plan-wrap{display:none;background:#f4f7f9;padding:12px 12px 4px;text-align:center}.s2e-home-screen .s2e-home-plan-wrap{display:block}.s2e-home-screen #btnTodayPlan{display:none!important}.s2e-home-plan-btn{display:inline-flex;align-items:center;justify-content:center;width:min(90%,410px);min-height:48px;border:0;border-radius:20px;background:linear-gradient(180deg,#0d1f5c 0%,#002e94 55%,#1e90ff 100%);color:#fff;font-weight:900;font-size:21px;line-height:1;box-shadow:0 10px 20px rgba(13,56,145,.18);cursor:pointer}.s2e-topics-screen #btnTodayPlan,.s2e-lesson-screen #btnTodayPlan{display:inline-flex!important;min-width:40px;width:40px;height:36px;padding:0;font-size:0}.s2e-topics-screen #btnTodayPlan::before,.s2e-lesson-screen #btnTodayPlan::before{content:"📅";font-size:18px}.s2e-lesson-icon{font-size:23px!important}
.s2e-lang-en .s2e-settings-panel{direction:ltr!important}.s2e-lang-en .s2e-setting-row{direction:ltr!important;flex-direction:row!important;text-align:left!important}.s2e-lang-en .s2e-setting-actions{justify-content:flex-end!important}.s2e-lang-ar .s2e-settings-panel{direction:rtl!important}.s2e-lang-ar .s2e-setting-row{direction:rtl!important;text-align:right!important}
.s2e-today-panel{display:none;position:fixed;inset:0;z-index:999999;background:rgba(11,22,45,.46);padding:14px;align-items:center;justify-content:center;direction:rtl;border:0}.s2e-today-panel.active{display:flex}.s2e-today-modal{width:min(760px,100%);max-height:calc(100vh - 42px);overflow:auto;background:#fff;border-radius:22px;border:2px solid #d9e8fb;box-shadow:0 20px 48px rgba(0,0,0,.20);padding:14px;position:relative}.s2e-today-modal-compact{width:min(720px,100%);overflow:visible;padding:14px 14px 12px}.s2e-plan-secondary-modal{width:min(720px,100%);overflow:visible;padding:14px}.s2e-plan-nav{height:44px;position:relative;margin-bottom:4px}.s2e-today-close{position:absolute;top:20px;left:22px;right:auto;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:14px;border:none;background:linear-gradient(180deg,#0d1f5c 0%,#002e94 55%,#1e90ff 100%);color:#fff;font-size:24px;font-weight:900;cursor:pointer;z-index:3}.s2e-plan-nav .s2e-today-close{top:0;right:0;left:auto}.s2e-plan-back-btn{position:absolute;top:1px;left:0;width:42px;height:42px;margin:0;padding:0 5px;background:transparent!important;border:none!important;border-radius:0!important;color:#183f9f!important;display:flex;align-items:center;justify-content:center;box-shadow:none!important;outline:0!important;cursor:pointer;opacity:1}.s2e-plan-back-btn:hover{background:transparent!important;opacity:.7;transform:none}.s2e-plan-back-btn svg{display:block;flex:0 0 auto}.s2e-plan-setup-box{background:#f8fbff;border:1px solid #dbe7f7;border-radius:18px;padding:14px;text-align:center}.s2e-plan-setup-title{font-size:18px;font-weight:900;color:#183f9f;margin-bottom:12px}.s2e-plan-count-options{display:flex;gap:10px;justify-content:center;margin-bottom:14px}.s2e-plan-count-btn{min-width:58px;min-height:44px;border-radius:15px;border:2px solid #183f9f;background:#fff;color:#183f9f;font-size:18px;font-weight:900;cursor:pointer}.s2e-plan-count-btn.active{background:#183f9f;color:#fff}.s2e-create-plan-btn,.s2e-reset-today-plan{border:none;border-radius:16px;background:linear-gradient(180deg,#0d1f5c 0%,#002e94 55%,#1e90ff 100%);color:#fff;font-size:16px;font-weight:900;min-height:48px;padding:9px 16px;cursor:pointer}.s2e-reset-today-plan{margin:10px auto 0;display:flex;background:linear-gradient(180deg,#fff1f1 0%,#ffe7e7 100%);color:#ca2d2d;border:2px solid #f1b6b6}.s2e-today-head{text-align:center;margin-bottom:8px}.s2e-plan-secondary-head{margin:0 48px 10px}.s2e-today-compact-head{display:flex;align-items:center;justify-content:center;gap:10px;min-height:42px;margin:0 54px 10px 54px;text-align:center}.s2e-today-title{font-size:22px;font-weight:900;color:#183f9f;line-height:1.1}.s2e-today-date,.s2e-plan-main-sub,.s2e-today-progress{display:none!important}.s2e-plan-secondary-head .s2e-today-date{display:block!important;font-size:14px;font-weight:900;color:#607ca7;margin-top:6px}.s2e-today-count-badge{min-width:44px;height:32px;border-radius:999px;background:#eef5ff;border:1px solid #dbe7f7;color:#183f9f;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px}.s2e-today-list{display:flex;flex-direction:column;gap:8px}.s2e-today-item{background:#fff;border:1px solid #dbe7f7;border-radius:15px;padding:9px}.s2e-today-compact-card{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;min-height:78px}.s2e-today-item.done{background:#f4fbf6;border-color:#bfe7c8}.s2e-today-mainline{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:8px;align-items:center;min-width:0}.s2e-today-top{display:grid;grid-template-columns:36px 1fr;gap:8px;align-items:center;margin-bottom:8px}.s2e-today-icon{width:36px;height:36px;border-radius:12px;background:#f4f8ff;display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto}.s2e-today-text{min-width:0}.s2e-today-en{font-weight:900;color:#111b21;direction:ltr;text-align:left;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s2e-today-ar{font-weight:800;color:#666;direction:rtl;text-align:right;font-size:13px;line-height:1.2;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s2e-plan-status{display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:26px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:900;white-space:nowrap}.s2e-plan-status.done{background:#e8f8ee;color:#16783f;border:1px solid #aee2bf}.s2e-plan-status.notdone{background:#fff6e6;color:#996000;border:1px solid #f3c36a}.s2e-today-actions{display:grid;grid-template-columns:88px 88px;gap:7px}.s2e-today-start,.s2e-today-done{width:100%;min-height:36px;border:2px solid #183f9f;background:#fff;color:#183f9f;border-radius:13px;padding:6px 10px;font-size:14px;font-weight:900;cursor:pointer;white-space:nowrap;display:flex;align-items:center;justify-content:center}.s2e-today-start:hover,.s2e-today-done:hover{background:#183f9f;color:#fff}.s2e-today-done.done{background:#1f9d55;color:#fff;border-color:#1f9d55}.s2e-today-empty{text-align:center;font-weight:900;color:#183f9f;background:#fff;border:1px dashed #bad8ff;border-radius:15px;padding:12px}.s2e-plan-compact-footer{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.s2e-plan-footer-btn{min-height:38px;border:1px solid #dbe7f7;background:#f8fbff;color:#183f9f;border-radius:14px;padding:6px 10px;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;font-weight:900}.s2e-plan-footer-btn span{font-size:17px}.s2e-plan-footer-btn strong{font-size:13px}.s2e-plan-footer-btn em{min-width:24px;height:24px;border-radius:999px;background:#d88400;color:#fff;font-style:normal;display:flex;align-items:center;justify-content:center;font-size:12px}.s2e-reset-options{display:flex;flex-direction:column;gap:8px}.s2e-reset-option{min-height:46px;border-radius:15px;border:2px solid #183f9f;background:#fff;color:#183f9f;font-weight:900;font-size:15px;cursor:pointer}.s2e-reset-option:hover{background:#183f9f;color:#fff}.s2e-reset-option.danger{border-color:#ca2d2d;color:#ca2d2d}.s2e-reset-option.danger:hover{background:#ca2d2d;color:#fff}.s2e-reset-option.muted{border-color:#cfd9e6;color:#607ca7}.s2e-plan-pace-box{max-width:430px;margin:0 auto}.s2e-plan-missing-list{margin-top:2px}

@media(max-width:700px){.s2e-today-panel{padding:10px}.s2e-today-modal-compact,.s2e-plan-secondary-modal{padding:12px 10px}.s2e-today-compact-head{margin:0 48px 8px}.s2e-plan-secondary-head{margin:0 48px 10px}.s2e-today-title{font-size:19px}.s2e-today-compact-card{grid-template-columns:1fr;gap:7px;min-height:0}.s2e-today-actions{grid-template-columns:1fr 1fr}.s2e-today-start,.s2e-today-done{min-height:34px;font-size:13px}.s2e-today-en{font-size:15px}.s2e-plan-status{min-width:50px;font-size:11px}.s2e-plan-footer-btn strong{font-size:12px}}

@media(max-width:600px){
  :root{--base-font-size:17px;--chat-font-size:18px}
  .s2e-conv-wrapper{width:100%;height:82vh!important;margin:6px auto;border-radius:16px}
  .s2e-conv-header { grid-template-columns: 50px 1fr 90px !important; padding: 8px 10px; }
  .s2e-title-en { font-size: 17px !important; }
  .s2e-title-ar { font-size: 13px !important; }
  .s2e-screen{padding:11px}
  .s2e-bubble{max-width:90%}
  .s2e-tab{font-size:12px;padding:10px 2px}
  .s2e-btn-tool{font-size:12px;padding:5px 10px}
  .s2e-setting-row{align-items:flex-start;flex-direction:column}
  .s2e-chat-wrapper{padding-bottom:250px}
  .s2e-home-plan-btn{font-size:19px;min-height:46px;width:min(94%,370px)}.s2e-btn-lang{height:40px!important;min-width:70px!important;font-size:14px!important}.s2e-topics-screen #btnTodayPlan,.s2e-lesson-screen #btnTodayPlan{width:38px;min-width:38px;height:34px}.s2e-today-modal{border-radius:20px;padding:12px}.s2e-today-actions{grid-template-columns:1fr 1fr;gap:8px}.s2e-today-start,.s2e-today-done{min-height:42px;font-size:15px}
}

.s2e-title-ar:empty{display:none}.s2e-title-rtl{direction:rtl!important}.s2e-rtl-title{direction:rtl!important;text-align:right!important}.s2e-btn-gear{background:rgba(255,255,255,.22);border:none;color:#fff;height:42px;border-radius:22px;cursor:pointer;font-weight:900;min-width:42px;padding:0;font-size:20px;display:inline-flex;align-items:center;justify-content:center;}.s2e-btn-gear:hover{background:rgba(255,255,255,.35);} .s2e-modern-modal { font-family: Tahoma, Arial, sans-serif !important; } .s2e-modern-modal * { font-family: Tahoma, Arial, sans-serif !important; }

.s2e-ar-audio-btn{display:inline-flex;align-items:center;justify-content:center;margin-inline-start:8px;vertical-align:middle}
.s2e-text-ar.s2e-hidden .s2e-ar-audio-btn{display:none!important}

#tab-listen .s2e-text-en, #tab-practice .s2e-text-en { font-size:var(--chat-font-size) !important; }
#tab-listen .s2e-text-ar, #tab-practice .s2e-text-ar { font-size:calc(var(--chat-font-size) - 4px) !important; }
#tab-listen .s2e-speaker, #tab-practice .s2e-speaker { font-size:calc(var(--chat-font-size) - 7px) !important; }
button, .s2e-btn-tool, .s2e-inline-btn, .s2e-vocab-eye-btn, .s2e-msg-trans-btn, .s2e-tab, .s2e-action-mini, .s2e-quiz-submit { font-size:inherit; }
#tabBtnRecord,#tab-record{display:none !important;}
.s2e-practice-chat { padding-bottom: 260px !important; scroll-padding-bottom: 260px !important; }
.s2e-practice-line-row { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 8px !important; align-items: center !important; }
.s2e-practice-hear-btn { width: 34px !important; min-width: 34px !important; height: 34px !important; position: static !important; margin: 0 !important; }
.s2e-lesson-card .s2e-card-text { display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content: center !important; gap:2px !important; flex: 1; min-width:0; }
.s2e-lesson-card-main { width: 100% !important; text-align: left; }
.s2e-lang-ar .s2e-lesson-card-main { text-align: right; }
.s2e-lesson-status-badge { display: none; flex: 0 0 auto; padding: 4px 12px; color: #fff; font-size: 13px; font-weight: 900; border-radius: 50px; margin-inline-start: auto; white-space: nowrap; transition: 0.3s; }
.s2e-lesson-status-badge.active { display: inline-flex !important; }

/* اكتمل 100% (أخضر) */
.s2e-lesson-status-badge.done-100 { background: linear-gradient(135deg, #1f9d55, #28c76f); box-shadow: 0 4px 10px rgba(31,157,85,0.2); }

/* قيد التنفيذ 25% - 75% (برتقالي/أصفر) */
.s2e-lesson-status-badge.in-progress { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 4px 10px rgba(245,158,11,0.2); color: #fff; }

/* الدرس المقترح / التالي (أزرق نابض) */
.s2e-lesson-status-badge.recommended-next { background: linear-gradient(135deg, #183f9f, #1ea7ff); box-shadow: 0 4px 10px rgba(24,63,159,0.3); animation: s2ePulseBadge 2s infinite; }

@keyframes s2ePulseBadge {
    0% { transform: scale(1); box-shadow: 0 4px 10px rgba(24,63,159,0.3); }
    50% { transform: scale(1.05); box-shadow: 0 6px 15px rgba(24,63,159,0.5); }
    100% { transform: scale(1); box-shadow: 0 4px 10px rgba(24,63,159,0.3); }
}

/* تمييز الكارت الذي تمت زيارته مؤخراً (بالفعل موجود عندك لكن أضفنا له لمعان خفيف) */
.s2e-card-item.s2e-last-visited {
  border-color: #1ea7ff !important;
  background: #f4f9ff !important;
  border-right: 6px solid #1ea7ff !important;
}
#btnAutoPlay{order:1; min-width: 150px;}
#btnToggleTrans{order:2; min-width:120px;}
.s2e-close-settings-btn { position: absolute; top: 10px; left: 15px; background: #183f9f; border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-weight: 900; transition: 0.2s; box-shadow: 0 2px 6px rgba(24,63,159,0.3); }
.s2e-close-settings-btn:hover { background: #f44336; color: #fff; box-shadow: 0 2px 8px rgba(244,67,54,0.4); transform: scale(1.05); }

.s2e-quiz-submit { background: linear-gradient(135deg, #183f9f, #1ea7ff); color: #fff; border: none; padding: 12px 30px; border-radius: 25px; font-size: 18px; font-weight: 900; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 12px rgba(24,63,159,0.2); margin-top: 10px; }
.s2e-quiz-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(24,63,159,0.3); }
.s2e-sidebar-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999998; display: none; border-radius: 22px; }
.s2e-sidebar-overlay.active { display: block; }
.s2e-sidebar { position: absolute; top: 0; left: -300px; width: 280px; height: 100%; background: #fff; z-index: 999999; box-shadow: 4px 0 15px rgba(0,0,0,0.15); transition: 0.3s; display: flex; flex-direction: column; border-radius: 22px 0 0 22px; }
.s2e-sidebar.active { left: 0; }
.s2e-sidebar-header { padding: 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; }
.s2e-sidebar-header h3 { margin: 0; color: #183f9f; font-size: 20px; font-weight: 900; }
.s2e-sidebar-content { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 8px; }
.s2e-sidebar-item { padding: 12px 15px; background: #f4f7f9; border: none; border-radius: 12px; font-size: 16px; font-weight: bold; color: #111b21; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: 0.2s; text-align: right; justify-content: space-between; }
.s2e-lang-en .s2e-sidebar-item { text-align: left; }
.s2e-sidebar-item:hover { background: #eaf5ff; color: #183f9f; }
.s2e-sidebar-submenu { background: #fafcfd; border-radius: 8px; margin: 5px 10px 10px; padding: 10px; border: 1px solid #eaf5ff; display: none; }
.s2e-sidebar-top-title { display: block; width: 100%; background: #eaf5ff; border: 1px solid #b5d3f8; padding: 10px; border-radius: 8px; font-size: 15px; font-weight: 900; color: #183f9f; margin-bottom: 5px; text-align: right; cursor: pointer; transition: 0.2s; }
.s2e-lang-en .s2e-sidebar-top-title { text-align: left; }
.s2e-sidebar-top-title:hover { background: #d0e7ff; }
.s2e-sidebar-lessons-menu { padding: 5px 10px; border-right: 2px solid #b5d3f8; margin-bottom: 10px; display: none; }
.s2e-lang-en .s2e-sidebar-lessons-menu { border-right: none; border-left: 2px solid #b5d3f8; }
.s2e-sidebar-sub-item { display: block; width: 100%; text-align: right; background: #fff; border: 1px solid #e0e0e0; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: bold; color: #111b21; cursor: pointer; margin-bottom: 5px; transition: 0.2s; }
.s2e-lang-en .s2e-sidebar-sub-item { text-align: left; }
.s2e-sidebar-sub-item:hover { background: #1ea7ff; border-color: #1ea7ff; color: #fff; transform: scale(1.02); }



/* إصلاح مسافة سهم العودة */
.s2e-header-left { gap: 12px !important; }
@media(max-width:600px){
  .s2e-practice-chat { padding-bottom: 20px !important; scroll-padding-bottom: 20px !important; }
  .s2e-lesson-card .s2e-card-text{ grid-template-columns:1fr !important; gap:8px !important; }
  .s2e-tool-row{ gap:6px !important; flex-wrap:nowrap !important; overflow-x:auto !important; justify-content:center !important; }
  #btnAutoPlay{ min-width:132px; font-size:12px !important; }
  #btnToggleTrans{ min-width:105px; font-size:12px !important; }
}
.s2e-click-speak { cursor: pointer; }
#vocabChatBox .s2e-bubble { overflow: visible !important; }
.s2e-practice-container { position: relative; }
.s2e-practice-chat { padding-bottom: 320px !important; overflow: visible !important; }
#practiceChatBox .s2e-bubble { overflow: visible !important; margin-top: 6px !important; }
#practiceChatBox .s2e-prac-badge { margin: 0 0 8px 0 !important; }
#practiceChatBox .s2e-text-en { white-space: normal !important; overflow: visible !important; }
.s2e-quiz-options { align-items: stretch !important; }
.s2e-quiz-opt { direction: ltr; min-height: 54px; transition: .18s; }
.s2e-quiz-opt.selected { border-color: #183f9f !important; background: #eaf5ff !important; opacity: 1 !important; }
.s2e-quiz-opt.selected::after { border-color: #183f9f !important; background: radial-gradient(circle, #183f9f 0 45%, transparent 48%); }
.s2e-quiz-opt:disabled { cursor: default; }
.s2e-quiz-trans-text.s2e-hidden { display: none !important; }

.s2e-start-card{max-width:560px;margin:36px auto;padding:22px 18px;border-radius:24px;background:rgba(255,255,255,.96);border:2px solid #d9e8fb;box-shadow:0 10px 26px rgba(24,63,159,.14);text-align:center;direction:rtl}
.s2e-lang-en .s2e-start-card{direction:ltr}
.s2e-speed-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px auto 6px;color:#183f9f;font-weight:900}
.s2e-quiz-opt.s2e-highlight{background:#fff6bf!important;border-color:#f1c232!important;color:#000!important}

/* التصميم الحديث للبوب أب في منتصف الشاشة تماماً */
.s2e-modern-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(244, 247, 249, 0.85); backdrop-filter: blur(4px); z-index: 999999; display: flex; justify-content: center; align-items: center; padding-top: 0; }
.s2e-modern-modal { background: #fff; width: 90%; max-width: 340px; border-radius: 20px; box-shadow: 0 10px 35px rgba(24,63,159,0.15); border: 1px solid #eef2f6; overflow: hidden; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); direction: rtl; }
.s2e-modal-header { background: linear-gradient(135deg, #183f9f, #1ea7ff); color: #fff; padding: 18px; text-align: center; font-size: 18px; font-weight: 900; }
.s2e-modal-body { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.s2e-modal-row label { display: block; font-size: 14px; color: #666; margin-bottom: 8px; font-weight: 900; }
.s2e-toggle-group { display: flex; background: #f4f7f9; border-radius: 12px; padding: 4px; gap: 4px; border: 1px solid #e2e8f0; }
.s2e-tgl-btn { flex: 1; border: none; background: transparent; padding: 10px; border-radius: 8px; font-size: 14px; font-weight: 900; color: #666; cursor: pointer; transition: all 0.2s; }
.s2e-tgl-btn.active { background: #fff; color: #183f9f; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.s2e-modal-start-btn { background: #1ea7ff; color: #fff; border: none; padding: 14px; border-radius: 14px; font-size: 16px; font-weight: 900; cursor: pointer; margin-top: 5px; transition: transform 0.2s; box-shadow: 0 4px 12px rgba(30,167,255,0.25); }
.s2e-modal-start-btn:hover { transform: translateY(-2px); }

.s2e-onb-btn { width: 100%; padding: 16px; border-radius: 16px; border: 2px solid #183f9f; background: #fff; color: #183f9f; font-size: 17px; font-weight: 900; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 12px rgba(24,63,159,0.08); }
.s2e-onb-btn:hover { background: linear-gradient(135deg, #183f9f, #1ea7ff); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(24,63,159,0.2); }
.onb-step { animation: popIn 0.3s ease-out; }
.s2e-onb-back-btn { position: absolute; top: 15px; left: 15px; background: transparent; border: none; color: #183f9f; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 5px; transition: 0.2s; border-radius: 50%; }
.s2e-onb-back-btn:hover { transform: translateX(-3px); opacity: 0.7; background: rgba(24,63,159,0.05); }
/* إزالة الخط المتقطع من فقاعات الترجمة في الكلمات بعد حذف الاسم */
.s2e-vocab-ar-bubble .s2e-text-ar {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* ================================
   إصلاح مكان زر القائمة وسهم الرجوع
================================ */

.s2e-conv-header {
  padding: 10px 14px;
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr) auto !important;
  align-items: center;
  min-height: 65px;
  gap: 8px;
  overflow: hidden;
}

.s2e-header-left {
  width: 120px;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 22px !important;
}

#btnSidebarMenu {
  flex: 0 0 42px;
}

#s2eBtnBack {
  flex: 0 0 34px;
  margin: 0 !important;
}

/* زر الإعدادات يظهر داخل شاشة الدرس فقط عبر JavaScript */
#btnSettings { display: none; }

@media(max-width:600px) {
  .s2e-conv-header {
    grid-template-columns: 112px minmax(0, 1fr) auto !important;
  }

  .s2e-header-left {
    width: 112px !important;
    gap: 18px !important;
  }
}




.s2e-topic-list-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  font-size: 30px !important;
}

.s2e-topic-list-text {
  min-width: 0 !important;
}

.s2e-topic-open-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eaf5ff;
  color: #183f9f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}

/* عنوان قائمة المحادثات بعد فتح الموضوع */
.s2e-topic-lessons-head {
  background: linear-gradient(135deg, #f0f7ff, #e6f0fa);
  border: 2px dashed #b5d3f8;
  border-radius: 18px;
  padding: 14px 16px;
  margin: 4px 0 14px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(24,63,159,.05);
}

.s2e-topic-lessons-title-en {
  font-size: 19px;
  font-weight: 900;
  color: #183f9f;
  direction: ltr;
  line-height: 1.25;
}

.s2e-topic-lessons-title-ar {
  font-size: 14px;
  font-weight: 900;
  color: #607ca7;
  direction: rtl;
  margin-top: 5px;
  line-height: 1.35;
}

/* كروت معلومات المفردات */
.s2e-info-card {
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(24,63,159,.05);
}

.s2e-info-title {
  font-size: 20px;
  font-weight: 900;
  color: #183f9f;
  direction: ltr;
  text-align: left;
  line-height: 1.35;
}

.s2e-info-ar {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 800;
  color: #607ca7;
  direction: rtl;
  text-align: right;
  line-height: 1.7;
}

.s2e-coming-pill {
  background: #eaf5ff;
  color: #183f9f;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

@media(max-width:600px) {
  .s2e-topic-list-card,
  .s2e-home-main-card {
    min-height: 76px !important;
    padding: 12px 14px !important;
  }

  .s2e-topic-list-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 25px !important;
  }

  .s2e-topic-open-arrow {
    width: 31px;
    height: 31px;
    font-size: 26px;
  }

 .s2e-card-en,
 .s2e-topic-en,
 .s2e-lesson-en {
   font-size: 18px !important;
 }

 .s2e-card-ar,
 .s2e-topic-ar,
 .s2e-lesson-ar {
   font-size: 13px !important;
 }

 .s2e-icon-box,
 .s2e-lesson-number,
 .s2e-topic-list-icon {
   width: 50px !important;
   height: 50px !important;
   font-size: 25px !important;
 }

  .s2e-info-title {
    font-size: 17px;
  }

  .s2e-info-ar {
    font-size: 14px;
  }
}




/* ================================
   القائمة الجانبية العامة
================================ */

.s2e-sidebar {
  width: 320px !important;
  left: -340px !important;
}

.s2e-sidebar.active {
  left: 0 !important;
}

.s2e-sidebar-header {
  padding: 22px 20px !important;
  background: #fff !important;
}

.s2e-sidebar-header h3 {
  color: #183f9f !important;
  font-size: 26px !important;
  font-weight: 900 !important;
}

.s2e-sidebar-content {
  padding: 16px 14px !important;
  gap: 10px !important;
}

.s2e-sidebar-menu-item {
  width: 100%;
  min-height: 68px;
  border: 1px solid #edf2f7;
  background: #f4f7f9;
  border-radius: 16px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  transition: .2s;
  box-shadow: 0 4px 10px rgba(24,63,159,.04);
}

.s2e-sidebar-menu-item:hover {
  background: #eaf5ff;
  border-color: #b5d3f8;
  transform: translateY(-1px);
}

.s2e-sidebar-menu-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #eef6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
}

.s2e-sidebar-menu-text {
  min-width: 0;
  display: block;
}

.s2e-sidebar-menu-title {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: #111b21;
  line-height: 1.2;
}

.s2e-sidebar-menu-sub {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 900;
  color: #607ca7;
  direction: rtl;
  text-align: right;
  line-height: 1.25;
}

.s2e-lang-en .s2e-sidebar-menu-item {
  direction: ltr;
  text-align: left;
}

.s2e-lang-ar .s2e-sidebar-menu-item {
  direction: ltr;
  text-align: left;
}

@media(max-width:600px) {
  .s2e-sidebar {
    width: 86% !important;
    left: -90% !important;
  }

  .s2e-sidebar.active {
    left: 0 !important;
  }

  .s2e-sidebar-menu-title {
    font-size: 17px;
  }

  .s2e-sidebar-menu-sub {
    font-size: 12px;
  }
}
/* ================================
   خلفية الواتساب على شاشة الدرس كاملة
================================ */

#screen-simulator,
#screen-simulator .s2e-simulator-body,
#tab-vocab,
#tab-listen,
#tab-practice,
#tab-quiz,
.s2e-wa-bg {
  background-color: #efeae2 !important;
  background-image: url('/s2e-data/conversation/images/whatsapp_background.jpg') !important;
  background-repeat: repeat !important;
  background-size: 360px auto !important;
  background-position: top left !important;
  background-attachment: local !important;
}

.s2e-simulator-body {
  padding: 0 !important;
  min-height: calc(100vh - 160px) !important;
}

.s2e-tab-content {
  min-height: calc(100vh - 160px) !important;
}

.s2e-wa-bg {
  border-radius: 0 !important;
  min-height: calc(100vh - 160px) !important;
  box-sizing: border-box !important;
}
/* ================================
   بوب أب اختيار مستوى المحادثة
================================ */
.s2e-level-overlay {
  position: fixed;
  inset: 0;
  background: rgba(244, 247, 249, 0.88);
  backdrop-filter: blur(4px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.s2e-level-modal {
  width: min(92%, 390px);
  background: #fff;
  border-radius: 24px;
  border: 1px solid #d9e8fb;
  box-shadow: 0 18px 45px rgba(24,63,159,.18);
  padding: 20px;
  position: relative;
  animation: popIn .25s ease-out;
  direction: rtl;
}

.s2e-lang-en .s2e-level-modal {
  direction: ltr;
}


.s2e-level-title {
  text-align: center;
  color: #183f9f;
  font-size: 22px;
  font-weight: 900;
  margin-top: 8px;
}

.s2e-level-sub {
  text-align: center;
  color: #607ca7;
  font-size: 14px;
  font-weight: 900;
  margin-top: 6px;
  margin-bottom: 14px;
}

.s2e-level-lesson-en {
  direction: ltr;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: #111b21;
  margin-bottom: 4px;
}

.s2e-level-lesson-ar {
  direction: rtl;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  color: #607ca7;
  margin-bottom: 14px;
}

.s2e-level-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.s2e-level-option {
  width: 100%;
  min-height: 68px;
  border: 2px solid #e6eef8;
  background: #f8fbff;
  border-radius: 18px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  transition: .2s;
  text-align: left;
}

.s2e-level-option:hover {
  border-color: #1ea7ff;
  background: #eaf5ff;
  transform: translateY(-1px);
}

.s2e-level-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 4px 10px rgba(24,63,159,.08);
}

.s2e-level-text {
  min-width: 0;
}

.s2e-level-en {
  display: block;
  direction: ltr;
  text-align: left;
  color: #183f9f;
  font-size: 18px;
  font-weight: 900;
}

.s2e-level-ar {
  display: block;
  direction: rtl;
  text-align: right;
  color: #607ca7;
  font-size: 14px;
  font-weight: 900;
  margin-top: 3px;
}

@media(max-width:600px) {
  .s2e-level-modal {
    width: 94%;
    border-radius: 20px;
    padding: 18px 14px;
  }

  .s2e-level-title {
    font-size: 20px;
  }

  .s2e-level-option {
    min-height: 62px;
    border-radius: 16px;
  }

  .s2e-level-en {
    font-size: 17px;
  }

  .s2e-level-ar {
    font-size: 13px;
  }
}


/* حركة بسيطة عند فتح كل شاشة حتى يشعر الطالب أنه انتقل */
.s2e-screen.active {
  animation: s2eScreenFadeIn .22s ease;
}

@keyframes s2eScreenFadeIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ================================
   تصميم موحد وهادئ لكل القوائم
   لون واحد فقط: الأزرق الأساسي
================================ */

.s2e-home-main-card,
.s2e-category-card,
.s2e-topic-list-card,
.s2e-lesson-card {
  min-height: 82px !important;
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid #eef2f6 !important;
  border-left: 6px solid #183f9f !important;
  box-shadow: 0 4px 12px rgba(24,63,159,.05) !important;
  padding: 15px 16px !important;
  position: relative !important;
}

.s2e-home-main-card:hover,
.s2e-category-card:hover,
.s2e-topic-list-card:hover,
.s2e-lesson-card:hover {
  border-color: #183f9f !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(24,63,159,.10) !important;
}

/* نفس الخط ونفس الحجم في كل المستويات */
.s2e-card-en,
.s2e-topic-en,
.s2e-lesson-en,
.s2e-topic-list-card .s2e-card-en,
.s2e-home-main-card .s2e-card-en {
  font-size: 21px !important;
  font-weight: 900 !important;
  color: #183f9f !important;
  line-height: 1.25 !important;
  margin-bottom: 5px !important;
  direction: ltr !important;
  text-align: left !important;
}

.s2e-card-ar,
.s2e-topic-ar,
.s2e-lesson-ar,
.s2e-topic-list-card .s2e-card-ar,
.s2e-home-main-card .s2e-card-ar {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #607ca7 !important;
  line-height: 1.35 !important;
  margin-top: 4px !important;
  direction: rtl !important;
  text-align: right !important;
}

/* الأيقونة بنفس النمط في كل القوائم */
.s2e-icon-box,
.s2e-topic-list-icon,
.s2e-lesson-number {
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  background: #f4f8ff !important;
  color: #183f9f !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* سهم الدخول بنفس اللون */
.s2e-topic-open-arrow {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #eaf5ff !important;
  color: #183f9f !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}


/* حركة هادئة جدًا عند الانتقال */
.s2e-screen.active {
  animation: s2eScreenFadeIn .18s ease;
}

@keyframes s2eScreenFadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media(max-width:600px) {
  .s2e-card-en,
  .s2e-topic-en,
  .s2e-lesson-en,
  .s2e-topic-list-card .s2e-card-en,
  .s2e-home-main-card .s2e-card-en {
    font-size: 18px !important;
  }

  .s2e-card-ar,
  .s2e-topic-ar,
  .s2e-lesson-ar,
  .s2e-topic-list-card .s2e-card-ar,
  .s2e-home-main-card .s2e-card-ar {
    font-size: 13px !important;
  }

  .s2e-icon-box,
  .s2e-topic-list-icon,
  .s2e-lesson-number {
    width: 50px !important;
    height: 50px !important;
    font-size: 25px !important;
  }
}

/* ================================
   إصلاح بوب أب التدريب ومنع الاسكرول الأفقي
================================ */

.s2e-practice-setup-modal {
  max-width: 360px !important;
  overflow: hidden !important;
}

.s2e-practice-setup-body {
  gap: 16px !important;
  overflow: hidden !important;
}

.s2e-practice-role-preview {
  font-size: 17px;
  font-weight: 900;
  color: #111b21;
  text-align: center;
  line-height: 1.5;
}

.s2e-practice-role-preview strong {
  color: #183f9f;
  font-size: 21px;
}

.s2e-practice-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.s2e-practice-mode-row .s2e-tgl-btn {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 56px;
  white-space: normal !important;
  font-size: 15px !important;
  border: 2px solid #dbe7f7;
}

.s2e-practice-mode-row .s2e-tgl-btn.active {
  background: #183f9f !important;
  color: #fff !important;
  border-color: #183f9f !important;
}

.s2e-practice-start-btn {
  width: 100% !important;
  min-width: 0 !important;
  background: #183f9f !important;
}

.s2e-practice-header-card {
  text-align: center;
  margin-bottom: 15px;
  background: #eaf5ff;
  border: 2px dashed #b5d3f8;
  padding: 10px;
  border-radius: 12px;
  color: #183f9f;
  font-weight: 900;
}

.s2e-practice-mode-label {
  margin-top: 5px;
  font-size: 13px;
  color: #607ca7;
}

.s2e-practice-user-mark {
  color: #183f9f;
  font-size: 14px;
}

.s2e-practice-done-btn {
  background: #183f9f !important;
  color: #fff !important;
  border-color: #183f9f !important;
}

@media(max-width:600px) {
  .s2e-practice-setup-modal {
    max-width: 330px !important;
  }

  .s2e-practice-mode-row {
    gap: 6px;
  }

  .s2e-practice-mode-row .s2e-tgl-btn {
    font-size: 13px !important;
    min-height: 52px;
    padding: 8px 6px;
  }

  .s2e-plan-summary-grid {
    gap: 6px;
  }

  .s2e-plan-summary-num {
    font-size: 19px;
  }

  .s2e-plan-summary-label {
    font-size: 11px;
  }
}
/* ================================
   تحسين تجربة التدريب النهائية
   إعادة التدريب تظهر في النهاية فقط
================================ */

.s2e-practice-note {
  background: #f8fbff;
  border: 1px solid #dbe7f7;
  border-radius: 14px;
  padding: 10px 12px;
  color: #607ca7;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.6;
  text-align: center;
}

.s2e-practice-controls {
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.s2e-practice-controls #btnPracticeAuto {
  min-width: 150px;
}

.s2e-practice-controls #practiceNextBtn {
  min-width: 140px;
}

.s2e-practice-complete-modal .s2e-completed-header {
  background: linear-gradient(135deg, #183f9f, #1ea7ff) !important;
}

.s2e-practice-complete-modal .s2e-completed-body {
  gap: 12px !important;
}

.s2e-practice-complete-modal .s2e-completed-btn {
  min-height: 56px;
}

.s2e-practice-mode-row .s2e-tgl-btn.active {
  background: #183f9f !important;
  color: #fff !important;
  border-color: #183f9f !important;
}

.s2e-practice-done-btn {
  background: #183f9f !important;
  color: #fff !important;
  border-color: #183f9f !important;
}

#practiceChatBox .s2e-manual-actions {
  display: none !important;
}

#practiceChatBox .s2e-bubble.s2e-show-actions .s2e-manual-actions {
  display: flex !important;
}

@media(max-width:600px) {
  .s2e-practice-controls {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .s2e-practice-controls #btnPracticeAuto,
  .s2e-practice-controls #practiceNextBtn {
    min-width: 120px;
    font-size: 13px !important;
  }

  .s2e-practice-note {
    font-size: 12px;
  }
}


/* ================================
 الخطة اليومية الجديدة: محادثات اليوم ظاهرة + الناقص داخل أيقونة + إعادة ضبط منظمة
================================ */
.s2e-plan-main-sub {
 margin-top: 6px;
 color: #607ca7;
 font-size: 13px;
 font-weight: 900;
 line-height: 1.5;
}
.s2e-plan-today-visible {
 margin-top: 12px;
}
.s2e-plan-bottom-icons {
 display: grid;
 grid-template-columns: 1fr;
 gap: 10px;
 margin-top: 14px;
}
.s2e-plan-icon-card {
 width: 100%;
 min-height: 72px;
 border: 1px solid #dbe7f7;
 background: #f8fbff;
 border-radius: 18px;
 padding: 12px;
 display: grid;
 grid-template-columns: 48px minmax(0,1fr) auto;
 gap: 12px;
 align-items: center;
 cursor: pointer;
 text-align: right;
 box-shadow: 0 4px 12px rgba(24,63,159,.06);
}
.s2e-lang-en .s2e-plan-icon-card {
 text-align: left;
}
.s2e-plan-icon-card:hover {
 background: #eaf5ff;
 border-color: #183f9f;
 transform: translateY(-1px);
}
.s2e-plan-icon-main {
 width: 48px;
 height: 48px;
 border-radius: 16px;
 background: #eaf5ff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 25px;
}
.s2e-plan-icon-text {
 min-width: 0;
 display: flex;
 flex-direction: column;
 gap: 4px;
}
.s2e-plan-icon-text strong {
 color: #183f9f;
 font-size: 17px;
 font-weight: 900;
 line-height: 1.25;
}
.s2e-plan-icon-text small {
 color: #607ca7;
 font-size: 12px;
 font-weight: 900;
 line-height: 1.4;
}
.s2e-plan-icon-count {
 min-width: 34px;
 height: 34px;
 border-radius: 999px;
 background: #ca7a00;
 color: #fff;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 0 10px;
 font-weight: 900;
 font-size: 14px;
}
.s2e-plan-reset-card .s2e-plan-icon-count {
 background: #183f9f;
}
.s2e-plan-back-btn {
 min-height: 42px;
 border: none;
 border-radius: 14px;
 background: #eaf5ff;
 color: #183f9f;
 font-weight: 900;
 font-size: 14px;
 padding: 8px 12px;
 cursor: pointer;
 margin-bottom: 10px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
}
.s2e-plan-back-btn:hover {
 background: #183f9f;
 color: #fff;
}
.s2e-plan-status {
 display: inline-flex;
 margin-top: 6px;
 padding: 3px 9px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 900;
}
.s2e-plan-status.done {
 background: #eaf7ef;
 color: #1f7a43;
 border: 1px solid #bfe7c8;
}
.s2e-plan-status.notdone {
 background: #fff4e5;
 color: #9a5a00;
 border: 1px solid #f2d09a;
}
.s2e-today-item-undone {
 border-color: #f2d09a !important;
 background: #fffdf8 !important;
}
@media(max-width:600px) {
 .s2e-plan-icon-card {
  min-height: 68px;
  grid-template-columns: 44px minmax(0,1fr) auto;
  gap: 9px;
 }
 .s2e-plan-icon-main {
  width: 44px;
  height: 44px;
  font-size: 22px;
 }
 .s2e-plan-icon-text strong {
  font-size: 15px;
 }
 .s2e-plan-icon-text small {
  font-size: 11px;
 }
}

/* ================================
 التدريب الجديد: التالي في دور الطالب فقط + رفع آخر رسالة داخل الشاشة
================================ */
.s2e-practice-simple-card {
 max-width: 620px;
 margin: 18px auto;
 padding: 18px;
 border-radius: 22px;
 background: #fff;
 border: 1px solid #dbe7f7;
 box-shadow: 0 8px 20px rgba(24,63,159,.09);
 text-align: center;
 direction: rtl;
}
.s2e-lang-en .s2e-practice-simple-card { direction: ltr; }
.s2e-practice-simple-title {
 font-size: 21px;
 color: #183f9f;
 font-weight: 900;
 margin-bottom: 8px;
 line-height: 1.35;
}
.s2e-practice-simple-sub {
 color: #607ca7;
 font-size: 14px;
 font-weight: 900;
 line-height: 1.7;
 margin-bottom: 14px;
}
.s2e-practice-role-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
 gap: 10px;
}
.s2e-practice-role-card {
 min-height: 64px;
 border: 2px solid #dbe7f7;
 background: #f8fbff;
 color: #183f9f;
 border-radius: 18px;
 font-size: 17px;
 font-weight: 900;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 transition: .18s;
}
.s2e-practice-role-card:hover {
 background: #eaf5ff;
 border-color: #183f9f;
 transform: translateY(-1px);
}
.s2e-practice-start-actions {
 display: flex;
 flex-direction: column;
 gap: 10px;
 max-width: 360px;
 margin: 0 auto;
}
.s2e-practice-main-btn,
.s2e-practice-secondary-btn {
 width: 100%;
 min-height: 52px;
 border-radius: 17px;
 font-size: 17px;
 font-weight: 900;
 cursor: pointer;
 border: 2px solid #183f9f;
}
.s2e-practice-main-btn {
 background: linear-gradient(135deg, #183f9f, #1ea7ff);
 color: #fff;
 box-shadow: 0 8px 18px rgba(24,63,159,.18);
}
.s2e-practice-secondary-btn {
 background: #fff;
 color: #183f9f;
}
.s2e-practice-top-note {
 margin: 10px 12px 0;
 background: #fff;
 border: 1px solid #dbe7f7;
 border-radius: 16px;
 padding: 10px 12px;
 color: #183f9f;
 font-size: 14px;
 font-weight: 900;
 text-align: center;
 direction: rtl;
}
.s2e-lang-en .s2e-practice-top-note { direction: ltr; }
#practiceChatBox.s2e-practice-chat,
.s2e-practice-chat {
 padding-bottom: 540px !important;
 scroll-padding-bottom: 540px !important;
 overflow: visible !important;
}
#practiceChatBox .s2e-bubble {
 margin-bottom: 34px !important;
}
.s2e-practice-turn-badge {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 justify-content: center;
 margin-bottom: 7px;
 padding: 7px 10px;
 border-radius: 14px;
 background: #eaf5ff;
 color: #183f9f;
 font-size: 13px;
 font-weight: 900;
 line-height: 1.45;
 direction: rtl;
 text-align: right;
}
.s2e-lang-en .s2e-practice-turn-badge {
 direction: ltr;
 text-align: left;
 align-items: flex-start;
}
.s2e-practice-user-wait {
 background: #fff8e8;
 border: 1px solid #f2d09a;
 color: #8a5200;
}
.s2e-practice-done-btn {
 min-width: 130px;
 background: #183f9f !important;
 color: #fff !important;
 border-color: #183f9f !important;
}
/* ممنوع تغيير شكل الفقاعة أثناء السماع في التدريب */
#practiceChatBox .s2e-bubble.s2e-playing,
#practiceChatBox .s2e-bubble.s2e-highlight,
#practiceChatBox .s2e-text-en.s2e-highlight,
#practiceChatBox .s2e-text-ar.s2e-highlight {
 background-color: inherit !important;
 color: inherit !important;
 border-color: inherit !important;
 transform: none !important;
 outline: none !important;
 box-shadow: 0 1px 2px rgba(0,0,0,.15) !important;
}
#practiceChatBox .s2e-action-mini:disabled {
 opacity: .75;
 cursor: default;
}
@media(max-width:600px) {
 #practiceChatBox.s2e-practice-chat,
 .s2e-practice-chat {
  padding-bottom: 430px !important;
  scroll-padding-bottom: 430px !important;
 }
 #practiceChatBox .s2e-bubble {
  margin-bottom: 28px !important;
 }
}
@media(max-width:600px) {
 .s2e-plan-accordion-head {
  grid-template-columns: 42px minmax(0,1fr) auto;
  min-height: 58px;
 }
 .s2e-plan-accordion-icon {
  width: 42px;
  height: 42px;
  font-size: 22px;
 }
 .s2e-plan-accordion-title {
  font-size: 15px;
 }
 .s2e-practice-role-grid {
  grid-template-columns: 1fr;
 }
}


/* ================================
 الاختبار: ثبات الشاشة بعد اختيار الإجابة + تعليم الصح والخطأ
================================ */
.s2e-quiz-feedback-stay {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 10px;
 margin-top: 12px;
}
.s2e-quiz-feedback-msg {
 width: 100%;
 text-align: center;
 font-size: 18px;
 font-weight: 900;
 line-height: 1.45;
}
.s2e-quiz-opt.correct {
 border-color: #1f9d55 !important;
 background: #eaf7ef !important;
 opacity: 1 !important;
}
.s2e-quiz-opt.wrong {
 border-color: #d92d20 !important;
 background: #fff1f0 !important;
 opacity: 1 !important;
}
.s2e-quiz-mark {
 position: absolute;
 left: 14px;
 top: 50%;
 transform: translateY(-50%);
 font-size: 22px;
 z-index: 2;
}
.s2e-lang-en .s2e-quiz-mark {
 left: auto;
 right: 14px;
}


/* reset setup small button */
.s2e-reset-setup-row { justify-content: center; border-top: 1px solid #e5edf8; margin-top: 8px; padding-top: 12px; }
.s2e-reset-setup-btn { width: auto !important; min-width: 100px; padding: 8px 14px !important; border-radius: 12px !important; border-color: #d0d7e2 !important; color: #183f9f !important; background: #fff !important; }
.s2e-reset-setup-warning { font-weight: 900; line-height: 1.7; text-align: center; color: #111b21; }

/* Professional quiz result: icons + next button, no written feedback, no scroll jump */
.s2e-quiz-opt{min-height:58px;overflow:visible!important;position:relative!important;padding-right:76px!important;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.s2e-quiz-opt.correct{background:#ecfff3!important;border:2px solid #16a34a!important;box-shadow:0 0 0 3px rgba(22,163,74,.10)!important}
.s2e-quiz-opt.wrong{background:#fff1f1!important;border:2px solid #dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.10)!important}
.s2e-quiz-opt.correct::after,.s2e-quiz-opt.wrong::after{display:none!important}
.s2e-quiz-result-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:1000;line-height:1;color:#fff;z-index:5;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.s2e-quiz-correct-icon{background:#16a34a}
.s2e-quiz-wrong-icon{background:#dc2626}
.s2e-quiz-feedback-msg{display:none!important;height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
.s2e-quiz-feedback-stay{display:flex!important;justify-content:center!important;align-items:center!important;margin:22px 0 6px!important;padding:0!important;min-height:48px!important;background:transparent!important;border:0!important;box-shadow:none!important}
.s2e-quiz-next-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:170px!important;height:50px!important;padding:0 30px!important;border:0!important;border-radius:999px!important;background:linear-gradient(135deg,#1f4db8,#1ea7ff)!important;color:#fff!important;font-weight:900!important;font-size:20px!important;cursor:pointer!important;box-shadow:0 8px 18px rgba(30,96,200,.22)!important}
.s2e-quiz-next-btn:active{transform:scale(.98)!important}
.s2e-quiz-opt:disabled{cursor:default;opacity:1!important}
.s2e-quiz-opt .s2e-poll-en,.s2e-quiz-opt .s2e-poll-ar{padding-inline-end:12px}
.s2e-completed-clean .s2e-completed-header{font-weight:1000;letter-spacing:0;background:linear-gradient(135deg,#183f9f,#1ea7ff);color:#fff}
.s2e-completed-clean .s2e-completed-btn{box-shadow:none!important}





/* EMERGENCY FIX: fallback system back button if HTML version has no #s2eBtnBack */
.s2e-system-back-fallback{
  position:fixed;
  top:12px;
  inset-inline-start:12px;
  z-index:9999;
  width:42px;
  height:42px;
  border:0;
  border-radius:14px;
  background:#ffffff;
  color:#2563eb;
  box-shadow:0 8px 24px rgba(15,23,42,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.s2e-system-back-fallback:hover{background:#eff6ff;}


.s2e-resume-modal {
  position: relative !important;
  text-align: center !important;
}
.s2e-resume-message {
  margin: 12px 0 16px !important;
  color: #334155 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  font-weight: 700 !important;
}
.s2e-resume-actions {
  display: grid !important;
  gap: 10px !important;
}
.s2e-resume-home-btn {
  background: #eef2f7 !important;
  color: #1f2937 !important;
  box-shadow: none !important;
}
.s2e-resume-home-btn:hover {
  background: #e2e8f0 !important;
}


/* Practice screen stability fixes: keep replay/translation toggles visually balanced. */
.s2e-practice-chat {
    scroll-behavior: smooth;
    overflow-anchor: none;
}
.s2e-practice-trans-text.s2e-hidden {
    display: none !important;
}
/* تمييز الكارت الذي تمت زيارته مؤخراً */
.s2e-card-item.s2e-last-visited {
  border-color: #1ea7ff !important;
  background: #f0f7ff !important;
  box-shadow: 0 4px 15px rgba(30,167,255,0.15) !important;
}
/* ========================================================= */
/* ===== إصلاح زر الإغلاق (X) والزوم المزعج في البحث ===== */
/* ========================================================= */

/* 1. منع تكبير الشاشة (Zoom) عند الضغط على مربع البحث في الجوال */
input.s2e-smart-input {
  font-size: 16px !important;
}

/* 2. تثبيت الشاشة ومنعها من التحرك نهائياً عند فتح أي بوب أب */
.s2e-modern-overlay, .s2e-level-overlay, .s2e-resume-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(244, 247, 249, 0.85) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 999999 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.s2e-completed-modal, .s2e-modern-modal, .s2e-level-modal {
  position: relative !important;
  margin: auto !important;
  transform: none !important;
}

/* 3. زر الإغلاق (X) - ضبط اللون حسب خلفية النافذة */

/* التموضع والحجم المشترك لجميع أزرار الإغلاق */
.s2e-modal-x, .s2e-completed-x, .s2e-level-close {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important; /* تثبيت في اليسار دائمًا */
  right: auto !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 9999999 !important;
  line-height: 1 !important;
  padding: 0 !important;
  padding-bottom: 2px !important;
  transition: all 0.2s ease !important;
}

/* أ- للنوافذ ذات الهيدر الأزرق (مثل: اكتمال القسم) -> الإكس أبيض */
.s2e-modal-x, .s2e-completed-x {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border: none !important; /* إزالة الحدود ليصبح شكل الزر أنظف */
}
.s2e-modal-x:hover, .s2e-completed-x:hover {
  background: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

/* ب- لنافذة اختيار المستوى ذات الخلفية البيضاء -> الإكس أزرق */
.s2e-level-close {
  background: #eaf5ff !important; /* خلفية سماوية فاتحة */
  color: #183f9f !important; /* لون الإكس أزرق غامق */
  border: 1px solid #b5d3f8 !important;
}
.s2e-level-close:hover {
  background: #183f9f !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
}
/* إخفاء مساحة زر السؤال التالي قبل ظهوره */
.s2e-quiz-feedback-stay:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}