/* 4N - App.css (Refactored / No-UI-change)
====================================================
Structure:
1) Design Tokens (variables)
2) Base / Reset
3) Layout helpers
4) Navbar
5) Cards / Glass
6) Buttons
7) Modals
8) Quiz components
9) Utilities
10) Responsive
==================================================== */

/* =========================================================
   4N - App.css
   Refactored (no visual changes)
   ---------------------------------------------------------
   TABLE OF CONTENTS
   1) Design Tokens
   2) Base / Typography
   3) Layout Helpers
   4) Glass + Surfaces
   5) Navbar
   6) Buttons
   7) Cards
   8) Quiz UI
   9) Modals
  10) Footer
  11) Utilities
  12) Responsive
   ========================================================= */

/* 4N - App.css (Refactored)
   - Single source of truth for shared UI styles
   - Duplicates removed (safe), structure clarified
*/
:root{
  --primary: #969696;
  --bg0: #08090c;
  --bg1: #0f1117;
  --bg2: #151823;
  --fg: #f4f6fb;
  --muted: rgba(244,246,251,.72);
  --line: rgba(255,255,255,.12);
  --glass1: rgba(255,255,255,.08);
  --glass2: rgba(255,255,255,.04);
  --shadow: 0 22px 70px rgba(0,0,0,.55);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 22px;
  --success: rgb(36 109 2);
  --success-strong: rgb(38 151 0);
  --danger: rgb(147 0 0);
  --warning: rgb(245 158 11);
  --info: rgb(96 165 250);
  --success-bg: color-mix(in srgb, var(--success) 18%, transparent);
  --danger-bg: color-mix(in srgb, var(--danger) 18%, transparent);
  --warning-bg: color-mix(in srgb, var(--warning) 18%, transparent);
  --info-bg: color-mix(in srgb, var(--info) 18%, transparent);
  --ring: color-mix(in srgb, var(--primary) 35%, transparent);
  --ring-strong: color-mix(in srgb, var(--primary) 50%, transparent);
  --btn-surface: rgba(0,0,0,.55);
  --btn-surface-hover: color-mix(in srgb, rgba(0,0,0,.55) 85%, rgba(255,255,255,.10));
  --btn-border: color-mix(in srgb, var(--line) 85%, transparent);
  --opt-active-border: color-mix(in srgb, var(--primary) 55%, var(--line));
  --opt-active-ring: color-mix(in srgb, var(--primary) 18%, transparent);
  --cta-solid-bg: #ffffff;
  --cta-solid-fg: #0b0c0f;
  --cta-solid-border: rgba(255,255,255,.28);
  --cta-ghost-bg: rgba(255,255,255,.06);
  --cta-ghost-fg: rgba(255,255,255,.92);
  --cta-ghost-border: rgba(255,255,255,.16);
  --cta-hover-lift: translateY(-2px);
  --cta-ring: rgba(150,150,150,.35);
}

/* =========================
   Base
   ========================= */
body.light{
  --bg0: #ececec;
  --bg1: #dedede;
  --bg2: #d6d6d6;
  --fg: #111;
  --muted: #444;
  --line: rgba(0,0,0,.12);
  --glass1: rgba(205,205,205,.60);
  --glass2: rgba(185,185,185,.32);
  --shadow: 0 22px 70px rgba(0,0,0,.20);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.14);
  --success: rgb(50 152 2);
  --danger: rgb(192 0 0);
  --ring: rgba(0,0,0,.12);
  --ring-strong: rgba(0,0,0,.16);
  --btn-surface: rgba(0,0,0,.08);
  --btn-surface-hover: rgba(0,0,0,.10);
  --btn-border: rgba(0,0,0,.16);
  --opt-active-border: rgba(0,0,0,.28);
  --opt-active-ring: rgba(0,0,0,.08);
}
html,body{
  height: 100%;
}

body{
  color: var(--fg);
  background:
    radial-gradient(1000px 520px at 35% 22%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(900px 480px at 75% 20%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(1100px 600px at 55% 85%, rgba(255,255,255,.05), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 40%, var(--bg0));
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

body.light{
  background: radial-gradient(900px 520px at 35% 22%, rgba(0,0,0,.10), transparent 58%),
    radial-gradient(850px 480px at 75% 20%, rgba(0,0,0,.08), transparent 62%),
    radial-gradient(980px 600px at 55% 85%, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(180deg, #e8e8e8, #dbdbdb 40%, #e8e8e8) !important;
}


/* =========================
   Cards & Glass
   ========================= */
.glass{
  background: linear-gradient(180deg, var(--glass1), var(--glass2));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius);
}

/* =========================
   Utilities
   ========================= */
.topbar{
  padding: 1px 14px;
}
.brand{
  letter-spacing: .3px;
  font-size: 28px;
}

/* =========================
   Navbar
   ========================= */
.nav-pills .nav-link{
  color: rgba(255,255,255,.82);
  border-radius: 12px;
  padding: .55rem 1rem;
  transition: .18s ease;
}
.nav-pills .nav-link:hover{
  background: rgba(255,255,255,.06);
  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);
}
.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);
}
.hero p{
  color: var(--muted);
  margin: 0;
  max-width: 540px;
  font-size: 15.5px;
}
.hero-cta{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-img-wrap{
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero-img{
  width: 100%;
  max-height: 430px;
  object-fit: contain;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.65));
  transform: translateY(6px);
  user-select: none;
}
.divider-glow{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  margin: 18px 0 0;
}
.stats-wrap{
  margin-top: 18px;
  padding: 18px 16px;
}
.stat-card{
  height: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  box-shadow: 1px 1px 12px rgba(0,0,0,.40);
  position: relative;
  overflow: hidden;
}
.stat-card:after{
  content: "";
  position: absolute;
  left: -80px;
  bottom: -120px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 60%);
  transform: rotate(12deg);
}
.stat-icon{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.stat-num{
  font-size: 36px;
  letter-spacing: .3px;
  text-align: center;
}
.stat-label{
  text-align: center;
  color: rgba(244,246,251,.72);
  margin-top: -6px;
  font-size: 16px;
  letter-spacing: .2px;
}

/* =========================
   Footer
   ========================= */
.footer-note{
  color: rgba(244,246,251,.55);
}
body.light .footer-note{
  color: #000 !important;
}
.navbar-toggler{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: .55rem .7rem;
}
.navbar-toggler:focus{
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}

/* =========================
   Media Queries
   ========================= */
@media (max-width: 991.98px){
      /* make the collapsed area feel like part of the glass header */
      .nav-wrap{
        padding: 10px;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,.10);
        background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      }
      .nav-pills{
        flex-direction: column;
        align-items: stretch !important;
        gap: 6px !important;
      }
      .nav-pills .nav-link{
        width: 100%;
        text-align: center;
      }
      .nav-actions{
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 10px;
      }
      .nav-actions .btn{ width: 100%; }
    }

@media (max-width: 420px){
      .nav-actions{ grid-template-columns: 1fr; }
    }

@media (max-width: 991.98px){
      .hero{padding: 26px 18px}
      .hero-img-wrap{min-height: 270px; align-items:center}
      .brand{font-size: 24px}
    }


body.light, body.light .nav-link, body.light .brand, body.light h1, body.light p, body.light .stat-num, body.light .stat-label{
  color: #000 !important;
}

#logoImg{
  display: block;
}
#logoImg{
  height: 66px;
}
body.light .nav-pills .nav-link.active{
  background: #000;
  color: #fff !important;
  border: 1px solid #000;
}

/* =========================
   Other
   ========================= */
/* ===== Navbar alignment patch (safe) ===== */
@media (min-width: 992px){
  /* keep menu pinned to the right edge */
  #mainNav .nav-wrap{
    justify-content: flex-end !important;
  }
  #mainNav .nav.nav-pills{
    justify-content: flex-end !important;
  }
}

/* ===== Remove mobile navbar padding ===== */
@media (max-width: 991.98px){
  header.topbar{padding:0 !important;}
  .nav-wrap{padding:0 !important; margin:0 !important;}
  .nav-pills{padding:0 !important; margin:0 !important;}
  .nav-pills .nav-link{padding:.5rem 0 !important;}
  .nav-actions{margin:0 !important; padding:0 !important;}
}

.glass{
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 1px 48px rgba(0,0,0,.50) !important;
}
header.topbar{

}
.nav-pills .nav-link{
  font-weight: 700;
  letter-spacing: .15px;
  padding: .58rem 1.05rem;
}
.nav-pills .nav-link:hover{
  background: rgba(255,255,255,.10);
}
.hero p{
  line-height: 1.85;
  font-size: 16px;
}
.stat-card{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.stat-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 22px 60px rgba(0,0,0,.48);
}
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;
}
/* mobile: clean collapse panel without padding but with subtle frame */
@media (max-width: 991.98px){
  .nav-wrap{
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  }
  body.light .nav-wrap{
    border: 1px solid rgba(0,0,0,.10);
    background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  }
  /* keep touch targets comfy even with no horizontal padding */
  .nav-pills .nav-link{
    padding: .62rem .9rem !important;
    text-align: right;
  }
}

body.light{
  --cta-solid-bg: var(--primary);
  --cta-solid-fg: #000;
  --cta-solid-border: rgba(0,0,0,.18);
  --cta-ghost-bg: rgba(0,0,0,.05);
  --cta-ghost-fg: #000;
  --cta-ghost-border: rgba(0,0,0,.18);
}

/* =========================
   Buttons
   ========================= */
.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-solid{
  background: var(--cta-solid-bg) !important;
  color: var(--cta-solid-fg) !important;
  border: 1px solid var(--cta-solid-border) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}
.hero-cta .btn-solid:hover{
  transform: var(--cta-hover-lift);
  box-shadow: 0 18px 55px rgba(0,0,0,.34);
}
.hero-cta .btn-ghost{
  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);
}
.hero-cta .btn-ghost:hover{
  transform: var(--cta-hover-lift);
  background: color-mix(in srgb, var(--cta-ghost-bg) 60%, transparent) !important;
}
.hero-cta .btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--cta-ring), 0 14px 40px rgba(0,0,0,.28);
}
/* Mobile: full width, nicer spacing */
@media (max-width: 575.98px){
  .hero-cta{
    gap: 10px;
  }
  .hero-cta .btn{
    width: 100%;
  }
}

.navbar-toggler{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: .55rem .65rem;
  border-radius: 12px;
}
.navbar-toggler:focus, .navbar-toggler:active{
  outline: none !important;
  box-shadow: none !important;
}
.faq{
  padding: 26px 22px;
}
.faq-title{
  font-weight: 950;
  letter-spacing: -0.4px;
  font-size: 24px;
}
.faq-sub{
  color: var(--muted);
  line-height: 1.85;
  font-size: 15.5px;
  max-width: 420px;
}
.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-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);
}
@media (max-width: 991.98px){
      .faq{padding:22px 16px}
      .faq-sub{max-width:100%}
    }

.accordion-button::after{
  display: none !important;
}

/* =========================
   Quiz
   ========================= */
.quiz-wrap{
  margin-top: 16px;
  padding: 22px;
}
.quiz-shell{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
.quiz-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.quiz-qid{
  font-weight: 900;
  letter-spacing: .2px;
  color: color-mix(in srgb, var(--fg) 92%, transparent);
}
.quiz-badges{
  display: flex;
  gap: 10px;
  align-items: center;
}
.qb{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  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));
  font-weight: 800;
  font-size: 13px;
  color: color-mix(in srgb, var(--fg) 90%, transparent);
}
.qb i{
  width: 16px;
  height: 16px;
  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);
}
.quiz-body{
  padding: 18px 16px 16px;
}
.quiz-question{
  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 777;
  letter-spacing: -.2px;
  line-height: 1.25;
  margin: 0;
  color: color-mix(in srgb, var(--fg) 95%, transparent);
}
.quiz-subline{
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.85;
  font-size: 15.5px;
}
.quiz-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--line) 90%, transparent), transparent);
  margin: 16px 0 14px;
}
.quiz-options{
  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: 10px;
  margin-top: 10px;
}
.opt{
  grid-column: span 12;
  width: 100%;
  text-align: center;
  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: 722;
  letter-spacing: .1px;
  transition: .18s ease;
  user-select: none;
  font-size: clamp(16px, 2.8vw, 20px) !important;
}
.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);
}
.quiz-actions{
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  gap: 14px;
  align-items: center;
  padding: 14px 16px 18px;
  border-top: 1px solid var(--line);
  font-weight: 1;
  font-size: clamp(16px, 2.8vw, 20px) !important;
}
.action-chip{
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--glass1) 80%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: color-mix(in srgb, var(--fg) 88%, transparent);
  user-select: none;
}
.action-chip svg{
  width: 18px;
  height: 18px;
  opacity: .85;
}
.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;
}
.submit-btn:hover{
  transform: translateY(-1px);
  background: var(--btn-surface-hover);
}
body.light .opt{
  color: rgba(0,0,0,.72);
  border: 1px solid 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{
  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);
}
@media (min-width: 768px){
      .opt{grid-column:span 6;text-align:center}
    }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* =========================
   Layout
   ========================= */
.page-center{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quiz-wrap{
  direction: ltr;
  text-align: left;
}
html, body{
  height: 100%;
  min-height: 100vh;
  margin: 0;
}
.page-center{
  min-height: 100vh;
}
body{
  display: flex;
  flex-direction: column;
}
.container.py-4{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.page-center{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
}
.quiz-badges{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.badge-chip{
  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{
  width: 16px;
  height: 16px;
}
.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{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.14);
}
.quiz-actions{
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px 18px;
  border-top: 1px solid var(--line);
}
.action-btn{
  height: 46px;
  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;
}
.action-btn svg{
  width: 18px;
  height: 18px;
  opacity: .92;
}
.action-btn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
}
.ai-btn{
  color: var(--info);
}
.report-btn{
  color: rgb(189 0 0);
}

/* Ensure action button icons inherit text color (fix mobile/dark icon mismatch) */
.action-btn i,
.action-btn svg{
  color: currentColor;
  fill: currentColor;
}
body.light .action-btn{
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.14);
}
@media (max-width: 575.98px){
    .quiz-top{gap:10px;flex-direction:column;align-items:flex-start}
    .quiz-badges{justify-content:flex-start}
    .quiz-actions{
      grid-template-columns:1fr;
      gap:10px;
    }
    .action-btn, .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}
  }

@media (max-width: 380px){
    .badge-chip{padding:6px 9px;font-size:12px}
  }

@media (max-width: 575.98px){
    .action-btn span{display:none}
    .action-btn{gap:0;padding:0 12px}
    .action-btn svg{width:20px;height:20px}
  }

@media (max-width:575.98px){

  .quiz-actions{
    display:grid !important;
    grid-template-columns:64px 1fr 64px;
    gap:14px;
    align-items:center;
  }

  .action-btn{
    height:48px;
    width:64px;
    padding:0;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .action-btn span{
    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.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);
}
body.light .opt.correct{
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: #fff !important;
}
body.light .opt.wrong{
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !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,.9) !important;
}
body.light .quiz-actions .action-btn.ai-btn, body.light .quiz-actions .action-btn.report-btn{
  background: rgba(0,0,0,.75) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
}
body.light .quiz-actions .action-btn.ai-btn:hover, body.light .quiz-actions .action-btn.report-btn:hover{
  background: rgba(0,0,0,.9) !important;
}
body.light .quiz-actions .action-btn svg, body.light .quiz-actions .action-btn svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
}
body.light .glass:before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(235,235,235,.62), rgba(205,205,205,.40));
  mix-blend-mode: soft-light;
  opacity: .42;
}
body.light .navbar .nav-btn:hover, body.light .navbar .btn:hover, body.light .navbar button:hover{
  background: rgba(0,0,0,.12) !important;
  border-color: rgba(0,0,0,.22) !important;
  color: #000 !important;
}
body.light .navbar .nav-btn:hover, body.light .navbar .btn:hover, body.light .navbar button:hover{
  background: rgba(0,0,0,.25) !important;
  border-color: rgba(0,0,0,.35) !important;
  color: #000 !important;
}
.opt{
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.opt-letter{
  width: 44px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  border: 1px solid var(--line);
  background: var(--glass1);
}
.opt-text{
  flex: 1;
}
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 .navbar-toggler{
  background: transparent !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.light .navbar-toggler:focus, body.light .navbar-toggler:active, body.light .navbar-toggler:hover{
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
body.light .navbar-toggler:hover, body.light .navbar-toggler:focus, body.light .navbar-toggler:active{
  background: rgba(0,0,0,.75) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
body.light .navbar-toggler{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
body.light .navbar-toggler:hover, body.light .navbar-toggler:focus, body.light .navbar-toggler:focus-visible, body.light .navbar-toggler:active, body.light .navbar-toggler[aria-expanded="true"]{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
}
html body.light .navbar-toggler{
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-touch-callout: none !important;
}
html body.light .navbar-toggler:hover, html body.light .navbar-toggler:focus, html body.light .navbar-toggler:focus-visible, html body.light .navbar-toggler:active, html body.light .navbar-toggler[aria-expanded="true"]{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
}
html body.light .navbar-toggler body.light .navbar-toggler-icon, body.light .navbar-toggler-icon::before, body.light .navbar-toggler-icon::after{
  filter: none !important;
  background-image: none !important;
}
body.light .navbar-toggler svg, body.light .navbar-toggler svg *{
  stroke: #000 !important;
  fill: #000 !important;
}
body.light .navbar-toggler .bar{
  background: #000 !important;
}
body.light .navbar{
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2030%2030%22%3E%0A%3Cpath%20stroke%3D%22rgba%280%2C0%2C0%2C.88%29%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20d%3D%22M4%207h22M4%2015h22M4%2023h22%22/%3E%0A%3C/svg%3E");
}
body.light .navbar-toggler-icon{
  background-image: var(--bs-navbar-toggler-icon-bg) !important;
  filter: none !important;
  opacity: 1 !important;
}
body.light .glass{
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(200,200,200,.62),
    rgba(170,170,170,.42)
  ) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.20),
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(0,0,0,.06) inset !important;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
body.light .glass::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
  opacity: .55;
  mix-blend-mode: soft-light;
}

:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > label{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > label::after{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > label::before{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
body:not(.light) :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > label{
  color: #ffffff !important;
}
body:not(.light) :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > label::after{
  background: transparent !important;
}

/* =========================
   Modals
   ========================= */
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-dialog{
  max-width: 520px;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-content{
  border-radius: 20px;
  overflow: hidden;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-header{
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-title{
  font-weight: 950;
  letter-spacing: -.2px;
}
body:not(.light) :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .btn-close{
  filter: invert(1) grayscale(1) contrast(1.05);
  opacity: .9;
  display: none;
}
body.light :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .btn-close{
  opacity: .85;
  display: none;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .btn-close:hover{
  opacity: 1;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-body{
  padding: 16px 18px 4px;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > label{
  font-weight: 800;
  letter-spacing: .05px;
  opacity: .92;
}
body:not(.light) :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > label{
  color: #fff !important;
}
body.light :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > label{
  color: #111 !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-select, :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-control{
  border-radius: 14px;
  min-height: 52px;
  padding-top: 1.25rem;
  padding-bottom: .55rem;
  font-weight: 750;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-select{
  background-position: left .85rem center;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-control{
  min-height: 120px;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-select:focus, :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-control:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring-strong);
  border-color: var(--opt-active-border);
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-footer{
  padding: 14px 18px 18px;
  display: flex;
  justify-content: flex-start !important;
  gap: 10px;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-footer .btn{
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .15px;
  padding: .78rem 1.05rem;
  min-height: 46px;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-footer .btn.btn-dark{
  background: var(--btn-surface) !important;
  border: 1px solid var(--btn-border) !important;
  color: color-mix(in srgb, var(--fg) 92%, transparent) !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-footer .btn.btn-dark:hover{
  background: var(--btn-surface-hover) !important;
  transform: translateY(-1px);
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .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;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-footer .btn.btn-danger:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
body.light :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-footer .btn.btn-dark{
  background: rgba(0,0,0,.08) !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  color: #111 !important;
}
body.light :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-footer .btn.btn-danger{
  background: rgb(192 0 0) !important;
  border-color: rgba(0,0,0,.15) !important;
}
/* Mobile: full width buttons */
@media (max-width: 575.98px){
  :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-footer{
    flex-wrap: wrap;
  }
  :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-footer .btn{
    flex: 1 1 auto;
    width: 100%;
  }
}

:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-content{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel), :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) *{
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-title{
  font-weight: 800 !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > label{
  font-weight: 700 !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-select, :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-control{
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-body, :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-title, :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > label{
  opacity: 1 !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > .form-control{
  padding-top: 1.6rem !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > label{
  top: 6px;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-footer .btn.btn-dark{
  background: rgba(0,0,0,.85) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-footer .btn.btn-dark:hover{
  background: rgba(0,0,0,1) !important;
  color: #fff !important;
}
body.light :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-footer .btn.btn-dark{
  background: rgba(0,0,0,.85) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
body.light :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-footer .btn.btn-dark:hover{
  background: rgba(0,0,0,1) !important;
}
body:not(.light) :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-content{
  background: #0f1117 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.55) !important;
}
body.light :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-content{
  background: #eeeeee !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.16) !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > .form-control#UserReportMessage{
  padding-top: 1.7rem !important;
  padding-bottom: .75rem !important;
  line-height: 1.75 !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > label[for="UserReportMessage"]{
  top: 7px;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) textarea.form-control{
  padding-top: 1.7rem !important;
  line-height: 1.75 !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > .form-select{
  padding-top: 1.6rem !important;
  padding-bottom: .55rem !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > label[for="UserReportSelector"]{
  top: 0px;
}
body.light :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > .form-select, body:not(.light) :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-floating > .form-select{
  padding-top: 1.6rem !important;
}
#opts, #opts *{
  pointer-events: auto;
}
.opt{
  pointer-events: auto;
}
.quiz-actions .action-btn, .quiz-actions .submit-btn{
  isolation: isolate;
}
.report-btn{
  color: rgb(189 0 0) !important;
}
body.light .quiz-actions .action-btn.report-btn{
  background: rgba(0,0,0,.75) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
}
body.light .quiz-actions .action-btn.report-btn:hover{
  background: rgba(0,0,0,.90) !important;
}
#reportModal{
  direction: ltr;
}
#reportModal .modal-content{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 16px !important;
  overflow: hidden;
}
body:not(.light) #reportModal .modal-content{
  background: #0f1117 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.55) !important;
}
body.light #reportModal .modal-content{
  background: #eeeeee !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.16) !important;
}
#reportModal .modal-header{
  border-bottom: 1px solid var(--line) !important;
}
body:not(.light) #reportModal .modal-title{
  color: #fff !important;
}
body.light #reportModal .modal-title{
  color: #111 !important;
}
body:not(.light) #reportModal .btn-close{
  filter: invert(1) grayscale(1) contrast(1.05);
  opacity: .9;
}
#reportModal .btn-close:hover{
  opacity: 1;
}
#reportModal textarea.form-control{
  background: transparent !important;
  color: var(--fg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  min-height: 120px;
  padding: 14px 14px !important;
  line-height: 1.75 !important;
}
#reportModal textarea.form-control::placeholder{
  color: color-mix(in srgb, var(--fg) 55%, transparent) !important;
}
#reportModal .btn.send-report, #reportModal .btn[data-bs-dismiss="modal"]{
  border-radius: 14px !important;
  min-height: 46px !important;
  font-weight: 950 !important;
  letter-spacing: .2px !important;
  background: rgba(0,0,0,.85) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
#reportModal .btn.send-report:hover, #reportModal .btn[data-bs-dismiss="modal"]:hover{
  background: rgba(0,0,0,1) !important;
  color: #fff !important;
}
#reportModal, #reportModal *{
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}
#reportModal .glass{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#reportModal .modal-content{
  background: linear-gradient(180deg, var(--glass1), var(--glass2)) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  border-radius: 16px !important;
  overflow: hidden;
}
body:not(.light) #reportModal .modal-title, body:not(.light) #reportModal .modal-body{
  color: #fff !important;
}
body.light #reportModal .modal-title, body.light #reportModal .modal-body{
  color: #000 !important;
}
body:not(.light) #reportModal textarea.form-control{
  background: rgba(0,0,0,.55) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
body:not(.light) #reportModal textarea.form-control::placeholder{
  color: rgba(255,255,255,.70) !important;
}
body.light #reportModal textarea.form-control{
  background: rgba(255,255,255,.45) !important;
  color: #000 !important;
  border: 1px solid rgba(0,0,0,.14) !important;
}
body.light #reportModal textarea.form-control::placeholder{
  color: rgba(0,0,0,.55) !important;
}
body.light #reportModal .btn-close{
  opacity: .85;
}
body:not(.light) #reportModal .modal-content{
  background: linear-gradient(180deg, rgba(18,20,26,.78), rgba(12,14,18,.82)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.65) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
}
body:not(.light) #reportModal .modal-title{
  color: #f3f4f6 !important;
  font-weight: 800 !important;
}
body:not(.light) #reportModal .modal-body{
  color: #d1d5db !important;
}
body:not(.light) #reportModal textarea.form-control{
  background: rgba(8,10,14,.65) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #f9fafb !important;
}
body:not(.light) #reportModal textarea.form-control:focus{
  border-color: rgba(220,38,38,.55) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.18) !important;
}
body:not(.light) #reportModal .form-select{
  background: rgba(8,10,14,.65) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #f9fafb !important;
}
body:not(.light) #reportModal .btn{
  border-radius: 14px !important;
}
body:not(.light) #reportModal .btn-dark{
  background: #0b0b0c !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
}
body:not(.light) #reportModal .btn-dark:hover{
  background: #000 !important;
}
body:not(.light) #reportModal .modal-content{
  background: #0f1117 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.75) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body:not(.light) #reportModal .modal-header{
  background: #0f1117 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
body:not(.light) #reportModal .modal-body{
  background: #0f1117 !important;
  color: #f3f4f6 !important;
}
body:not(.light) #reportModal .modal-title{
  color: #ffffff !important;
}
body:not(.light) #reportModal .form-control, body:not(.light) #reportModal .form-select{
  background: #0b0c10 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
body:not(.light) #reportModal .form-control::placeholder{
  color: rgba(255,255,255,.65) !important;
}
body:not(.light) #reportModal .form-control:focus, body:not(.light) #reportModal .form-select:focus{
  background: #0b0c10 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.25) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.08) !important;
}
body:not(.light) #reportModal .btn-close{
  filter: invert(1) brightness(1.2);
  opacity: .9;
}
body:not(.light) #reportModal .btn{
  background: #000 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}
body:not(.light) #reportModal .btn:hover{
  background: #111 !important;
}
body:not(.light) #reportModal .form-select, body:not(.light) #reportModal .form-control{
  background-color: #0b0c10 !important;
  background: #0b0c10 !important;
  color: #ffffff !important;
}
body:not(.light) #reportModal .form-select:focus, body:not(.light) #reportModal .form-control:focus{
  background-color: #0b0c10 !important;
  color: #ffffff !important;
}
body:not(.light) :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel){
  --bs-body-bg: #0b0c10;
  --bs-body-color: #ffffff;
  --bs-secondary-bg: #0b0c10;
  --bs-tertiary-bg: #0b0c10;
  --bs-border-color: rgba(255,255,255,.12);
  color-scheme: dark;
}
body:not(.light) :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-select, body:not(.light) :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-control{
  background-color: #0b0c10 !important;
  background: #0b0c10 !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.12) !important;
}
body:not(.light) :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-select:focus, body:not(.light) :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-control:focus{
  background-color: #0b0c10 !important;
  color: #fff !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .form-select{
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  padding-right: 12px !important;
}
:is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-content{
  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;
}
body:not(.light) :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-content{
  background: linear-gradient(180deg, var(--glass1), var(--glass2)) !important;
}
body.light :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-content.glass, body:not(.light) :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-content.glass,
#Q-TypeModalLabel .modal-content{
  background: linear-gradient(180deg, var(--glass1), var(--glass2)) !important;
  background-image: linear-gradient(180deg, var(--glass1), var(--glass2)) !important;
  background-color: transparent !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;
}
body.light :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-content.glass::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(235,235,235,.62), rgba(205,205,205,.40));
  mix-blend-mode: soft-light;
  opacity: .42;
}
body:not(.light) :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-content.glass::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  opacity: .18;
}
#UserRationalModal .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;
}
#UserRationalModal .modal-header{
  border-bottom: 1px solid var(--line) !important;
}
body:not(.light) #UserRationalModal .modal-title, body:not(.light) #UserRationalModal .modal-body{
  color: #fff !important;
}
body.light #UserRationalModal .modal-title, body.light #UserRationalModal .modal-body{
  color: #000 !important;
}
#UserRationalModal #EN_Rash, #UserRationalModal #AR_Rash{
  line-height: 1.8 !important;
  margin: 0 !important;
}
body:not(.light) #UserRationalModal .btn-close{
  filter: invert(1) grayscale(1) contrast(1.05);
  opacity: .9;
}
#UserRationalModal .btn-close:hover{
  opacity: 1;
}
#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 .btn-close{
  margin: 0 !important;
}
#UserRationalModal #EN_Rash, #UserRationalModal #EN_Rash *{
  direction: ltr !important;
  text-align: left !important;
}
#UserRationalModal #AR_Rash, #UserRationalModal #AR_Rash *{
  direction: rtl !important;
  text-align: right !important;
}
.type-card{
  width: 100%;
  max-width: 720px;
  padding: clamp(22px, 3.5vw, 42px);
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.type-title{
  font-weight: 950;
  letter-spacing: -.4px;
  line-height: 1.15;
  font-size: clamp(24px, 3.2vw, 36px);
  margin: 0 0 clamp(16px, 2.6vw, 28px);
}
.type-grid{
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vw, 14px);
}
.type-choice{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--glass1), var(--glass2));
  color: color-mix(in srgb, var(--fg) 92%, transparent);
  padding: clamp(14px, 2.2vw, 20px);
  font-weight: 900;
  letter-spacing: .15px;
  font-size: clamp(16px, 1.8vw, 19px);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  user-select: none;
}
.type-choice:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.type-choice:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring-strong);
  border-color: var(--opt-active-border);
}
/* Make it look good on very small screens */
@media (max-width: 420px){
  .type-choice{ border-radius: 13px; }
}

/* ===== FIX: Mobile navbar collapse spacing (no overlap) ===== */
@media (max-width: 991.98px){
  header.topbar{ padding: 10px 14px !important; }
  /* make collapse panel a detached glass card */
  .navbar-collapse{ margin-top: 14px !important; }
  #mainNav{ position: relative; z-index: 50; }

  .nav-wrap{
    padding: 12px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  }
  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;
  }

  /* buttons row (login/register/theme) keep breathing room */
  .nav-actions{
    gap: 10px !important;
    margin-top: 10px !important;
    padding-top: 2px !important;
  }
}

@media (max-width: 991.98px){
      /* make the collapsed area feel like part of the glass header */
      .nav-wrap{
        padding: 10px;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,.10);
        background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      }
      .nav-pills{
        flex-direction: column;
        align-items: stretch !important;
        gap: 6px !important;
      }
      .nav-pills .nav-link{
        width: 100%;
        text-align: center;
      }
      .nav-actions{
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 10px;
      }
      .nav-actions .btn{ width: 100%; }
    }

@media (max-width: 420px){
      .nav-actions{ grid-template-columns: 1fr; }
    }

@media (max-width: 991.98px){
      .hero{padding: 26px 18px}
      .hero-img-wrap{min-height: 270px; align-items:center}
      .brand{font-size: 24px}
    }

/* ===== Navbar alignment patch (safe) ===== */
@media (min-width: 992px){
  /* keep menu pinned to the right edge */
  #mainNav .nav-wrap{
    justify-content: flex-end !important;
  }
  #mainNav .nav.nav-pills{
    justify-content: flex-end !important;
  }
}

/* ===== Remove mobile navbar padding ===== */
@media (max-width: 991.98px){
  header.topbar{padding:0 !important;}
  .nav-wrap{padding:0 !important; margin:0 !important;}
  .nav-pills{padding:0 !important; margin:0 !important;}
  .nav-pills .nav-link{padding:.5rem 0 !important;}
  .nav-actions{margin:0 !important; padding:0 !important;}
}

/* mobile: clean collapse panel without padding but with subtle frame */
@media (max-width: 991.98px){
  .nav-wrap{
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  }
  body.light .nav-wrap{
    border: 1px solid rgba(0,0,0,.10);
    background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  }
  /* keep touch targets comfy even with no horizontal padding */
  .nav-pills .nav-link{
    padding: .62rem .9rem !important;
    text-align: right;
  }
}

/* Mobile: full width, nicer spacing */
@media (max-width: 575.98px){
  .hero-cta{
    gap: 10px;
  }
  .hero-cta .btn{
    width: 100%;
  }
}

@media (max-width: 991.98px){
      .faq{padding:22px 16px}
      .faq-sub{max-width:100%}
    }

@media (min-width: 768px){
      .opt{grid-column:span 6;text-align:center}
    }

@media (max-width: 575.98px){
    .quiz-top{gap:10px;flex-direction:column;align-items:flex-start}
    .quiz-badges{justify-content:flex-start}
    .quiz-actions{
      grid-template-columns:1fr;
      gap:10px;
    }
    .action-btn, .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}
  }

@media (max-width: 380px){
    .badge-chip{padding:6px 9px;font-size:12px}
  }

@media (max-width: 575.98px){
    .action-btn span{display:none}
    .action-btn{gap:0;padding:0 12px}
    .action-btn svg{width:20px;height:20px}
  }

@media (max-width:575.98px){

  .quiz-actions{
    display:grid !important;
    grid-template-columns:64px 1fr 64px;
    gap:14px;
    align-items:center;
  }

  .action-btn{
    height:48px;
    width:64px;
    padding:0;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .action-btn span{
    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;}

}

/* Mobile: full width buttons */
@media (max-width: 575.98px){
  :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-footer{
    flex-wrap: wrap;
  }
  :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel) .modal-footer .btn{
    flex: 1 1 auto;
    width: 100%;
  }
}

@media (max-width: 991.98px){
  header.topbar{ padding: 10px 14px !important; }

  /* detached collapse card spacing */
  .navbar-collapse{ margin-top: 14px !important; }
  #mainNav{ position: relative; z-index: 50; }

  #mainNav .nav-wrap{
    padding: 12px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  }
  body.light #mainNav .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;
  }

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

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

  #mainNav .nav-actions{
    gap: 10px !important;
    margin-top: 10px !important;
    padding-top: 2px !important;
  }
}

.navbar-toggler-icon{
  filter: invert(1) opacity(.92);
}
@media (max-width: 991.98px){
      /* make the collapsed area feel like part of the glass header */
      .nav-wrap{
        padding: 10px;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,.10);
        background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      }
      .nav-pills{
        flex-direction: column;
        align-items: stretch !important;
        gap: 6px !important;
      }
      .nav-pills .nav-link{
        width: 100%;
        text-align: center;
      }
      .nav-actions{
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 10px;
      }
      .nav-actions .btn{ width: 100%; }
    }

@media (max-width: 420px){
      .nav-actions{ grid-template-columns: 1fr; }
    }

@media (max-width: 991.98px){
      .hero{padding: 26px 18px}
      .hero-img-wrap{min-height: 270px; align-items:center}
      .brand{font-size: 24px}
    }

body.light{
  --bg0: #f5f5f5;
  --bg1: #e5e5e5;
  --bg2: #dcdcdc;
  --fg: #111;
  --muted: #444;
  --line: rgba(0,0,0,.15);
  --glass1: rgba(150,150,150,.25);
  --glass2: rgba(150,150,150,.15);
  background: linear-gradient(180deg, #f2f2f2, #e6e6e6 40%, #f2f2f2);
  color: #111;
}
/* ===== Navbar alignment patch (safe) ===== */
@media (min-width: 992px){
  /* keep menu pinned to the right edge */
  #mainNav .nav-wrap{
    justify-content: flex-end !important;
  }
  #mainNav .nav.nav-pills{
    justify-content: flex-end !important;
  }
}

/* ===== Remove mobile navbar padding ===== */
@media (max-width: 991.98px){
  header.topbar{padding:0 !important;}
  .nav-wrap{padding:0 !important; margin:0 !important;}
  .nav-pills{padding:0 !important; margin:0 !important;}
  .nav-pills .nav-link{padding:.5rem 0 !important;}
  .nav-actions{margin:0 !important; padding:0 !important;}
}

/* mobile: clean collapse panel without padding but with subtle frame */
@media (max-width: 991.98px){
  .nav-wrap{
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  }
  body.light .nav-wrap{
    border: 1px solid rgba(0,0,0,.10);
    background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  }
  /* keep touch targets comfy even with no horizontal padding */
  .nav-pills .nav-link{
    padding: .62rem .9rem !important;
    text-align: right;
  }
}

/* Mobile: full width, nicer spacing */
@media (max-width: 575.98px){
  .hero-cta{
    gap: 10px;
  }
  .hero-cta .btn{
    width: 100%;
  }
}

body.light .navbar-toggler-icon{
  filter: invert(1);
}
.navbar-toggler-icon{
  filter: none;
}
@media (max-width: 991.98px){
      .faq{padding:22px 16px}
      .faq-sub{max-width:100%}
    }

/* ===== FIX: Mobile navbar collapse spacing (no overlap) ===== */
@media (max-width: 991.98px){
  header.topbar{ padding: 10px 14px !important; }
  /* make collapse panel a detached glass card */
  .navbar-collapse{ margin-top: 14px !important; }
  #mainNav{ position: relative; z-index: 50; }

  .nav-wrap{
    padding: 12px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  }
  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;
  }

  /* buttons row (login/register/theme) keep breathing room */
  .nav-actions{
    gap: 10px !important;
    margin-top: 10px !important;
    padding-top: 2px !important;
  }
}


/* ====================================================
   Utilities (non-visual behavior kept identical)
==================================================== */
.radius-16{border-radius:16px!important;}
.fw-950{font-weight:950!important;}
.modal-header-line{border-bottom:1px solid var(--line)!important;}
.modal-body-muted{color:var(--muted)!important;line-height:1.8;}
.h-100px{height:100px!important;}

/* Laravel UI swap compatibility: allow .opt to be a <label> wrapping a hidden radio */
label.opt{cursor:pointer; user-select:none;}
.opt-input{position:absolute; opacity:0; pointer-events:none; width:0; height:0;}
.opt.selected{outline:1px solid rgba(255,255,255,.12);}


/* =========================
   FIX PACK v3 (Exact Match)
   - Keep layout + dimensions identical
   - Fix quiz-wrap fixed width in flex center
   - Restore Light-mode colors for AI/Report (override old !important rules)
   ========================= */
.quiz-wrap{
  /* Fixed width like quiz.html (stable in flex container) */
  width: min(1120px, 100%);
  max-width: 1120px;
  flex: 0 0 auto;
  box-sizing: border-box;
}

/* Light mode: keep AI/Report color identity (override previous !important forcing white/black) */
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;
}

/* Force AI icon color in all breakpoints */
.ai-btn i,
.ai-btn svg {
  color: var(--info);
  fill: var(--info);
}


/* ===============================
   Disabled state for AI & Report
   (Full button styling)
================================ */

/* يشمل disabled attribute أو class .disabled */
.ai-btn:disabled,
.report-btn:disabled,
.ai-btn.disabled,
.report-btn.disabled {
  /* تعتيم كامل للزر */
  opacity: 0.5;
  filter: brightness(0.65) saturate(0.7);

  /* إلغاء التفاعل */
  cursor: not-allowed;
  pointer-events: none;

  /* إلغاء أي ظل/hover سابق */
  box-shadow: none;
  transform: none;
}

/* منع تأثيرات hover في حالة disabled */
.ai-btn:disabled:hover,
.report-btn:disabled:hover,
.ai-btn.disabled:hover,
.report-btn.disabled:hover {
  background: inherit;
  border-color: inherit;
}
/* =========================================================
   GLOBAL GLASS MODALS (Match Report modal styling)
   - Applies to ALL Bootstrap modals in the project
   - Uses the same surfaces, borders, radius, shadows as :is(#UserReportModal,#UserLikeModal,#Q-TypeModalLabel)
   ========================================================= */

/* Glass shell */
body.light .modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content),
body:not(.light) .modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content){
  background: linear-gradient(180deg, var(--glass1), var(--glass2)) !important;
  background-image: linear-gradient(180deg, var(--glass1), var(--glass2)) !important;
  background-color: transparent !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;
}

/* Soft highlight overlay (same visual feel as Report) */
body.light .modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content)::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  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 :is(.modal-content.glass, #Q-TypeModalLabel .modal-content)::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,10), rgba(255,255,255,0));
  opacity: .18;
}

/* Header divider */
.modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .modal-header{
  border-bottom: 1px solid var(--line) !important;
}

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

/* Form controls inside modals (match Report: dark surface, strong text) */
body:not(.light) .modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .form-select,
body:not(.light) .modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .form-control{
  background-color: #0b0c10 !important;
  background: #0b0c10 !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,12) !important;
}
body:not(.light) .modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .form-select:focus,
body:not(.light) .modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .form-control:focus{
  background-color: #0b0c10 !important;
  color: #fff !important;
  outline: none;
  box-shadow: 0 0 0 4px var(--ring-strong);
  border-color: var(--opt-active-border);
}

/* Light mode form controls keep the same premium feel */
body.light .modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .form-select,
body.light .modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .form-control{
  background: rgba(255,255,255,92) !important;
  color: #111 !important;
  border-color: rgba(0,0,0,14) !important;
}
body.light .modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .form-select:focus,
body.light .modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .form-control:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring-strong);
  border-color: var(--opt-active-border);
}

/* Select: remove native arrow background (same as Report) */
.modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .form-select{
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  padding-right: 12px !important;
}

/* Buttons in modal footer (match Report) */
.modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .modal-footer{
  padding: 14px 18px 18px;
  display: flex;
  justify-content: flex-start !important;
  gap: 10px;
}
.modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .modal-footer .btn{
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .15px;
  padding: .78rem 1.05rem;
  min-height: 46px;
}
.modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .modal-footer .btn.btn-dark{
  background: var(--btn-surface) !important;
  border: 1px solid var(--btn-border) !important;
  color: color-mix(in srgb, var(--fg) 92%, transparent) !important;
}
.modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .modal-footer .btn.btn-dark:hover{
  background: var(--btn-surface-hover) !important;
  transform: translateY(-1px);
}
.modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .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 :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .modal-footer .btn.btn-danger:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Mobile: full width buttons */
@media (max-width: 575.98px){
  .modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .modal-footer{
    flex-wrap: wrap;
  }
  .modal :is(.modal-content.glass, #Q-TypeModalLabel .modal-content) .modal-footer .btn{
    flex: 1 1 auto;
    width: 100%;
  }
}



/* =========================================================
   Q-TypeModalLabel Modal (Category Picker) - Match glass modal style
   ========================================================= */
#Q-TypeModalLabel .modal-body .btn.btn-outline-secondary{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text, #fff);
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 600;
}
body.light #Q-TypeModalLabel .modal-body .btn.btn-outline-secondary{
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
  color: #111827;
}
#Q-TypeModalLabel .modal-body .btn.btn-outline-secondary:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}
body.light #Q-TypeModalLabel .modal-body .btn.btn-outline-secondary:hover{
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.18);
}
#Q-TypeModalLabel .modal-body .btn.btn-outline-secondary:focus{
  box-shadow: none;
}


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

html *, 
body * {
  font-weight: 650 !important;
}


.faq-title , .modal-title h1{
  letter-spacing: -0.8px;
  line-height: 1.05;
  font-size: clamp(34px, 4.1vw, 62px);
}


html{
  background-color: var(--bg0);
  background-image: linear-gradient(180deg, var(--bg0), var(--bg1) 40%, var(--bg0));
}

/* 2) طبقة ثابتة خلف الشاشة (Linear فقط) */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -9999;
  pointer-events: none;
  background-color: var(--bg0);
  background-image: linear-gradient(180deg, var(--bg0), var(--bg1) 40%, var(--bg0));
}

/* Light mode */
html:has(body.light){
  background-color: #e8e8e8;
  background-image: linear-gradient(180deg, #e8e8e8, #dbdbdb 40%, #e8e8e8);
}

html:has(body.light)::before{
  background-color: #e8e8e8;
  background-image: linear-gradient(180deg, #e8e8e8, #dbdbdb 40%, #e8e8e8);
}