/* SnleNotes student experience — generated from resources/design/tokens.json. */
:root {
  color-scheme: light;
  --sn-brand-50:#f0f0f4;--sn-brand-100:#e2e2e8;--sn-brand-500:#555560;
  --sn-brand-600:#303038;--sn-brand-700:#202127;--sn-brand-900:#19191f;
  --sn-bg:#f8f8fb;--sn-surface:#fff;--sn-surface-subtle:#f0f0f6;
  --sn-text:#19191f;--sn-text-muted:#5e5e6b;--sn-border:#dedee8;
  --sn-success:#177a55;--sn-danger:#b4233c;--sn-warning:#a15c08;--sn-info:#2563a9;
  --sn-shadow-sm:0 1px 2px rgba(25,25,31,.06),0 4px 14px rgba(25,25,31,.05);
  --sn-shadow-lg:0 18px 50px rgba(25,25,31,.12);
  --sn-radius-sm:8px;--sn-radius-md:12px;--sn-radius-lg:18px;--sn-radius-xl:24px;
  --sn-content:1180px;--sn-reading:760px;
  --bg0:var(--sn-bg);--bg1:var(--sn-bg);--bg2:var(--sn-surface-subtle);
  --fg:var(--sn-text);--muted:var(--sn-text-muted);--line:var(--sn-border);
  --primary:var(--sn-brand-600);--accent:var(--sn-brand-600);
  --glass1:var(--sn-surface);--glass2:var(--sn-surface-subtle);
  --glass-border:var(--sn-border);--glass-shadow:var(--sn-shadow-sm);
  --shadow:var(--sn-shadow-lg);--shadow-soft:var(--sn-shadow-sm);
  --success:var(--sn-success);--success-strong:var(--sn-success);
  --danger:var(--sn-danger);--warning:var(--sn-warning);--info:var(--sn-info);
  /* توكنات نُقلت من الانماط القديمة (Quiz/Modals) — معبّرة بـ sn لتتبع الثيم تلقائيا */
  --radius:var(--sn-radius-lg);
  --ring:color-mix(in srgb,var(--sn-brand-600) 35%,transparent);
  --ring-strong:color-mix(in srgb,var(--sn-brand-600) 50%,transparent);
  --btn-surface:var(--sn-surface-subtle);
  --btn-surface-hover:color-mix(in srgb,var(--sn-brand-600) 10%,var(--sn-surface-subtle));
  --btn-border:var(--sn-border);
  --opt-active-border:var(--sn-brand-600);
  --opt-active-ring:color-mix(in srgb,var(--sn-brand-600) 18%,transparent);
  /* توكنات نُقلت من الانماط القديمة (المرحلة 5) */
  --radius-sm:var(--sn-radius-sm);
  --success-bg:color-mix(in srgb,var(--sn-success) 18%,transparent);
  --cta-ghost-bg:var(--sn-surface-subtle);
  --cta-ghost-fg:var(--sn-text);
  --cta-ghost-border:var(--sn-border);
  --cta-hover-lift:translateY(-2px);
  --cta-ring:color-mix(in srgb,var(--sn-brand-600) 35%,transparent);
  --glass-bg:var(--sn-surface);
}

html[data-theme="dark"] {
  color-scheme:dark;
  --sn-bg:#101014;--sn-surface:#19191f;--sn-surface-subtle:#23232b;
  --sn-text:#f5f4fa;--sn-text-muted:#b9b7c5;--sn-border:#343440;
  --sn-brand-50:#23232b;--sn-brand-100:#343440;--sn-brand-500:#70707d;
  --sn-brand-600:#60606d;--sn-brand-700:#b9b7c5;--sn-brand-900:#f5f4fa;
  --sn-shadow-sm:0 1px 2px rgba(0,0,0,.25),0 8px 20px rgba(0,0,0,.2);
  --sn-shadow-lg:0 24px 64px rgba(0,0,0,.35);
}


/* ===== منقول من الانماط القديمة (المرحلة 4): Quiz UI + Modals =====
   يُدرج قبل قواعد student ليحافظ على ترتيب التتالي الأصلي
   (الانماط القديمة كان يُحمّل قبل student.css) ===== */
/* =========================================================
   9) Quiz UI
   ========================================================= */
.quiz-wrap {
  margin-top:  16px;
  padding:     22px;
  direction:   ltr;
  text-align:  left;
  width:       min(1120px, 100%);
  max-width:   1120px;
  flex:        0 0 auto;
  box-sizing:  border-box;
}

.quiz-shell {
  max-width: 1080px;
  margin:    0 auto;
  padding:   0;
  overflow:  hidden;
}

.quiz-qid {
  font-weight:    900;
  letter-spacing: .2px;
  color:          color-mix(in srgb, var(--fg) 92%, transparent);
}

.quiz-badges {
  display:         flex;
  gap:             10px;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: flex-end;
}

/* Badge chips */
.badge-chip,
.qb {
  display:      inline-flex;
  align-items:  center;
  gap:          8px;
  padding:      7px 11px;
  border-radius: 999px;
  font-weight:  900;
  font-size:    13px;
  border:       1px solid var(--line);
  background:   linear-gradient(180deg,
                  color-mix(in srgb, var(--glass1) 90%, transparent),
                  color-mix(in srgb, var(--glass2) 90%, transparent));
  color:        color-mix(in srgb, var(--fg) 90%, transparent);
}

.badge-chip svg,
.qb i {
  width:  16px;
  height: 16px;
}

.qb i {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  border-radius:   999px;
  font-style:      normal;
  font-weight:     950;
  font-size:       12px;
  line-height:     1;
}

.qb.ok  i { background: rgba(46,204,113,.18); color: rgba(46,204,113,.95); }
.qb.bad i { background: rgba(231,76,60,.18);  color: rgba(231,76,60,.95);  }
.qb.mid i { background: rgba(241,196,15,.18); color: rgba(241,196,15,.95); }

.badge-chip.correct { color: var(--success-strong); border-color: var(--success-strong); }
.badge-chip.wrong   { color: rgb(189 0 0);           border-color: rgb(189 0 0);           }
.badge-chip.streak  { color: var(--warning);         border-color: color-mix(in srgb, var(--warning) 35%, transparent); }

body.light .badge-chip,
body.light .qb {
  background:  rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.14);
}

/* Quiz body */
.quiz-body {
  padding: 18px 16px 16px;
}

.quiz-question {
  font-size:      clamp(18px, 2.1vw, 26px);
  font-weight:    700;
  letter-spacing: -.2px;
  line-height:    1.25;
  margin:         0;
  color:          color-mix(in srgb, var(--fg) 95%, transparent);
}

.quiz-divider {
  height:     1px;
  background: linear-gradient(90deg, transparent,
                color-mix(in srgb, var(--line) 90%, transparent), transparent);
  margin:     16px 0 14px;
}

/* Options */
.quiz-options {
  display:               grid;
  /* grid-template-columns: repeat(12, 1fr); */
  gap:                   10px;
  margin-top:            10px;
}

.opt {
  grid-column:    span 12;
  width:          100%;
  display:        flex;
  align-items:    center;
  gap:            14px;
  text-align:     left;
  padding:        12px 14px;
  border-radius:  12px;
  border:         1px solid color-mix(in srgb, var(--line) 90%, transparent);
  background:     transparent;
  color:          color-mix(in srgb, var(--fg) 86%, transparent);
  font-weight:    600;
  letter-spacing: .1px;
  font-size:      clamp(16px, 2.8vw, 20px) !important;
  transition:     .18s ease;
  user-select:    none;
  pointer-events: auto;
  cursor:         pointer;
}

label.opt { cursor: pointer; user-select: none; }
.opt-input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.opt-letter {
  width:           70px;
  height:          40px;
  border-radius:   10px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     900;
  border:          1px solid var(--line);
  background:      var(--glass1);
  flex-shrink:     0;
}

.opt-text { flex: 1; }

.opt:hover {
  background:   color-mix(in srgb, var(--glass1) 70%, transparent);
  border-color: color-mix(in srgb, var(--line)   70%, transparent);
  transform:    translateY(-1px);
}

.opt.active {
  background:   color-mix(in srgb, var(--glass1) 92%, transparent);
  border-color: var(--opt-active-border);
  box-shadow:   0 0 0 4px var(--opt-active-ring);
}

.opt.selected { outline: 1px solid rgba(255,255,255,.12); }

.opt.correct {
  background:   var(--success) !important;
  border-color: var(--success) !important;
  color:        #fff !important;
}

.opt.wrong {
  background:   var(--danger) !important;
  border-color: var(--danger) !important;
  color:        #fff !important;
}

.opt:disabled {
  cursor:    not-allowed;
  opacity:   1;
  transform: none !important;
}

.opt:disabled:hover {
  background:   transparent;
  border-color: color-mix(in srgb, var(--line) 90%, transparent);
}

/* Light opt overrides */
body.light .opt {
  color:        rgba(0,0,0,.72);
  border-color: rgba(0,0,0,.16);
}

body.light .opt:hover {
  background:   rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.18);
}

body.light .opt.active,
body.light .opt.correct,
body.light .opt.wrong {
  /* inherit dark-token values — no override needed */
}

/* Quiz actions row */
.quiz-actions {
  display:        flex;
  flex-direction: row;
  align-items:    center;
  flex-wrap:      wrap;
  gap:            14px;
  padding:        14px 16px 18px;
  border-top:     1px solid var(--line);
  font-size:      clamp(16px, 2.8vw, 20px) !important;
}
/* عدّادات الاختبار — بطاقات (نمط Exam Pro) */
.quiz-stats {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  gap: 8px;
}
.qstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: 6px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border: 1px solid var(--line);
}
.qstat b {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.1;
}
.qstat small {
  font-size: .62rem;
  color: var(--muted);
  margin-top: 1px;
}
.qstat-ok b { color: var(--success-strong); }
.qstat-no b { color: var(--danger); }
.qstat-st b { color: #f59e0b; }
@media (max-width: 480px){
  .qstat { min-width: 52px; padding: 5px 8px; }
  .qstat b { font-size: .95rem; }
}

/* صف الأدوات: أيقونات متمركزة تبقى متوازنة مهما أُخفي منها */
.qa-tools {
  display:         flex;
  justify-content: flex-start;
  align-items:     center;
  gap:             10px;
  flex-wrap:       wrap;
  flex:            0 0 auto;
}
.quiz-actions .submit-btn { flex: 1 1 200px; } /* الأدوات يساراً والزر يمتد يميناً، وينزل تحت لو ضاقت */

/* عند تقلّص الناف بار (أقل من 992px): الزر فوق والأدوات تحت */
@media (max-width: 991.98px){
  .quiz-actions { flex-direction: column; align-items: stretch; }
  .quiz-actions .submit-btn { order: -1; flex: none; width: 100%; }
  .qa-tools { justify-content: center; width: 100%; }
}
/* أيقونات الشرح والإبلاغ على يمين النص */
.ai-btn, .report-btn { flex-direction: row-reverse; }

/* نجمة المفضلة: مفرّغة افتراضياً، ذهبية ممتلئة عند التفعيل (لون متوافق مع الثيم) */
.fav-btn, .fav-toggle { color: var(--muted); }
.fav-star { width: 22px !important; height: 22px !important; transition: transform .25s ease, fill .2s ease, stroke .2s ease; }
.fav-btn:hover, .fav-btn.is-fav, .fav-toggle:hover, .fav-toggle.is-fav { color: #fbbf24; }
.fav-btn.is-fav .fav-star, .fav-toggle.is-fav .fav-star { fill: #fbbf24; stroke: #fbbf24; animation: favPop .38s ease; }
/* في الوضع الفاتح نستخدم ذهبي Champion الاغمق ليكون واضحا */
body.light .fav-btn:hover, body.light .fav-btn.is-fav,
body.light .fav-toggle:hover, body.light .fav-toggle.is-fav { color: #ca8a04; }
body.light .fav-btn.is-fav .fav-star, body.light .fav-toggle.is-fav .fav-star { fill: #ca8a04; stroke: #ca8a04; }
@keyframes favPop{
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4) rotate(-8deg); }
  70%  { transform: scale(.92); }
  100% { transform: scale(1); }
}

/* زر النوتة: أيقونة متغيّرة حسب الثيم */
.note-ico { width: 20px !important; height: 20px !important; }
.note-btn { color: color-mix(in srgb, var(--fg) 72%, transparent); }
.note-btn:hover, .note-btn.has-note { color: var(--lc); }

/* المودالات تُنسَّق عبر نظام .modal-content.glass الموجود أدناه (لا تكرار) */

.action-btn {
  height:          46px;
  min-width:       56px;
  padding:         0 14px;
  border-radius:   12px;
  border:          1px solid var(--line);
  background:      linear-gradient(180deg,
                     color-mix(in srgb, var(--glass1) 90%, transparent),
                     color-mix(in srgb, var(--glass2) 90%, transparent));
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  font-weight:     900;
  letter-spacing:  .1px;
  color:           color-mix(in srgb, var(--fg) 88%, transparent);
  transition:      .18s ease;
  user-select:     none;
  isolation:       isolate;
}

.action-btn svg,
.action-btn i {
  width:  18px;
  height: 18px;
  opacity: .92;
  color:  currentColor;
  fill:   currentColor;
}

.action-btn:hover {
  transform:    translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
}

/* Coloured action variants */
.ai-btn     { color: var(--info); }
.ai-btn svg { color: var(--info); fill: var(--info); }

.report-btn { color: rgb(189 0 0) !important; }

/* Submit button */
.submit-btn {
  height:         46px;
  border-radius:  12px;
  border:         1px solid var(--btn-border);
  background:     var(--btn-surface);
  color:          color-mix(in srgb, var(--fg) 92%, transparent);
  font-weight:    950;
  letter-spacing: .2px;
  transition:     .18s ease;
  isolation:      isolate;
}

.submit-btn:hover {
  transform:  translateY(-1px);
  background: var(--btn-surface-hover);
}

/* Disabled states */
.ai-btn:disabled, .report-btn:disabled,
.ai-btn.disabled, .report-btn.disabled {
  opacity:        .5;
  filter:         brightness(.65) saturate(.7);
  cursor:         not-allowed;
  pointer-events: none;
  box-shadow:     none;
  transform:      none;
}

/* Light mode overrides for quiz buttons */
body.light .action-btn {
  background:   rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.14);
}

body.light .quiz-actions .action-btn.ai-btn {
  background:   rgba(0,0,0,.03) !important;
  border:       1px solid rgba(0,0,0,.14) !important;
  color:        var(--info) !important;
}

body.light .quiz-actions .action-btn.report-btn {
  background:   rgba(0,0,0,.03) !important;
  border:       1px solid rgba(0,0,0,.14) !important;
  color:        rgb(189 0 0) !important;
}

body.light .quiz-actions .action-btn.ai-btn:hover,
body.light .quiz-actions .action-btn.report-btn:hover {
  background:   rgba(0,0,0,.05) !important;
  border-color: rgba(0,0,0,.22) !important;
}

body.light .submit-btn {
  background: rgba(0,0,0,.75) !important;
  color:      #fff !important;
  border:     1px solid rgba(255,255,255,.18) !important;
}

body.light .submit-btn:hover {
  background: rgba(0,0,0,.90) !important;
}

/* Type-picker card */

/* =========================================================
   10) Modals (shared glass style)
   ========================================================= */

/* ----- Shared glass modal shell ----- */
.modal-content.glass {
  background:           linear-gradient(180deg, var(--glass1), var(--glass2)) !important;
  border:               1px solid var(--line) !important;
  box-shadow:           var(--shadow) !important;
  backdrop-filter:      blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius:        var(--radius) !important;
  position:             relative;
  overflow:             hidden;
}

body.light .modal-content.glass::before,
body:not(.light) .modal-content.glass::before {
  content:        "";
  position:       absolute;
  inset:          0;
  pointer-events: none;
  border-radius:  inherit;
}

body.light .modal-content.glass::before {
  background:     linear-gradient(180deg, rgba(235,235,235,.62), rgba(205,205,205,.40));
  mix-blend-mode: soft-light;
  opacity:        .42;
}

body:not(.light) .modal-content.glass::before {
  background:     linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  opacity:        .18;
}

/* Header & footer */
.modal-content.glass .modal-header {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  border-bottom:   1px solid var(--line) !important;
  padding:         16px 18px;
}

.modal-content.glass .modal-footer {
  padding:         14px 18px 18px;
  display:         flex;
  justify-content: flex-start !important;
  gap:             10px;
  border:          none;
}

.modal-footer { border-block: none; }

/* Typography */
body:not(.light) .modal-content.glass .modal-title,
body:not(.light) .modal-content.glass .modal-body { color: #fff !important; }
body.light .modal-content.glass .modal-title,
body.light .modal-content.glass .modal-body       { color: #000 !important; }

.modal-content.glass .modal-title {
  font-weight:    800 !important;
  letter-spacing: -.2px;
}

/* Close button */
body:not(.light) .modal-content.glass .btn-close {
  filter:  invert(1) grayscale(1) contrast(1.05);
  opacity: .9;
}

.modal-content.glass .btn-close:hover { opacity: 1; }

/* Form controls */
.modal-content.glass .form-floating > label {
  font-weight:    700 !important;
  letter-spacing: .05px;
  opacity:        1 !important;
  background:     transparent !important;
  box-shadow:     none !important;
  top:            6px;
}

.modal-content.glass .form-floating > label::before,
.modal-content.glass .form-floating > label::after {
  background:     transparent !important;
  box-shadow:     none !important;
}

body:not(.light) .modal-content.glass .form-floating > label { color: #ffffff !important; }
body.light        .modal-content.glass .form-floating > label { color: #111    !important; }

.modal-content.glass .form-select,
.modal-content.glass .form-control {
  border-radius:  14px;
  min-height:     52px;
  padding-top:    1.6rem !important;
  padding-bottom: .55rem;
  font-weight:    600 !important;
  letter-spacing: 0 !important;
}

.modal-content.glass .form-control { min-height: 120px; }

.modal-content.glass textarea.form-control {
  padding-top:  1.7rem !important;
  line-height:  1.75 !important;
}

/* حقول الرسائل العادية (placeholder بدل label عائم) — padding طبيعي */
.modal-content.glass textarea#NoteText,
.modal-content.glass textarea#UserReportMessage,
.modal-content.glass textarea#UserLikeMessage {
  padding-top: .85rem !important;
  line-height: 1.7 !important;
}

.modal-content.glass .form-floating > .form-select {
  padding-top: 2rem !important;
  min-height:  62px;
}

body:not(.light) .modal-content.glass .form-select,
body:not(.light) .modal-content.glass .form-control {
  background-color: rgba(255,255,255,.05) !important;
  background:       rgba(255,255,255,.05) !important;
  color:            #ffffff !important;
  border-color:     rgba(255,255,255,.14) !important;
}

body:not(.light) .modal-content.glass .form-select:focus,
body:not(.light) .modal-content.glass .form-control:focus {
  background-color: rgba(255,255,255,.08) !important;
  background:       rgba(255,255,255,.08) !important;
  color:            #fff !important;
  outline:          none;
  border-color:     var(--opt-active-border);
  box-shadow:       0 0 0 4px var(--ring-strong);
}

body.light .modal-content.glass .form-select,
body.light .modal-content.glass .form-control {
  background-color: rgba(0,0,0,.04) !important;
  background:       rgba(0,0,0,.04) !important;
  color:            #111 !important;
  border-color:     rgba(0,0,0,.14) !important;
}

body.light .modal-content.glass .form-select:focus,
body.light .modal-content.glass .form-control:focus {
  background-color: rgba(0,0,0,.06) !important;
  background:       rgba(0,0,0,.06) !important;
  outline:          none;
  box-shadow:       0 0 0 4px var(--ring-strong);
  border-color:     var(--opt-active-border);
}

/* لون نص الـ placeholder حسب الثيم */
body:not(.light) .modal-content.glass .form-control::placeholder { color: rgba(255,255,255,.5) !important; }
body.light        .modal-content.glass .form-control::placeholder { color: rgba(0,0,0,.45) !important; }

/* تسمية form-floating على اليمين في المودالات RTL */
[dir="rtl"] .modal-content.glass .form-floating > label { right: 0; left: auto; transform-origin: top right; }
[dir="rtl"] .modal-content.glass .form-floating > .form-select ~ label,
[dir="rtl"] .modal-content.glass .form-floating > .form-control:focus ~ label,
[dir="rtl"] .modal-content.glass .form-floating > .form-control:not(:placeholder-shown) ~ label {
  transform: scale(.85) translateY(-.85rem) translateX(-.15rem);
}

/* خيارات القائمة المنسدلة متوافقة مع الثيم */
body:not(.light) .modal-content.glass .form-select option { background-color: #1a1c22; color: #fff; }
body.light        .modal-content.glass .form-select option { background-color: #fff;    color: #111; }
body:not(.light) .rate-toggle { background: rgba(255,255,255,.05); }
body.light        .rate-toggle { background: rgba(0,0,0,.04); }
.rate-toggle:focus, .rate-toggle.show {
  outline: none;
  border-color: var(--opt-active-border);
  box-shadow: 0 0 0 4px var(--ring-strong);
}
.rate-menu .dropdown-item { text-align: center; font-weight: 700; }

/* Remove native select arrow */
.modal-content.glass .form-select {
  appearance:         none !important;
  -webkit-appearance: none !important;
  -moz-appearance:    none !important;
  background-image:   none !important;
  padding-right:      12px !important;
}

/* Modal footer buttons */
.modal-content.glass .modal-footer .btn {
  border-radius:  14px;
  font-weight:    900;
  letter-spacing: .15px;
  padding:        .78rem 1.05rem;
  min-height:     46px;
}

.modal-content.glass .modal-footer .btn.btn-dark {
  background: rgba(0,0,0,.85) !important;
  color:      #fff !important;
  border:     1px solid rgba(255,255,255,.18) !important;
}

.modal-content.glass .modal-footer .btn.btn-dark:hover {
  background: rgba(0,0,0,1) !important;
  transform:  translateY(-1px);
}

.modal-content.glass .modal-footer .btn.btn-danger {
  border:     1px solid color-mix(in srgb, var(--danger) 70%, #000) !important;
  background: color-mix(in srgb, var(--danger) 82%, #000) !important;
}

.modal-content.glass .modal-footer .btn.btn-danger:hover {
  filter:    brightness(1.05);
  transform: translateY(-1px);
}

body.light .modal-content.glass .modal-footer .btn.btn-danger {
  background:   rgb(192 0 0) !important;
  border-color: rgba(0,0,0,.15) !important;
}

/* ----- Rational modal specifics ----- */
#UserRationalModal .modal-header {
  display:         flex !important;
  justify-content: space-between !important;
  align-items:     center !important;
  direction:       ltr !important;
}

#UserRationalModal .modal-title {
  margin:     0 !important;
  text-align: left !important;
}

#UserRationalModal #EN_Rash,
#UserRationalModal #EN_Rash * {
  direction:  ltr !important;
  text-align: left !important;
}

#UserRationalModal #EN_Rash,
#UserRationalModal #AR_Rash {
  line-height: 1.8 !important;
  margin:      0 !important;
}

/* ----- Report modal specifics ----- */
#reportModal { direction: ltr; }

/* ----- Q-TypeModal category buttons ----- */
#Q-TypeModalLabel .modal-body .btn.btn-outline-secondary {
  background:    rgba(255,255,255,.03);
  border:        1px solid rgba(255,255,255,.10);
  color:         var(--fg);
  border-radius: 14px;
  padding:       12px 14px;
  font-weight:   600;
}

body.light #Q-TypeModalLabel .modal-body .btn.btn-outline-secondary {
  background:   rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.12);
  color:        #111827;
}

#Q-TypeModalLabel .modal-body .btn.btn-outline-secondary:hover {
  background:   rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}

body.light #Q-TypeModalLabel .modal-body .btn.btn-outline-secondary:hover {
  background:   rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.18);
}

#Q-TypeModalLabel .modal-body .btn.btn-outline-secondary:focus { box-shadow: none; }

/* Font smoothing inside all modals */
.modal-content.glass,
.modal-content.glass * {
  -webkit-font-smoothing:  antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering:          optimizeLegibility !important;
}



/* --- responsive (quiz/modals) --- */
.quiz-badges {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             10px;
  flex-wrap:       nowrap;
}
.badge-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       5px 10px;
  border-radius: 8px;
  background:    transparent;
  font-size:     14px;
  font-weight:   800;
  line-height:   1;
}
.badge-chip svg {
  display:     block;
  flex-shrink: 0;
  width:       14px;
  height:      14px;
}
.badge-chip.correct { border: 1.5px solid rgb(32, 128, 0);  color: rgb(32, 128, 0); }
.badge-chip.wrong   { border: 1.5px solid #a30101; color: #a30101; }
.badge-chip.streak  { border: 1.5px solid rgb(203 122 0); color: rgb(203 122 0); }
@media (max-width: 575.98px){
.quiz-badges { justify-content: flex-start; }.action-btn {
    height:          48px;
    min-width:       54px;
    padding:         0 12px;
    border-radius:   14px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0;
  }.action-btn span:not(#FavIcon):not(#NoteIcon) { display: none; }.action-btn svg {
    width:  18px;
    height: 18px;
  }.submit-btn {
    height:         46px;
    border-radius:  12px;
    border:         1px solid var(--btn-border);
    background:     var(--btn-surface);
    color:          color-mix(in srgb, var(--fg) 92%, transparent);
    font-weight:    950;
    letter-spacing: .2px;
    transition:     .18s ease;
  }.opt { grid-column: span 12; text-align: left; }.quiz-wrap { padding: 18px; }.modal-content.glass .modal-footer { flex-wrap: wrap; }.modal-content.glass .modal-footer .btn {
    flex:  1 1 auto;
    width: 100%;
  }
}
@media (max-width: 420px){
  .badge-chip   { padding: 6px 9px; font-size: 12px; }
}
@media (max-width: 380px){
  .badge-chip { padding: 6px 9px; font-size: 12px; }
}
@media (max-width: 899px){
  #UserRationalModal .modal-dialog {
    --bs-modal-width: 100%;
  }
}
@media (min-width: 900px) and (max-width: 1279px){
  #UserRationalModal .modal-dialog {
    --bs-modal-width: 85%;
  }
}
@media (min-width: 1280px) and (max-width: 2000px){
  #UserRationalModal .modal-dialog {
    --bs-modal-width: 75%;
  }
}
@media (min-width: 2001px){
  #UserRationalModal .modal-dialog {
    --bs-modal-width: 50%;
  }
}
body:not(.light) .modal-content.glass {
  background: color-mix(in srgb, #ffffff 7%, var(--bg1)) !important;
}
body.light .modal-content.glass {
  background: color-mix(in srgb, #000000 4%, var(--bg0)) !important;
}
/* ===== نهاية المنقول ===== */

/* ===== منقول من الانماط القديمة (المرحلة 5): navbar/hero/glass/faq/auth/dropdown/level/season/reviews ===== */
body.light .footer-note {
  color: #000 !important;
}
.page-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
}
.container.py-4 {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.content-area.centered {
  justify-content: center;
}
.topbar {
  padding:  1px 14px;
  position: relative;
  z-index:  1000;
  overflow: visible;
}
.topbar .navbar,
.topbar .navbar-collapse,
.topbar .nav-wrap,
.topbar .nav.nav-pills {
  overflow: visible !important;
}
.brand {
  letter-spacing: .3px;
  font-size:   28px;
  font-weight: 800;
}
#logoImg {
  display: block;
  height: 66px;
}
.nav-pills .nav-link {
  color:         rgba(255,255,255,.82);
  border-radius: 12px;
  padding:       .58rem 1.05rem;
  font-weight:   700;
  letter-spacing: .15px;
  transition:    .18s ease;
}
.nav-pills .nav-link:hover {
  background: rgba(255,255,255,.10);
  color:      rgba(255,255,255,.95);
}
.nav-pills .nav-link.active {
  background: rgba(255,255,255,.09);
  border:     1px solid rgba(255,255,255,.12);
  color:      rgba(255,255,255,.96);
}
body.light .nav-pills .nav-link:hover {
  background:   rgba(0,0,0,.10) !important;
  color:        #000 !important;
  border:       1px solid rgba(0,0,0,.16) !important;
}
body.light .nav-pills .nav-link.active {
  background:   rgba(0,0,0,.10) !important;
  color:        #000 !important;
  border:       1px solid rgba(0,0,0,.16) !important;
}
body.light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0,0,0,.88)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  filter: none !important;
  opacity: 1 !important;
}
.hero {
  margin-top: 16px;
  padding:    34px 28px;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
}
.hero h1 {
  letter-spacing: -0.8px;
  line-height:    1.05;
  font-size:      clamp(34px, 4.1vw, 62px);
  font-weight:    800;
}
.hero p {
  color:       var(--muted);
  margin:      0;
  max-width:   540px;
  font-size:   16px;
  line-height: 1.85;
  font-weight: 400;
}
.glass {
  background:              linear-gradient(180deg, var(--glass1), var(--glass2));
  border:                  1px solid var(--glass-border) !important;
  box-shadow:              var(--glass-shadow) !important;
  backdrop-filter:         blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  border-radius:           var(--radius);
}
.hero-cta .btn {
  padding:         .82rem 1.55rem;
  border-radius:   16px;
  font-weight:     800;
  letter-spacing:  .15px;
  min-height:      46px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  transition:      transform .18s ease, background .18s ease,
                   border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.hero-cta .btn:focus-visible {
  outline:    none;
  box-shadow: 0 0 0 4px var(--cta-ring), 0 14px 40px rgba(0,0,0,.28);
}
.faq {
  padding: 26px 22px;
}
.accordion {
  --bs-accordion-bg:               transparent;
  --bs-accordion-border-color:     rgba(255,255,255,.12);
  --bs-accordion-btn-color:        rgba(255,255,255,.92);
  --bs-accordion-btn-bg:           rgba(255,255,255,.06);
  --bs-accordion-active-bg:        rgba(255,255,255,.08);
  --bs-accordion-active-color:     rgba(255,255,255,.98);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-color:            rgba(255,255,255,.90);
}
.accordion-item {
  border-radius:  16px;
  overflow:       hidden;
  border:         1px solid rgba(255,255,255,.12);
  background:     linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  margin-bottom:  10px;
}
.accordion-button {
  font-weight:    800;
  letter-spacing: .1px;
  padding:        14px 16px;
}
.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-button::after { display: none !important; }
.accordion-body {
  color:       rgba(244,246,251,.78);
  line-height: 1.9;
  padding:     14px 16px 18px;
}
body.light .accordion {
  --bs-accordion-border-color:  rgba(0,0,0,.14);
  --bs-accordion-btn-color:     rgba(0,0,0,.90);
  --bs-accordion-btn-bg:        rgba(0,0,0,.04);
  --bs-accordion-active-bg:     rgba(0,0,0,.06);
  --bs-accordion-active-color:  rgba(0,0,0,.98);
  --bs-accordion-color:         rgba(0,0,0,.88);
}
body.light .accordion-item {
  border:     1px solid rgba(0,0,0,.12);
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.015));
}
body.light .accordion-body { color: rgba(0,0,0,.72); }
.h-100px          { height: 100px !important; }
#opts, #opts * { pointer-events: auto; }
#Q-Type_close { margin: unset; }
.chip-num {
  display:     inline-flex;
  align-items: center;
  line-height: 1;
  font-size:   14px;
  font-weight: 800;
}
@media (min-width: 992px){
  #mainNav .nav-wrap,
  #mainNav .nav.nav-pills {
    justify-content: flex-end !important;
  }
}
@media (max-width: 991.98px){
  header.topbar          { padding: 10px 14px !important; }
  #mainNav               { position: relative; z-index: 50; }

  body.light .nav-wrap {
    border:     1px solid rgba(0,0,0,.12) !important;
    background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02)) !important;
  }

  .nav.nav-pills {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    stretch !important;
    gap:            8px !important;
    padding:        0 !important;
    margin:         0 !important;
  }

  .nav-pills .nav-link {
    width:         100% !important;
    padding:       .68rem 1rem !important;
    line-height:   1.15 !important;
    border-radius: 12px !important;
    text-align:    center !important;
  }

  .nav-actions .btn { width: 100%; }

  /* Hero */
  .hero        { padding: 26px 18px; }
  .brand       { font-size: 24px; }

  /* FAQ */
  .faq         { padding: 22px 16px; }
}
@media (max-width: 575.98px){
  .hero-cta .btn { width: 100%; }

  /* Quiz actions — صف أدوات أيقوني + Submit عريض */
  

  /* أخفِ نصوص الأزرار فقط، وأبقِ أيقونات المفضلة والنوتة */

  /* Modal full-width buttons */
  
  
}
.btn-cta {
  padding:         .82rem 1.55rem;
  border-radius:   16px;
  font-weight:     800;
  letter-spacing:  .15px;
  min-height:      46px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  background:      var(--cta-ghost-bg) !important;
  color:           var(--cta-ghost-fg) !important;
  border:          1px solid var(--cta-ghost-border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:      transform .18s ease, background .18s ease,
                   border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn-cta:hover {
  transform:  var(--cta-hover-lift);
  background: color-mix(in srgb, var(--cta-ghost-bg) 60%, transparent) !important;
}
.btn-cta:focus-visible {
  outline:    none;
  box-shadow: 0 0 0 4px var(--cta-ring), 0 14px 40px rgba(0,0,0,.28);
}
.dropdown-menu.glass {
  background: linear-gradient(180deg, var(--glass1), var(--glass2)) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-soft) !important;
  border-radius: var(--radius-sm) !important;
  min-width: 160px;
  padding: .4rem;
  z-index: 9999 !important;
}
body.light .dropdown-menu.glass {
  background: rgba(220,220,220,.97) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
}
.dropdown-menu.glass .dropdown-item {
  color: var(--muted);
  border-radius: 8px;
  font-size: .9rem;
  padding: .5rem .85rem;
  background: transparent;
  border: none;
  width: 100%;
  text-align: right;
  transition: background .15s, color .15s;
}
.dropdown-menu.glass .dropdown-item:hover {
  background: var(--glass1);
  color: var(--fg);
}
body:not(.light) .dropdown-menu.glass {
  background: color-mix(in srgb, #ffffff 7%, var(--bg1)) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.auth-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--glass2);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background .18s, border-color .18s;
}
.auth-checkbox:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.auth-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.auth-checkbox:focus { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.auth-wrap {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}
.auth-input {
  width: 100%;
  background: var(--glass2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-family: inherit;
  font-size: .95rem;
  padding: .65rem .9rem;
  outline: none;
  transition: border-color .2s, background .2s;
}
.auth-input:focus {
  border-color: var(--primary);
  background: var(--glass1);
}
.auth-input::placeholder { color: rgba(244,246,251,.35); }
body.light .auth-input::placeholder { color: rgba(0,0,0,.35); }
body.light .auth-input {
  background: rgba(0,0,0,.06);
  color: var(--fg);
}
body.light .auth-input:focus { background: rgba(0,0,0,.09); }
body:not(.light) .auth-input option { background: #0f1117; color: #f4f6fb; }
body.light .auth-input option        { background: #e5e5e5; color: #111; }
.auth-label {
  display: block;
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: .35rem;
}
.auth-check-label {
  font-size: .85rem;
  color: var(--muted);
  cursor: pointer;
}
.auth-link {
  font-size: .85rem;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.auth-link:hover { color: var(--fg); }
.auth-link-bold {
  color: var(--fg);
  font-weight: 700;
  text-decoration: none;
}
.auth-link-bold:hover { text-decoration: underline; color: var(--fg); }
@keyframes toastIn{
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.auth-status {
  background: var(--success-bg);
  border: 1px solid var(--success);
  color: #86efac;
  border-radius: var(--radius-sm);
  padding: .6rem .9rem;
  font-size: .85rem;
}
.auth-alert {
  background: rgba(248, 113, 113, .08);
  border: 1px solid rgba(248, 113, 113, .35);
  color: #f87171;
  border-radius: var(--radius-sm);
  padding: .6rem .9rem;
  font-size: .85rem;
}
.admin-hero {
  padding: 1.5rem 0;
  margin-bottom: 1.5rem;
}
.admin-hero h1 { font-size: 1.5rem; font-weight: 800; margin: 0; }
.admin-hero p  { color: var(--muted); margin: .35rem 0 0; font-size: .9rem; }
.breadcrumb-trail {
  font-size: .8rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.breadcrumb-trail a { color: var(--muted); text-decoration: none; }
.breadcrumb-trail a:hover { color: var(--fg); }
.btn-admin {
  padding: .3rem .75rem;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 700;
  border: 1px solid;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s;
  background: transparent;
  display: inline-flex;
  align-items: center;
}
.btn-admin:hover { opacity: .8; }
.btn-admin.is-success { background: var(--success-bg); color: var(--success-strong); border-color: var(--success); }
.progress-level-badge {
  display: inline-block;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: .03em;
  background: linear-gradient(135deg, var(--accent), #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}
.progress-section-fill.mid  { background: var(--warning); }
.progress-section-fill.high { background: var(--success-strong); }
.progress-section-pct.mid  { color: var(--warning); }
.progress-section-pct.high { color: var(--success-strong); }
.progress-section-fill.mid  { background: var(--warning); }
.progress-section-fill.high { background: var(--success-strong); }
.progress-bar-pct.mid  { color: var(--warning); }
.progress-bar-pct.high { color: var(--success-strong); }
.progress-mini-stat.is-correct {
  color: var(--success-strong);
  background: color-mix(in srgb, var(--success-strong) 14%, transparent);
}
.progress-mini-stat.is-wrong {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}
.progress-bar-fill.mid       { background: var(--warning); }
.progress-bar-fill.high      { background: var(--success-strong); }
.level-novice            { --lc: #f87171; --lc2: #dc2626; }
.level-advanced-beginner { --lc: #f472b6; --lc2: #db2777; }
.level-competent         { --lc: #34d399; --lc2: #059669; }
.level-proficient        { --lc: #a78bfa; --lc2: #7c3aed; }
.level-expert            { --lc: #06b6d4; --lc2: #0891b2; }
.level-4n-champion       { --lc: #fbbf24; --lc2: #d97706; }
html[data-theme="light"] .level-novice            { --lc: #dc2626; --lc2: #991b1b; }
html[data-theme="light"] .level-advanced-beginner { --lc: #db2777; --lc2: #be185d; }
html[data-theme="light"] .level-competent         { --lc: #059669; --lc2: #065f46; }
html[data-theme="light"] .level-proficient        { --lc: #7c3aed; --lc2: #5b21b6; }
html[data-theme="light"] .level-expert            { --lc: #0891b2; --lc2: #0e7490; }
html[data-theme="light"] .level-4n-champion       { --lc: #ca8a04; --lc2: #a16207; }
.progress-level-badge.level-colored {
  background: linear-gradient(135deg, var(--lc), var(--lc2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ec-resume-btn.primary { background: var(--lc); color: #fff; border-color: var(--lc); }
.ec-resume-btn.ghost { background: transparent; color: var(--fg); }
.ec-toggle.active {
  border-color: var(--lc);
  color: var(--lc);
  background: color-mix(in srgb, var(--lc) 12%, transparent);
  font-weight: 600;
}
.ec-btn.selected {
  border-color: var(--lc);
  background: color-mix(in srgb, var(--lc) 12%, var(--glass-bg));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lc) 35%, transparent);
}
.ec-btn.selected::before { opacity: .06; }
.ec-btn.selected .ec-btn-name { color: var(--lc); }
.ec-btn-all.selected { border-style: solid; }
.season-countdown {
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, var(--glass1), var(--glass2));
  border-radius: var(--radius, 16px);
  padding: 1rem 1.25rem;
  margin-bottom: 1.4rem;
  text-align: center;
}
.season-countdown.is-upcoming {
  border-color: color-mix(in srgb, var(--primary, #6ea8fe) 50%, var(--glass-border));
}
.season-countdown .sc-label {
  font-weight: 800;
  font-size: .95rem;
  margin-bottom: .75rem;
  color: var(--fg);
}
.season-countdown .sc-timer {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
}
.season-countdown .sc-box {
  min-width: 64px;
  padding: .5rem .6rem;
  border-radius: 12px;
  background: var(--glass2);
  border: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.season-countdown .sc-box span {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.season-countdown .sc-box small { font-size: .7rem; color: var(--muted); }
.reviews-section { padding: 1.75rem 1.5rem 2rem; }
.review-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-top { display: flex; align-items: center; gap: 10px; }
.review-stars .on { color: #fbbf24; }
body.light .review-stars .on { color: #ca8a04; }
.saved-choice.is-correct   { border-color:var(--success-strong); background:color-mix(in srgb, var(--success-strong) 10%, transparent); font-weight:700; }
/* ===== نهاية منقول المرحلة 5 ===== */


*{box-sizing:border-box}
html{min-height:100%;background:var(--sn-bg);scroll-behavior:smooth}
body.sn-student-body,body{
  margin:0;min-height:100vh;background:var(--sn-bg);color:var(--sn-text);
  font-family:"Tajawal","Noto Sans Arabic",system-ui,sans-serif;
  font-size:16px;line-height:1.65;text-rendering:optimizeLegibility;
}
body.sn-student-body{--sn-level:var(--sn-text);--sn-level-strong:var(--sn-text);--sn-level-soft:var(--sn-surface-subtle)}
html.sn-appearance-changing body,html.sn-appearance-changing body *{transition-property:color,background-color,border-color,box-shadow,fill,stroke!important;transition-duration:.35s!important;transition-timing-function:cubic-bezier(.22,1,.36,1)!important;transition-delay:0s!important}
body.sn-student-body.level-novice{--sn-level:#dc2626;--sn-level-strong:#991b1b;--sn-level-soft:#fff1f2}
body.sn-student-body.level-advanced-beginner{--sn-level:#db2777;--sn-level-strong:#9d174d;--sn-level-soft:#fdf2f8}
body.sn-student-body.level-competent{--sn-level:#059669;--sn-level-strong:#065f46;--sn-level-soft:#ecfdf5}
body.sn-student-body.level-proficient{--sn-level:#7c3aed;--sn-level-strong:#5b21b6;--sn-level-soft:#f5f3ff}
body.sn-student-body.level-expert{--sn-level:#0891b2;--sn-level-strong:#155e75;--sn-level-soft:#ecfeff}
body.sn-student-body.level-4n-champion{--sn-level:#ca8a04;--sn-level-strong:#854d0e;--sn-level-soft:#fffbeb}
html[data-theme="dark"] body.sn-student-body.level-novice{--sn-level:#f87171;--sn-level-strong:#fca5a5;--sn-level-soft:#351d24}
html[data-theme="dark"] body.sn-student-body.level-advanced-beginner{--sn-level:#f472b6;--sn-level-strong:#f9a8d4;--sn-level-soft:#361d31}
html[data-theme="dark"] body.sn-student-body.level-competent{--sn-level:#34d399;--sn-level-strong:#6ee7b7;--sn-level-soft:#15342c}
html[data-theme="dark"] body.sn-student-body.level-proficient{--sn-level:#a78bfa;--sn-level-strong:#c4b5fd;--sn-level-soft:#29223f}
html[data-theme="dark"] body.sn-student-body.level-expert{--sn-level:#22d3ee;--sn-level-strong:#67e8f9;--sn-level-soft:#16343b}
html[data-theme="dark"] body.sn-student-body.level-4n-champion{--sn-level:#fbbf24;--sn-level-strong:#fcd34d;--sn-level-soft:#392d16}
html[data-level-colors="off"] body.sn-student-body,
html[data-level-colors="off"] body.sn-student-body[class*="level-"]{--sn-level:var(--sn-text);--sn-level-strong:var(--sn-text);--sn-level-soft:var(--sn-surface-subtle)}
body::before,html::before{display:none!important}
a{color:inherit}
:focus-visible{outline:3px solid color-mix(in srgb,var(--sn-brand-600) 42%,transparent);outline-offset:3px}
::selection{background:var(--sn-brand-100);color:var(--sn-brand-900)}

.sn-skip-link{position:fixed;inset-inline-start:16px;top:-80px;z-index:2000;background:var(--sn-text);color:var(--sn-bg);padding:10px 16px;border-radius:10px;text-decoration:none}
.sn-skip-link:focus{top:12px}
.sn-shell{width:min(calc(100% - 32px),var(--sn-content));margin-inline:auto;min-height:100vh;display:flex;flex-direction:column}
.sn-main{flex:1;padding-block:28px 56px}

.sn-header{position:sticky;top:0;z-index:100;padding-top:12px;background:color-mix(in srgb,var(--sn-bg) 90%,transparent);backdrop-filter:blur(14px)}
.sn-header-inner{min-height:68px;display:flex;align-items:center;gap:20px;padding:8px 12px;border:1px solid var(--sn-border);border-radius:18px;background:var(--sn-surface);box-shadow:var(--sn-shadow-sm)}
.sn-logo{display:inline-flex;align-items:center;min-width:124px;text-decoration:none}
.sn-logo img{width:auto;height:48px;object-fit:contain}
.sn-nav{display:flex;align-items:center;gap:4px;flex:1}
.sn-nav-link,.sn-icon-button,.sn-user-trigger{border:0;background:transparent;color:var(--sn-text-muted);min-height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 13px;text-decoration:none;font-weight:600;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease}
.sn-nav-link:hover,.sn-icon-button:hover,.sn-user-trigger:hover{background:var(--sn-surface-subtle);color:var(--sn-text)}
.sn-nav-link[aria-current="page"]{background:var(--sn-brand-50);color:var(--sn-brand-700)}
.sn-header-actions{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.sn-icon-button{width:44px;padding:0;font-size:1.15rem}
.sn-mobile-toggle{display:none}
.sn-user{position:relative}
.sn-user-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);width:220px;padding:8px;background:var(--sn-surface);border:1px solid var(--sn-border);border-radius:14px;box-shadow:var(--sn-shadow-lg)}
.sn-user-menu[hidden]{display:none}
.sn-user-menu a,.sn-user-menu button{width:100%;display:flex;padding:10px 12px;border:0;border-radius:9px;background:transparent;color:var(--sn-text);text-decoration:none;text-align:start;cursor:pointer}
.sn-user-menu a:hover,.sn-user-menu button:hover{background:var(--sn-surface-subtle)}
.sn-primary-link{background:var(--sn-brand-600);color:#fff!important}
.sn-primary-link:hover{background:var(--sn-brand-700)!important;color:#fff!important}
.sn-mobile-auth{display:none}

.glass,.ec-glass,.auth-card,.admin-stat-card,.progress-level-card,.progress-bar-row,.saved-card,.download-card{
  background:var(--sn-surface)!important;border:1px solid var(--sn-border)!important;
  box-shadow:var(--sn-shadow-sm)!important;backdrop-filter:none!important;
}

/* أداة إخفاء بصري مع إبقاء المحتوى لقارئات الشاشة */
.sn-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* حالة أولى / فارغة لصفحة التطور */
.progress-empty{display:grid;justify-items:center;gap:14px;padding:clamp(28px,5vw,52px) 20px;margin-bottom:2rem;text-align:center;border:1px dashed var(--sn-border);border-radius:var(--sn-radius-lg);background:var(--sn-surface-subtle)}
.progress-empty-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:16px;background:var(--sn-level-soft);color:var(--sn-level-strong);font-size:1.6rem;line-height:1}
.progress-empty h2{margin:0;font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:900;color:var(--sn-text)}
.progress-empty p{max-width:52ch;margin:0;color:var(--sn-text-muted);line-height:1.7}
.progress-empty a{min-height:46px;display:inline-flex;align-items:center;padding:10px 22px;border-radius:12px;background:var(--sn-text);color:var(--sn-bg);font-weight:800;text-decoration:none}
.progress-empty a:hover{background:color-mix(in srgb,var(--sn-text) 86%,var(--sn-bg))}
.glass{border-radius:var(--sn-radius-lg)}
.hero{padding:clamp(24px,5vw,64px)!important;overflow:hidden}
.hero h1{color:var(--sn-text);font-size:clamp(2.2rem,5vw,4.6rem);line-height:1.05;letter-spacing:-.03em;max-width:12ch;text-wrap:balance}
.hero p,.saas-muted,.tbl-muted{color:var(--sn-text-muted)!important}
.hero-img{max-height:420px;object-fit:contain;filter:drop-shadow(0 24px 38px rgba(36,29,77,.16))}
.stat-card-index{height:100%;border-radius:14px;background:var(--sn-surface-subtle)!important;border:1px solid transparent!important}
.stat-num{color:var(--sn-text)!important;font-variant-numeric:tabular-nums}
.stat-icon{color:var(--sn-brand-600)!important}

.btn,.submit-btn,.ec-start-btn,.ec-resume-btn,.btn-admin{
  min-height:44px;border-radius:12px!important;font-weight:700;text-decoration:none;transition:transform .18s ease,background .18s ease,border-color .18s ease!important
}
.btn:hover,.submit-btn:hover,.ec-start-btn:hover:not(:disabled){transform:translateY(-1px)}
.submit-btn,.ec-start-btn,.ec-resume-btn.primary{background:var(--sn-brand-600)!important;color:#fff!important;border:1px solid var(--sn-brand-600)!important}
.btn-ghost{background:var(--sn-surface)!important;color:var(--sn-brand-700)!important;border:1px solid var(--sn-border)!important}

.ec-wrap{max-width:var(--sn-content);margin-inline:auto}
.ec-glass{border-radius:var(--sn-radius-xl)!important;padding:clamp(18px,3vw,40px)!important}
.ec-hero{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.ec-hero-icon{background:var(--sn-brand-50)!important;color:var(--sn-brand-700)!important;border:0!important}
.ec-hero-title{color:var(--sn-text)!important}
.ec-section-label{color:var(--sn-text-muted)!important;font-weight:700}
.ec-filter-card,.ec-btn{background:var(--sn-surface-subtle)!important;border:1px solid transparent!important;color:var(--sn-text)!important;border-radius:14px!important}
.ec-filter-card:hover,.ec-btn:hover{border-color:var(--sn-border)!important}
.ec-btn.selected,.ec-toggle.active{background:var(--sn-brand-50)!important;color:var(--sn-brand-700)!important;border-color:var(--sn-brand-500)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--sn-brand-500) 12%,transparent)!important}
.ec-toggle{min-height:40px;border-radius:10px!important;color:var(--sn-text-muted)!important}
.ec-start-bar{background:color-mix(in srgb,var(--sn-surface) 94%,transparent)!important;border-color:var(--sn-border)!important;backdrop-filter:blur(10px)}

.quiz-wrap{max-width:900px;margin-inline:auto;padding:clamp(18px,4vw,42px)!important}
.option,.saved-choice{border:1px solid var(--sn-border)!important;background:var(--sn-surface-subtle)!important;border-radius:12px!important;color:var(--sn-text)!important}
.option:hover{border-color:var(--sn-brand-500)!important;background:var(--sn-brand-50)!important}
.saved-choice.is-correct{background:color-mix(in srgb,var(--sn-success) 10%,var(--sn-surface))!important;border-color:color-mix(in srgb,var(--sn-success) 45%,var(--sn-border))!important}
.saved-choice.is-userwrong{background:color-mix(in srgb,var(--sn-danger) 9%,var(--sn-surface))!important;border-color:color-mix(in srgb,var(--sn-danger) 42%,var(--sn-border))!important}

.auth-input,.form-control,.form-select,.note-input{background:var(--sn-surface)!important;color:var(--sn-text)!important;border:1px solid var(--sn-border)!important;border-radius:12px!important;min-height:46px}
.auth-input:focus,.form-control:focus,.form-select:focus,.note-input:focus{border-color:var(--sn-brand-500)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--sn-brand-500) 16%,transparent)!important}
.progress-bar-track,.xp-track{background:var(--sn-surface-subtle)!important}
.progress-bar-fill,.xp-fill{background:var(--sn-brand-600)!important}
.lb-table-wrap{border:1px solid var(--sn-border);border-radius:14px;overflow:auto}
.lb-table{min-width:680px}
.lb-row{border-color:var(--sn-border)!important}

/* ── ألوان طبقات الاشتراك: ذهبي / ماسي / إيميرالد ──
   --tc لون الطبقة، --tc-strong للنص/التباين، --tc-soft خلفية خفيفة. */
.tier-month,.sub-month     {--tc:#c19a2b;--tc-strong:#8a6a12;--tc-soft:#f8f1da}  /* ذهبي */
.tier-quarter,.sub-quarter {--tc:#17a9c4;--tc-strong:#0b7488;--tc-soft:#e0f4f9}  /* ماسي */
.tier-season,.sub-season   {--tc:#059669;--tc-strong:#046b4d;--tc-soft:#e2f6ee}  /* إيميرالد */
html[data-theme="dark"] .tier-month,html[data-theme="dark"] .sub-month     {--tc:#e3c04a;--tc-strong:#f0d472;--tc-soft:#2e2712}
html[data-theme="dark"] .tier-quarter,html[data-theme="dark"] .sub-quarter {--tc:#38c6df;--tc-strong:#7fdcee;--tc-soft:#123037}
html[data-theme="dark"] .tier-season,html[data-theme="dark"] .sub-season   {--tc:#2fbd88;--tc-strong:#6ee7b7;--tc-soft:#123329}

/* أيقونة حساب المشترك — تعكس لون طبقة الاشتراك + شارة نجمة */
.sn-account-avatar.is-premium{position:relative;background:var(--tc,#c19a2b)!important;color:#fff;
  box-shadow:0 0 0 2px var(--sn-surface),0 0 0 4px var(--tc,#c19a2b)}
.sn-sub-badge{position:absolute;inset-inline-end:-4px;bottom:-4px;width:18px;height:18px;display:grid;place-items:center;
  border-radius:50%;background:var(--tc-strong,#8a6a12);color:#fff;font-size:.66rem;line-height:1;border:2px solid var(--sn-surface)}

.sn-footer{padding:24px 0 30px;color:var(--sn-text-muted);border-top:1px solid var(--sn-border)}
.sn-footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}

@media (max-width: 839px){
  .sn-shell{width:min(calc(100% - 20px),var(--sn-content))}
  .sn-mobile-toggle{display:inline-flex}
  .sn-nav{position:fixed;z-index:150;inset:88px 10px auto;display:none;flex-direction:column;align-items:stretch;padding:10px;background:var(--sn-surface);border:1px solid var(--sn-border);border-radius:16px;box-shadow:var(--sn-shadow-lg)}
  .sn-nav.is-open{display:flex}
  .sn-mobile-auth{display:flex}
  .sn-nav-link{justify-content:flex-start}
  .sn-user-trigger span{display:none}
  .hero{text-align:center}
  .hero h1{margin-inline:auto;max-width:16ch}
  .hero-cta{justify-content:center}
  .ec-filters-row{grid-template-columns:1fr!important}
}

@media (max-width:599px){
  body{font-size:15px}
  .sn-main{padding-top:18px;padding-bottom:90px}
  .sn-header-inner{min-height:60px;border-radius:14px}
  .sn-logo{min-width:auto}.sn-logo img{height:40px;max-width:108px}
  .sn-desktop-auth{display:none}
  .sn-header-actions{gap:2px}.sn-user-trigger{padding-inline:8px}
  .hero{padding:24px 18px!important}.hero h1{font-size:2.45rem}
  .ec-glass{border-radius:18px!important;padding:16px!important}
  .ec-grid{grid-template-columns:1fr 1fr!important}
  .ec-start-bar{inset-inline:10px!important;bottom:10px!important;border-radius:16px!important}
  .quiz-wrap{border-radius:16px!important}
}

@media (prefers-reduced-motion:reduce){
  html.sn-appearance-changing body,html.sn-appearance-changing body *{transition-duration:0s!important}
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Responsive application shell */
.sn-sidebar,.sn-bottom-nav{display:none}
.sn-mobile-topbar{position:sticky;top:0;z-index:100;min-height:78px;display:grid;grid-template-columns:minmax(64px,1fr) auto;align-items:center;gap:10px;padding:10px 14px;background:color-mix(in srgb,var(--sn-surface) 94%,transparent);border-bottom:1px solid var(--sn-border);backdrop-filter:blur(14px)}
.sn-mobile-topbar .sn-logo{min-width:0;justify-content:flex-start;overflow:hidden}
.sn-mobile-topbar .sn-logo img{display:block;width:auto;height:56px;max-width:144px;object-fit:contain}
.sn-mobile-topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.sn-topbar-logout{display:flex;margin:0}
.sn-icon-button svg,.sn-shell-link svg,.sn-bottom-link svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sn-color-slash{display:none;stroke-width:2.4}
[data-level-colors-toggle][aria-pressed="true"] .sn-color-slash{display:block}
.sn-theme-icon-sun{display:none}
html[data-theme="dark"] .sn-theme-icon-moon{display:none}
html[data-theme="dark"] .sn-theme-icon-sun{display:block}
.sn-bottom-nav{position:fixed;z-index:180;inset-inline:0;bottom:0;min-height:72px;padding:7px max(10px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));grid-template-columns:repeat(5,1fr);background:color-mix(in srgb,var(--sn-surface) 96%,transparent);border-top:1px solid var(--sn-border);box-shadow:0 -8px 24px rgba(25,25,31,.06);backdrop-filter:blur(16px)}
.sn-bottom-link{position:relative;min-width:0;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:14px;color:var(--sn-text-muted);font-size:.76rem;font-weight:700;text-decoration:none}
.sn-bottom-link::before{content:"";position:absolute;top:2px;width:44px;height:30px;border-radius:999px;background:transparent;z-index:-1}
.sn-bottom-link[aria-current="page"]{color:var(--sn-level-strong)}
.sn-mobile-topbar .sn-icon-button:focus-visible,.sn-bottom-link:focus-visible{outline-color:color-mix(in srgb,var(--sn-level) 42%,transparent)}
.sn-bottom-link{border:0;background:transparent;font-family:inherit;cursor:pointer}
.sn-more-sheet{height:auto!important;max-height:min(78vh,620px);border:0!important;border-radius:24px 24px 0 0;background:var(--sn-surface)!important;color:var(--sn-text)}
.sn-more-sheet .offcanvas-header{padding:20px 20px 10px}
.sn-more-sheet .offcanvas-title{font-size:1.2rem;font-weight:800}
.sn-more-sheet .offcanvas-body{display:grid;gap:8px;padding:10px 16px calc(24px + env(safe-area-inset-bottom))}
.sn-more-item{width:100%;min-height:54px;display:flex;align-items:center;gap:14px;padding:12px 14px;border:0;border-radius:14px;background:var(--sn-surface-subtle);color:var(--sn-text);font:inherit;font-weight:700;text-align:start;text-decoration:none;cursor:pointer}
.sn-more-item svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sn-more-logout{color:var(--sn-danger)}

@media (max-width:1199px){
  .sn-shell{width:100%;max-width:none;margin:0}
  .sn-main{width:min(calc(100% - 32px),var(--sn-content));margin-inline:auto;padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .sn-bottom-nav{display:grid}
  .sn-footer{width:min(calc(100% - 32px),var(--sn-content));margin-inline:auto;margin-bottom:calc(76px + env(safe-area-inset-bottom))}
}


@media (min-width:1200px){
  body.sn-student-body{padding-right:256px}
  .sn-shell{width:100%;max-width:none;margin:0}
  .sn-mobile-topbar{display:none}
  .sn-sidebar{position:fixed;z-index:200;top:0;right:0;bottom:0;width:256px;display:flex;flex-direction:column;padding:24px 16px 16px;background:var(--sn-surface);border-left:1px solid var(--sn-border)}
  .sn-sidebar-logo{display:flex;align-items:center;justify-content:center;min-height:112px;margin:0 0 22px}
  .sn-sidebar-logo img{display:block;width:100%;height:auto;max-width:224px;max-height:112px;object-fit:contain}
  .sn-sidebar-nav{display:flex;flex-direction:column;gap:6px}
  .sn-shell-link{width:100%;min-height:48px;display:flex;align-items:center;gap:12px;padding:10px 14px;border:0;border-radius:12px;background:transparent;color:var(--sn-text-muted);font:inherit;font-weight:700;text-align:start;text-decoration:none;cursor:pointer;transition:background .18s ease,color .18s ease}
  .sn-shell-link:hover{background:var(--sn-surface-subtle);color:var(--sn-text)}
  .sn-shell-link[aria-current="page"]{background:var(--sn-level-soft);color:var(--sn-level-strong)}
  .sn-sidebar-utilities{display:flex;flex-direction:column;gap:4px;margin-top:24px;padding-top:18px;border-top:1px solid var(--sn-border)}
  .sn-sidebar-account{margin-top:auto;padding-top:16px;border-top:1px solid var(--sn-border)}
  .sn-account-summary{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:8px;color:var(--sn-text);text-decoration:none;border-radius:12px}
  .sn-account-summary:hover{background:var(--sn-surface-subtle)}
  .sn-account-avatar{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;background:var(--sn-level);color:var(--sn-bg);line-height:0}
  .sn-account-avatar svg{width:24px;height:24px;display:block;stroke-width:2}
  .sn-account-summary strong,.sn-account-summary small{display:block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sn-account-summary small{color:var(--sn-text-muted);font-size:.75rem}
  .sn-logout{color:var(--sn-danger)}
  .sn-sidebar-primary{min-height:44px;display:flex;align-items:center;justify-content:center;margin-top:8px;border-radius:12px;background:var(--sn-level);color:var(--sn-bg);font-weight:800;text-decoration:none}
  .sn-sidebar :focus-visible{outline-color:color-mix(in srgb,var(--sn-level) 48%,transparent)}
  .sn-main,.sn-footer{width:min(calc(100% - 64px),var(--sn-content));margin-inline:auto}
  .sn-main{padding-block:40px 64px}
}

/* Home page */
.home-page{--sn-level:var(--sn-text);--sn-level-strong:var(--sn-text);--sn-level-soft:var(--sn-surface-subtle);width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,4.5vw,58px)}
.home-page>*{min-width:0;max-width:100%}
.home-page.level-novice{--sn-level:#dc2626;--sn-level-strong:#991b1b;--sn-level-soft:#fff1f2}.home-page.level-advanced-beginner{--sn-level:#db2777;--sn-level-strong:#9d174d;--sn-level-soft:#fdf2f8}.home-page.level-competent{--sn-level:#059669;--sn-level-strong:#065f46;--sn-level-soft:#ecfdf5}.home-page.level-proficient{--sn-level:#7c3aed;--sn-level-strong:#5b21b6;--sn-level-soft:#f5f3ff}.home-page.level-expert{--sn-level:#0891b2;--sn-level-strong:#155e75;--sn-level-soft:#ecfeff}.home-page.level-4n-champion{--sn-level:#ca8a04;--sn-level-strong:#854d0e;--sn-level-soft:#fffbeb}
html[data-theme="dark"] .home-page.level-novice{--sn-level:#f87171;--sn-level-strong:#fca5a5;--sn-level-soft:#351d24}html[data-theme="dark"] .home-page.level-advanced-beginner{--sn-level:#f472b6;--sn-level-strong:#f9a8d4;--sn-level-soft:#361d31}html[data-theme="dark"] .home-page.level-competent{--sn-level:#34d399;--sn-level-strong:#6ee7b7;--sn-level-soft:#15342c}html[data-theme="dark"] .home-page.level-proficient{--sn-level:#a78bfa;--sn-level-strong:#c4b5fd;--sn-level-soft:#29223f}html[data-theme="dark"] .home-page.level-expert{--sn-level:#22d3ee;--sn-level-strong:#67e8f9;--sn-level-soft:#16343b}html[data-theme="dark"] .home-page.level-4n-champion{--sn-level:#fbbf24;--sn-level-strong:#fcd34d;--sn-level-soft:#392d16}
html[data-level-colors="off"] .home-page.level-theme{--sn-level:var(--sn-text);--sn-level-strong:var(--sn-text);--sn-level-soft:var(--sn-surface-subtle)}
.home-page svg{width:1.25rem;height:1.25rem;display:block}
.home-welcome,.home-section,.home-contact{border:1px solid var(--sn-border);border-radius:var(--sn-radius-xl);background:var(--sn-surface);box-shadow:var(--sn-shadow-sm)}
.home-welcome{position:relative;overflow:hidden;padding:clamp(24px,4vw,44px)}
.home-welcome-copy,.home-member-head,.home-member-grid,.home-resume,.home-welcome-note,.home-actions{position:relative;z-index:1}
.home-eyebrow{display:block;margin-bottom:8px;color:var(--sn-level-strong);font-size:.82rem;font-weight:800;letter-spacing:.02em}
.home-welcome h1{max-width:720px;margin:0;font-size:clamp(2rem,3.6vw,3.5rem);line-height:1.13;font-weight:900;letter-spacing:-.03em;text-wrap:balance}
.home-welcome p{max-width:680px;margin:10px 0 0;color:var(--sn-text-muted);font-size:clamp(1rem,1.2vw,1.08rem);line-height:1.75}
.home-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.home-btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border:1px solid transparent;border-radius:12px;font:inherit;font-weight:800;text-decoration:none;cursor:pointer}
.home-btn-primary{background:var(--sn-text);color:var(--sn-bg)}.home-btn-primary:hover{background:color-mix(in srgb,var(--sn-text) 86%,var(--sn-bg));color:var(--sn-bg)}
.home-btn-secondary{background:var(--sn-surface);border-color:var(--sn-border);color:var(--sn-text)}.home-btn-secondary:hover{background:var(--sn-surface-subtle)}
.home-welcome-note{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid var(--sn-border)}
.home-welcome-note span{padding:6px 10px;border-radius:999px;background:var(--sn-surface-subtle);color:var(--sn-text-muted);font-size:.8rem;font-weight:700}
.home-member-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.home-member-head h1{font-size:clamp(2rem,3.4vw,3.2rem)}
.home-level{margin-bottom:1rem;font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.13;white-space:nowrap}
.home-member-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:28px}
.home-member-stat{padding:16px;border-radius:14px;background:var(--sn-surface-subtle)}
.home-member-stat span,.home-member-stat small{display:block}.home-member-stat span{font-size:1.55rem;font-weight:900;font-variant-numeric:tabular-nums}.home-member-stat small{color:var(--sn-text-muted);font-size:.78rem}
.home-resume{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,240px) auto;align-items:center;gap:18px;margin-top:22px;padding:16px;border:1px solid color-mix(in srgb,var(--sn-level) 24%,var(--sn-border));border-radius:16px;background:var(--sn-level-soft)}
.home-resume-copy{display:flex;align-items:center;gap:12px}.home-resume-copy strong,.home-resume-copy small{display:block}.home-resume-copy small{color:var(--sn-text-muted)}
.home-resume-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--sn-level);color:var(--sn-bg)}.home-resume-icon svg{width:20px;height:20px}
.home-resume-progress{height:8px;overflow:hidden;border-radius:999px;background:var(--sn-surface)}.home-resume-progress span{display:block;height:100%;border-radius:inherit;background:var(--sn-level)}
.home-section{padding:clamp(20px,3vw,34px)}
.home-stats-section{padding:clamp(8px,1.4vw,16px) clamp(4px,1vw,12px) 0;border:0;background:transparent;box-shadow:none}
.home-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}.home-section-head.compact{margin-bottom:16px}.home-section-head h2,.home-contact h2{margin:0;font-size:clamp(1.45rem,2.3vw,2rem);font-weight:900;text-wrap:balance}.home-section-head p,.home-contact p{max-width:62ch;margin:6px 0 0;color:var(--sn-text-muted);text-wrap:pretty}
.home-text-link{color:var(--sn-level-strong);font-weight:800;text-decoration:none;white-space:nowrap}
.home-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.home-stats article{position:relative;min-width:0;min-height:118px;display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:14px;padding:18px;border:1px solid transparent;border-radius:16px;background:var(--sn-surface-subtle)}
.home-stats-section .home-stats{gap:0;overflow:hidden;border:1px solid var(--sn-border);border-radius:18px;background:var(--sn-surface-subtle)}
.home-stats-section{border-top:1px solid var(--sn-border)}
.home-stats-section .home-stats article{border:0;border-radius:0;background:transparent}
.home-stats-section .home-stats article+article{border-inline-start:1px solid var(--sn-border)}
.home-stat-icon{width:48px;height:48px;display:grid;grid-row:1/3;place-items:center;align-self:center;margin:0;border:1px solid color-mix(in srgb,var(--sn-level) 18%,var(--sn-border));border-radius:14px;background:var(--sn-level-soft);color:var(--sn-level-strong)}
.home-stat-icon svg{width:23px;height:23px;stroke-width:1.9}.home-stats strong,.home-stats small{min-width:0;display:block}.home-stats strong{align-self:end;font-size:clamp(1.4rem,2.1vw,1.8rem);line-height:1.15;font-weight:900;font-variant-numeric:tabular-nums}.home-stats small{align-self:start;margin-top:6px;color:var(--sn-text-muted);font-size:.8rem;line-height:1.45}
.home-season-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding:13px 16px;border-radius:14px;background:var(--sn-level-soft);color:var(--sn-level-strong)}
.home-season-banner strong{font-variant-numeric:tabular-nums}
.home-community-section{padding:clamp(24px,3.5vw,42px) clamp(4px,1vw,12px) 0;border:0;border-top:1px solid var(--sn-border);background:transparent;box-shadow:none}
.home-community-section>.home-section-head{margin-bottom:28px}
.home-community-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);gap:16px}
.home-panel{min-width:0;padding:18px;border:1px solid var(--sn-border);border-radius:18px;background:var(--sn-surface);box-shadow:var(--sn-shadow-sm)}
.home-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.home-panel-head h3{margin:0;font-size:1.1rem;font-weight:900}.home-panel-head p{margin:2px 0 0;color:var(--sn-text-muted);font-size:.8rem}.home-panel-symbol{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--sn-level-soft);color:var(--sn-level-strong)}.home-panel-symbol svg{width:22px;height:22px}
.home-ranking-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.home-ranking-row,.home-streak-row{min-width:0;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--sn-surface-subtle)}
.home-ranking-row .level-colored,.home-streak-row .level-colored{width:max-content;max-width:100%;background:linear-gradient(135deg,var(--lc),var(--lc2));background-clip:text;-webkit-background-clip:text;color:var(--lc);-webkit-text-fill-color:transparent}
.home-ranking-row>div,.home-streak-row>div{min-width:0}.home-ranking-row strong,.home-ranking-row small,.home-streak-row>div strong,.home-streak-row>div small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-ranking-row strong,.home-streak-row>div strong{font-size:.9rem}.home-ranking-row small,.home-streak-row>div small{font-size:.78rem;line-height:1.45}.home-ranking-row .level-colored,.home-streak-row .level-colored{color:var(--lc)}.home-ranking-row>b,.home-streak-row>b{font-size:.88rem;color:var(--sn-level-strong);font-variant-numeric:tabular-nums}.home-ranking-row>b small,.home-streak-row>b small{display:inline;color:var(--sn-text-muted);font-size:.75rem}
.home-rank{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--sn-border);border-radius:10px;background:var(--sn-surface-subtle);color:var(--sn-text-muted);font-size:.78rem;font-weight:900}.home-rank-1{background:#fff6d8;border-color:#e7c65d;color:#7a5700}.home-rank-2{background:#f3f5f8;border-color:#bdc5d0;color:#4b5563}.home-rank-3{background:#fff0e4;border-color:#d5a176;color:#8b4c1d}html[data-theme=dark] .home-rank-1{background:#3a3013;border-color:#b99328;color:#f8dc79}html[data-theme=dark] .home-rank-2{background:#282b31;border-color:#737b88;color:#d7dce3}html[data-theme=dark] .home-rank-3{background:#35251c;border-color:#a36f49;color:#e5b084}
.home-expand-btn{width:100%;min-height:42px;margin-top:10px;border:1px solid var(--sn-border);border-radius:11px;background:var(--sn-surface);color:var(--sn-text);font:inherit;font-weight:800;cursor:pointer}.home-expand-btn:hover{background:var(--sn-surface-subtle)}
.home-my-rank{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--sn-level-soft);color:var(--sn-level-strong)}.home-my-rank strong{font-size:1.15rem}.home-my-rank small{color:var(--sn-text-muted)}
.home-streak-list{display:grid;gap:8px}.home-streak-row{grid-template-columns:38px minmax(0,1fr) auto}
.home-streak-tip{margin-top:16px;padding:16px 2px 0;border-top:1px solid var(--sn-border)}.home-streak-tip strong{font-size:.88rem}.home-streak-tip p{margin:4px 0 8px;color:var(--sn-text-muted);font-size:.78rem}.home-streak-tip a{color:var(--sn-level-strong);font-size:.8rem;font-weight:800;text-decoration:none}
.home-empty{display:grid;justify-items:center;padding:30px 16px;text-align:center}.home-empty.wide{border:1px dashed var(--sn-border);border-radius:16px;background:var(--sn-surface-subtle)}.home-empty>span{width:44px;height:44px;display:grid;place-items:center;margin-bottom:8px;border-radius:13px;background:var(--sn-level-soft);color:var(--sn-level-strong)}.home-empty>span svg{width:23px;height:23px}.home-empty p{margin:4px 0 10px;color:var(--sn-text-muted);font-size:.85rem}.home-empty a{color:var(--sn-level-strong);font-weight:800}
.home-reviews-section{padding:0 clamp(4px,1vw,12px);border:0;background:transparent;box-shadow:none}
.home-reviews{max-width:100%;display:flex;align-items:stretch;gap:12px;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pinch-zoom;scrollbar-width:none;padding:2px 1px 8px}.home-reviews::-webkit-scrollbar{display:none}
.home-review-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.home-slider-meta{display:flex;align-items:center;gap:10px}.home-slider-meta>[data-review-status]{min-width:48px;color:var(--sn-text-muted);font-size:.8rem;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}.home-slider-controls{display:flex;direction:rtl;gap:6px}.home-slider-controls button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--sn-border);border-radius:12px;background:var(--sn-surface);color:var(--sn-text);font:inherit;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease}.home-slider-controls button:hover:not(:disabled){background:var(--sn-level-soft);color:var(--sn-level-strong)}.home-slider-controls button:focus-visible{outline:3px solid color-mix(in srgb,var(--sn-level) 35%,transparent);outline-offset:2px}.home-slider-controls button:disabled{cursor:default;opacity:.38;background:var(--sn-surface-subtle)}.home-slider-controls svg{width:20px;height:20px}
.home-review-card{min-width:0;min-height:176px;flex:0 0 calc((100% - 24px)/3);display:flex;flex-direction:column;padding:18px;border:1px solid var(--sn-border);border-radius:16px;background:var(--sn-surface);box-shadow:var(--sn-shadow-sm)}.home-review-top{display:flex;align-items:center;gap:12px}.home-review-top .home-review-avatar{width:48px;height:48px;display:flex;flex:0 0 48px;align-items:center;justify-content:center;overflow:hidden;border-radius:13px;background:var(--sn-level);color:var(--sn-bg);line-height:0}.home-review-avatar svg{width:27px;height:27px;stroke-width:2}.home-review-top strong,.home-review-top span{display:block}.home-review-top span{color:var(--sn-text-muted);font-size:.76rem;font-weight:800}.home-review-card p{margin:14px 0 0;color:var(--sn-text-muted);font-size:.88rem;line-height:1.8}.home-review-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.home-review-card.is-expanded .home-review-text{display:block;overflow:visible}.home-review-more{align-self:flex-start;min-height:44px;margin-top:auto;padding:8px 0 0;border:0;background:transparent;color:var(--sn-level-strong);font:inherit;font-size:.82rem;font-weight:800;cursor:pointer}.home-review-more:hover{text-decoration:underline}.home-review-more:focus-visible{outline-color:color-mix(in srgb,var(--sn-level) 42%,transparent)}
@media (pointer:fine){.home-reviews{cursor:grab}.home-reviews.is-dragging{cursor:grabbing;user-select:none}}
.home-faq{width:100%;margin-inline:auto;padding:clamp(22px,3vw,34px) clamp(4px,1vw,12px) 0;border:0;border-top:1px solid var(--sn-border);background:transparent;box-shadow:none}
.home-faq .accordion{display:block;overflow:hidden;border:1px solid var(--sn-border);border-radius:18px;background:var(--sn-surface);box-shadow:var(--sn-shadow-sm)}.home-faq .accordion-item{overflow:hidden;border:0!important;border-radius:0!important;background:var(--sn-surface)!important}.home-faq .accordion-item:not(:last-child){border-bottom:1px solid var(--sn-border)!important}.home-faq .accordion-button{min-height:58px;padding-block:14px;background:var(--sn-surface)!important;color:var(--sn-text)!important;font-weight:800;box-shadow:none!important}.home-faq .accordion-button:not(.collapsed){background:var(--sn-level-soft)!important;color:var(--sn-level-strong)!important}.home-faq .accordion-button:focus-visible{position:relative;z-index:1;outline:3px solid color-mix(in srgb,var(--sn-level) 35%,transparent);outline-offset:-3px}.home-faq .accordion-body{padding-top:14px;color:var(--sn-text-muted);line-height:1.9;background:var(--sn-surface)}
.home-contact{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,30px);margin-top:clamp(4px,1vw,12px);padding:clamp(24px,4vw,42px);border-color:color-mix(in srgb,var(--sn-level) 24%,var(--sn-border));background:var(--sn-level-soft)}
.home-contact-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.home-contact-links a{min-width:0;min-height:72px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 14px;border:0;border-radius:12px;background:transparent;color:var(--sn-text);text-decoration:none;transition:background .18s ease,color .18s ease}.home-contact-links a+a{border-inline-start:1px solid color-mix(in srgb,var(--sn-level) 24%,var(--sn-border));border-start-start-radius:0;border-end-start-radius:0}.home-contact-links a:hover{background:var(--sn-surface)}.home-contact-links a:focus-visible{outline-color:color-mix(in srgb,var(--sn-level) 42%,transparent)}.home-contact-links a>span{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:var(--sn-surface);color:var(--sn-level-strong)}.home-contact-links a>span svg{width:19px;height:19px}.home-contact-links strong,.home-contact-links small{display:block}.home-contact-links strong{font-size:.9rem}.home-contact-links small{color:var(--sn-text-muted);font-size:.8rem}.home-contact-links b{color:var(--sn-level-strong)}.home-contact-links b svg{width:18px;height:18px}

/* Rating experience */
#UserLikeModal .modal-dialog{width:min(calc(100% - 28px),540px);margin-inline:auto}
#UserLikeModal .sn-rating-modal{overflow:hidden;border:1px solid var(--sn-border);border-radius:22px;background:var(--sn-surface);color:var(--sn-text);box-shadow:var(--sn-shadow-lg)}
#UserLikeModal .sn-rating-header{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 44px;align-items:center;gap:12px;padding:20px;border:0;border-bottom:1px solid var(--sn-border)}
.sn-rating-symbol{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:var(--sn-level-soft);color:var(--sn-level-strong)}.sn-rating-symbol svg{width:23px;height:23px}
#UserLikeModal .sn-rating-header h2{margin:0;color:var(--sn-text);font-size:1.25rem;font-weight:900}.sn-rating-header p{margin:3px 0 0;color:var(--sn-text-muted);font-size:.82rem;line-height:1.6}
.sn-rating-close{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:12px;background:transparent;color:var(--sn-text-muted);font-size:1.75rem;line-height:1;cursor:pointer}.sn-rating-close:hover{background:var(--sn-surface-subtle);color:var(--sn-text)}
#UserLikeModal .modal-body{padding:20px}.sn-rating-form{display:grid;gap:20px}.sn-rating-fieldset{min-width:0;margin:0;padding:0;border:0}.sn-rating-fieldset legend,.sn-rating-message label{width:100%;margin:0 0 10px;color:var(--sn-text);font-size:.9rem;font-weight:800}.sn-rating-fieldset legend span{color:inherit;font-size:inherit;font-weight:inherit}.sn-rating-message label span{color:var(--sn-text-muted);font-size:.75rem;font-weight:600}
.sn-rating-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.sn-rating-choice{min-width:0;min-height:44px;border:1px solid var(--sn-border);border-radius:11px;background:var(--sn-surface-subtle);color:var(--sn-text);font:inherit;font-weight:900;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}.sn-rating-choice:hover{border-color:var(--sn-level);color:var(--sn-level-strong)}.sn-rating-choice:active{transform:scale(.96)}.sn-rating-choice.is-selected{border-color:var(--sn-level);background:var(--sn-level-soft);color:var(--sn-level-strong);box-shadow:0 0 0 2px color-mix(in srgb,var(--sn-level) 16%,transparent)}
.sn-rating-message textarea{width:100%;min-height:124px;resize:vertical;padding:13px 14px;border:1px solid var(--sn-border);border-radius:14px;background:var(--sn-surface-subtle);color:var(--sn-text);font:inherit;line-height:1.7}.sn-rating-message textarea::placeholder{color:var(--sn-text-muted)}.sn-rating-message textarea:focus{outline:0;border-color:var(--sn-level);box-shadow:0 0 0 3px color-mix(in srgb,var(--sn-level) 18%,transparent)}
#UserLikeModal .modal-footer{display:grid;grid-template-columns:1fr 1.45fr;gap:10px;padding:0 20px 20px;border:0}.sn-rating-cancel,.sn-rating-submit{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:13px;font:inherit;font-weight:900;cursor:pointer}.sn-rating-cancel{border:1px solid var(--sn-border);background:var(--sn-surface);color:var(--sn-text)}.sn-rating-cancel:hover{background:var(--sn-surface-subtle)}.sn-rating-submit{border:1px solid var(--sn-text);background:var(--sn-text);color:var(--sn-bg)}.sn-rating-submit:hover:not(:disabled){background:color-mix(in srgb,var(--sn-text) 86%,var(--sn-bg))}.sn-rating-submit:disabled{cursor:wait;opacity:.6}.sn-rating-submit svg{width:18px;height:18px}

@media (max-width:1199px){
  .home-review-card{flex-basis:calc((100% - 12px)/2)}
}
@media (max-width:839px){
  .home-page{gap:32px}.home-member-grid{grid-template-columns:1fr 1fr}.home-resume{grid-template-columns:1fr}.home-community-grid,.home-contact{grid-template-columns:minmax(0,1fr)}.home-contact-links{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home-reviews-section .home-section-head{align-items:flex-start;flex-direction:column}
  .home-reviews-section .home-review-actions{width:100%;justify-content:space-between;flex-wrap:nowrap}
}
@media (min-width:800px) and (max-width:910px){
  .home-stats article{min-height:104px;grid-template-columns:36px minmax(0,1fr);column-gap:8px;padding:12px}
  .home-stat-icon{width:36px;height:36px;border-radius:10px}.home-stat-icon svg{width:18px;height:18px}
  .home-stats strong{font-size:1.3rem}.home-stats small{margin-top:4px;font-size:.69rem;white-space:nowrap}
}
@media (max-width:799px){
  .home-stats{grid-template-columns:1fr 1fr}.home-stats-section .home-stats article+article{border-inline-start:0}.home-stats-section .home-stats article:nth-child(even){border-inline-start:1px solid var(--sn-border)}.home-stats-section .home-stats article:nth-child(n+3){border-top:1px solid var(--sn-border)}
}
@media (max-width:719px){
  .home-contact-links{grid-template-columns:1fr}.home-contact-links a+a{border-inline-start:0;border-top:1px solid color-mix(in srgb,var(--sn-level) 24%,var(--sn-border));border-radius:0}
}
@media (max-width:599px){
  .home-level{font-size:1.9rem}
  .home-level.level-advanced-beginner,.home-level.level-4n-champion{width:52%;font-size:clamp(1.15rem,5.5vw,1.45rem);line-height:1.08;text-align:left;white-space:normal;text-wrap:balance}
  .sn-footer-inner{justify-content:center;text-align:center}
  .sn-footer-message{display:none}
  #UserLikeModal .modal-dialog{width:100%;margin:0;min-height:100%;align-items:flex-end}
  #UserLikeModal .sn-rating-modal{border-radius:22px 22px 0 0;border-bottom:0}
  #UserLikeModal .sn-rating-header{padding:18px 16px}
  #UserLikeModal .modal-body{padding:18px 16px}
  #UserLikeModal .modal-footer{padding:0 16px calc(16px + env(safe-area-inset-bottom))}
  .home-welcome,.home-section,.home-contact{border-radius:18px}.home-welcome{padding:20px 18px}.home-welcome .home-eyebrow{margin-bottom:6px}.home-welcome h1{font-size:1.9rem;line-height:1.16;letter-spacing:-.02em}.home-welcome p{margin-top:9px;font-size:.98rem;line-height:1.7}.home-welcome .home-actions{gap:8px;margin-top:18px}.home-welcome .home-btn{min-height:44px}.home-welcome-note{margin-top:22px;padding-top:17px}.home-member-head{display:block}.home-level{position:absolute;top:0;inset-inline-end:0;display:inline-block;margin:0}.home-member-grid{margin-top:22px}.home-stats{grid-template-columns:1fr 1fr}.home-stats article{min-height:108px;grid-template-columns:40px minmax(0,1fr);column-gap:10px;padding:12px}.home-stat-icon{width:40px;height:40px;border-radius:12px}.home-stat-icon svg{width:20px;height:20px}.home-stats strong{font-size:clamp(1.25rem,6vw,1.5rem)}.home-stats small{font-size:.74rem}.home-section-head{align-items:flex-start;flex-direction:column}.home-section-head .home-btn{width:100%}.home-season-banner{align-items:flex-start;flex-direction:column}.home-community-grid{grid-template-columns:minmax(0,1fr)}.home-panel{padding:14px}.home-ranking-row,.home-streak-row{grid-template-columns:34px minmax(0,1fr) auto;padding:9px 7px}.home-my-rank{grid-template-columns:1fr auto}.home-my-rank small{grid-column:1/-1}.home-contact-links{grid-template-columns:1fr}.home-contact-links a+a{border-inline-start:0;border-top:1px solid color-mix(in srgb,var(--sn-level) 24%,var(--sn-border));border-radius:0}.home-actions .home-btn{flex:1 1 100%}.home-review-card{flex-basis:calc(100% - 32px)}.home-review-actions{width:100%;justify-content:space-between}.home-review-actions>.home-btn{width:auto;flex:1}.home-slider-meta{flex:0 0 auto}
}
@media (max-width:379px){
  .sn-mobile-topbar{grid-template-columns:minmax(52px,1fr) auto;gap:4px;padding-inline:10px}
  .sn-mobile-topbar .sn-logo img{height:50px;max-width:112px}
  .sn-mobile-topbar-actions{gap:0}
}

/* Exam builder — student theme v2 */
.exam-builder{width:100%;max-width:var(--sn-content)}
.exam-builder .exam-builder-surface{display:grid;gap:32px;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible}
.exam-builder-hero{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;margin:0;padding:clamp(24px,4vw,42px);overflow:hidden;border:1px solid var(--sn-border);border-radius:var(--sn-radius-xl);background:var(--sn-surface);box-shadow:var(--sn-shadow-sm)}
.exam-builder-hero::after{content:none}
.exam-builder .ec-hero-icon{position:relative;z-index:1;width:54px;height:54px;display:grid;place-items:center;flex:0 0 54px;border:1px solid color-mix(in srgb,var(--sn-level) 20%,var(--sn-border))!important;border-radius:16px!important;background:var(--sn-level-soft)!important;color:var(--sn-level-strong)!important}
.exam-builder .ec-hero-copy{position:relative;z-index:1;min-width:0}.exam-builder .ec-hero-title{margin:0;font-size:clamp(1.8rem,3vw,2.55rem);line-height:1.2;font-weight:900}.exam-builder .ec-hero-sub{max-width:58ch;margin:7px 0 0;color:var(--sn-text-muted);font-size:.96rem;line-height:1.75}
.exam-builder-steps{position:relative;z-index:1;display:flex;align-items:center;gap:6px;padding:5px;border:1px solid var(--sn-border);border-radius:14px;background:var(--sn-surface-subtle)}
.exam-builder-steps button{min-height:40px;display:flex;align-items:center;gap:7px;padding:7px 10px;border:0;border-radius:10px;background:transparent;color:var(--sn-text-muted);font:inherit;font-size:.76rem;font-weight:800;white-space:nowrap;cursor:pointer;transition:background .18s ease,color .18s ease}.exam-builder-steps button:hover:not(:disabled){background:var(--sn-surface);color:var(--sn-text)}.exam-builder-steps button:disabled{cursor:not-allowed;opacity:.55}
.exam-builder-steps b{width:23px;height:23px;display:grid;place-items:center;border:1px solid var(--sn-border);border-radius:8px;background:var(--sn-surface);font-size:.72rem}.exam-builder-steps .is-current{background:var(--sn-level-soft);color:var(--sn-level-strong)}.exam-builder-steps .is-current b{border-color:color-mix(in srgb,var(--sn-level) 35%,var(--sn-border));color:var(--sn-level-strong)}
.exam-builder-steps .is-complete{background:var(--sn-surface);color:var(--sn-text)}.exam-builder-steps .is-complete b{border-color:var(--sn-text);background:var(--sn-text);color:var(--sn-bg)}
.exam-builder .exam-builder-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 14px;padding:0;color:var(--sn-text)}.exam-builder-section-title span{font-size:1.08rem;font-weight:900}.exam-builder-section-title small{color:var(--sn-text-muted);font-size:.78rem;font-weight:600}
.exam-builder .ec-filters-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.exam-builder .ec-filter-card{min-width:0;padding:16px!important;border:1px solid var(--sn-border)!important;border-radius:16px!important;background:var(--sn-surface)!important;box-shadow:var(--sn-shadow-sm)}
.exam-builder .ec-filter-card:hover{border-color:var(--sn-border)!important}.exam-builder .ec-filter-label{display:block;margin:0 0 12px;color:var(--sn-text);font-size:.84rem;font-weight:900}
.exam-builder .ec-toggle-group{display:flex;gap:7px;flex-wrap:wrap}.exam-builder .ec-toggle{min-height:42px;display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto;padding:8px 11px;border:1px solid transparent;border-radius:11px!important;background:var(--sn-surface-subtle);color:var(--sn-text-muted)!important;font-size:.76rem;font-weight:800;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.exam-builder .ec-toggle:hover:not(.ec-toggle-locked){border-color:var(--sn-border);color:var(--sn-text)!important}.exam-builder .ec-toggle:active:not(.ec-toggle-locked){transform:scale(.98)}.exam-builder .ec-toggle.active{border-color:color-mix(in srgb,var(--sn-level) 42%,var(--sn-border))!important;background:var(--sn-level-soft)!important;color:var(--sn-level-strong)!important;box-shadow:none!important}.exam-builder .ec-toggle-locked{opacity:.48;cursor:not-allowed}
.exam-category-section{display:grid;gap:0;padding:clamp(18px,2.5vw,26px);border:1px solid var(--sn-border);border-radius:20px;background:var(--sn-surface);box-shadow:var(--sn-shadow-sm)}
.exam-builder .ec-grid{gap:10px}.exam-builder .ec-btn{position:relative;min-width:0;min-height:126px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;padding:16px!important;overflow:hidden;border:1px solid var(--sn-border)!important;border-radius:15px!important;background:var(--sn-surface-subtle)!important;color:var(--sn-text)!important;text-align:start;box-shadow:none!important;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.exam-builder .ec-btn::before{content:"";position:absolute;inset:0;background:var(--sn-level-soft);opacity:0;pointer-events:none}.exam-builder .ec-btn>*{position:relative;z-index:1}.exam-builder .ec-btn:hover:not(.ec-btn-locked){border-color:color-mix(in srgb,var(--sn-level) 28%,var(--sn-border))!important;transform:translateY(-1px)}.exam-builder .ec-btn.selected{border-color:var(--sn-level)!important;background:var(--sn-level-soft)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--sn-level) 12%,transparent)!important}.exam-builder .ec-btn.selected .ec-btn-name{color:var(--sn-level-strong)}
.exam-builder .ec-btn-brand{color:var(--sn-level-strong);font-size:.7rem;font-weight:900}.exam-builder .ec-btn-name{max-width:100%;font-size:.92rem;font-weight:900;line-height:1.5;text-wrap:balance}.exam-builder .ec-btn-count{align-self:center;min-width:0;padding:0;border:0;background:transparent;color:var(--sn-text-muted);font-size:1.15rem;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;text-align:center}.exam-builder .ec-btn.selected .ec-btn-count{color:var(--sn-level-strong)}
.exam-builder .ec-start-bar{position:sticky;z-index:80;inset-inline:0;bottom:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;margin-top:4px;padding:14px 16px;border:1px solid var(--sn-border)!important;border-radius:18px!important;background:color-mix(in srgb,var(--sn-surface) 94%,transparent)!important;box-shadow:var(--sn-shadow-lg);backdrop-filter:blur(14px)}
.exam-start-copy strong,.exam-start-copy span{display:block}.exam-start-copy strong{font-size:.9rem;font-weight:900}.exam-start-copy span{margin-top:2px;color:var(--sn-text-muted);font-size:.76rem}.exam-builder .ec-start-btn{min-width:190px;min-height:50px;padding:10px 20px;border-radius:13px!important;background:var(--sn-text)!important;border-color:var(--sn-text)!important;color:var(--sn-bg)!important;font-weight:900}.exam-builder .ec-start-btn:disabled{background:var(--sn-surface-subtle)!important;border-color:var(--sn-border)!important;color:var(--sn-text-muted)!important;opacity:1}.exam-builder .ec-start-hint{position:absolute;inset-inline-end:16px;bottom:-24px;margin:0;color:var(--sn-text-muted);font-size:.72rem;transition:opacity .18s ease}
.exam-builder .ec-resume{margin:0;padding:16px 18px;border:1px solid color-mix(in srgb,var(--sn-level) 24%,var(--sn-border));border-radius:16px;background:var(--sn-level-soft)}
.exam-builder-hero{order:1}.exam-stage[data-stage-panel="settings"]{order:2}.exam-stage[data-stage-panel="sources"]{order:3}.exam-stage[data-stage-panel="start"]{order:4}.exam-builder .ec-resume{order:0}
.exam-stage{scroll-margin-top:24px}.exam-stage[hidden]{display:none!important}.exam-stage-body{display:grid;gap:24px}.exam-stage-summary{width:100%;min-height:70px;display:none;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--sn-border);border-radius:16px;background:var(--sn-surface);color:var(--sn-text);font:inherit;text-align:start;cursor:pointer}.exam-stage.is-complete .exam-stage-summary{display:grid}.exam-stage.is-complete .exam-stage-body{display:none}.exam-stage-summary>span{display:flex;align-items:center;gap:10px}.exam-stage-summary b{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:var(--sn-text);color:var(--sn-bg);font-size:.78rem}.exam-stage-summary strong{font-size:.9rem}.exam-stage-summary small{min-width:0;overflow:hidden;color:var(--sn-text-muted);font-size:.8rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.exam-stage-summary:hover{border-color:var(--sn-text-muted)}
.exam-settings-heading>span{display:flex;align-items:center;gap:10px}.exam-settings-heading>span b{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:var(--sn-text);color:var(--sn-bg);font-size:.8rem}
.exam-balanced-preset{width:100%;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 14px;border:1px solid var(--sn-border);border-radius:14px;background:var(--sn-surface-subtle);color:var(--sn-text);font:inherit;text-align:start;cursor:pointer}.exam-balanced-preset:hover{border-color:var(--sn-text-muted);background:var(--sn-surface)}.exam-balanced-preset span,.exam-balanced-preset strong,.exam-balanced-preset small{display:block}.exam-balanced-preset strong{font-size:.9rem}.exam-balanced-preset small{margin-top:2px;color:var(--sn-text-muted);font-size:.75rem}.exam-balanced-preset>b{padding:6px 9px;border-radius:9px;background:var(--sn-text);color:var(--sn-bg);font-size:.72rem;white-space:nowrap}
.exam-source-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:4px}.exam-source-heading>div{display:flex;align-items:center;gap:12px;min-width:0}.exam-source-heading h2{margin:0;color:var(--sn-text);font-size:1.35rem;font-weight:900}.exam-source-heading p{margin:3px 0 0;color:var(--sn-text-muted);font-size:.85rem}.exam-step-number{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border-radius:12px;background:var(--sn-text);color:var(--sn-bg);font-size:.9rem;font-weight:900}.exam-login-note{min-height:46px;display:flex;align-items:center;gap:10px;max-width:330px;padding:8px 12px;border:1px solid var(--sn-border);border-radius:12px;background:var(--sn-surface);color:var(--sn-text-muted);text-decoration:none;font-size:.75rem;line-height:1.45}.exam-login-note:hover{border-color:var(--sn-level);color:var(--sn-text)}.exam-login-note svg{width:18px;height:18px;flex:0 0 18px;color:var(--sn-level-strong)}.exam-login-note strong{display:block;color:var(--sn-text);font-size:.78rem}
.exam-stage-guidance{margin:0;color:var(--sn-text-muted);font-size:.82rem}.exam-category-section .exam-builder-section-title em{display:inline-flex;margin-inline-start:8px;padding:3px 7px;border-radius:999px;background:var(--sn-surface-subtle);color:var(--sn-text-muted);font-size:.65rem;font-style:normal;font-weight:800}
.exam-selection-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--sn-border);border-radius:12px;background:var(--sn-surface-subtle);color:var(--sn-text);font-size:.8rem}.exam-selection-notice[hidden]{display:none}.exam-selection-notice button,.count-retry{min-height:40px;padding:7px 12px;border:1px solid var(--sn-border);border-radius:10px;background:var(--sn-surface);color:var(--sn-text);font:inherit;font-size:.78rem;font-weight:900;cursor:pointer}.exam-stage-actions{display:flex;justify-content:flex-end}.exam-next-btn{min-width:190px;min-height:48px;padding:10px 18px;border:1px solid var(--sn-text);border-radius:12px;background:var(--sn-text);color:var(--sn-bg);font:inherit;font-weight:900;cursor:pointer}.exam-next-btn:disabled{border-color:var(--sn-border);background:var(--sn-surface-subtle);color:var(--sn-text-muted);cursor:not-allowed}
.exam-start-heading{display:flex;align-items:center;gap:12px;padding-top:4px}.exam-start-heading h2{margin:0;font-size:1.25rem;font-weight:900}.exam-start-heading p{margin:2px 0 0;color:var(--sn-text-muted);font-size:.82rem}.ec-btn-count,.exam-start-copy span{transition:opacity .15s ease,transform .15s ease}.ec-btn-count.is-updating,.exam-start-copy span.is-updating{opacity:.42;transform:translateY(1px)}
.exam-recipe{display:flex;flex-wrap:wrap;gap:8px}.exam-recipe span{min-height:38px;display:inline-flex;align-items:center;padding:7px 11px;border:1px solid var(--sn-border);border-radius:10px;background:var(--sn-surface-subtle);color:var(--sn-text);font-size:.78rem;font-weight:800}.count-retry{grid-column:1/-1;justify-self:start}.count-retry[hidden]{display:none}
.exam-builder .ec-start-btn:not(:disabled){min-width:220px;min-height:54px;gap:10px;border:1px solid var(--sn-text)!important;border-radius:14px!important;background:var(--sn-text)!important;color:var(--sn-bg)!important;box-shadow:0 8px 22px color-mix(in srgb,var(--sn-text) 18%,transparent);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.exam-builder .ec-start-btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 11px 28px color-mix(in srgb,var(--sn-text) 24%,transparent)}.exam-builder .ec-start-btn:not(:disabled):active{transform:translateY(0)}.exam-builder .ec-start-btn svg{width:28px;height:28px;padding:6px;border-radius:9px;background:color-mix(in srgb,var(--sn-bg) 14%,transparent);transition:transform .18s ease}.exam-builder .ec-start-btn:not(:disabled):hover svg{transform:translateX(-3px)}
.exam-builder .exam-category-section{gap:14px;padding:0 0 28px;border:0;border-bottom:1px solid var(--sn-border);border-radius:0;background:transparent;box-shadow:none}.exam-builder .exam-category-section:last-of-type{border-bottom:0}.exam-builder .ec-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important}.exam-builder .ec-btn{min-height:104px}.exam-builder .ec-btn::after{content:"";position:absolute;inset-inline-end:13px;top:13px;width:20px;height:20px;border:1px solid var(--sn-border);border-radius:7px;background:var(--sn-surface)}.exam-builder .ec-btn.selected::after{content:"";border-color:var(--sn-level);background:var(--sn-level) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8f8fb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>") center/13px 13px no-repeat}
html[data-theme="dark"] .exam-builder .ec-btn.selected::after{background:var(--sn-level) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101014' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>") center/13px 13px no-repeat}.exam-builder .ec-btn-locked::after{content:"";opacity:.55}.exam-builder .ec-btn-locked{opacity:1!important;background:color-mix(in srgb,var(--sn-surface-subtle) 72%,var(--sn-surface))!important;color:var(--sn-text-muted)!important}.exam-builder .ec-btn-locked .ec-btn-name{color:var(--sn-text-muted)}
@media(max-width:999px){.exam-builder-hero{grid-template-columns:auto minmax(0,1fr)}.exam-builder-steps{grid-column:1/-1;width:100%;justify-content:space-between}.exam-builder-steps span{flex:1;justify-content:center}.exam-builder .ec-filters-row{grid-template-columns:1fr}.exam-builder .ec-filter-card{display:grid;grid-template-columns:minmax(120px,.32fr) minmax(0,1fr);align-items:start;gap:14px}.exam-builder .ec-filter-label{margin:10px 0 0}}
@media(max-width:599px){.exam-builder .exam-builder-surface{gap:24px}.exam-builder-hero{grid-template-columns:1fr;padding:20px 18px;border-radius:18px}.exam-builder .ec-hero-icon{width:48px;height:48px}.exam-builder-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.exam-builder-steps button{min-width:0;justify-content:center;padding-inline:5px;font-size:.68rem}.exam-builder-steps b{flex:0 0 23px}.exam-builder .exam-builder-section-title{align-items:flex-start;flex-direction:column;gap:3px}.exam-builder .ec-filter-card{display:block;padding:14px!important}.exam-builder .ec-filter-label{margin:0 0 10px}.exam-builder .ec-toggle{flex:1 1 calc(50% - 7px)}.exam-source-heading{align-items:flex-start;flex-direction:column}.exam-login-note{width:100%;max-width:none}.exam-builder .exam-category-section{padding:0 0 22px}.exam-builder .ec-grid{grid-template-columns:1fr 1fr!important;gap:8px}.exam-builder .ec-btn{min-height:104px;padding:13px!important}.exam-builder .ec-btn-name{font-size:.82rem}.exam-stage-summary{grid-template-columns:1fr}.exam-stage-summary small{padding-inline-start:42px}.exam-stage-actions,.exam-next-btn{width:100%}.exam-builder .ec-start-bar{position:static;grid-template-columns:1fr;padding:14px;border-radius:16px!important}.exam-builder .ec-start-btn{width:100%;min-width:0}.exam-start-copy{display:block}.exam-builder .ec-start-hint{position:static;display:block;margin-top:-6px}.exam-recipe{display:grid;grid-template-columns:1fr 1fr}.exam-selection-notice{align-items:flex-start;flex-direction:column}.exam-selection-notice button{width:100%}}
@media(max-width:379px){.exam-builder .ec-grid{grid-template-columns:1fr!important}.exam-builder .ec-btn{min-height:100px}}
@media(prefers-reduced-motion:reduce){.exam-builder .ec-btn,.exam-builder .ec-toggle{transition:none}.exam-builder .ec-btn:hover{transform:none}}

/* تكوين الاختبار — أيقونات SVG موحدة (قفل الزائر + شريط الاستئناف) */
.exam-builder .ec-lock{display:inline-flex;align-items:center;margin-inline-start:5px;color:var(--sn-text-muted);opacity:.85}
.exam-builder .ec-lock-svg{width:13px;height:13px;flex:0 0 13px;display:block}
.exam-builder .ec-toggle-locked .ec-lock,.exam-builder .ec-btn-locked .ec-lock{color:var(--sn-text-muted)}
.exam-builder .ec-lock-svg{vertical-align:-2px}
.exam-builder .ec-resume{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.exam-builder .ec-resume-lead{display:flex;align-items:center;gap:12px;min-width:0}
.exam-builder .ec-resume-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:11px;border:1px solid color-mix(in srgb,var(--sn-level) 24%,var(--sn-border));background:var(--sn-surface);color:var(--sn-level-strong)}
.exam-builder .ec-resume-icon svg{width:20px;height:20px}
.exam-builder .ec-resume-text strong{display:block;font-size:.92rem;font-weight:900;color:var(--sn-text)}
.exam-builder .ec-resume-text span{display:block;margin-top:1px;font-size:.8rem;color:var(--sn-text-muted)}

/* ===== مكتبتي (MyNotes) — نمط التصميم الموحّد ===== */
.mn-page{width:100%;min-width:0;max-width:860px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.mn-page>*{min-width:0;max-width:100%}
.mn-head{margin-bottom:2px}
.mn-eyebrow{display:block;margin-bottom:8px;color:var(--sn-level-strong);font-size:.82rem;font-weight:800;letter-spacing:.02em}
.mn-head h1{margin:0;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.mn-head p{max-width:62ch;margin:8px 0 0;color:var(--sn-text-muted);line-height:1.7;text-wrap:pretty}

/* تبويبات كفلاتر */
.mn-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
.mn-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--sn-border);border-radius:12px;background:var(--sn-surface);color:var(--sn-text-muted);font-weight:800;text-decoration:none;transition:background .18s ease,color .18s ease,border-color .18s ease}
.mn-tab:hover{background:var(--sn-surface-subtle);color:var(--sn-text)}
.mn-tab.is-active{background:var(--sn-level-soft);border-color:color-mix(in srgb,var(--sn-level) 45%,var(--sn-border));color:var(--sn-level-strong)}
.mn-tab-icon{display:grid;place-items:center}.mn-tab-icon svg{width:19px;height:19px}
.mn-tab b{min-width:22px;padding:1px 7px;border-radius:999px;background:var(--sn-surface-subtle);color:var(--sn-text-muted);font-size:.78rem;font-weight:900;font-variant-numeric:tabular-nums}
.mn-tab.is-active b{background:color-mix(in srgb,var(--sn-level) 16%,transparent);color:var(--sn-level-strong)}

/* بطاقة سؤال */
.mn-card{padding:clamp(16px,2.4vw,22px);border:1px solid var(--sn-border);border-radius:var(--sn-radius-lg);background:var(--sn-surface);box-shadow:var(--sn-shadow-sm)}
.mn-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.mn-badge{max-width:70%;padding:5px 12px;border-radius:999px;background:var(--sn-surface-subtle);border:1px solid var(--sn-border);color:var(--sn-text-muted);font-size:.78rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-card-actions{display:flex;align-items:center;gap:6px}
.mn-icon-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--sn-text-muted);cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.mn-icon-btn:hover{background:var(--sn-surface-subtle);color:var(--sn-text)}
.mn-icon-btn svg{width:20px;height:20px}
.mn-fav .mn-star{fill:none;transition:fill .18s ease}
.mn-fav:hover{color:var(--sn-level-strong)}
.mn-fav.is-fav{color:var(--sn-level)}.mn-fav.is-fav .mn-star{fill:var(--sn-level)}
.mn-del:hover{background:color-mix(in srgb,var(--sn-danger) 12%,transparent);color:var(--sn-danger)}

.mn-q{margin:0 0 14px;font-size:1rem;font-weight:800;line-height:1.75;color:var(--sn-text)}

/* الخيارات — تعتمد على .saved-choice المعرّفة مسبقًا */
.mn-choices{display:grid;gap:8px;margin-bottom:14px}
.mn-choices .saved-choice{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;font-size:.92rem;line-height:1.6}
.mn-choice-tag{flex:0 0 auto;font-size:.76rem;font-weight:900}
.mn-choice-tag.is-correct{color:var(--sn-success)}
.mn-choice-tag.is-wrong{color:var(--sn-danger)}

/* الشرح */
.mn-rational{margin-bottom:14px;border:1px solid var(--sn-border);border-radius:12px;background:var(--sn-surface-subtle);overflow:hidden}
.mn-rational>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:46px;padding:10px 14px;color:var(--sn-text);font-size:.86rem;font-weight:800;cursor:pointer;list-style:none}
.mn-rational>summary::-webkit-details-marker{display:none}
.mn-rational-chevron{width:18px;height:18px;transition:transform .2s ease}
.mn-rational[open]>summary .mn-rational-chevron{transform:rotate(180deg)}
.mn-rational-body{padding:2px 14px 14px;color:var(--sn-text-muted);font-size:.88rem;line-height:1.9}

/* الملاحظة */
.mn-note-label{display:block;margin-bottom:6px;color:var(--sn-text-muted);font-size:.82rem;font-weight:700}
.mn-note-input{width:100%;padding:12px 14px;border:1px solid var(--sn-border);border-radius:12px;background:var(--sn-surface);color:var(--sn-text);font:inherit;font-size:.9rem;line-height:1.7;resize:vertical;min-height:56px}
.mn-note-input:focus{outline:0;border-color:var(--sn-level);box-shadow:0 0 0 3px color-mix(in srgb,var(--sn-level) 16%,transparent)}
.mn-note-foot{display:flex;align-items:center;gap:12px;margin-top:10px}
.mn-note-status{color:var(--sn-success);font-size:.8rem;font-weight:800;opacity:0;transition:opacity .18s ease}
.mn-note-status.is-visible{opacity:1}

/* الأزرار */
.mn-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:9px 18px;border:1px solid transparent;border-radius:12px;font:inherit;font-weight:800;text-decoration:none;cursor:pointer;transition:background .18s ease,color .18s ease}
.mn-btn-primary{background:var(--sn-text);color:var(--sn-bg)}
.mn-btn-primary:hover{background:color-mix(in srgb,var(--sn-text) 86%,var(--sn-bg))}
.mn-btn-secondary{background:var(--sn-surface);border-color:var(--sn-border);color:var(--sn-text)}
.mn-btn-secondary:hover{background:var(--sn-surface-subtle)}

/* حالة فارغة */
.mn-empty{display:grid;justify-items:center;text-align:center;padding:44px 20px;border:1px dashed var(--sn-border);border-radius:var(--sn-radius-lg);background:var(--sn-surface-subtle)}
.mn-empty-icon{width:52px;height:52px;display:grid;place-items:center;margin-bottom:12px;border-radius:15px;background:var(--sn-level-soft);color:var(--sn-level-strong)}
.mn-empty-icon svg{width:26px;height:26px}
.mn-empty strong{font-size:1.05rem;font-weight:900}
.mn-empty p{max-width:44ch;margin:6px 0 16px;color:var(--sn-text-muted);font-size:.9rem;line-height:1.7}

/* ترقيم الصفحات */
.mn-pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px}
.mn-page{min-width:42px;height:42px;display:grid;place-items:center;padding:0 10px;border:1px solid var(--sn-border);border-radius:11px;background:var(--sn-surface);color:var(--sn-text);font-weight:800;text-decoration:none;font-variant-numeric:tabular-nums;transition:background .18s ease,border-color .18s ease}
.mn-page:hover{background:var(--sn-surface-subtle)}
.mn-page svg{width:19px;height:19px}
.mn-page.is-active{background:var(--sn-level-soft);border-color:color-mix(in srgb,var(--sn-level) 45%,var(--sn-border));color:var(--sn-level-strong)}
.mn-page.is-disabled{opacity:.4;pointer-events:none;background:var(--sn-surface-subtle)}

@media (max-width:600px){
  .mn-card-actions .mn-icon-btn{width:44px;height:44px}
  .mn-choices .saved-choice{align-items:flex-start;flex-direction:column;gap:6px}
}

/* ===== المذكرات (Download) — نمط التصميم الموحّد ===== */
.dl-page{width:100%;min-width:0;max-width:var(--sn-content);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3.5vw,40px)}
.dl-page>*{min-width:0;max-width:100%}
.dl-head{max-width:760px}
.dl-eyebrow{display:block;margin-bottom:8px;color:var(--sn-level-strong);font-size:.82rem;font-weight:800;letter-spacing:.02em}
.dl-head h1{margin:0;font-size:clamp(1.8rem,3.2vw,2.8rem);font-weight:900;line-height:1.13;letter-spacing:-.02em;text-wrap:balance}
.dl-head p{max-width:65ch;margin:10px 0 0;color:var(--sn-text-muted);line-height:1.75;text-wrap:pretty}

.dl-group{display:grid;gap:16px}
.dl-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--sn-border)}
.dl-group-head h2{margin:0;font-size:clamp(1.3rem,2vw,1.7rem);font-weight:900;text-wrap:balance}
.dl-group-count{flex:0 0 auto;color:var(--sn-text-muted);font-size:.82rem;font-weight:700}

.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.dl-card{min-width:0;display:flex;flex-direction:column;gap:16px;padding:18px;border:1px solid var(--sn-border);border-radius:var(--sn-radius-lg);background:var(--sn-surface);box-shadow:var(--sn-shadow-sm);color:var(--sn-text);text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.dl-card:hover{border-color:color-mix(in srgb,var(--sn-level) 45%,var(--sn-border));transform:translateY(-2px)}
.dl-card:focus-visible{outline:3px solid color-mix(in srgb,var(--sn-level) 40%,transparent);outline-offset:2px}
.dl-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dl-card-icon{width:46px;height:46px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--sn-level) 18%,var(--sn-border));border-radius:13px;background:var(--sn-level-soft);color:var(--sn-level-strong)}
.dl-card-icon svg{width:23px;height:23px}
.dl-card-downloads{display:inline-flex;align-items:center;gap:5px;color:var(--sn-text-muted);font-size:.78rem;font-weight:700}
.dl-card-downloads svg{width:16px;height:16px}
.dl-card-downloads b{font-weight:900;font-variant-numeric:tabular-nums}
.dl-card-body{flex:1 1 auto;min-width:0}
.dl-card-title{margin:0;font-size:1.02rem;font-weight:900;line-height:1.45;text-wrap:balance}
.dl-card-meta{margin:6px 0 0;color:var(--sn-text-muted);font-size:.82rem;font-weight:600}
.dl-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--sn-border);color:var(--sn-level-strong);font-size:.86rem;font-weight:800}
.dl-card-arrow{display:grid;place-items:center;transition:transform .18s ease}
.dl-card-arrow svg{width:18px;height:18px}
.dl-card:hover .dl-card-arrow{transform:translateX(-4px)}

.dl-empty{display:grid;justify-items:center;text-align:center;padding:52px 20px;border:1px dashed var(--sn-border);border-radius:var(--sn-radius-lg);background:var(--sn-surface-subtle)}
.dl-empty-icon{width:56px;height:56px;display:grid;place-items:center;margin-bottom:14px;border-radius:16px;background:var(--sn-level-soft);color:var(--sn-level-strong)}
.dl-empty-icon svg{width:28px;height:28px}
.dl-empty strong{font-size:1.1rem;font-weight:900}
.dl-empty p{max-width:46ch;margin:6px 0 16px;color:var(--sn-text-muted);font-size:.9rem;line-height:1.7}

.dl-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:9px 18px;border:1px solid transparent;border-radius:12px;font:inherit;font-weight:800;text-decoration:none;cursor:pointer;transition:background .18s ease}
.dl-btn-secondary{background:var(--sn-surface);border-color:var(--sn-border);color:var(--sn-text)}
.dl-btn-secondary:hover{background:var(--sn-surface-subtle)}

/* ===== مكتبتي v3 (وضع مذاكرة) ===== */
.mn3-page{width:100%;min-width:0;max-width:880px;margin-inline:auto;display:grid;gap:14px}
.mn3-page>*{min-width:0;max-width:100%}
.mn3-eyebrow{display:block;margin-bottom:8px;color:var(--sn-level-strong);font-size:.82rem;font-weight:800;letter-spacing:.02em}
.mn3-head h1{margin:0;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.mn3-head p{max-width:64ch;margin:8px 0 0;color:var(--sn-text-muted);line-height:1.7;text-wrap:pretty}

.mn3-toolbar{position:sticky;top:8px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;padding:10px;border:1px solid var(--sn-border);border-radius:16px;background:color-mix(in srgb,var(--sn-surface) 88%,transparent);backdrop-filter:blur(12px);box-shadow:var(--sn-shadow-sm)}
.mn3-seg{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--sn-surface-subtle)}
.mn3-seg-btn{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:6px 12px;border-radius:9px;color:var(--sn-text-muted);font-weight:800;font-size:.85rem;text-decoration:none}
.mn3-seg-btn svg{width:17px;height:17px}
.mn3-seg-btn.is-active{background:var(--sn-surface);color:var(--sn-level-strong);box-shadow:var(--sn-shadow-sm)}
.mn3-seg-btn b{font-size:.76rem;font-weight:900;font-variant-numeric:tabular-nums;opacity:.85}
.mn3-tools{display:flex;align-items:center;gap:8px;margin-inline-start:auto;flex:1 1 240px;min-width:0}
.mn3-search{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--sn-border);border-radius:11px;background:var(--sn-surface)}
.mn3-search svg{width:18px;height:18px;color:var(--sn-text-muted);flex:0 0 auto}
.mn3-search input{flex:1 1 auto;min-width:0;height:42px;border:0;background:transparent;color:var(--sn-text);font:inherit;font-size:.9rem;outline:0}
.mn3-search:focus-within{border-color:var(--sn-level);box-shadow:0 0 0 3px color-mix(in srgb,var(--sn-level) 16%,transparent)}
.mn3-tool-btn{flex:0 0 auto;min-height:42px;padding:8px 14px;border:1px solid var(--sn-border);border-radius:11px;background:var(--sn-surface);color:var(--sn-text);font:inherit;font-size:.82rem;font-weight:800;cursor:pointer}
.mn3-tool-btn:hover{background:var(--sn-surface-subtle)}
.mn3-tool-btn[aria-pressed=true]{background:var(--sn-level-soft);border-color:color-mix(in srgb,var(--sn-level) 45%,var(--sn-border));color:var(--sn-level-strong)}
.mn3-count{margin:2px 2px 0;color:var(--sn-text-muted);font-size:.82rem;font-weight:700}
.mn3-count span{font-weight:900;color:var(--sn-text);font-variant-numeric:tabular-nums}

.mn3-list{display:grid;gap:10px}
.mn3-item{border:1px solid var(--sn-border);border-radius:14px;background:var(--sn-surface);box-shadow:var(--sn-shadow-sm);overflow:hidden}
.mn3-item.is-open{border-color:color-mix(in srgb,var(--sn-level) 35%,var(--sn-border))}
.mn3-item-head{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px;border:0;background:transparent;color:var(--sn-text);font:inherit;text-align:start;cursor:pointer}
.mn3-item-head:hover{background:var(--sn-surface-subtle)}
.mn3-badge{flex:0 0 auto;max-width:120px;padding:4px 10px;border-radius:999px;background:var(--sn-surface-subtle);border:1px solid var(--sn-border);color:var(--sn-text-muted);font-size:.74rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn3-stem{min-width:0;font-size:.95rem;font-weight:800;line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.mn3-flags{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;color:var(--sn-text-muted)}
.mn3-flag{display:grid;place-items:center}.mn3-flag svg{width:16px;height:16px}
.mn3-flag.is-fav{color:var(--sn-level)}.mn3-flag.is-fav .mn3-flag-star{fill:var(--sn-level)}
.mn3-chevron{display:grid;place-items:center;transition:transform .2s ease}.mn3-chevron svg{width:20px;height:20px}
.mn3-item.is-open .mn3-chevron{transform:rotate(180deg)}
.mn3-item-body{padding:2px 16px 16px;display:grid;gap:14px}

.mn3-reveal{position:relative;display:grid;gap:8px}
.mn3-reveal-btn{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border:1px solid color-mix(in srgb,var(--sn-level) 40%,var(--sn-border));border-radius:11px;background:var(--sn-level-soft);color:var(--sn-level-strong);font:inherit;font-weight:800;font-size:.85rem;cursor:pointer}
.mn3-reveal-btn svg{width:18px;height:18px}
.mn3-reveal-btn:hover{background:color-mix(in srgb,var(--sn-level) 16%,var(--sn-surface))}
.mn3-choices{display:grid;gap:8px;filter:blur(7px);opacity:.55;pointer-events:none;transition:filter .25s ease,opacity .25s ease}
.mn3-reveal.is-revealed .mn3-choices{filter:none;opacity:1;pointer-events:auto}
.mn3-reveal.is-revealed .mn3-reveal-btn{display:none}
.mn3-choices .saved-choice{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;font-size:.92rem;line-height:1.6}
.mn3-choice-tag{flex:0 0 auto;font-size:.76rem;font-weight:900}
.mn3-choice-tag.is-correct{color:var(--sn-success)}
.mn3-choice-tag.is-wrong{color:var(--sn-danger)}

.mn3-rational{border:1px solid var(--sn-border);border-radius:12px;background:var(--sn-surface-subtle);overflow:hidden}
.mn3-rational>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:10px 14px;color:var(--sn-text);font-size:.86rem;font-weight:800;cursor:pointer;list-style:none}
.mn3-rational>summary::-webkit-details-marker{display:none}
.mn3-rational-chevron{width:18px;height:18px;transition:transform .2s ease}
.mn3-rational[open]>summary .mn3-rational-chevron{transform:rotate(180deg)}
.mn3-rational-body{padding:2px 14px 14px;color:var(--sn-text-muted);font-size:.88rem;line-height:1.9}

.mn3-note-label{display:block;margin-bottom:6px;color:var(--sn-text-muted);font-size:.82rem;font-weight:700}
.mn3-note-input{width:100%;padding:11px 14px;border:1px solid var(--sn-border);border-radius:12px;background:var(--sn-surface);color:var(--sn-text);font:inherit;font-size:.9rem;line-height:1.7;resize:vertical;min-height:52px}
.mn3-note-input:focus{outline:0;border-color:var(--sn-level);box-shadow:0 0 0 3px color-mix(in srgb,var(--sn-level) 16%,transparent)}
.mn3-note-foot{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.mn3-note-status{color:var(--sn-success);font-size:.8rem;font-weight:800;opacity:0;transition:opacity .18s ease}
.mn3-note-status.is-visible{opacity:1}
.mn3-item-actions{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.mn3-icon-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--sn-text-muted);cursor:pointer;transition:background .18s ease,color .18s ease}
.mn3-icon-btn svg{width:20px;height:20px}
.mn3-fav .mn3-fav-star{fill:none;transition:fill .18s ease}
.mn3-fav:hover{color:var(--sn-level-strong)}
.mn3-fav.is-fav{color:var(--sn-level)}.mn3-fav.is-fav .mn3-fav-star{fill:var(--sn-level)}
.mn3-del:hover{background:color-mix(in srgb,var(--sn-danger) 12%,transparent);color:var(--sn-danger)}

.mn3-btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center;padding:9px 18px;border:1px solid transparent;border-radius:12px;font:inherit;font-weight:800;text-decoration:none;cursor:pointer;transition:background .18s ease}
.mn3-btn-primary{background:var(--sn-text);color:var(--sn-bg)}
.mn3-btn-primary:hover{background:color-mix(in srgb,var(--sn-text) 86%,var(--sn-bg))}
.mn3-btn-secondary{background:var(--sn-surface);border-color:var(--sn-border);color:var(--sn-text)}
.mn3-btn-secondary:hover{background:var(--sn-surface-subtle)}

.mn3-empty{display:grid;justify-items:center;text-align:center;padding:44px 20px;border:1px dashed var(--sn-border);border-radius:var(--sn-radius-lg);background:var(--sn-surface-subtle)}
.mn3-empty-icon{width:52px;height:52px;display:grid;place-items:center;margin-bottom:12px;border-radius:15px;background:var(--sn-level-soft);color:var(--sn-level-strong)}
.mn3-empty-icon svg{width:26px;height:26px}
.mn3-empty strong{font-size:1.05rem;font-weight:900}
.mn3-empty p{max-width:44ch;margin:6px 0 16px;color:var(--sn-text-muted);font-size:.9rem;line-height:1.7}

.mn3-pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px}
.mn3-page{min-width:42px;height:42px;display:grid;place-items:center;padding:0 10px;border:1px solid var(--sn-border);border-radius:11px;background:var(--sn-surface);color:var(--sn-text);font-weight:800;text-decoration:none;font-variant-numeric:tabular-nums}
.mn3-page:hover{background:var(--sn-surface-subtle)}
.mn3-page svg{width:19px;height:19px}
.mn3-page.is-active{background:var(--sn-level-soft);border-color:color-mix(in srgb,var(--sn-level) 45%,var(--sn-border));color:var(--sn-level-strong)}
.mn3-page.is-disabled{opacity:.4;pointer-events:none;background:var(--sn-surface-subtle)}

@media (max-width:560px){
  .mn3-toolbar{position:static}
  .mn3-seg{flex:1 1 100%}
  .mn3-tools{flex:1 1 100%;margin-inline-start:0}
  .mn3-item-head{grid-template-columns:auto minmax(0,1fr) auto;gap:9px;padding:13px 13px}
  .mn3-badge{max-width:84px}
}

/* ===== المذكرات v3 (مركز بحث) ===== */
.dl3-page{width:100%;min-width:0;max-width:1080px;margin-inline:auto;display:grid;gap:22px}
.dl3-page>*{min-width:0;max-width:100%}
.dl3-eyebrow{display:block;margin-bottom:8px;color:var(--sn-level-strong);font-size:.82rem;font-weight:800;letter-spacing:.02em}
.dl3-head h1{margin:0;font-size:clamp(1.8rem,3.2vw,2.8rem);font-weight:900;line-height:1.13;letter-spacing:-.02em;text-wrap:balance}
.dl3-head p{max-width:66ch;margin:10px 0 0;color:var(--sn-text-muted);line-height:1.75;text-wrap:pretty}

.dl3-controls{position:sticky;top:8px;z-index:20;display:grid;gap:12px;padding:14px;border:1px solid var(--sn-border);border-radius:18px;background:color-mix(in srgb,var(--sn-surface) 88%,transparent);backdrop-filter:blur(12px);box-shadow:var(--sn-shadow-sm)}
.dl3-search{display:flex;align-items:center;gap:10px;padding:0 16px;border:1px solid var(--sn-border);border-radius:13px;background:var(--sn-surface)}
.dl3-search svg{width:20px;height:20px;color:var(--sn-text-muted);flex:0 0 auto}
.dl3-search input{flex:1 1 auto;min-width:0;height:50px;border:0;background:transparent;color:var(--sn-text);font:inherit;font-size:1rem;outline:0}
.dl3-search:focus-within{border-color:var(--sn-level);box-shadow:0 0 0 3px color-mix(in srgb,var(--sn-level) 16%,transparent)}
.dl3-chips{display:flex;flex-wrap:wrap;gap:8px}
.dl3-chip{min-height:38px;padding:7px 15px;border:1px solid var(--sn-border);border-radius:999px;background:var(--sn-surface);color:var(--sn-text-muted);font:inherit;font-size:.85rem;font-weight:800;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.dl3-chip:hover{background:var(--sn-surface-subtle);color:var(--sn-text)}
.dl3-chip.is-active{background:var(--sn-level-soft);border-color:color-mix(in srgb,var(--sn-level) 45%,var(--sn-border));color:var(--sn-level-strong)}
.dl3-count{margin:0;color:var(--sn-text-muted);font-size:.82rem;font-weight:700}
.dl3-count span{font-weight:900;color:var(--sn-text);font-variant-numeric:tabular-nums}

.dl3-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.dl3-card{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid var(--sn-border);border-radius:var(--sn-radius-lg);background:var(--sn-surface);box-shadow:var(--sn-shadow-sm);color:var(--sn-text);text-decoration:none;transition:border-color .18s ease,transform .18s ease}
.dl3-card:hover{border-color:color-mix(in srgb,var(--sn-level) 45%,var(--sn-border));transform:translateY(-2px)}
.dl3-card:focus-visible{outline:3px solid color-mix(in srgb,var(--sn-level) 40%,transparent);outline-offset:2px}
.dl3-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dl3-card-icon{width:44px;height:44px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--sn-level) 18%,var(--sn-border));border-radius:12px;background:var(--sn-level-soft);color:var(--sn-level-strong)}
.dl3-card-icon svg{width:22px;height:22px}
.dl3-card-group{flex:0 0 auto;max-width:55%;padding:3px 10px;border-radius:999px;background:var(--sn-surface-subtle);color:var(--sn-text-muted);font-size:.72rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl3-card-body{flex:1 1 auto;min-width:0}
.dl3-card-title{margin:0;font-size:1.02rem;font-weight:900;line-height:1.4;text-wrap:balance}
.dl3-card-meta{display:flex;align-items:center;gap:7px;margin-top:7px;color:var(--sn-text-muted);font-size:.8rem;font-weight:600}
.dl3-card-meta .dl3-card-dot{opacity:.5}
.dl3-card-downloads{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-variant-numeric:tabular-nums}
.dl3-card-downloads svg{width:15px;height:15px}
.dl3-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--sn-border);color:var(--sn-level-strong);font-size:.85rem;font-weight:800}
.dl3-card-arrow{display:grid;place-items:center;transition:transform .18s ease}
.dl3-card-arrow svg{width:18px;height:18px}
.dl3-card:hover .dl3-card-arrow{transform:translateX(-4px)}

.dl3-noresults,.dl3-empty{display:grid;justify-items:center;text-align:center;padding:52px 20px;border:1px dashed var(--sn-border);border-radius:var(--sn-radius-lg);background:var(--sn-surface-subtle)}
.dl3-noresults-icon,.dl3-empty-icon{width:56px;height:56px;display:grid;place-items:center;margin-bottom:14px;border-radius:16px;background:var(--sn-level-soft);color:var(--sn-level-strong)}
.dl3-noresults-icon svg,.dl3-empty-icon svg{width:28px;height:28px}
.dl3-noresults strong,.dl3-empty strong{font-size:1.1rem;font-weight:900}
.dl3-noresults p,.dl3-empty p{max-width:46ch;margin:6px 0 16px;color:var(--sn-text-muted);font-size:.9rem;line-height:1.7}
.dl3-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:9px 18px;border:1px solid var(--sn-border);border-radius:12px;font:inherit;font-weight:800;text-decoration:none;cursor:pointer;background:var(--sn-surface);color:var(--sn-text)}
.dl3-btn-secondary:hover{background:var(--sn-surface-subtle)}

/* Rating modal actions: emphasize the primary action while preserving RTL order. */
#UserLikeModal .modal-footer{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}

@media (max-width:560px){.dl3-controls{position:static}}
@media (prefers-reduced-motion:reduce){
  .mn3-choices{transition:none}
  .mn3-chevron,.mn3-rational-chevron,.dl3-card,.dl3-card-arrow,.mn3-item{transition:none}
}