/* ================================================================
   TVTC Quiz — Modern Design System v4
   ================================================================
   - الهوية: بنفسجي #7C3AED + رمادي فاتح + Dark/Light Mode
   - خط: Cairo (عربي)
   - RTL كامل
   - Bootstrap 5 متوافق
   - Responsive: Desktop / Tablet / Mobile
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

/* ===========================================================
   1) CSS VARIABLES — Light Theme (default)
   =========================================================== */
:root{
  /* Brand — Purple palette */
  --brand-50:#F5F3FF;
  --brand-100:#EDE9FE;
  --brand-200:#DDD6FE;
  --brand-300:#C4B5FD;
  --brand-400:#A78BFA;
  --brand-500:#8B5CF6;
  --brand-600:#7C3AED;   /* الأساسي */
  --brand-700:#6D28D9;
  --brand-800:#5B21B6;
  --brand-900:#4C1D95;

  /* Accent — مكمل للبنفسجي */
  --accent:           var(--brand-600);
  --accent-hover:     var(--brand-700);
  --accent-active:    var(--brand-800);
  --accent-soft:      rgba(124,58,237,.10);
  --accent-soft-2:    rgba(124,58,237,.06);
  --accent-border:    rgba(124,58,237,.22);
  --accent-contrast:  #ffffff;

  /* Semantic colors */
  --success:       #10B981;
  --success-soft:  #D1FAE5;
  --success-fg:    #065F46;
  --danger:        #EF4444;
  --danger-soft:   #FEE2E2;
  --danger-fg:     #991B1B;
  --warning:       #F59E0B;
  --warning-soft:  #FEF3C7;
  --warning-fg:    #92400E;
  --info:          #3B82F6;
  --info-soft:     #DBEAFE;
  --info-fg:       #1E40AF;

  /* Surfaces — الخلفيات */
  --bg-app:        #F3F4F6;
  --bg-surface:    #FFFFFF;
  --bg-surface-2:  #FAFAFB;
  --bg-elevated:   #FFFFFF;
  --bg-muted:      #F9FAFB;
  --bg-hover:      #F3F4F6;
  --bg-selected:   var(--brand-50);

  /* Text */
  --text:          #111827;
  --text-2:        #374151;
  --text-muted:    #6B7280;
  --text-soft:     #9CA3AF;
  --text-inverse:  #FFFFFF;

  /* Borders */
  --border:        #E5E7EB;
  --border-strong: #D1D5DB;
  --border-soft:   #F3F4F6;

  /* Sidebar (Light) */
  --sb-bg:         #1F1B2E;
  --sb-bg-2:       #16132B;
  --sb-text:       #C4B5FD;
  --sb-text-muted: #8B7FA8;
  --sb-active-bg:  rgba(124,58,237,.18);
  --sb-active-fg:  #FFFFFF;
  --sb-hover-bg:   rgba(255,255,255,.05);
  --sb-border:     rgba(255,255,255,.07);
  --sb-brand-fg:   #FFFFFF;
  --sb-brand-sub:  #A78BFA;

  /* Shadows */
  --shadow-xs:     0 1px 2px rgba(17,24,39,.04);
  --shadow-sm:     0 1px 3px rgba(17,24,39,.06), 0 1px 2px rgba(17,24,39,.04);
  --shadow-md:     0 4px 6px -1px rgba(17,24,39,.08), 0 2px 4px -1px rgba(17,24,39,.04);
  --shadow-lg:     0 10px 20px -3px rgba(17,24,39,.08), 0 4px 6px -2px rgba(17,24,39,.04);
  --shadow-xl:     0 20px 32px -5px rgba(17,24,39,.12), 0 10px 10px -5px rgba(17,24,39,.04);
  --shadow-brand:  0 8px 20px -4px rgba(124,58,237,.28);
  --shadow-focus:  0 0 0 3px rgba(124,58,237,.20);

  /* Radii */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-full: 9999px;

  /* Sizing */
  --sidebar-w:   264px;
  --topbar-h:    64px;
  --content-pad: 22px;

  /* Typography */
  --font:        'Cairo', system-ui, -apple-system, sans-serif;
  --font-mono:   'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  --fs-xs:   .75rem;
  --fs-sm:   .85rem;
  --fs-base: .92rem;
  --fs-md:   1rem;
  --fs-lg:   1.1rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;

  /* Transitions */
  --t-fast:   .12s ease;
  --t-normal: .2s ease;
  --t-slow:   .3s ease;

  --scrollbar-thumb: #CBD5E1;
  --scrollbar-track: transparent;

  color-scheme: light;
}

/* ===========================================================
   2) Dark Theme — html[data-theme="dark"]
   =========================================================== */
html[data-theme="dark"]{
  /* Surfaces */
  --bg-app:        #0F0B1E;
  --bg-surface:    #1A1530;
  --bg-surface-2:  #211B3D;
  --bg-elevated:   #241E42;
  --bg-muted:      #1F1A36;
  --bg-hover:      #2B2548;
  --bg-selected:   rgba(124,58,237,.18);

  /* Text */
  --text:          #F3F4F6;
  --text-2:        #D1D5DB;
  --text-muted:    #9CA3AF;
  --text-soft:     #6B7280;
  --text-inverse:  #0F0B1E;

  /* Borders */
  --border:        #2E2751;
  --border-strong: #3D3466;
  --border-soft:   #26214A;

  /* Brand tweaks for dark */
  --accent:           var(--brand-500);
  --accent-hover:     var(--brand-400);
  --accent-active:    var(--brand-300);
  --accent-soft:      rgba(139,92,246,.18);
  --accent-soft-2:    rgba(139,92,246,.10);
  --accent-border:    rgba(139,92,246,.35);

  /* Semantic soft colors — dimmed */
  --success-soft:  rgba(16,185,129,.16);
  --success-fg:    #6EE7B7;
  --danger-soft:   rgba(239,68,68,.16);
  --danger-fg:     #FCA5A5;
  --warning-soft:  rgba(245,158,11,.16);
  --warning-fg:    #FCD34D;
  --info-soft:     rgba(59,130,246,.16);
  --info-fg:       #93C5FD;

  /* Sidebar (Dark) */
  --sb-bg:         #140F26;
  --sb-bg-2:       #0D0820;
  --sb-text:       #B4A5E0;
  --sb-text-muted: #7B6FA8;
  --sb-active-bg:  rgba(139,92,246,.22);
  --sb-border:     rgba(255,255,255,.05);

  /* Shadows — أعمق في الوضع الداكن */
  --shadow-xs:     0 1px 2px rgba(0,0,0,.25);
  --shadow-sm:     0 2px 4px rgba(0,0,0,.3);
  --shadow-md:     0 4px 8px rgba(0,0,0,.35);
  --shadow-lg:     0 10px 25px rgba(0,0,0,.45);
  --shadow-xl:     0 20px 40px rgba(0,0,0,.55);
  --shadow-brand:  0 8px 24px rgba(139,92,246,.35);
  --shadow-focus:  0 0 0 3px rgba(139,92,246,.30);

  --scrollbar-thumb: #3D3466;

  color-scheme: dark;
}

/* ===========================================================
   3) Reset & Base
   =========================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  direction:rtl;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
html[dir=ltr]{direction:ltr}

body{
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:1.65;
  background:var(--bg-app);
  color:var(--text);
  margin:0;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background-color var(--t-normal), color var(--t-normal);
}

/* Custom scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--scrollbar-track)}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:99px;border:2px solid var(--bg-app)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

a{color:var(--accent);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--accent-hover)}

hr{border:none;height:1px;background:var(--border);margin:1rem 0}

::selection{background:var(--accent-soft);color:var(--accent)}

/* ===========================================================
   4) Layout — Sidebar + Main
   =========================================================== */
html[dir=rtl] .sq-main{margin-right:var(--sidebar-w)}
html[dir=ltr] .sq-main{margin-left:var(--sidebar-w)}

.sq-main{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  transition:margin .3s cubic-bezier(.4,0,.2,1);
}

@media(max-width:992px){
  html[dir=rtl] .sq-main,
  html[dir=ltr] .sq-main{margin:0 !important}
}

/* ===========================================================
   5) SIDEBAR — احترافي عصري
   =========================================================== */
.sq-sidebar{
  position:fixed;top:0;bottom:0;
  width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--sb-bg-2) 0%,var(--sb-bg) 100%);
  display:flex;
  flex-direction:column;
  z-index:300;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  border-inline-end:1px solid var(--sb-border);
}
html[dir=rtl] .sq-sidebar{right:0;left:auto}
html[dir=ltr] .sq-sidebar{left:0;right:auto}

@media(max-width:992px){
  html[dir=rtl] .sq-sidebar{transform:translateX(100%)}
  html[dir=ltr] .sq-sidebar{transform:translateX(-100%)}
  .sq-sidebar.open{transform:translateX(0) !important}
}

/* سطح المكتب: إخفاء الشريط الجانبي (زر القائمة — sq-core يضيف .collapsed / .no-sidebar) */
@media(min-width:993px){
  html[dir=ltr] .sq-sidebar.collapsed{
    transform:translateX(-100%);
    pointer-events:none;
    border-inline-end-color:transparent;
  }
  html[dir=rtl] .sq-sidebar.collapsed{
    transform:translateX(100%);
    pointer-events:none;
    border-inline-end-color:transparent;
  }
  html[dir=ltr] .sq-sidebar:not(.collapsed),
  html[dir=rtl] .sq-sidebar:not(.collapsed){
    transform:none;
    pointer-events:auto;
  }
  html[dir=ltr] .sq-main.no-sidebar{margin-left:0 !important;}
  html[dir=rtl] .sq-main.no-sidebar{margin-right:0 !important;}
}

/* Brand */
.sq-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:22px 16px 18px;
  border-bottom:1px solid var(--sb-border);
  background:rgba(0,0,0,.15);
  text-decoration:none;
  text-align:center;
  flex-shrink:0;
  position:relative;
}
.sq-brand::after{
  content:'';
  display:block;
  width:36px;height:3px;
  background:linear-gradient(90deg,var(--brand-500),var(--brand-400));
  border-radius:99px;
  margin-top:10px;
}
.sq-brand-title{
  color:var(--sb-brand-fg);
  font-size:1.02rem;
  font-weight:800;
  line-height:1.4;
  letter-spacing:-.01em;
}
.sq-brand-sub{
  color:var(--sb-brand-sub);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
}

/* Nav area */
.sq-nav{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:10px 8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(139,92,246,.3) transparent;
}
.sq-nav::-webkit-scrollbar{width:4px}
.sq-nav::-webkit-scrollbar-thumb{background:rgba(139,92,246,.35);border-radius:99px;border:none}

.sq-nav-divider{
  height:1px;
  background:var(--sb-border);
  margin:8px 12px;
}

/* Nav link */
.sq-nav-link{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 14px;
  margin:2px 0;
  border-radius:var(--r-md);
  color:var(--sb-text);
  font-size:.9rem;
  font-weight:500;
  font-family:var(--font);
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  background:none;
  width:100%;
  text-align:inherit;
  transition:all var(--t-fast);
  position:relative;
  white-space:nowrap;
}
.sq-nav-link:hover{
  background:var(--sb-hover-bg);
  color:#fff;
}
.sq-nav-link.active{
  background:var(--sb-active-bg);
  color:var(--sb-active-fg);
  font-weight:700;
  border-color:var(--accent-border);
}

/* Active bar */
html[dir=rtl] .sq-nav-link.active::before{
  content:'';
  position:absolute;
  right:-8px;top:20%;bottom:20%;
  width:3px;
  background:linear-gradient(180deg,var(--brand-400),var(--brand-600));
  border-radius:99px;
}
html[dir=ltr] .sq-nav-link.active::before{
  content:'';
  position:absolute;
  left:-8px;top:20%;bottom:20%;
  width:3px;
  background:linear-gradient(180deg,var(--brand-400),var(--brand-600));
  border-radius:99px;
}

.sq-nav-icon{
  width:20px;
  min-width:20px;
  text-align:center;
  font-size:.9rem;
  color:var(--brand-400);
  flex-shrink:0;
  direction:ltr;
  transition:color var(--t-fast);
}
.sq-nav-link:hover .sq-nav-icon,
.sq-nav-link.active .sq-nav-icon{color:var(--brand-300)}

.sq-nav-arrow{
  font-size:.7rem;
  color:var(--sb-text-muted);
  margin-inline-start:auto;
  flex-shrink:0;
  transition:transform var(--t-normal);
  direction:ltr;
}
.sq-nav-link[aria-expanded=true] .sq-nav-arrow{
  transform:rotate(-90deg);
  color:var(--brand-400);
}
html[dir=ltr] .sq-nav-link[aria-expanded=true] .sq-nav-arrow{transform:rotate(90deg)}

/* Submenu */
.sq-submenu{
  display:none;
  margin:2px 8px 4px;
  background:rgba(255,255,255,.03);
  border-radius:var(--r-md);
  padding:4px;
  border:1px solid rgba(255,255,255,.04);
  overflow:hidden;
}
.sq-submenu.show{display:block;animation:sqSlideDown .2s ease}
@keyframes sqSlideDown{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.sq-submenu-link{
  display:block;
  padding:8px 14px;
  border-radius:var(--r-sm);
  color:#A493C9;
  font-size:.84rem;
  font-family:var(--font);
  text-decoration:none;
  transition:all var(--t-fast);
  border-inline-start:2px solid transparent;
  margin:1px 0;
}
.sq-submenu-link:hover{
  background:rgba(139,92,246,.15);
  color:#fff;
  border-inline-start-color:var(--brand-400);
}

/* Sidebar footer */
.sq-sidebar-footer{
  padding:10px;
  border-top:1px solid var(--sb-border);
  background:rgba(0,0,0,.15);
  flex-shrink:0;
}
.sq-logout-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:10px;
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.20);
  border-radius:var(--r-md);
  color:#FCA5A5;
  font-size:.88rem;
  font-weight:600;
  font-family:var(--font);
  text-decoration:none;
  cursor:pointer;
  transition:all var(--t-fast);
}
.sq-logout-btn:hover{
  background:#DC2626;
  border-color:#DC2626;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(239,68,68,.4);
}

/* Backdrop */
.sq-backdrop{
  display:none;
  position:fixed;inset:0;
  background:rgba(15,11,30,.55);
  backdrop-filter:blur(3px);
  z-index:299;
  opacity:0;
  transition:opacity var(--t-normal);
  pointer-events:none;
}
.sq-backdrop.show{opacity:1;pointer-events:auto}
@media(max-width:992px){.sq-backdrop{display:block}}

/* ===========================================================
   6) TOPBAR
   =========================================================== */
.sq-topbar{
  position:sticky;
  top:0;
  height:var(--topbar-h);
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 22px;
  gap:12px;
  z-index:200;
  box-shadow:var(--shadow-xs);
  backdrop-filter:saturate(180%) blur(4px);
}

.sq-toggle{
  width:40px;height:40px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--bg-surface);
  color:var(--text-2);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
  transition:all var(--t-fast);
  padding:0;
}
.sq-toggle:hover{
  background:var(--accent-soft);
  color:var(--accent);
  border-color:var(--accent);
}

.sq-topbar-end{
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

/* Theme toggle button */
.sq-theme-toggle{
  width:40px;height:40px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--bg-surface);
  color:var(--text-2);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  transition:all var(--t-fast);
  padding:0;
  position:relative;
}
.sq-theme-toggle:hover{
  background:var(--accent-soft);
  color:var(--accent);
  border-color:var(--accent);
  transform:rotate(12deg);
}
.sq-theme-toggle .fa-sun{display:none}
.sq-theme-toggle .fa-moon{display:inline-block}
html[data-theme="dark"] .sq-theme-toggle .fa-sun{display:inline-block}
html[data-theme="dark"] .sq-theme-toggle .fa-moon{display:none}

/* Notifications button */
.sq-notif-btn{
  width:40px;height:40px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--bg-surface);
  color:var(--text-2);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  position:relative;
  transition:all var(--t-fast);
  padding:0;
}
.sq-notif-btn:hover{
  background:var(--accent-soft);
  color:var(--accent);
  border-color:var(--accent);
}
.sq-notif-badge{
  position:absolute;
  top:8px;
  inset-inline-end:8px;
  width:8px;height:8px;
  background:var(--danger);
  border-radius:50%;
  border:2px solid var(--bg-surface);
  animation:sqPulse 2s infinite;
}
@keyframes sqPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.15);opacity:.85}
}

/* User Avatar & Button */
.sq-avatar{
  width:32px;height:32px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  color:#fff;
  font-size:12px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-family:var(--font);
  box-shadow:0 2px 6px rgba(124,58,237,.3);
}
.sq-user-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 12px 5px 7px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--bg-surface);
  cursor:pointer;
  color:var(--text);
  text-decoration:none;
  transition:all var(--t-fast);
  font-family:var(--font);
}
.sq-user-btn:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
}
.sq-user-name{font-size:.87rem;font-weight:600;color:var(--text-2)}

/* Dropdowns */
.sq-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  inset-inline-end:0;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  min-width:220px;
  z-index:400;
  overflow:hidden;
  display:none;
  animation:sqDropIn .18s ease;
}
@keyframes sqDropIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
.sq-dropdown.show{display:block}

.sq-dropdown-header{
  padding:10px 14px;
  font-size:.72rem;
  font-weight:700;
  color:var(--text-muted);
  letter-spacing:1.5px;
  text-transform:uppercase;
  border-bottom:1px solid var(--border);
  background:var(--bg-muted);
}

.sq-dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  font-size:.88rem;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  transition:background var(--t-fast);
  border:none;
  background:none;
  width:100%;
  font-family:var(--font);
  text-align:inherit;
}
.sq-dropdown-item:hover{background:var(--bg-hover);color:var(--text)}
.sq-dropdown-item.danger{color:var(--danger)}
.sq-dropdown-item.danger:hover{background:var(--danger-soft)}
.sq-dropdown-divider{height:1px;background:var(--border);margin:4px 0}

.sq-notif-dropdown{min-width:320px;max-height:360px;overflow-y:auto}
.sq-notif-item{
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  text-decoration:none;
  transition:background var(--t-fast);
  color:var(--text);
}
.sq-notif-item:hover{background:var(--bg-hover)}
.sq-notif-item:last-child{border-bottom:none}
.sq-notif-icon{
  width:36px;height:36px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:13px;
}
.sq-notif-text{font-size:.85rem;color:var(--text);font-weight:500;line-height:1.5}
.sq-notif-date{font-size:.73rem;color:var(--text-muted);margin-top:3px}

/* ===========================================================
   7) CONTENT — المنطقة الرئيسية
   =========================================================== */
.sq-content{
  flex:1;
  padding:var(--content-pad) 24px;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

/* Page Head */
.sq-page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.sq-page-title{
  font-size:var(--fs-xl);
  font-weight:800;
  color:var(--text);
  margin:0;
  letter-spacing:-.01em;
}

/* ===========================================================
   8) FLASH MESSAGES
   =========================================================== */
.sq-flash{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 18px;
  border-radius:var(--r-lg);
  font-size:.9rem;
  font-weight:500;
  margin-bottom:16px;
  animation:sqFadeInDown .3s ease;
  border:1px solid;
}
.sq-flash-success{background:var(--success-soft);color:var(--success-fg);border-color:rgba(16,185,129,.3)}
.sq-flash-danger{background:var(--danger-soft);color:var(--danger-fg);border-color:rgba(239,68,68,.3)}
.sq-flash-warning{background:var(--warning-soft);color:var(--warning-fg);border-color:rgba(245,158,11,.3)}
.sq-flash-info{background:var(--info-soft);color:var(--info-fg);border-color:rgba(59,130,246,.3)}

.sq-flash-close{
  margin-inline-start:auto;
  cursor:pointer;
  background:none;
  border:none;
  font-size:18px;
  color:inherit;
  opacity:.6;
  padding:0;
  width:24px;height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-sm);
  transition:all var(--t-fast);
}
.sq-flash-close:hover{opacity:1;background:rgba(0,0,0,.06)}

.sq-flash .alert{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  color:inherit !important;
}

@keyframes sqFadeInDown{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===========================================================
   9) CARDS — الكروت
   =========================================================== */
.sq-card{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  margin-bottom:16px;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.sq-card:hover{border-color:var(--border-strong)}

.sq-card-header{
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  font-weight:700;
  font-size:.95rem;
  color:var(--text);
  background:var(--bg-muted);
  display:flex;
  align-items:center;
  gap:8px;
}
.sq-card-body{padding:20px}

/* Exceptions for specific cards */
.sq-quiz-schedule-card,
.sq-quiz-assignment-card{overflow:visible}
.sq-quiz-schedule-card .sq-card-body,
.sq-quiz-assignment-card .sq-card-body{overflow:visible}

/* Panels (old bootstrap compatibility) */
.panel,.login-panel{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  margin-bottom:16px;
}
.panel-body,.panel-heading{padding:16px 20px}
.panel-heading{
  border-bottom:1px solid var(--border);
  font-weight:700;
  background:var(--bg-muted);
  color:var(--text);
}

/* ===========================================================
   10) STATS (dashboard stats)
   =========================================================== */
.sq-stat{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:20px;
  display:flex;
  align-items:center;
  gap:16px;
  box-shadow:var(--shadow-sm);
  transition:all var(--t-normal);
  position:relative;
  overflow:hidden;
}
.sq-stat::before{
  content:'';
  position:absolute;
  top:0;
  inset-inline-start:0;
  width:4px;
  height:100%;
  background:var(--accent);
  transition:width var(--t-normal);
}
.sq-stat:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--accent-border);
}
.sq-stat:hover::before{width:6px}

.sq-stat-icon{
  width:52px;height:52px;
  border-radius:var(--r-lg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  flex-shrink:0;
}
.sq-stat-icon.purple{background:var(--accent-soft);color:var(--accent)}
.sq-stat-icon.teal{background:rgba(16,185,129,.12);color:var(--success)}
.sq-stat-icon.blue{background:rgba(59,130,246,.12);color:var(--info)}
.sq-stat-icon.amber{background:rgba(245,158,11,.12);color:var(--warning)}
.sq-stat-icon.red{background:rgba(239,68,68,.12);color:var(--danger)}

.sq-stat.a-purple::before{background:var(--accent)}
.sq-stat.a-teal::before{background:var(--success)}
.sq-stat.a-blue::before{background:var(--info)}
.sq-stat.a-amber::before{background:var(--warning)}
.sq-stat.a-red::before{background:var(--danger)}

.sq-stat-val{
  font-size:1.65rem;
  font-weight:800;
  color:var(--text);
  line-height:1;
  letter-spacing:-.02em;
}
.sq-stat-label{
  font-size:.82rem;
  color:var(--text-muted);
  margin-top:4px;
  font-weight:500;
}

/* ===========================================================
   11) TOOLBAR
   =========================================================== */
.sq-toolbar{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:12px 16px;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  box-shadow:var(--shadow-xs);
}

/* ===========================================================
   12) SEARCH
   =========================================================== */
.sq-search{
  display:flex;
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--bg-surface);
  transition:all var(--t-fast);
  min-height:42px;
}
.sq-search:focus-within{
  border-color:var(--accent);
  box-shadow:var(--shadow-focus);
}
.sq-search input{
  flex:1;
  padding:0 14px;
  border:none;
  outline:none;
  font-size:.9rem;
  font-family:var(--font);
  color:var(--text);
  background:transparent;
  min-width:0;
}
.sq-search input::placeholder{color:var(--text-soft)}
.sq-search button{
  padding:0 16px;
  background:var(--accent);
  color:#fff;
  border:none;
  cursor:pointer;
  font-size:13px;
  transition:background var(--t-fast);
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
}
.sq-search button:hover{background:var(--accent-hover)}

/* ===========================================================
   13) FORMS
   =========================================================== */
.sq-form-group,.form-group{margin-bottom:18px}

.sq-label,.form-label{
  display:block;
  font-size:.88rem;
  font-weight:600;
  color:var(--text-2);
  margin-bottom:6px;
  letter-spacing:-.005em;
}

.sq-input,.form-control,.form-select{
  width:100%;
  padding:10px 14px;
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  font-size:.92rem;
  color:var(--text);
  background:var(--bg-surface);
  font-family:var(--font);
  transition:all var(--t-fast);
  outline:none;
  appearance:none;
  min-height:42px;
  line-height:1.5;
}
.sq-input:focus,.form-control:focus,.form-select:focus{
  border-color:var(--accent);
  box-shadow:var(--shadow-focus);
  background:var(--bg-surface);
}
.sq-input::placeholder,.form-control::placeholder{color:var(--text-soft)}

textarea.sq-input,textarea.form-control{
  min-height:96px;
  resize:vertical;
  line-height:1.7;
  padding:12px 14px;
}

select.sq-input,select.form-control,select.form-select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:12px;
  padding-inline-end:32px;
}
html[dir=rtl] select.sq-input,html[dir=rtl] select.form-control,html[dir=rtl] select.form-select{
  background-position:10px 50%;
}
html[dir=ltr] select.sq-input,html[dir=ltr] select.form-control,html[dir=ltr] select.form-select{
  background-position:right 12px center;
}

/* Dark mode select arrow */
html[data-theme="dark"] select.sq-input,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] select.form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239CA3AF' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
}

/* Input group */
.input-group{display:flex;gap:0}
.input-group .form-control{flex:1}
html[dir=rtl] .input-group .form-control{border-radius:0 var(--r-md) var(--r-md) 0}
html[dir=ltr] .input-group .form-control{border-radius:var(--r-md) 0 0 var(--r-md)}
html[dir=rtl] .input-group-btn .btn,html[dir=rtl] .input-group > .btn:last-child{border-radius:var(--r-md) 0 0 var(--r-md)}
html[dir=ltr] .input-group-btn .btn,html[dir=ltr] .input-group > .btn:last-child{border-radius:0 var(--r-md) var(--r-md) 0}

/* Check (radio & checkbox from Bootstrap) */
.form-check{padding-inline-start:1.8em}
.form-check-input{
  width:1.2em;
  height:1.2em;
  margin-top:0.18em;
  background:var(--bg-surface);
  border:1.5px solid var(--border-strong);
  cursor:pointer;
  transition:all var(--t-fast);
}
.form-check-input:checked{
  background-color:var(--accent);
  border-color:var(--accent);
}
.form-check-input:focus{box-shadow:var(--shadow-focus);border-color:var(--accent)}
.form-check-label{
  cursor:pointer;
  font-size:.9rem;
  color:var(--text);
  padding-inline-start:.3em;
}

/* Form inside card */
.sq-card > form{padding:20px}
@media(max-width:768px){
  .sq-card > form{padding:16px}
}

/* Required marker */
.sq-required{color:var(--danger);font-weight:700;margin-inline-start:2px}

/* ===========================================================
   14) BUTTONS
   =========================================================== */
.sq-btn,.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10px 18px;
  border-radius:var(--r-md);
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:all var(--t-fast);
  text-decoration:none;
  font-family:var(--font);
  white-space:nowrap;
  line-height:1.4;
  letter-spacing:-.005em;
  user-select:none;
}
.sq-btn:focus-visible,.btn:focus-visible{
  outline:none;
  box-shadow:var(--shadow-focus);
}

/* Primary */
.sq-btn-primary,.btn-primary{
  background:var(--accent) !important;
  color:#fff !important;
  border-color:var(--accent) !important;
}
.sq-btn-primary:hover,.btn-primary:hover{
  background:var(--accent-hover) !important;
  border-color:var(--accent-hover) !important;
  transform:translateY(-1px);
  box-shadow:var(--shadow-brand);
  color:#fff;
}

/* Outline */
.sq-btn-outline{
  background:var(--bg-surface);
  color:var(--text);
  border-color:var(--border);
}
.sq-btn-outline:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}

/* Default (old bootstrap) */
.btn-default{
  background:var(--bg-surface);
  color:var(--text);
  border:1.5px solid var(--border);
}
.btn-default:hover{
  background:var(--bg-hover);
  border-color:var(--border-strong);
}

/* Danger */
.sq-btn-danger,.btn-danger{
  background:var(--danger) !important;
  color:#fff !important;
  border-color:var(--danger) !important;
}
.sq-btn-danger:hover,.btn-danger:hover{
  background:#DC2626 !important;
  border-color:#DC2626 !important;
  transform:translateY(-1px);
  box-shadow:0 8px 20px -4px rgba(239,68,68,.35);
  color:#fff;
}

/* Success */
.sq-btn-success,.btn-success{
  background:var(--success);
  color:#fff;
  border-color:var(--success);
}
.sq-btn-success:hover,.btn-success:hover{
  background:#059669;
  border-color:#059669;
  color:#fff;
  transform:translateY(-1px);
}

/* Info */
.sq-btn-info,.btn-info{
  background:var(--info);
  color:#fff;
  border-color:var(--info);
}
.sq-btn-info:hover,.btn-info:hover{
  background:#2563EB;
  border-color:#2563EB;
  color:#fff;
}

/* Warning */
.btn-warning{
  background:var(--warning);
  color:#fff;
  border-color:var(--warning);
}
.btn-warning:hover{background:#D97706;border-color:#D97706;color:#fff}

/* Sizes */
.sq-btn-sm,.btn-sm,.btn-xs{
  padding:6px 12px !important;
  font-size:.82rem !important;
  min-height:auto;
}
.sq-btn-lg,.btn-lg{
  padding:13px 24px !important;
  font-size:1rem !important;
}

/* Disabled */
.sq-btn[disabled],.btn[disabled],.sq-btn.disabled,.btn.disabled{
  opacity:.55;
  pointer-events:none;
  cursor:not-allowed;
}

/* ===========================================================
   15) BADGES
   =========================================================== */
.sq-badge,.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:var(--r-full);
  font-size:.74rem;
  font-weight:700;
  line-height:1.4;
  white-space:nowrap;
  letter-spacing:-.005em;
}
.sq-badge-success,.badge-success{background:var(--success-soft);color:var(--success-fg)}
.sq-badge-danger,.badge-danger{background:var(--danger-soft);color:var(--danger-fg)}
.sq-badge-warning,.badge-warning{background:var(--warning-soft);color:var(--warning-fg)}
.sq-badge-info,.badge-info{background:var(--info-soft);color:var(--info-fg)}
.sq-badge-muted{background:var(--bg-hover);color:var(--text-muted)}
.sq-badge-primary{background:var(--accent-soft);color:var(--accent)}

/* ===========================================================
   16) ACTION BUTTONS (row actions)
   =========================================================== */
.sq-action{
  display:inline-flex;
  gap:6px;
  align-items:center;
}
.sq-action-btn{
  width:32px;
  height:32px;
  border-radius:var(--r-md);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12.5px;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:all var(--t-fast);
}
.sq-action-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.sq-action-btn.edit{background:var(--info-soft);color:var(--info-fg)}
.sq-action-btn.edit:hover{background:var(--info);color:#fff}
.sq-action-btn.delete{background:var(--danger-soft);color:var(--danger-fg)}
.sq-action-btn.delete:hover{background:var(--danger);color:#fff}
.sq-action-btn.view{background:var(--success-soft);color:var(--success-fg)}
.sq-action-btn.view:hover{background:var(--success);color:#fff}

/* ===========================================================
   17) ALERTS
   =========================================================== */
.sq-alert,.alert{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 16px;
  border-radius:var(--r-lg);
  font-size:.9rem;
  font-weight:500;
  margin-bottom:14px;
  border:1px solid;
  line-height:1.6;
}
.sq-alert-success,.alert-success{background:var(--success-soft);color:var(--success-fg);border-color:rgba(16,185,129,.3)}
.sq-alert-danger,.alert-danger{background:var(--danger-soft);color:var(--danger-fg);border-color:rgba(239,68,68,.3)}
.sq-alert-warning,.alert-warning{background:var(--warning-soft);color:var(--warning-fg);border-color:rgba(245,158,11,.3)}
.sq-alert-info,.alert-info{background:var(--info-soft);color:var(--info-fg);border-color:rgba(59,130,246,.3)}

/* ===========================================================
   18) TABS
   =========================================================== */
.nav-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  border-bottom:2px solid var(--border);
  margin-bottom:18px;
  padding:0;
}
.nav-tabs .nav-link{
  padding:10px 18px;
  border-radius:var(--r-md) var(--r-md) 0 0;
  font-size:.9rem;
  font-weight:600;
  color:var(--text-muted);
  text-decoration:none;
  border:1px solid transparent;
  border-bottom:none;
  transition:all var(--t-fast);
  cursor:pointer;
  margin-bottom:-2px;
  background:transparent;
}
.nav-tabs .nav-link:hover:not(.active){
  color:var(--text);
  background:var(--accent-soft-2);
}
.nav-tabs .nav-link.active{
  color:var(--accent);
  border-color:var(--border);
  border-bottom-color:var(--bg-surface);
  background:var(--bg-surface);
  font-weight:700;
}
.tab-content>.tab-pane{display:none}
.tab-content>.tab-pane.active.show{display:block}

/* ===========================================================
   19) MODAL (Bootstrap compat)
   =========================================================== */
.modal-content{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-xl);
  color:var(--text);
}
.modal-header{
  border-bottom:1px solid var(--border);
  padding:16px 20px;
  background:var(--bg-muted);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.modal-title{font-weight:700;color:var(--text);font-size:1.05rem}
.modal-body{padding:20px}
.modal-footer{
  border-top:1px solid var(--border);
  padding:14px 20px;
  gap:8px;
  background:var(--bg-muted);
}
.modal-backdrop{background:rgba(15,11,30,.55);backdrop-filter:blur(3px)}

/* ===========================================================
   20) PAGINATION
   =========================================================== */
.sq-pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
  padding:14px 18px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
}
.sq-pager .small{
  color:var(--text-muted);
  font-size:.83rem;
  font-weight:500;
}
.sq-pager .sq-btn.disabled,.sq-pager .sq-btn[disabled]{
  opacity:.4;
  pointer-events:none;
}

/* ===========================================================
   21) TYPOGRAPHY HELPERS
   =========================================================== */
.text-accent{color:var(--accent) !important}
.text-muted{color:var(--text-muted) !important}
.text-success{color:var(--success) !important}
.text-danger{color:var(--danger) !important}
.text-warning{color:var(--warning) !important}
.text-info{color:var(--info) !important}
.fw-500{font-weight:500}
.fw-600{font-weight:600}
.fw-700{font-weight:700}
.fw-800{font-weight:800}

/* ===========================================================
   22) CONTAINERS OVERRIDE
   =========================================================== */
.container,.container-fluid{max-width:100%;padding:0}

/* ===========================================================
   23) LINKS inside content
   =========================================================== */
.sq-content a:not(.sq-btn):not(.btn):not(.sq-action-btn):not(.nav-link):not(.sq-submenu-link):not(.sq-nav-link){
  color:var(--accent);
  font-weight:500;
}
.sq-content a:not(.sq-btn):not(.btn):not(.sq-action-btn):not(.nav-link):not(.sq-submenu-link):not(.sq-nav-link):hover{
  color:var(--accent-hover);
  text-decoration:underline;
}

/* ===========================================================
   24) SELECT2 OVERRIDE (inside admin shell)
   =========================================================== */
.sq-content .select2-container{width:100% !important;max-width:100%;box-sizing:border-box}
.sq-content .select2-container .select2-selection--single,
.sq-content .select2-container .select2-selection--multiple{
  min-height:42px;
  max-width:100%;
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-surface);
  color:var(--text);
  transition:all var(--t-fast);
}
.sq-content .select2-container--focus .select2-selection{
  border-color:var(--accent);
  box-shadow:var(--shadow-focus);
}
.select2-dropdown{
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-elevated);
  box-shadow:var(--shadow-lg);
}
.select2-results__option{color:var(--text);padding:8px 12px;font-size:.9rem}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--accent);
  color:#fff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--text);
  line-height:40px;
  padding:0 14px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:40px}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background:var(--accent-soft);
  color:var(--accent);
  border:1px solid var(--accent-border);
  border-radius:var(--r-full);
  padding:2px 10px;
  font-size:.82rem;
}
.select2-search--dropdown .select2-search__field{
  border:1.5px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg-surface);
  color:var(--text);
  padding:6px 10px;
}

/* ===========================================================
   25) RESPONSIVE — الجوال
   =========================================================== */
@media(max-width:992px){
  :root{
    --content-pad:18px;
  }
}

@media(max-width:768px){
  :root{
    --content-pad:14px;
    --topbar-h:58px;
  }
  html{overflow-x:hidden}
  body{overflow-x:hidden;max-width:100%;position:relative}
  .sq-main{
    margin-inline:0 !important;
    max-width:100%;
    width:100%;
    min-width:0;
    overflow-x:clip;
  }
  .sq-content{padding:14px 14px;max-width:100%}
  .sq-content > .row{min-width:0;max-width:100%}
  .sq-topbar{padding:0 14px}
  .sq-card-body{padding:16px}
  .sq-stat{padding:16px;gap:12px}
  .sq-stat-val{font-size:1.4rem}
  .sq-stat-icon{width:44px;height:44px;font-size:1.1rem}
  .d-none.d-md-inline{display:none !important}
  .sq-page-head{max-width:100%}
  .sq-page-title{min-width:0;flex:1 1 auto;word-break:break-word;font-size:1.15rem}

  .sq-content .row > [class*="col-"]{
    flex:0 0 100% !important;
    max-width:100% !important;
    width:100% !important;
  }

  .container,.container-fluid{
    width:100% !important;
    max-width:100% !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
}

@media(max-width:480px){
  .sq-page-head{flex-direction:column;align-items:stretch}
  .sq-page-head .sq-btn{width:100%;justify-content:center}
  .sq-toolbar{flex-direction:column;align-items:stretch}
  .sq-search{width:100%}
}

/* ===========================================================
   26) ANIMATIONS
   =========================================================== */
@keyframes sqFadeIn{from{opacity:0}to{opacity:1}}

/* ===========================================================
   27) PRINT
   =========================================================== */
@media print{
  .sq-sidebar,.sq-topbar,.sq-pager,.sq-toolbar{display:none !important}
  .sq-main{margin:0 !important}
  .sq-content{padding:0 !important}
  .sq-card{box-shadow:none !important;border:1px solid #ddd !important}
}

/* ===========================================================
   28) FOCUS RING (accessibility)
   =========================================================== */
*:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
.sq-btn:focus-visible,.btn:focus-visible,.sq-input:focus-visible,.form-control:focus-visible{
  outline:none; /* نعتمد على box-shadow الخاص بها */
}

/* ===========================================================
   29) TABLE — الأساسيات (التفاصيل الكاملة في sq-tables.css)
   =========================================================== */
.sq-table-wrap{
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--bg-surface);
  overflow-x:auto;
  box-shadow:var(--shadow-xs);
}
.sq-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.9rem;
  min-width:480px;
  color:var(--text);
}
.sq-table thead th{
  background:var(--bg-muted);
  color:var(--text-muted);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  text-align:inherit;
}
.sq-table tbody td{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  color:var(--text);
  vertical-align:middle;
  background:var(--bg-surface);
}
.sq-table tbody tr:last-child td{border-bottom:none}
.sq-table tbody tr:hover td{background:var(--bg-hover)}

/* عمود اسم المادة: يمين في العربية، يسار في الإنجليزية */
.sq-table thead th.sq-th-subject,
.sq-table tbody td.sq-cell-subject{
  text-align:start;
}
html[dir="rtl"] .sq-table thead th.sq-th-subject,
html[dir="rtl"] .sq-table tbody td.sq-cell-subject{
  text-align:right !important;
}
html[dir="ltr"] .sq-table thead th.sq-th-subject,
html[dir="ltr"] .sq-table tbody td.sq-cell-subject{
  text-align:left !important;
}

/* Bootstrap .table compatibility */
.table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
  color:var(--text);
}
.table th,.table td{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.table thead th{
  background:var(--bg-muted);
  font-weight:700;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-muted);
}
.table-bordered td,.table-bordered th{border:1px solid var(--border)}
.table-hover tbody tr:hover{background:var(--bg-hover)}

/* ===========================================================
   29b) نتيجة الاختبار — صفوف تفاصيل (بديل الجدول العريض في RTL)
   =========================================================== */
.sq-kv-list{
  width:100%;
  display:flex;
  flex-direction:column;
}
.sq-kv-list--result .sq-kv-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px 20px;
  padding:14px 18px;
  border-bottom:1px solid var(--border-soft);
  background:var(--bg-surface);
}
.sq-kv-list--result .sq-kv-row:nth-child(even){
  background:var(--bg-surface-2);
}
.sq-kv-list--result .sq-kv-row:last-child{
  border-bottom:none;
}
.sq-kv-list--result .sq-kv-label{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 44%;
  min-width:0;
  color:var(--text-muted);
  font-weight:600;
  font-size:.88rem;
}
.sq-kv-list--result .sq-kv-idx{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  padding:0 8px;
  border-radius:999px;
  background:var(--bg-muted);
  color:var(--text-muted);
  font-size:.75rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.sq-kv-list--result .sq-kv-value{
  flex:1 1 50%;
  min-width:0;
  text-align:end;
  color:var(--text);
  font-weight:600;
  font-size:.93rem;
  line-height:1.45;
}
html[dir="rtl"] .sq-kv-list--result .sq-kv-value{
  text-align:left;
}
html[dir="ltr"] .sq-kv-list--result .sq-kv-value{
  text-align:right;
}
.sq-kv-value--ltr{
  direction:ltr;
  unicode-bidi:embed;
}
.sq-kv-list--result .sq-kv-value .sq-badge{
  vertical-align:middle;
}
.sq-kv-list--result .sq-code{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.85rem;
  background:var(--accent-soft);
  color:var(--accent);
  padding:5px 12px;
  border-radius:var(--r-sm);
  border:1px solid var(--accent-border);
  font-weight:600;
  max-width:100%;
  word-break:break-all;
}
@media (max-width: 520px){
  .sq-kv-list--result .sq-kv-row{
    flex-direction:column;
    align-items:stretch;
  }
  .sq-kv-list--result .sq-kv-value,
  html[dir="rtl"] .sq-kv-list--result .sq-kv-value,
  html[dir="ltr"] .sq-kv-list--result .sq-kv-value{
    text-align:start;
    max-width:100%;
  }
}

/* ===========================================================
   30) UTILITIES (common spacing/display)
   =========================================================== */
.d-flex{display:flex}
.d-grid{display:grid}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.flex-wrap{flex-wrap:wrap}
.align-items-center{align-items:center}
.justify-content-between{justify-content:space-between}
.w-100{width:100%}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mb-0{margin-bottom:0 !important}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}