/* assets/css/lj-ui-effects.css  (CONSOLIDATED VERSION - WITH THEME-TINTED BACKGROUNDS) */ 

/* ========== GLOBAL RESETS ========== */
html, body{ margin:0 !important; padding:0 !important; }
.bg-body::before, .bg-body::after{ pointer-events:none !important; }
* { box-sizing: border-box !important; }

/* ========== TYPOGRAPHY HOOK (UI Customizer) ========== */
/* The UI customizer sets --fontSize (e.g. 12px). We apply it at the root so all rem-based sizing scales. */
html{ font-size: var(--lj-font-size, var(--fontSize, var(--font-size, 16px))) !important; }
body{ font-size: 1rem; }


/* ========== THEME VARIABLES ========== */
:root{
  /* Primary */
  --lj-primary: var(--primary, var(--theme-primary, var(--bs-primary, #0d6efd)));
  --lj-on-primary: var(--primaryText, var(--theme-on-primary, #ffffff));
  --lj-primary-rgb: var(--primary-rgb, 13, 110, 253);

  /* Text */
  --lj-text: var(--text, var(--theme-text, var(--bs-body-color, #111827)));
  --lj-muted: var(--muted, var(--theme-muted, rgba(17,24,39,.6)));

  /* Surface */
  --lj-surface: var(--surface, var(--card-bg, rgba(255,255,255,.85)));
  --lj-surface2: var(--surface2, rgba(255,255,255,.45));

  /* Border */
  --lj-border: var(--border, var(--theme-border, rgba(0,0,0,.12)));

  /* Layout */
  --lj-boxed-width: 1140px;
  --lj-gutter: 14px;

  /* Radius (customizer-driven) */
  --lj-radius: 16px;
  --lj-radius-lg: max(0px, calc(var(--lj-radius) + 6px));
  --lj-radius-sm: max(0px, calc(var(--lj-radius) - 6px));

  /* Rail sizes */
  --lj-rail-collapsed: 64px;
  --lj-rail-expanded:  176px;
  --lj-rail-radius: var(--lj-radius-lg);
  --lj-rail-inset: 0px;

  /* Folder embed variables */
  --f-primary: var(--lj-primary, #0d6efd);
  --f-primary-rgb: var(--lj-primary-rgb, 13, 110, 253);
  --f-on-primary: var(--lj-on-primary, #fff);
  --f-text: var(--lj-text, #111827);
  --f-muted: var(--lj-muted, rgba(17,24,39,.6));
  --f-border: var(--lj-border, rgba(0,0,0,.12));
  --f-surface: color-mix(in srgb, var(--lj-primary) 10%, transparent);
  --f-surface2: color-mix(in srgb, var(--lj-primary) 5%, transparent);
  --f-radius: var(--lj-radius, 16px);
  --f-radius-lg: var(--lj-radius-lg, calc(var(--lj-radius, 16px) + 6px));
  --f-radius-sm: var(--lj-radius-sm, calc(var(--lj-radius, 16px) - 6px));

  /* Scrollbar */
  --lj-scroll-thumb: color-mix(in srgb, var(--bs-primary) 75%, #000 25%);
  --lj-scroll-track: color-mix(in srgb, var(--bs-body-bg) 88%, #000 12%);

  /* Bootstrap modal backdrop tuning */
  --lj-modal-backdrop-opacity: 0.55;
  --lj-modal-backdrop: rgba(2, 6, 23, 0.65);
}

/* ========== EXPLICIT DARK MODE (site toggle) ==========
   If the site sets a dark theme attribute/class, force LJ tokens dark
   even when the OS prefers light. */
html[data-bs-theme="dark"],
html[data-theme="dark"],
html[data-color*="dark"],
body[data-bs-theme="dark"],
body[data-theme="dark"],
body.lj-dark,
body.dark,
.theme-dark{
  --lj-surface: #2a2a2a;
  --lj-surface2: #3a3a3a;
  --lj-text: rgba(255, 255, 255, 0.92);
  --lj-muted: rgba(255, 255, 255, 0.65);
  --lj-border: rgba(255, 255, 255, 0.16);

  /* Folder embed variables for dark mode */
  --f-text: rgba(255, 255, 255, 0.92);
  --f-muted: rgba(255, 255, 255, 0.65);
  --f-border: rgba(255, 255, 255, 0.16);
  --f-surface: color-mix(in srgb, var(--lj-primary) 20%, rgba(0, 0, 0, 0.35));
  --f-surface2: color-mix(in srgb, var(--lj-primary) 10%, rgba(0, 0, 0, 0.35));

  --lj-modal-backdrop-opacity: 0.62;
  --lj-modal-backdrop: rgba(0,0,0,0.72);
}

/* Radius customizer hooks */
html.lj-radius-rounded,
html[data-radius="rounded"]{ --lj-radius: 18px; }
html.lj-radius-standard,
html[data-radius="standard"]{ --lj-radius: 12px; }
html.lj-radius-flat,
html[data-radius="flat"]{ --lj-radius: 0px; }

/* ========== THEMED SCROLLBARS ========== */
*{ scrollbar-width: thin; scrollbar-color: var(--lj-scroll-thumb) var(--lj-scroll-track); }
::-webkit-scrollbar{ width: 12px; height: 12px; }
::-webkit-scrollbar-track{ background: var(--lj-scroll-track); }
::-webkit-scrollbar-thumb{
  background: var(--lj-scroll-thumb);
  border-radius: 999px;
  border: 3px solid var(--lj-scroll-track);
}
::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--lj-scroll-thumb) 85%, #fff 15%);
}

/* ========== DARK MODE ========== */
@media (prefers-color-scheme: dark) {
  html:not([data-bs-theme="light"]) {
    --lj-surface: #2a2a2a;
    --lj-surface2: #3a3a3a;
    --lj-text: rgba(255, 255, 255, 0.9);
    --lj-muted: rgba(255, 255, 255, 0.6);
    --lj-border: rgba(255, 255, 255, 0.15);

    --f-text: rgba(255, 255, 255, 0.9);
    --f-muted: rgba(255, 255, 255, 0.6);
    --f-border: rgba(255, 255, 255, 0.15);
    --f-surface: color-mix(in srgb, var(--lj-primary) 20%, rgba(0, 0, 0, 0.3));
    --f-surface2: color-mix(in srgb, var(--lj-primary) 10%, rgba(0, 0, 0, 0.3));

    --lj-modal-backdrop-opacity: 0.62;
    --lj-modal-backdrop: rgba(0,0,0,0.72);
  }
}
/* ========= FORCE LIGHT MODE (wins over OS dark) ========= */
html[data-bs-theme="light"] {
  --lj-surface: rgba(255,255,255,.88);
  --lj-surface2: rgba(255,255,255,.55);
  --lj-text: #111827;
  --lj-muted: rgba(17,24,39,.6);
  --lj-border: rgba(0,0,0,.12);

  --f-text: #111827;
  --f-muted: rgba(17,24,39,.6);
  --f-border: rgba(0,0,0,.12);
  --f-surface: color-mix(in srgb, var(--lj-primary) 10%, transparent);
  --f-surface2: color-mix(in srgb, var(--lj-primary) 5%, transparent);

  --lj-modal-backdrop-opacity: 0.55;
  --lj-modal-backdrop: rgba(2, 6, 23, 0.65);
}

  html:not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light):not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light) body { 
    background-color: #1a1a1a !important;
  }
  html:not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light):not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light) .bg-body { 
    background-color: #1a1a1a !important;
  }
  html:not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light):not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light) { 
    background-color: #1a1a1a !important;
  }
}

/* ========== PAGE WRAPPER ========== */
.lj-page{
  min-height:100vh;
  box-sizing:border-box;
}

/* FLUID LAYOUT */
html:not(.lj-layout-boxed) .lj-page{
  width:100%;
  margin:0;
  padding:0;
}

/* BOXED LAYOUT */
html.lj-layout-boxed body{
  background: color-mix(in srgb, var(--bs-body-bg) 92%, #000 8%);
}
html.lj-layout-boxed .lj-page{
  width: min(100%, var(--lj-boxed-width));
  margin-left:auto;
  margin-right:auto;
  padding-left: var(--lj-gutter);
  padding-right: var(--lj-gutter);
}

/* Force containers obey mode */
html.lj-layout-boxed .lj-page .container,
html.lj-layout-boxed .lj-page .container-fluid{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html:not(.lj-layout-boxed) .lj-page .container,
html:not(.lj-layout-boxed) .lj-page .container-fluid{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* ========== TOPNAV ========== */
.lj-topnav{
  margin:0 !important;
  border-radius: var(--lj-radius-lg);
  box-shadow:0 14px 44px rgba(2,6,23,.14);
  overflow:hidden;
}
.navbar{ margin:0 !important; }

/* ========== NAV VISIBILITY ========== */
.lj-rail-wrap{ display:none; }
body.lj-menu-vertical .lj-rail-wrap{ display:block; }
body.lj-menu-vertical .lj-topnav{ display:none; }
body:not(.lj-menu-vertical) .lj-topnav{ display:flex; }

/* ========== RESERVE SPACE FOR RAIL ========== */
body.lj-menu-vertical{
  padding-left: calc(var(--lj-rail-collapsed) + var(--lj-rail-inset)) !important;
}
html.lj-pref-pinned body.lj-menu-vertical{
  padding-left: calc(var(--lj-rail-expanded) + var(--lj-rail-inset)) !important;
}

/* Keep boxed centered in remaining space */
html.lj-layout-boxed body.lj-menu-vertical .lj-page{
  margin-left: calc((100vw - var(--lj-boxed-width) - var(--lj-rail-collapsed) - var(--lj-rail-inset)) / 2);
  margin-right: auto;
}
html.lj-layout-boxed.lj-pref-pinned body.lj-menu-vertical .lj-page{
  margin-left: calc((100vw - var(--lj-boxed-width) - var(--lj-rail-expanded) - var(--lj-rail-inset)) / 2);
  margin-right: auto;
}
@media (max-width: 1200px){
  html.lj-layout-boxed body.lj-menu-vertical .lj-page,
  html.lj-layout-boxed.lj-pref-pinned body.lj-menu-vertical .lj-page{
    margin-left:auto;
    margin-right:auto;
  }
}

/* ========== RAIL WRAP ========== */
body.lj-menu-vertical .lj-rail-wrap{
  position:fixed;
  top:0;
  left: var(--lj-rail-inset);
  height:100vh;
  width: var(--lj-rail-expanded);
  z-index:1200;
  pointer-events:none;
}

/* ========== RAIL ========== */
body.lj-menu-vertical .lj-rail{
  pointer-events:auto;
  width: var(--lj-rail-collapsed);
  height:100vh;
  padding:12px 8px;
  background: var(--bs-primary);
  border-radius: 0;
  border-top-right-radius: var(--lj-rail-radius);
  border-bottom-right-radius: var(--lj-rail-radius);
  box-shadow:0 18px 60px rgba(2,6,23,.22);
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
  transition: width .22s ease;
}

/* Hover expand only when NOT pinned */
html:not(.lj-pref-pinned) body.lj-menu-vertical .lj-rail:hover{
  width: var(--lj-rail-expanded);
}

/* Pinned = expanded */
html.lj-pref-pinned body.lj-menu-vertical .lj-rail{
  width: var(--lj-rail-expanded);
}

/* ========== RAIL STRUCTURE ========== */
body.lj-menu-vertical .lj-rail-top,
body.lj-menu-vertical .lj-rail-mid,
body.lj-menu-vertical .lj-rail-bot{
  display:flex;
  flex-direction:column;
  align-items:center;
}
body.lj-menu-vertical .lj-rail-bot{ margin-top:auto; }

body.lj-menu-vertical .lj-rail-avatar{
  width:40px; height:40px;
  border-radius:999px;
  display:grid; place-items:center;
  font-weight:700;
  color:#fff;
  background: rgba(255,255,255,.12);
}

/* ========== RAIL LINKS ========== */
body.lj-menu-vertical .lj-rail-link{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  color:#fff;
  text-decoration:none;
  border-radius: var(--lj-radius-sm);
  transition: background .18s ease;
}
body.lj-menu-vertical .lj-rail-link:hover{ background: rgba(255,255,255,.14); }

body.lj-menu-vertical .lj-rail-ico{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius: var(--lj-radius-sm);
  background: rgba(255,255,255,.10);
  flex: 0 0 auto;
}
body.lj-menu-vertical .lj-rail-ico i{ font-size:18px; line-height:1; }

/* ========== RAIL TEXT VISIBILITY ========== */
body.lj-menu-vertical .lj-rail-text,
body.lj-menu-vertical .lj-rail-meta{
  opacity:0;
  display:none;
}

/* Unpinned + hover shows */
html:not(.lj-pref-pinned) body.lj-menu-vertical .lj-rail:hover .lj-rail-text,
html:not(.lj-pref-pinned) body.lj-menu-vertical .lj-rail:hover .lj-rail-meta{
  opacity:1;
  display:inline;
}

/* Pinned ALWAYS shows */
html.lj-pref-pinned body.lj-menu-vertical .lj-rail .lj-rail-text,
html.lj-pref-pinned body.lj-menu-vertical .lj-rail .lj-rail-meta{
  opacity:1 !important;
  display:inline !important;
}

/* ========== RAIL ALIGNMENT ========== */
/* Unpinned + not hovered = center icons */
html:not(.lj-pref-pinned) body.lj-menu-vertical .lj-rail:not(:hover) .lj-rail-link{
  justify-content:center;
  gap:0;
  padding-left:0;
  padding-right:0;
}

/* Unpinned + hover = left aligned */
html:not(.lj-pref-pinned) body.lj-menu-vertical .lj-rail:hover .lj-rail-mid,
html:not(.lj-pref-pinned) body.lj-menu-vertical .lj-rail:hover .lj-rail-bot{
  align-items:flex-start;
}
html:not(.lj-pref-pinned) body.lj-menu-vertical .lj-rail:hover .lj-rail-link{
  justify-content:flex-start;
  padding-left:10px;
  padding-right:10px;
}

/* Pinned = left aligned ALWAYS */
html.lj-pref-pinned body.lj-menu-vertical .lj-rail-mid,
html.lj-pref-pinned body.lj-menu-vertical .lj-rail-bot{
  align-items:flex-start !important;
}
html.lj-pref-pinned body.lj-menu-vertical .lj-rail-link{
  justify-content:flex-start !important;
  padding-left:10px !important;
  padding-right:10px !important;
}
html.lj-pref-pinned body.lj-menu-vertical .lj-rail-text{
  text-align:left !important;
}
html.lj-pref-pinned body.lj-menu-vertical .lj-rail-meta{
  padding-left:10px;
  text-align:left !important;
}

/* Keep avatar centered */
body.lj-menu-vertical .lj-rail-top{ align-items:center !important; }

/* ========== FAB CUSTOMIZER ========== */
#lj-fab-customizer{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  border-radius:999px;
  border:0;
  background:var(--bs-primary);
  color:#fff;
  z-index:3000;
  box-shadow:0 16px 40px rgba(2,6,23,.22);
}

/* Hide FAB when customizer open */
body.lj-customizer-open #lj-fab-customizer,
body:has(.offcanvas.show) #lj-fab-customizer{
  opacity:0;
  pointer-events:none;
}

/* ========== COMPONENTS ========== */
/* Cards / panels */
.lj-panel{
  border-radius: var(--lj-radius-lg);
  padding: 14px;
  border: 1px solid var(--lj-border);
  background: var(--lj-surface);
}

.lj-panel-soft{
  border-radius: var(--lj-radius);
  padding: 12px;
  border: 1px solid var(--lj-border);
  background: var(--lj-surface2);
}

/* Buttons */
.lj-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: var(--lj-radius);
  border: 1px solid var(--lj-border);
  background: transparent;
  color: var(--lj-text);
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.lj-btn:hover{ filter: brightness(0.98); }

.lj-btn-primary{
  background: var(--lj-primary);
  border-color: transparent;
  color: var(--lj-on-primary);
}

.lj-btn-soft{
  background: var(--lj-surface2);
}

/* Small helpers */
.lj-muted{ color: var(--lj-muted); }
.lj-stat-label{ color: var(--lj-muted); font-size: .8rem; }
.lj-stat-value{ font-size: 1.8rem; font-weight: 800; line-height: 1.1; }

/* Make Bootstrap cards opt-in theme-friendly */
.card.lj-panel,
.card.lj-widget{
  border-radius: var(--lj-radius-lg) !important;
  border: 1px solid var(--lj-border) !important;
  background: var(--lj-surface) !important;
  color: var(--lj-text) !important;
  box-shadow: 0 14px 40px rgba(2,6,23,.08);
  overflow: hidden;
}

/* Widget headers (Quick Links / Online) */
.lj-widget .card-header{
  background: color-mix(in srgb, var(--lj-primary) 18%, transparent) !important;
  border-bottom: 1px solid var(--lj-border) !important;
  color: var(--lj-text) !important;
  font-weight: 800;
  padding: 10px 12px;
}
.lj-widget .card-body{
  background: transparent !important;
  color: var(--lj-text) !important;
}

/* List groups inside widgets */
.lj-widget .list-group-item{
  background: transparent !important;
  color: var(--lj-text) !important;
  border-color: color-mix(in srgb, var(--lj-border) 85%, transparent) !important;
}
.lj-widget .list-group-item:hover{
  background: color-mix(in srgb, var(--lj-primary) 8%, transparent) !important;
}

/* Folder embed: replace the blue "alert" header with theme panel look */
.folders-embed-root .alert.alert-primary{
  background: var(--lj-surface2) !important;
  border: 1px solid var(--lj-border) !important;
  color: var(--lj-text) !important;
  border-radius: var(--lj-radius-lg) !important;
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
}
.folders-embed-root .alert.alert-primary h1{
  margin: 0 !important;
  font-weight: 900 !important;
}

/* Folder embed: tighten the big white wrapper so it matches your UI */
.folders-embed-root .folder-center-panel,
.folders-embed-root .folder-side-panel{
  border-radius: var(--lj-radius-lg) !important;
  border: 1px solid var(--lj-border) !important;
  background: var(--lj-surface) !important;
}

/* Folder rows: make sure radius follows */
.folders-embed-root .folder-item,
.folders-embed-root .item-row,
.folders-embed-root .folder-info{
  border-radius: var(--lj-radius) !important;
  border-color: var(--lj-border) !important;
}

/* ========== DASHBOARD FIXES ========== */
/* Fix the main dashboard container */
.dashboard .container-fluid,
.container-fluid.px-0 {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Fix Bootstrap grid system */
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex !important;
  flex-wrap: wrap !important;
  margin-top: calc(-1 * var(--bs-gutter-y)) !important;
  margin-right: calc(-.5 * var(--bs-gutter-x)) !important;
  margin-left: calc(-.5 * var(--bs-gutter-x)) !important;
}

.row.justify-content-center {
  justify-content: center !important;
}

.row.g-4 {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
  margin-top: calc(-1 * var(--bs-gutter-y)) !important;
}

/* Fix column widths */
.col-12 {
  flex: 0 0 auto !important;
  width: 100% !important;
}

.col-lg-8 {
  flex: 0 0 auto !important;
  width: 66.66666667% !important;
}

.col-lg-4 {
  flex: 0 0 auto !important;
  width: 33.33333333% !important;
}

/* Fix column padding */
.col-12, .col-lg-8, .col-lg-4,
.row > * {
  padding-right: calc(var(--bs-gutter-x) * .5) !important;
  padding-left: calc(var(--bs-gutter-x) * .5) !important;
  margin-top: var(--bs-gutter-y) !important;
}

/* Fix the folders embed container */
.folders-modern {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block !important;
}

/* Restore original folder styling from quiz_folders_embed.php */
.folders-header {
  margin-bottom: 1.25em !important;
  text-align: center !important;
  padding: 1em !important;
  border-radius: var(--f-radius-lg) !important;
  border: 1px solid var(--f-border) !important;
  background: var(--f-surface) !important;
  box-shadow: 0 0.625em 1.75em rgba(2,6,23,.06) !important;
}

.folders-panel {
  border-radius: var(--f-radius-lg) !important;
  border: 1px solid var(--f-border) !important;
  background: var(--f-surface) !important;
  padding: 1em !important;
  box-shadow: 0 0.875em 2.5em rgba(2,6,23,.08) !important;
}

.folder-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75em !important;
  padding: 1em !important;
  border-radius: var(--f-radius) !important;
  border: 1px solid var(--f-border) !important;
  background: var(--f-surface) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  margin-bottom: 0.5em !important;
}

.folder-item-main {
  display: flex !important;
  align-items: center !important;
  gap: 0.75em !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.folder-name {
  font-weight: 800 !important;
  font-size: 1.05em !important;
  color: var(--f-text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Fix the right sidebar */
#right_sidebar .card,
.dashboard-sidebar .card,
.sidebar-widget .card {
  border-radius: var(--lj-radius-lg) !important;
  border: 1px solid var(--lj-border) !important;
  background: var(--lj-surface) !important;
  color: var(--lj-text) !important;
  box-shadow: 0 14px 40px rgba(2,6,23,.08) !important;
  margin-bottom: 1.25rem !important;
  overflow: hidden !important;
}

#right_sidebar .card-header,
.dashboard-sidebar .card-header,
.sidebar-widget .card-header {
  background: var(--lj-surface2) !important;
  border-bottom: 1px solid var(--lj-border) !important;
  color: var(--lj-text) !important;
  font-weight: 800 !important;
  padding: 12px 16px !important;
  border-top-left-radius: var(--lj-radius-lg) !important;
  border-top-right-radius: var(--lj-radius-lg) !important;
}

#right_sidebar .card-body,
.dashboard-sidebar .card-body,
.sidebar-widget .card-body {
  background: transparent !important;
  color: var(--lj-text) !important;
  padding: 16px !important;
}

#right_sidebar .list-group-item,
.dashboard-sidebar .list-group-item,
.sidebar-widget .list-group-item {
  background: transparent !important;
  color: var(--lj-text) !important;
  border-color: color-mix(in srgb, var(--lj-border) 85%, transparent) !important;
  padding: 10px 12px !important;
}

#right_sidebar .list-group-item:hover,
.dashboard-sidebar .list-group-item:hover,
.sidebar-widget .list-group-item:hover {
  background: color-mix(in srgb, var(--lj-primary) 8%, transparent) !important;
}

/* Global dashboard fixes */
.dashboard-main-content {
  width: 100% !important;
  max-width: 100% !important;
}

.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }

/* Make sure everything is visible */
.dashboard * { box-sizing: border-box !important; }

/* ========== FOLDER EMBED SPECIFIC STYLES ========== */
/* Modern folder interface */
.folders-modern {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 1em;
}

.folders-modern * { 
  box-sizing: border-box;
  font-size: inherit;
}

/* Header */
.folders-header {
  margin-bottom: 1.25em;
  text-align: center;
  padding: 1em;
  border-radius: var(--f-radius-lg);
  border: 1px solid var(--f-border);
  background: color-mix(in srgb, var(--f-primary) 10%, transparent);
  box-shadow: 0 0.625em 1.75em rgba(2,6,23,.06);
}

.folders-header .title {
  margin: 0 0 0.5em 0;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--f-text);
  letter-spacing: -0.02em;
}

.folders-header .subtitle {
  margin: 0;
  font-size: 0.95em;
  color: var(--f-muted);
  line-height: 1.5;
}

/* Main Panel */
.folders-panel {
  border-radius: var(--f-radius-lg);
  border: 1px solid var(--f-border);
  background: color-mix(in srgb, var(--f-primary) 8%, transparent);
  padding: 1em;
  box-shadow: 0 0.875em 2.5em rgba(2,6,23,.08);
}

/* Toolbar */
.folders-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  flex-wrap: wrap;
  margin-bottom: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--f-border);
}

.folders-toolbar-left,
.folders-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.75em;
  flex-wrap: wrap;
}

/* Select */
.folders-select {
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-sm);
  padding: 0.625em 0.75em;
  background: color-mix(in srgb, var(--f-primary) 5%, transparent);
  color: var(--f-text);
  font-weight: 700;
  font-size: 0.9em;
  cursor: pointer;
  min-width: 8.75em;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 0.75em;
  padding-right: 2em;
}

.folders-select:focus {
  outline: none;
  border-color: var(--f-primary);
  box-shadow: 0 0 0 0.1875em rgba(var(--f-primary-rgb), .12);
}

/* Search */
.folders-search {
  display: flex;
  gap: 0.5em;
  margin-bottom: 1.25em;
}

.folders-search input {
  flex: 1;
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  padding: 0.75em 1em;
  background: color-mix(in srgb, var(--f-primary) 3%, transparent);
  color: var(--f-text);
  font-size: 0.95em;
  transition: all 0.2s ease;
}

.folders-search input:focus {
  outline: none;
  border-color: var(--f-primary);
  box-shadow: 0 0 0 0.1875em rgba(var(--f-primary-rgb), .12);
}

.folders-search input::placeholder {
  color: var(--f-muted);
}

/* Checkbox */
.folders-check {
  display: flex;
  align-items: center;
  gap: 0.5em;
  user-select: none;
}

.folders-check input[type="checkbox"] {
  width: 1.125em;
  height: 1.125em;
  border-radius: 0.25em;
  border: 1px solid var(--f-border);
  background: color-mix(in srgb, var(--f-primary) 5%, transparent);
  cursor: pointer;
  appearance: none;
  position: relative;
}

.folders-check input[type="checkbox"]:checked {
  background: var(--f-primary);
  border-color: var(--f-primary);
}

.folders-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  width: 0.5em;
  height: 0.5em;
  background: var(--f-on-primary);
  border-radius: 0.125em;
}

.folders-check label {
  font-weight: 700;
  font-size: 0.9em;
  color: var(--f-text);
  cursor: pointer;
}

/* Tree List */
.folder-tree-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.folder-item-container { margin-bottom: 0.5em; }

.folder-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  padding: 1em;
  border-radius: var(--f-radius);
  border: 1px solid var(--f-border);
  background: color-mix(in srgb, var(--f-primary) 12%, transparent);
  transition: all 0.2s ease;
  cursor: pointer;
}

.folder-item:hover {
  transform: translateY(-0.125em);
  border-color: var(--f-primary);
  box-shadow: 0 0.5em 1.5em rgba(2,6,23,.1);
  background: color-mix(in srgb, var(--f-primary) 15%, transparent);
}

.folder-item-main {
  display: flex;
  align-items: center;
  gap: 0.75em;
  flex: 1;
  min-width: 0;
}

.folder-toggle-btn {
  width: 1.75em;
  height: 1.75em;
  border-radius: var(--f-radius-sm);
  border: 1px solid var(--f-border);
  background: color-mix(in srgb, var(--f-primary) 8%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--f-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.folder-toggle-btn:hover {
  color: var(--f-primary);
  border-color: var(--f-primary);
}

.folder-toggle-btn i {
  font-size: 0.75em;
  transition: transform 0.2s ease;
}

.folder-item-container.expanded .folder-toggle-btn i { transform: rotate(90deg); }

.folder-toggle-placeholder {
  width: 1.75em;
  flex-shrink: 0;
}

.folder-icon {
  width: 2.5em;
  height: 2.5em;
  border-radius: var(--f-radius-sm);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--f-primary) 20%, transparent),
    color-mix(in srgb, var(--f-primary) 35%, transparent)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--f-on-primary);
  font-size: 1em;
  flex-shrink: 0;
}

.folder-content { flex: 1; min-width: 0; }

.folder-header {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 0.25em;
}

.folder-name {
  font-weight: 800;
  font-size: 1.05em;
  color: var(--f-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-meta {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.item-count {
  font-size: 0.85em;
  color: var(--f-muted);
  font-weight: 600;
  background: color-mix(in srgb, var(--f-primary) 8%, transparent);
  padding: 0.25em 0.625em;
  border-radius: 0.75em;
  border: 1px solid var(--f-border);
}

.badge {
  font-size: 0.75em;
  font-weight: 700;
  padding: 0.25em 0.625em;
  border-radius: 0.75em;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.badge-public {
  color: #059669;
  background: rgba(5, 150, 105, .1);
  border: 1px solid rgba(5, 150, 105, .2);
}

.badge-private {
  color: #dc2626;
  background: rgba(220, 38, 38, .1);
  border: 1px solid rgba(220, 38, 38, .2);
}

.folder-description {
  font-size: 0.9em;
  color: var(--f-muted);
  line-height: 1.4;
  margin-top: 0.25em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.folder-actions {
  display: flex;
  gap: 0.5em;
  flex-shrink: 0;
}

.action-btn {
  width: 2.25em;
  height: 2.25em;
  border-radius: var(--f-radius-sm);
  border: 1px solid var(--f-border);
  background: color-mix(in srgb, var(--f-primary) 5%, transparent);
  color: var(--f-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  color: var(--f-primary);
  border-color: var(--f-primary);
  background: color-mix(in srgb, var(--f-primary) 10%, transparent);
}

.action-btn.btn-view:hover { color: #3b82f6; border-color: #3b82f6; }
.action-btn.btn-edit:hover { color: #f59e0b; border-color: #f59e0b; }
.action-btn.btn-delete:hover { color: #dc2626; border-color: #dc2626; }

.folder-children {
  display: none;
  padding-left: 2.5em;
  margin-top: 0.5em;
}
.folder-item-container.expanded > .folder-children { display: block; }

/* Empty State */
.empty-state {
  text-align: center;
  padding: 3em 1.5em;
  border-radius: var(--f-radius);
  border: 2px dashed var(--f-border);
  background: color-mix(in srgb, var(--f-primary) 5%, transparent);
}

.empty-state-icon {
  font-size: 3em;
  color: var(--f-muted);
  opacity: 0.5;
  margin-bottom: 1em;
}

.empty-state-title {
  font-size: 1.1em;
  font-weight: 800;
  color: var(--f-text);
  margin-bottom: 0.5em;
}

.empty-state-text {
  color: var(--f-muted);
  margin-bottom: 1.5em;
  max-width: 25em;
  margin-left: auto;
  margin-right: auto;
}

/* ========== CUSTOM OVERLAY MODAL (SCOPED; DOES NOT AFFECT BOOTSTRAP MODALS) ========== */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(0.25em);
  z-index: 20000;
  padding: 1.25em;
}

.modal-overlay.active { display: flex; }

.modal-container {
  width: 100%;
  max-width: 50em;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(-1.25em); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-overlay .modal-content {
  background: color-mix(in srgb, var(--f-primary) 10%, transparent);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-lg);
  box-shadow: 0 1.5em 4.375em rgba(0,0,0,.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.modal-overlay .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 1.25em;
  border-bottom: 1px solid var(--f-border);
  background: color-mix(in srgb, var(--f-primary) 15%, transparent);
}

.modal-overlay .modal-title {
  margin: 0;
  font-size: 1.25em;
  font-weight: 800;
  color: var(--f-text);
}

.modal-overlay .modal-body {
  padding: 1.25em;
  overflow-y: auto;
}

/* Loading Spinner */
.loading-spinner {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  border: 0.125em solid rgba(148,163,184,.55);
  border-top-color: var(--f-primary);
  animation: spin .8s linear infinite;
  vertical-align: -0.1875em;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Folder Info */
.folder-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5em, 1fr));
  gap: 0.75em;
  padding: 1em;
  margin: 0 0 1.25em;
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  background: color-mix(in srgb, var(--f-primary) 12%, transparent);
}

.folder-info-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.9em;
  color: var(--f-text);
}

.folder-info-item i { width: 1.25em; color: var(--f-muted); }

/* Items Grid */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75em, 1fr));
  gap: 0.75em;
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 0.5em;
}

.item-card {
  display: flex;
  gap: 0.75em;
  padding: 1em;
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  background: color-mix(in srgb, var(--f-primary) 10%, transparent);
  transition: all 0.2s ease;
}

.item-card:hover {
  border-color: var(--f-primary);
  transform: translateY(-0.125em);
  box-shadow: 0 0.5em 1.5em rgba(2,6,23,.08);
  background: color-mix(in srgb, var(--f-primary) 15%, transparent);
}

.item-thumb {
  width: 5em;
  height: 3.75em;
  border-radius: var(--f-radius-sm);
  background: color-mix(in srgb, var(--f-primary) 8%, transparent);
  border: 1px solid var(--f-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.item-thumb img { width: 100%; height: 100%; object-fit: cover; }

.item-details { flex: 1; min-width: 0; }

.item-title {
  font-weight: 800;
  font-size: 1em;
  color: var(--f-text);
  margin-bottom: 0.25em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-meta {
  font-size: 0.85em;
  color: var(--f-muted);
  margin-bottom: 0.5em;
}

.item-actions { display: flex; gap: 0.5em; margin-top: 0.5em; }

/* Form Elements */
.form-group { margin-bottom: 1em; }

.form-group label {
  display: block;
  margin-bottom: 0.375em;
  font-weight: 700;
  font-size: 0.9em;
  color: var(--f-text);
}

.form-control {
  width: 100%;
  padding: 0.75em 1em;
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  background: color-mix(in srgb, var(--f-primary) 5%, transparent);
  color: var(--f-text);
  font-size: 0.95em;
  transition: all 0.2s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--f-primary);
  box-shadow: 0 0 0 0.1875em rgba(var(--f-primary-rgb), .12);
}

textarea.form-control { min-height: 5em; resize: vertical; }

/* Buttons in the embed */
.lj-btn { font-size: 0.9em !important; padding: 0.625em 0.875em !important; }

/* Inner panel background */
.folders-panel-soft {
  padding: 0.75em;
  border-radius: var(--f-radius);
  background: color-mix(in srgb, var(--f-primary) 6%, transparent);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 992px) {
  .col-lg-8, .col-lg-4 {
    width: 100% !important;
    max-width: 100% !important;
  }
  .order-1, .order-2 { order: 0 !important; }
}

@media (max-width: 768px) {
  .folders-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75em;
  }

  .folders-toolbar-left,
  .folders-toolbar-right {
    width: 100%;
    justify-content: space-between;
  }

  .folder-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
  }

  .folder-meta { flex-wrap: wrap; }

  .folder-children { padding-left: 1.5em; }

  .items-grid { grid-template-columns: 1fr; }

  .modal-container { max-width: 100%; }
}

/* ========== GENERAL PURPOSE CARD COMPONENT ========== */
.lj-card {
  --card-padding: 1.5rem;
  --card-radius: var(--lj-radius);
  --card-border: 1px solid rgba(0, 0, 0, 0.08);
  --card-shadow: 0 6px 20px rgba(2, 6, 23, 0.08);
  --card-bg: var(--lj-surface);
  --card-header-bg: color-mix(in srgb, var(--bs-primary) 6%, transparent);

  background: var(--card-bg);
  border-radius: var(--card-radius);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  margin-bottom: 1.5rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  height: fit-content;
}

.lj-card:hover {
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.12);
  transform: translateY(-2px);
}

.lj-card-header {
  padding: 1rem var(--card-padding);
  background: var(--card-header-bg);
  border-bottom: var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.lj-card-title {
  margin: 0;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--bs-primary);
  line-height: 1.4;
}

.lj-card-subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(var(--bs-body-color-rgb), 0.7);
  font-weight: 400;
}

.lj-card-header-action { margin-left: auto; flex-shrink: 0; }

.lj-card-body { padding: var(--card-padding); }
.lj-card-body.lj-card-body-sm { padding: 1rem; }
.lj-card-body.lj-card-body-lg { padding: 2rem; }

.lj-card-footer {
  padding: 1rem var(--card-padding);
  background: color-mix(in srgb, var(--bs-body-bg) 98%, black 2%);
  border-top: var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.lj-card.lj-card-borderless {
  border: none;
  box-shadow: 0 4px 16px rgba(2, 6, 23, 0.06);
}

.lj-card.lj-card-shadowless { box-shadow: none; }

.lj-card.lj-card-primary { border-top: 3px solid var(--bs-primary); }
.lj-card.lj-card-success { border-top: 3px solid var(--bs-success); }
.lj-card.lj-card-warning { border-top: 3px solid var(--bs-warning); }
.lj-card.lj-card-danger  { border-top: 3px solid var(--bs-danger); }

.lj-card-header .lj-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(var(--bs-primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-primary);
  font-size: 1.1rem;
  flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
  html:not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light):not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light) .lj-card {
    --card-border: 1px solid rgba(255, 255, 255, 0.1);
    --card-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    --card-bg: var(--lj-surface);
    --card-header-bg: color-mix(in srgb, var(--bs-primary) 8%, transparent 92%);
  }

  html:not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light):not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light) .lj-card.lj-card-borderless {
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }

  html:not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light):not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light) .lj-card-footer {
    background: color-mix(in srgb, var(--bs-body-bg) 94%, black 6%);
  }

  /* Dark-mode backdrop default */
  html:not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light):not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light){
    --lj-modal-backdrop-opacity: 0.62;
    --lj-modal-backdrop: rgba(0,0,0,0.72);
  }
}

.lj-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.lj-card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.lj-card-img-top { border-radius: var(--card-radius) var(--card-radius) 0 0; }

.lj-card-list { padding: 0; }

.lj-card-list-item {
  display: flex;
  align-items: center;
  padding: 0.875rem var(--card-padding);
  border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.lj-card-list-item:last-child { border-bottom: none; }

.lj-card-list-item:hover { background: rgba(var(--bs-primary-rgb), 0.04); }

.lj-card-list-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(var(--bs-primary-rgb), 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
  flex-shrink: 0;
  color: var(--bs-primary);
}

.lj-card-list-content { flex: 1; }

.lj-card-list-title { font-weight: 500; margin-bottom: 0.125rem; }

.lj-card-list-subtitle {
  font-size: 0.8125rem;
  color: rgba(var(--bs-body-color-rgb), 0.6);
}

@media (max-width: 768px) {
  .lj-card { --card-padding: 1.25rem; }
  .lj-card-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ========== COMPACT CARD STYLES FOR MODAL ========== */
.item-card-compact {
  border-radius: var(--lj-radius-sm) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
  transition: all 0.2s ease !important;
  margin-bottom: 0.5rem !important;
  background: var(--bs-body-bg) !important;
  overflow: hidden;
}

.item-card-compact:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.2) !important;
}

.item-card-compact .item-card-body {
  padding: 0.75rem !important;
}

/* Modal items grid */
.items-grid-modal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 0.75rem;
  padding: 0.5rem 0 !important;
}

@media (max-width: 768px) {
  .items-grid-modal {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* Text truncation */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* Modal adjustments for compact layout */
#folderItemsModal .modal-body {
  padding: 0 !important;
}

.modal-items-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.folder-info-section {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: rgba(var(--bs-primary-rgb), 0.03);
}

.items-section {
  flex: 1;
  padding: 1rem !important;
  overflow-y: auto;
}

.folder-info-panel {
  background: rgba(var(--bs-primary-rgb), 0.03);
  border-radius: var(--lj-radius-sm);
  padding: 1rem;
  border: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 1rem;
}

.folder-info-panel .row {
  margin-bottom: 0.5rem;
}

.folder-info-panel .col-md-3 {
  margin-bottom: 0.75rem;
}

.folder-info-note {
  padding: 0.5rem;
  border-radius: var(--lj-radius-sm);
  font-size: 0.85rem;
}

.folder-info-note-owner {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: #92400e;
}

.folder-info-note-admin {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #1e40af;
}

/* ========== BOOTSTRAP MODAL STYLES (SCOPED) ========== */

/* Backdrop tint */
.modal-backdrop.show{
  opacity: var(--lj-modal-backdrop-opacity) !important;
  background: var(--lj-modal-backdrop) !important;
}

/* Optional blur behind modal */
.modal{
  backdrop-filter: blur(2px);
}

.modal-dialog {
  max-height: 90vh;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  min-height: 200px;
}

.modal .modal-content {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--lj-radius-lg);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 20px 60px rgba(2,6,23,0.25);
  background: var(--lj-surface, var(--bs-body-bg));
  color: var(--lj-text, var(--bs-body-color));
}

.modal .modal-header {
  flex-shrink: 0;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: color-mix(in srgb, var(--lj-primary) 6%, var(--bs-body-bg));
  border-radius: var(--lj-radius-lg) var(--lj-radius-lg) 0 0;
}

.modal .modal-title {
  font-weight: 600;
  color: var(--lj-text, var(--bs-body-color));
  margin: 0;
  font-size: 1.1rem;
}

.modal .modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 1.5rem;
  max-height: 60vh;
  background: transparent;
}

.modal .modal-footer {
  flex-shrink: 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: color-mix(in srgb, var(--lj-primary) 6%, var(--bs-body-bg));
  border-radius: 0 0 var(--lj-radius-lg) var(--lj-radius-lg);
}

/* Specifically for folder items modal */
#folderItemsModal .modal-dialog {
  max-width: 900px;
  width: 90%;
}

#folderItemsModal .modal-body {
  max-height: 60vh;
  padding: 0;
}

#folderItemsModal .modal-content { max-height: 80vh; }

/* Compact modal variant */
.modal-compact .modal-dialog { max-width: 500px; }

.modal-compact .modal-header,
.modal-compact .modal-body,
.modal-compact .modal-footer { padding: 1rem; }

/* Responsive adjustments */
@media (max-height: 768px) {
  .modal-dialog {
    max-height: 85vh;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .modal .modal-body { max-height: 50vh; }

  #folderItemsModal .modal-body { max-height: 50vh; }
}

@media (max-height: 600px) {
  .modal .modal-body { max-height: 40vh; }
  #folderItemsModal .modal-body { max-height: 40vh; }
}

@media (max-width: 768px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  .modal .modal-header,
  .modal .modal-body,
  .modal .modal-footer {
    padding: 0.75rem;
  }

  .items-grid-modal {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  html:not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light):not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light) .modal .modal-content {
    background: color-mix(in srgb, var(--bs-body-bg) 96%, white 4%);
    border-color: rgba(255,255,255,0.12);
  }

  html:not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light):not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light) .modal .modal-header, 
  html:not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light):not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light) .modal .modal-footer {
    background: color-mix(in srgb, var(--bs-body-bg) 94%, black 6%);
    border-color: rgba(255,255,255,0.1);
  }
  
  html:not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light):not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light) .item-card-compact {
    background: color-mix(in srgb, var(--bs-body-bg) 96%, white 4%) !important;
    border-color: rgba(255,255,255,0.1) !important;
  }
}

/* =========================================================
   MODAL ITEMS: FORCE COMPACT ONE-ROW LIST + FULL-WIDTH TITLE
   Scoped to #folderItemsModal so it won't affect other cards.
========================================================= */

/* Turn the modal items area into a simple one-row-per-item list */
#folderItemsModal .items-grid-modal{
  display:flex !important;
  flex-direction:column !important;
  gap: .5rem !important;
  padding: .75rem 0 !important;
}

/* Compact row card */
#folderItemsModal .item-card.item-card-compact{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:.65rem !important;
  padding:.6rem .75rem !important;
  border:1px solid color-mix(in srgb, var(--lj-border) 90%, transparent) !important;
  border-radius: var(--lj-radius, 16px) !important;
  background: color-mix(in srgb, var(--lj-primary) 6%, transparent) !important;
  box-shadow: 0 8px 20px rgba(2,6,23,.06) !important;
}
#folderItemsModal .item-card.item-card-compact:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 28px rgba(2,6,23,.10) !important;
  border-color: color-mix(in srgb, var(--lj-primary) 55%, var(--lj-border)) !important;
}

/* Thumb */
#folderItemsModal .item-thumb-modal{
  width:56px !important;
  height:44px !important;
  border-radius: var(--lj-radius-sm, 10px) !important;
  border:1px solid color-mix(in srgb, var(--lj-border) 80%, transparent) !important;
  overflow:hidden !important;
  flex: 0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background: color-mix(in srgb, var(--lj-primary) 8%, transparent) !important;
}
#folderItemsModal .item-thumb-modal img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* Middle column expands so the title gets the full width */
#folderItemsModal .item-details{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:.15rem !important;
}

/* Full-width title (single line + ellipsis) */
#folderItemsModal .item-title{
  width:100% !important;
  font-weight:800 !important;
  color: var(--lj-text) !important;
  line-height: 1.2 !important;
  font-size: .98rem !important;
  margin:0 !important;
  white-space: nowrap !important;
  overflow:hidden !important;
  text-overflow: ellipsis !important;
  display:block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}
#folderItemsModal .item-meta{
  font-size:.82rem !important;
  color: var(--lj-muted) !important;
}

/* Actions on the right (no more buttons under the title) */
#folderItemsModal .item-actions{
  flex: 0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:.4rem !important;
  margin:0 !important;
}

/* Small button size used by the modal */
.lj-btn.lj-btn-xs{
  padding: .45rem .55rem !important;
  font-size: .78rem !important;
  line-height: 1 !important;
  border-radius: var(--lj-radius-sm, 10px) !important;
}

/* Make the modal body padding not waste vertical space */
#folderItemsModal .modal-body{ padding: 0.75rem 1rem !important; }

@media (max-width: 768px){
  #folderItemsModal .modal-body{ padding: 0.75rem !important; }
  #folderItemsModal .item-thumb-modal{ width:52px !important; height:40px !important; }
}
/* =========================================================

/* =========================================================
   QUIZ EXPLORER (v2) — CONSOLIDATED UI
   - Merges legacy quiz.css into lj-ui-effects.css.
   - Uses LetzJam theme tokens (lj-*) so it matches the site.
   - Scoped to quiz explorer containers to avoid global side effects.
========================================================= */

/* Quiz Explorer tokens (derived from LJ theme) */
:root{
  --qe-primary: var(--lj-primary);
  --qe-primary-rgb: var(--lj-primary-rgb);
  --qe-on-primary: var(--lj-on-primary);

  --qe-surface: var(--lj-surface);
  --qe-surface2: var(--lj-surface2);
  --qe-border: var(--lj-border);

  --qe-ink: var(--lj-text);
  --qe-muted: var(--lj-muted);
  --qe-muted2: color-mix(in srgb, var(--lj-muted) 65%, var(--lj-text));

  --qe-row-hover: color-mix(in srgb, var(--qe-primary) 7%, transparent);
  --qe-row-selected: color-mix(in srgb, var(--qe-primary) 14%, transparent);

  --qe-pill-bg: color-mix(in srgb, #f59e0b 10%, transparent);
  --qe-pill-border: color-mix(in srgb, #f59e0b 28%, transparent);
  --qe-pill-ink: color-mix(in srgb, #f59e0b 70%, #111827);

  --qe-toast-shadow: 0 10px 25px rgba(15,23,42,.25);
}

/* Dark theme support (covers Acorn + Bootstrap dark toggles) */
html[data-color*="dark"],
html[data-bs-theme="dark"],
body[data-bs-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"],
html.dark,
body.dark,
.theme-dark{
  --qe-muted2: color-mix(in srgb, var(--lj-muted) 75%, var(--lj-text));
  --qe-row-hover: rgba(255,255,255,.04);
  --qe-row-selected: rgba(99,102,241,.20);
  --qe-toast-shadow: 0 16px 40px rgba(0,0,0,.45);

  --qe-pill-bg: rgba(245,158,11,.10);
  --qe-pill-border: rgba(245,158,11,.28);
  --qe-pill-ink: #fbbf24;
}


/* Quiz Explorer dark-mode safety net
   If the site toggles dark mode without providing --surface/--border tokens,
   these ensure QE panels/cards still flip to dark. */
html[data-bs-theme="dark"] #quizContainer,
html[data-bs-theme="dark"] .qe-shell,
html[data-theme="dark"] #quizContainer,
html[data-theme="dark"] .qe-shell,
html[data-color*="dark"] #quizContainer,
html[data-color*="dark"] .qe-shell,
body.lj-dark #quizContainer,
body.lj-dark .qe-shell,
body.dark #quizContainer,
body.dark .qe-shell{
  --qe-surface: rgba(15, 23, 42, .72);
  --qe-surface2: rgba(15, 23, 42, .50);
  --qe-border: rgba(255,255,255,.12);
  --qe-ink: rgba(226,232,240,.96);
  --qe-muted: rgba(226,232,240,.68);
  --qe-muted2: rgba(226,232,240,.78);
  --qe-row-hover: rgba(255,255,255,.04);
  --qe-row-selected: rgba(99,102,241,.22);
}

/* -----------------------------
   Scope helpers
----------------------------- */
#quizContainer,
.qe-shell{
  --q-gap: 10px;
  font-size: .875rem;
}
@media (max-width: 680px){
  #quizContainer,
  .qe-shell{ font-size: .84rem; }
}

/* -----------------------------
   Head + layout rows
----------------------------- */
#quizContainer .page-head,
.qe-shell .page-head{
  margin-bottom: 10px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--qe-border) !important;
}
#quizContainer .page-head .text-muted,
.qe-shell .page-head .text-muted{ color: var(--qe-muted) !important; }

#quizContainer .qe-topbar,
.qe-shell .qe-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 6px 0 12px;
}
#quizContainer .qe-topbar .qe-sub,
.qe-shell .qe-topbar .qe-sub{
  color: var(--qe-muted) !important;
  font-size: .9rem;
  margin-top: 2px;
}

#quizContainer .qe-actionsbar,
.qe-shell .qe-actionsbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin: 6px 0 12px;
}

#quizContainer .qe-status-row,
.qe-shell .qe-status-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin: 10px 2px 12px;
  padding: 0 2px;
}

/* -----------------------------
   Panels (filter bar + toolbar)
----------------------------- */
#quizContainer .filter-bar,
#quizContainer .list-toolbar,
.qe-shell .filter-bar,
.qe-shell .list-toolbar{
  border: 1px solid var(--qe-border) !important;
  background: var(--qe-surface) !important;
  border-radius: var(--lj-radius-lg) !important;
  padding: 10px !important;
  box-shadow: 0 10px 28px rgba(2,6,23,.06) !important;
}

/* -----------------------------
   Quiz Explorer toolbar layout (restores pre-merge quiz.css behavior)
----------------------------- */
.qe-shell .list-toolbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
}
.qe-shell .list-toolbar .per-wrap{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:0 0 auto !important;
}
.qe-shell .list-toolbar .toolbar-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex:1 1 auto !important;
  flex-wrap:nowrap !important;
  margin-left:auto !important;
  min-width: 0 !important;
}
.qe-shell .list-toolbar .btn-group{ flex:0 0 auto !important; }
.qe-shell .list-toolbar #sortBy{
  flex:0 0 auto !important;
  width:auto !important;
  min-width: 180px !important;
  max-width: 260px !important;
}

/* Responsive: allow wrapping only on narrower viewports */
@media (max-width: 768px){
  .qe-shell .list-toolbar{
    flex-wrap:wrap !important;
  }
  .qe-shell .list-toolbar .toolbar-right{
    width:100% !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }
  .qe-shell .list-toolbar #sortBy{
    width:100% !important;
    max-width:none !important;
  }
}
.qe-shell .list-toolbar #sortBy{
    width:100% !important;
  }
}



/* Ensure form chrome follows theme in QE panels */
#quizContainer .filter-bar .input-group-text,
.qe-shell .filter-bar .input-group-text{
  background: color-mix(in srgb, var(--qe-surface2) 70%, transparent) !important;
  color: var(--qe-muted2) !important;
}
#quizContainer .filter-bar .form-control,
#quizContainer .filter-bar .form-select,
#quizContainer .list-toolbar .form-control,
#quizContainer .list-toolbar .form-select,
.qe-shell .filter-bar .form-control,
.qe-shell .filter-bar .form-select,
.qe-shell .list-toolbar .form-control,
.qe-shell .list-toolbar .form-select{
  background: var(--qe-surface) !important;
  color: var(--qe-ink) !important;
}
#quizContainer .filter-bar .form-control::placeholder,
.qe-shell .filter-bar .form-control::placeholder{
  color: color-mix(in srgb, var(--qe-muted) 85%, transparent) !important;
}

#quizContainer .filter-bar .input-group-text,
#quizContainer .filter-bar .form-control,
#quizContainer .filter-bar .form-select,
#quizContainer .list-toolbar .form-select,
#quizContainer .list-toolbar .form-control,
.qe-shell .filter-bar .input-group-text,
.qe-shell .filter-bar .form-control,
.qe-shell .filter-bar .form-select,
.qe-shell .list-toolbar .form-select,
.qe-shell .list-toolbar .form-control{
  border-color: color-mix(in srgb, var(--qe-border) 85%, transparent) !important;
}

#quizContainer .filter-bar .form-control:focus,
#quizContainer .filter-bar .form-select:focus,
#quizContainer .list-toolbar .form-select:focus,
#quizContainer .list-toolbar .form-control:focus,
.qe-shell .filter-bar .form-control:focus,
.qe-shell .filter-bar .form-select:focus,
.qe-shell .list-toolbar .form-select:focus,
.qe-shell .list-toolbar .form-control:focus{
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--qe-primary) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--qe-primary) 55%, var(--qe-border)) !important;
}

/* -----------------------------
   Button normalization (quiz-only)
----------------------------- */
#quizContainer .q-wrap .btn,
#quizContainer .list-toolbar .btn,
#quizContainer .filter-bar .btn,
.qe-shell .q-wrap .btn,
.qe-shell .list-toolbar .btn,
.qe-shell .filter-bar .btn{
  --btn-bg: color-mix(in srgb, var(--qe-primary) 6%, transparent);
  --btn-border: color-mix(in srgb, var(--qe-border) 85%, transparent);

  border-radius: 999px !important;
  border: 1px solid var(--btn-border) !important;
  background: var(--btn-bg) !important;
  color: var(--qe-ink) !important;
  font-weight: 600 !important;
  padding: .38rem .8rem !important;
  line-height: 1.1 !important;
  box-shadow: 0 6px 18px rgba(2,6,23,.08) !important;
}
#quizContainer .q-wrap .btn:hover,
#quizContainer .list-toolbar .btn:hover,
#quizContainer .filter-bar .btn:hover,
.qe-shell .q-wrap .btn:hover,
.qe-shell .list-toolbar .btn:hover,
.qe-shell .filter-bar .btn:hover{
  background: color-mix(in srgb, var(--qe-primary) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--qe-primary) 45%, var(--qe-border)) !important;
  box-shadow: 0 10px 26px rgba(2,6,23,.12) !important;
}
#quizContainer .q-wrap .btn:disabled,
#quizContainer .q-wrap .btn.disabled,
.qe-shell .q-wrap .btn:disabled,
.qe-shell .q-wrap .btn.disabled{
  opacity: .55 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* keep bootstrap semantic fills, but scoped to quiz */
#quizContainer .btn-primary,
.qe-shell .btn-primary{
  background: var(--qe-primary) !important;
  color: var(--qe-on-primary) !important;
  border-color: var(--qe-primary) !important;
}
#quizContainer .btn-warning,
.qe-shell .btn-warning{
  background: color-mix(in srgb, #facc15 85%, transparent) !important;
  border-color: color-mix(in srgb, #facc15 75%, var(--qe-border)) !important;
  color: #3b2f00 !important;
}

/* LJ icon button helper */
.lj-btn.lj-btn-icon{
  width: 40px;
  height: 40px;
  padding: 0 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 0;
}

/* Active state for toggle buttons */
.lj-btn.is-active{
  background: color-mix(in srgb, var(--qe-primary) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--qe-primary) 35%, var(--qe-border)) !important;
  color: var(--qe-ink) !important;
}

/* -----------------------------
   Results wrapper
----------------------------- */
#quizContainer .q-wrap,
.qe-shell .q-wrap{
  background: var(--qe-surface) !important;
  border: 1px solid var(--qe-border) !important;
  border-radius: var(--lj-radius-lg) !important;
  overflow: hidden !important;
}

/* -----------------------------
   LIST VIEW (default)
----------------------------- */
#quizContainer .q-wrap:not(.cards-wrap),
.qe-shell .q-wrap:not(.cards-wrap){
  display:flex;
  flex-direction:column;
  gap: var(--q-gap);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

#quizContainer .q-wrap:not(.cards-wrap) .q-item,
.qe-shell .q-wrap:not(.cards-wrap) .q-item{
  display:grid !important;
  grid-template-columns: 26px 56px 1fr 46px !important;
  gap: 12px !important;
  align-items:center !important;

  padding: 12px !important;
  border-radius: var(--lj-radius-lg) !important;
  border: 1px solid var(--qe-border) !important;
  background: var(--qe-surface) !important;
  box-shadow: 0 10px 24px rgba(2,6,23,.05) !important;

  margin: 0 !important;
}
#quizContainer .q-wrap:not(.cards-wrap) .q-item:hover,
.qe-shell .q-wrap:not(.cards-wrap) .q-item:hover{
  border-color: color-mix(in srgb, var(--qe-primary) 45%, var(--qe-border)) !important;
  box-shadow: 0 14px 32px rgba(2,6,23,.08) !important;
}
#quizContainer .q-wrap:not(.cards-wrap) .q-item.selected,
.qe-shell .q-wrap:not(.cards-wrap) .q-item.selected{
  background: var(--qe-row-selected) !important;
}

#quizContainer .q-check,
.qe-shell .q-check{ display:flex !important; align-items:center !important; justify-content:center !important; }
#quizContainer .q-check input[type="checkbox"],
.qe-shell .q-check input[type="checkbox"]{ width:18px; height:18px; }

#quizContainer .q-thumb,
#quizContainer .q-thumb-empty,
.qe-shell .q-thumb,
.qe-shell .q-thumb-empty{
  width:56px !important;
  height:44px !important;
  border-radius: var(--lj-radius-sm) !important;
  overflow:hidden !important;
  border: 1px solid color-mix(in srgb, var(--qe-border) 85%, transparent) !important;
  background: color-mix(in srgb, var(--qe-primary) 6%, transparent) !important;
}
#quizContainer .q-thumb,
.qe-shell .q-thumb{ object-fit: cover; }

#quizContainer .q-thumb-empty,
.qe-shell .q-thumb-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--qe-muted2);
}

#quizContainer .q-body,
.qe-shell .q-body{ min-width:0 !important; }

#quizContainer .q-title,
.qe-shell .q-title{
  margin:0 !important;
  line-height:1.2 !important;
  font-size: 1.02rem;
}
#quizContainer .q-title a,
.qe-shell .q-title a{
  font-weight: 800 !important;
  text-decoration:none !important;
  color: var(--qe-ink) !important;
}
#quizContainer .q-title a:hover,
.qe-shell .q-title a:hover{
  text-decoration: underline !important;
  color: var(--qe-primary) !important;
}

#quizContainer .q-line,
.qe-shell .q-line{ margin-top: 4px !important; }

#quizContainer .q-meta,
.qe-shell .q-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap: 10px !important;
  color: var(--qe-muted) !important;
  font-size: .9rem !important;
}
#quizContainer .q-meta .meta i,
.qe-shell .q-meta .meta i{ margin-right: 6px !important; opacity: .85; }

#quizContainer .q-actions,
.qe-shell .q-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
}
#quizContainer .q-actions .btn,
.qe-shell .q-actions .btn{
  width: 36px;
  height: 36px;
  padding: 0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px !important;
}

#quizContainer .q-folders,
.qe-shell .q-folders{
  color: var(--qe-muted) !important;
  font-size: .88rem !important;
}
#quizContainer .q-folders .pill,
.qe-shell .q-folders .pill{
  display:inline-flex;
  align-items:center;
  padding: .18rem .5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--qe-border) 85%, transparent);
  background: color-mix(in srgb, var(--qe-primary) 7%, transparent);
  margin-left: .35rem;
  font-size: .78rem;
  color: var(--qe-pill-ink);
}

#quizContainer mark.search-hit,
.qe-shell mark.search-hit{ padding:0 .15rem; border-radius:.2rem; }

/* Responsive list rows */
@media (max-width: 680px){
  #quizContainer .q-wrap:not(.cards-wrap) .q-item,
  .qe-shell .q-wrap:not(.cards-wrap) .q-item{
    grid-template-columns: 26px 52px 1fr 46px !important;
  }
}

/* -----------------------------
   CARDS VIEW
----------------------------- */
#quizContainer .cards-wrap,
.qe-shell .cards-wrap{
  padding: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 992px){
  #quizContainer .cards-wrap,
  .qe-shell .cards-wrap{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  #quizContainer .cards-wrap,
  .qe-shell .cards-wrap{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

#quizContainer .q-card,
.qe-shell .q-card{
  border: 1px solid var(--qe-border);
  border-radius: var(--lj-radius-lg);
  overflow:hidden;
  background: var(--qe-surface);
  display:flex;
  flex-direction:column;
  transition: transform .08s ease, box-shadow .08s ease;
}
#quizContainer .q-card:hover,
.qe-shell .q-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(0,0,0,.12);
}
html[data-color*="dark"] #quizContainer .q-card:hover,
html[data-bs-theme="dark"] #quizContainer .q-card:hover,
html[data-color*="dark"] .qe-shell .q-card:hover,
html[data-bs-theme="dark"] .qe-shell .q-card:hover{
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}

#quizContainer .q-card-top,
.qe-shell .q-card-top{ position:relative; }
#quizContainer .q-card-top img,
.qe-shell .q-card-top img{
  width:100%;
  height:140px;
  object-fit: cover;
  display:block;
  background: var(--qe-surface2);
}
#quizContainer .q-card-top .empty,
.qe-shell .q-card-top .empty{
  width:100%;
  height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--qe-surface2);
  color: var(--qe-muted2);
  border-bottom: 1px solid var(--qe-border);
}
#quizContainer .q-card-top::after,
.qe-shell .q-card-top::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.15));
  pointer-events:none;
}

#quizContainer .q-card-body,
.qe-shell .q-card-body{ padding: 10px 12px; display:flex; flex-direction:column; gap: 8px; }

#quizContainer .q-card-title,
.qe-shell .q-card-title{
  margin:0;
  font-weight: 900;
  line-height:1.15;
  font-size: 1.02rem;
}
#quizContainer .q-card-title a,
.qe-shell .q-card-title a{
  text-decoration:none;
  color: var(--qe-ink);
}
#quizContainer .q-card-title a:hover,
.qe-shell .q-card-title a:hover{ color: var(--qe-primary); }

#quizContainer .q-card-meta,
.qe-shell .q-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  color: var(--qe-muted);
  font-size: .9rem;
}
#quizContainer .q-card-meta .meta,
.qe-shell .q-card-meta .meta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

#quizContainer .q-card-foot,
.qe-shell .q-card-foot{
  padding: 10px 12px;
  border-top: 1px solid var(--qe-border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
}
#quizContainer .q-card-left,
.qe-shell .q-card-left{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#quizContainer .q-card-right,
.qe-shell .q-card-right{ display:flex; align-items:center; gap:8px; }

/* -----------------------------
   BULK BAR
----------------------------- */
#quizContainer .bulk-bar,
.qe-shell .bulk-bar{
  border-radius: var(--lj-radius-lg) !important;
  border: 1px solid var(--qe-border) !important;
  background: color-mix(in srgb, var(--qe-primary) 10%, var(--qe-surface)) !important;
  box-shadow: 0 18px 44px rgba(2,6,23,.14) !important;
  padding: 10px 12px !important;
  display:none;
}
#quizContainer .bulk-bar[style*="display: block"],
#quizContainer .bulk-bar[style*="display:block"],
.qe-shell .bulk-bar[style*="display: block"],
.qe-shell .bulk-bar[style*="display:block"]{
  position: sticky;
  bottom: 14px;
  z-index: 50;
}

/* Safety: if legacy CSS forces it visible, hide it until JS shows it */
#bulkBar{ display:none; }

/* -----------------------------
   Modal + toast helpers (quiz-only)
----------------------------- */
#quizContainer .modal-body-scroll,
.qe-shell .modal-body-scroll{
  max-height: min(60vh, 560px);
  overflow:auto;
  border: 1px solid var(--qe-border);
  border-radius: var(--lj-radius-sm);
  padding: 8px;
  background: var(--qe-surface);
}

#quizContainer .folder-row,
.qe-shell .folder-row{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px;
  border-radius: var(--lj-radius-sm);
  cursor:pointer;
}
#quizContainer .folder-row:hover,
.qe-shell .folder-row:hover{ background: var(--qe-row-hover); }

#quizContainer #appToast,
.qe-shell #appToast{
  border-radius: var(--lj-radius-lg);
  box-shadow: var(--qe-toast-shadow);
}
#quizContainer #appToast .toast-body,
.qe-shell #appToast .toast-body{
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* dropdowns look correct in dark */
html[data-color*="dark"] #quizContainer .dropdown-menu,
html[data-bs-theme="dark"] #quizContainer .dropdown-menu,
html[data-color*="dark"] .qe-shell .dropdown-menu,
html[data-bs-theme="dark"] .qe-shell .dropdown-menu{
  background: var(--qe-surface);
  border-color: var(--qe-border);
  color: var(--qe-ink);
}
html[data-color*="dark"] #quizContainer .dropdown-item,
html[data-bs-theme="dark"] #quizContainer .dropdown-item,
html[data-color*="dark"] .qe-shell .dropdown-item,
html[data-bs-theme="dark"] .qe-shell .dropdown-item{ color: var(--qe-ink); }
html[data-color*="dark"] #quizContainer .dropdown-item:hover,
html[data-bs-theme="dark"] #quizContainer .dropdown-item:hover,
html[data-color*="dark"] .qe-shell .dropdown-item:hover,
html[data-bs-theme="dark"] .qe-shell .dropdown-item:hover{ background: rgba(255,255,255,.06); }


/* Pagination (Bootstrap) – make it match LetzJam theme */
.pagination{
  --bs-pagination-color: var(--lj-primary);
  --bs-pagination-hover-color: var(--lj-primary);
  --bs-pagination-focus-color: var(--lj-primary);

  --bs-pagination-bg: var(--lj-surface);
  --bs-pagination-hover-bg: rgba(var(--lj-primary-rgb), .08);

  --bs-pagination-border-color: rgba(var(--lj-primary-rgb), .18);
  --bs-pagination-hover-border-color: rgba(var(--lj-primary-rgb), .25);

  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--lj-primary-rgb), .18);

  --bs-pagination-active-color: var(--lj-on-primary);
  --bs-pagination-active-bg: var(--lj-primary);
  --bs-pagination-active-border-color: var(--lj-primary);

  --bs-pagination-disabled-color: rgba(var(--lj-primary-rgb), .45);
  --bs-pagination-disabled-bg: rgba(var(--lj-primary-rgb), .05);
  --bs-pagination-disabled-border-color: rgba(var(--lj-primary-rgb), .12);
}

/* Optional: slightly rounder + tighter */
.pagination .page-link{
  border-radius: 10px;
  padding: .35rem .65rem;
}

.pagination .page-link{
  border-color: rgba(var(--lj-primary-rgb), .12);
  background: rgba(var(--lj-primary-rgb), .04);
}
.pagination .page-item.active .page-link{
  background: var(--lj-primary);
}
/* =========================================================
   FIX: Bootstrap "badge/bg/text-bg" forcing white text in folder rows
   Scoped to folders UI only.
========================================================= */

/* If a folder row uses any Bootstrap badge/background helper, do NOT force white text */
.folders-modern .badge,
.folders-modern .badge * ,
.folders-modern [class*="text-bg-"],
.folders-modern [class*="text-bg-"] *{
  color: var(--f-text) !important;
}

/* Also catch bg-* helpers that may carry white text via Bootstrap utilities */
.folders-modern .bg-primary,
.folders-modern .bg-secondary,
.folders-modern .bg-success,
.folders-modern .bg-danger,
.folders-modern .bg-warning,
.folders-modern .bg-info,
.folders-modern .bg-dark,
.folders-modern .bg-light{
  color: var(--f-text) !important;
}

/* Keep your semantic pills readable (your existing ones) */
.folders-modern .badge-public{
  color: #059669 !important;
  background: rgba(5,150,105,.12) !important;
  border: 1px solid rgba(5,150,105,.22) !important;
}
.folders-modern .badge-private{
  color: #dc2626 !important;
  background: rgba(220,38,38,.12) !important;
  border: 1px solid rgba(220,38,38,.22) !important;
}

/* Make the "Admin" / "Owner" style pill look like your theme */
.folders-modern .badge.bg-secondary,
.folders-modern .badge.bg-primary,
.folders-modern .badge.bg-dark,
.folders-modern [class*="text-bg-"]{
  background: color-mix(in srgb, var(--f-primary) 8%, transparent) !important;
  border: 1px solid var(--f-border) !important;
}
/* =========================================================
   QUIZ PLAY (qp-*) — modern components + correctness states
   Used by ui/pages/quiz_play.php
   ========================================================= */

.qp-shell-hidden { display: none !important; }

.qp-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.qp-header-title h2 { margin:0; }

.qp-actions{
  margin-top: 12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:space-between;
}

.qp-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.qp-toolbar-left{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.qp-jump{ display:flex; align-items:center; gap:8px; }

.qp-progress-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top: 10px;
}
.qp-chips{
  overflow:auto;
  white-space:nowrap;
  flex:1;
  padding: 2px 0;
}

.qp-qhead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.qp-qnum{ font-weight:700; }
.qp-qhead-right{ display:flex; align-items:center; gap:10px; }
.qp-timer{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.qp-image-wrap{ text-align:center; margin:10px 0; }
.qp-question-image{
  max-height: 320px;
  max-width: 100%;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(2,6,23,.10);
}

.qp-callout{
  display:none;
  margin-top:10px;
  padding:10px;
  border-radius: 14px;
  border: 1px solid var(--lj-border);
  background: color-mix(in srgb, var(--lj-primary) 6%, transparent);
}

.qp-toast{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:2000;
}

/* status pill (Correct/Incorrect) */
.qp-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  border: 1px solid var(--lj-border);
  background: var(--lj-surface);
  color: var(--lj-text);
}
.qp-pill--ok{
  border-color: color-mix(in srgb, #0a7a3d 55%, var(--lj-border));
  background: color-mix(in srgb, #0a7a3d 10%, var(--lj-surface));
}
.qp-pill--bad{
  border-color: color-mix(in srgb, #c62828 55%, var(--lj-border));
  background: color-mix(in srgb, #c62828 10%, var(--lj-surface));
}

/* options grid — FORCE 2 PER ROW (mobile: 1) */
.qp-options{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px){
  .qp-options{ grid-template-columns: 1fr; }
}

/* if markup uses qp-options--two, keep it compatible */
.qp-options--two{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px){
  .qp-options--two{ grid-template-columns: 1fr; }
}

/* option button */
.qp-option-btn{
  width: 100%;
  justify-content:flex-start;
  text-align:left;
  white-space: normal;
  line-height: 1.35;

  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--lj-primary) 35%, var(--lj-border));
  background: color-mix(in srgb, var(--lj-primary) 6%, var(--lj-surface));
  color: var(--lj-text);

  box-shadow: 0 6px 18px rgba(2,6,23,.06);
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.qp-option-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(2,6,23,.10);
  border-color: color-mix(in srgb, var(--lj-primary) 60%, var(--lj-border));
}
.qp-option-btn:active{
  transform: translateY(0px);
  box-shadow: 0 6px 18px rgba(2,6,23,.08);
}

/* IMPORTANT: never allow "wide" options to break the 2-per-row layout */
.qp-option-btn--wide{
  grid-column: auto !important;
}

/* selected look */
.qp-option-btn.is-selected,
.qp-option-btn[data-picked]{
  background: color-mix(in srgb, var(--lj-primary) 14%, var(--lj-surface));
  border-color: color-mix(in srgb, var(--lj-primary) 85%, var(--lj-border));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--lj-primary) 35%, transparent) inset,
    0 10px 26px rgba(2,6,23,.12);
}

/* correctness marking (persistent on revisit) */
.qp-option-btn.qp-opt-correct{
  border-color: color-mix(in srgb, #0a7a3d 65%, var(--lj-border));
  background: color-mix(in srgb, #0a7a3d 10%, var(--lj-surface));
  box-shadow:
    0 0 0 2px color-mix(in srgb, #0a7a3d 25%, transparent) inset,
    0 10px 26px rgba(2,6,23,.10);
}
.qp-option-btn.qp-opt-wrong{
  border-color: color-mix(in srgb, #c62828 65%, var(--lj-border));
  background: color-mix(in srgb, #c62828 10%, var(--lj-surface));
  box-shadow:
    0 0 0 2px color-mix(in srgb, #c62828 25%, transparent) inset,
    0 10px 26px rgba(2,6,23,.10);
}

/* when wrong: still show the correct answer */
.qp-option-btn.qp-opt-correct-answer{
  border-color: color-mix(in srgb, #0a7a3d 55%, var(--lj-border));
  background: color-mix(in srgb, #0a7a3d 8%, var(--lj-surface));
}

/* confirm row */
.qp-confirm-row{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}

/* progress chips */
.q-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 34px;
  height: 30px;
  margin-right: 6px;

  border-radius: 999px;
  border: 1px solid var(--lj-border);
  background: var(--lj-surface);
  color: var(--lj-text);

  cursor:pointer;
  font-weight:600;
}
.q-chip.current{
  border: 2px solid color-mix(in srgb, var(--lj-primary) 90%, #fff 10%);
}
.q-chip.answered{
  background: color-mix(in srgb, var(--lj-primary) 10%, var(--lj-surface));
  border-color: color-mix(in srgb, var(--lj-primary) 35%, var(--lj-border));
}
.q-chip.marked{
  box-shadow: 0 0 0 2px color-mix(in srgb, #ffb400 35%, transparent) inset;
}

/* correct/wrong chip tint */
.q-chip.correct{
  border-color: color-mix(in srgb, #0a7a3d 55%, var(--lj-border));
  background: color-mix(in srgb, #0a7a3d 10%, var(--lj-surface));
}
.q-chip.wrong{
  border-color: color-mix(in srgb, #c62828 55%, var(--lj-border));
  background: color-mix(in srgb, #c62828 10%, var(--lj-surface));
}

/* =========================================================
   QUIZ PLAY ENHANCEMENTS - Modern UI improvements
========================================================= */

/* -----------------------------
   Enhanced Progress Chips
----------------------------- */
.q-chip {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-width: 2px !important;
  font-weight: 700 !important;
  position: relative !important;
  overflow: hidden !important;
}

.q-chip:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.15) !important;
  z-index: 2 !important;
}

.q-chip.current {
  border-width: 3px !important;
  border-color: var(--lj-primary) !important;
  background: color-mix(in srgb, var(--lj-primary) 12%, transparent) !important;
  box-shadow: 0 0 0 3px rgba(var(--lj-primary-rgb), 0.15) !important;
  animation: pulseCurrent 2s infinite !important;
}

@keyframes pulseCurrent {
  0%, 100% { box-shadow: 0 0 0 3px rgba(var(--lj-primary-rgb), 0.15); }
  50% { box-shadow: 0 0 0 6px rgba(var(--lj-primary-rgb), 0.08); }
}

.q-chip.answered {
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--lj-primary) 15%, transparent), 
    color-mix(in srgb, var(--lj-primary) 8%, transparent)
  ) !important;
  border-color: color-mix(in srgb, var(--lj-primary) 55%, transparent) !important;
}

.q-chip.marked {
  background: linear-gradient(135deg, 
    color-mix(in srgb, #f59e0b 20%, transparent), 
    color-mix(in srgb, #f59e0b 10%, transparent)
  ) !important;
  border-color: color-mix(in srgb, #f59e0b 55%, transparent) !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
}

.q-chip.correct {
  background: linear-gradient(135deg, 
    color-mix(in srgb, #0a7a3d 20%, transparent), 
    color-mix(in srgb, #0a7a3d 10%, transparent)
  ) !important;
  border-color: color-mix(in srgb, #0a7a3d 65%, transparent) !important;
  position: relative !important;
}

.q-chip.correct::after {
  content: '✓' !important;
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  background: #0a7a3d !important;
  color: white !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: bold !important;
}

.q-chip.wrong {
  background: linear-gradient(135deg, 
    color-mix(in srgb, #c62828 20%, transparent), 
    color-mix(in srgb, #c62828 10%, transparent)
  ) !important;
  border-color: color-mix(in srgb, #c62828 65%, transparent) !important;
  position: relative !important;
}

.q-chip.wrong::after {
  content: '✕' !important;
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  background: #c62828 !important;
  color: white !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: bold !important;
}

/* -----------------------------
   Enhanced Question Card
----------------------------- */
#question-container .lj-card {
  border: 1px solid color-mix(in srgb, var(--lj-primary) 25%, transparent) !important;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--lj-primary) 6%, transparent),
    color-mix(in srgb, var(--lj-primary) 3%, transparent)
  ) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;
}

#question-container .lj-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.15) !important;
  border-color: color-mix(in srgb, var(--lj-primary) 45%, transparent) !important;
}

/* Question text styling */
.qp-qhead {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--lj-primary) 10%, transparent),
    color-mix(in srgb, var(--lj-primary) 4%, transparent)
  ) !important;
  padding: 12px 16px !important;
  border-radius: var(--lj-radius-lg) var(--lj-radius-lg) 0 0 !important;
  border-bottom: 1px solid var(--lj-border) !important;
  margin: -16px -16px 16px -16px !important;
}

.qp-qnum {
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  color: var(--lj-primary) !important;
  letter-spacing: -0.02em !important;
}

/* Timer styling */
.qp-timer {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace !important;
  background: rgba(0, 0, 0, 0.05) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--lj-border) !important;
  font-weight: 700 !important;
  color: var(--lj-text) !important;
}

/* -----------------------------
   Enhanced Option Buttons
----------------------------- */
.qp-option-btn {
  position: relative !important;
  overflow: hidden !important;
  text-align: left !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  padding: 14px 16px !important;
  border-radius: var(--lj-radius) !important;
  border: 2px solid color-mix(in srgb, var(--lj-primary) 25%, var(--lj-border)) !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--lj-primary) 8%, var(--lj-surface)),
    color-mix(in srgb, var(--lj-primary) 4%, var(--lj-surface))
  ) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.05) !important;
}

.qp-option-btn:hover {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--lj-primary) 65%, var(--lj-border)) !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--lj-primary) 14%, var(--lj-surface)),
    color-mix(in srgb, var(--lj-primary) 8%, var(--lj-surface))
  ) !important;
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.12) !important;
}

.qp-option-btn:active {
  transform: translateY(-1px) !important;
}

.qp-option-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--lj-primary), color-mix(in srgb, var(--lj-primary) 60%, transparent)) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  border-radius: var(--lj-radius) var(--lj-radius) 0 0 !important;
}

.qp-option-btn:hover::before {
  opacity: 1 !important;
}

/* Selected option styling */
.qp-option-btn.is-selected,
.qp-option-btn[data-picked] {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--lj-primary) 20%, var(--lj-surface)),
    color-mix(in srgb, var(--lj-primary) 12%, var(--lj-surface))
  ) !important;
  border-color: var(--lj-primary) !important;
  box-shadow: 
    0 0 0 3px color-mix(in srgb, var(--lj-primary) 25%, transparent),
    0 12px 32px rgba(2, 6, 23, 0.15) !important;
}

.qp-option-btn.is-selected::before,
.qp-option-btn[data-picked]::before {
  opacity: 1 !important;
}

/* Correct/Wrong answer styling */
.qp-option-btn.qp-opt-correct {
  border-color: #0a7a3d !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #0a7a3d 15%, var(--lj-surface)),
    color-mix(in srgb, #0a7a3d 8%, var(--lj-surface))
  ) !important;
  position: relative !important;
}

.qp-option-btn.qp-opt-correct::after {
  content: '✓' !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  color: #0a7a3d !important;
  font-weight: bold !important;
  font-size: 1.2rem !important;
}

.qp-option-btn.qp-opt-wrong {
  border-color: #c62828 !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #c62828 15%, var(--lj-surface)),
    color-mix(in srgb, #c62828 8%, var(--lj-surface))
  ) !important;
  position: relative !important;
}

.qp-option-btn.qp-opt-wrong::after {
  content: '✕' !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  color: #c62828 !important;
  font-weight: bold !important;
  font-size: 1.2rem !important;
}

.qp-option-btn.qp-opt-correct-answer {
  border-color: #0a7a3d !important;
  border-style: dashed !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #0a7a3d 8%, var(--lj-surface)),
    color-mix(in srgb, #0a7a3d 4%, var(--lj-surface))
  ) !important;
}

/* -----------------------------
   Enhanced Action Buttons
----------------------------- */
#quizForm .qp-actions .lj-btn {
  padding: 12px 24px !important;
  font-weight: 700 !important;
  border-radius: var(--lj-radius) !important;
  border-width: 2px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

#quizForm .qp-actions .lj-btn::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 5px !important;
  height: 5px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  opacity: 0 !important;
  border-radius: 100% !important;
  transform: scale(1, 1) translate(-50%) !important;
  transform-origin: 50% 50% !important;
}

#quizForm .qp-actions .lj-btn:focus:not(:active)::after {
  animation: ripple 1s ease-out !important;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0) !important;
    opacity: 0.5 !important;
  }
  20% {
    transform: scale(25, 25) !important;
    opacity: 0.3 !important;
  }
  100% {
    opacity: 0 !important;
    transform: scale(40, 40) !important;
  }
}

#submitBtn {
  background: linear-gradient(135deg, var(--lj-primary), color-mix(in srgb, var(--lj-primary) 80%, #000)) !important;
  border-color: var(--lj-primary) !important;
  color: var(--lj-on-primary) !important;
  box-shadow: 0 8px 24px rgba(var(--lj-primary-rgb), 0.3) !important;
}

#submitBtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(var(--lj-primary-rgb), 0.4) !important;
}

/* -----------------------------
   Enhanced Feedback Modal
----------------------------- */
#feedbackModal .modal-content{
  border: 2px solid color-mix(in srgb, var(--lj-border) 90%, transparent) !important;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--lj-primary) 10%, var(--lj-surface)),
    color-mix(in srgb, var(--lj-primary) 4%, var(--lj-surface))
  ) !important;
  backdrop-filter: blur(18px) !important;
}

/* Feedback modal: ensure true dark surface only when the site is actually in dark mode */
html[data-bs-theme="dark"] #feedbackModal .modal-content,
html[data-theme="dark"] #feedbackModal .modal-content,
html[data-color*="dark"] #feedbackModal .modal-content,
body[data-bs-theme="dark"] #feedbackModal .modal-content,
body[data-theme="dark"] #feedbackModal .modal-content,
body.lj-dark #feedbackModal .modal-content,
body.dark #feedbackModal .modal-content,
.theme-dark #feedbackModal .modal-content{
  border-color: rgba(255,255,255,.14) !important;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--lj-primary) 14%, rgba(0,0,0,.70)),
    color-mix(in srgb, var(--lj-primary) 6%, rgba(0,0,0,.70))
  ) !important;
  color: rgba(255,255,255,.92) !important;
}


#feedbackModal .modal-header {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--lj-primary) 15%, transparent),
    color-mix(in srgb, var(--lj-primary) 8%, transparent)
  ) !important;
  border-bottom: 2px solid var(--lj-border) !important;
  padding: 16px 24px !important;
}

#feedbackModal .modal-title {
  font-weight: 800 !important;
  font-size: 1.3rem !important;
  letter-spacing: -0.02em !important;
}

#feedbackIcon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  font-weight: bold !important;
  flex-shrink: 0 !important;
}

#feedbackIcon[style*="#0a7a3d"] {
  background: linear-gradient(135deg, #0a7a3d, color-mix(in srgb, #0a7a3d 70%, #000)) !important;
  color: white !important;
  box-shadow: 0 8px 24px rgba(10, 122, 61, 0.3) !important;
}

#feedbackIcon[style*="#c62828"] {
  background: linear-gradient(135deg, #c62828, color-mix(in srgb, #c62828 70%, #000)) !important;
  color: white !important;
  box-shadow: 0 8px 24px rgba(198, 40, 40, 0.3) !important;
}

#feedbackQuestion {
  font-size: 1.1rem !important;
  line-height: 1.4 !important;
  margin-bottom: 16px !important;
  padding: 12px !important;
  background: rgba(0, 0, 0, 0.03) !important;
  border-radius: var(--lj-radius) !important;
  border-left: 4px solid var(--lj-primary) !important;
}

#feedbackTitle {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 8px !important;
}

.qp-callout {
  border: 2px solid !important;
  border-radius: var(--lj-radius) !important;
  padding: 16px !important;
  margin-top: 16px !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  ) !important;
  backdrop-filter: blur(10px) !important;
}

.qp-callout[style*="display: block"] {
  border-color: #0a7a3d !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #0a7a3d 15%, transparent),
    color-mix(in srgb, #0a7a3d 8%, transparent)
  ) !important;
}

#feedbackExplanation {
  padding: 16px !important;
  background: rgba(0, 0, 0, 0.03) !important;
  border-radius: var(--lj-radius) !important;
  border-left: 4px solid var(--lj-muted) !important;
  line-height: 1.6 !important;
}

/* -----------------------------
   Enhanced Mark Button
----------------------------- */
#markBtn {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #f59e0b 20%, transparent),
    color-mix(in srgb, #f59e0b 10%, transparent)
  ) !important;
  border: 2px solid color-mix(in srgb, #f59e0b 40%, transparent) !important;
}

#markBtn:hover:not(:disabled) {
  transform: scale(1.1) rotate(15deg) !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #f59e0b 30%, transparent),
    color-mix(in srgb, #f59e0b 20%, transparent)
  ) !important;
  border-color: color-mix(in srgb, #f59e0b 60%, transparent) !important;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3) !important;
}

#markBtn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* -----------------------------
   Enhanced Settings Modal
----------------------------- */
#configureModal .modal-content {
  border: 2px solid var(--lj-border) !important;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--lj-primary) 8%, transparent),
    color-mix(in srgb, var(--lj-primary) 4%, transparent)
  ) !important;
  backdrop-filter: blur(20px) !important;
}

#configureModal .lj-card {
  border: 1px solid color-mix(in srgb, var(--lj-primary) 20%, transparent) !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.02)
  ) !important;
  transition: all 0.3s ease !important;
}

#configureModal .lj-card:hover {
  border-color: color-mix(in srgb, var(--lj-primary) 40%, transparent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.15) !important;
}

/* Range slider enhancement */
#question_limit {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 8px !important;
  border-radius: 4px !important;
  background: linear-gradient(
    90deg,
    var(--lj-primary),
    color-mix(in srgb, var(--lj-primary) 60%, transparent)
  ) !important;
  outline: none !important;
}

#question_limit::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: var(--lj-primary) !important;
  border: 3px solid white !important;
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.2) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#question_limit::-webkit-slider-thumb:hover {
  transform: scale(1.2) !important;
  box-shadow: 0 6px 16px rgba(2, 6, 23, 0.3) !important;
}

#question_limit::-moz-range-thumb {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: var(--lj-primary) !important;
  border: 3px solid white !important;
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.2) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#limitValue {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: var(--lj-primary) !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--lj-primary) 15%, transparent),
    color-mix(in srgb, var(--lj-primary) 8%, transparent)
  ) !important;
  padding: 8px 16px !important;
  border-radius: var(--lj-radius) !important;
  border: 2px solid color-mix(in srgb, var(--lj-primary) 30%, transparent) !important;
}

/* -----------------------------
   Enhanced Filter Buttons
----------------------------- */
.pf {
  position: relative !important;
  overflow: hidden !important;
  padding: 10px 20px !important;
  border-radius: var(--lj-radius) !important;
  border: 2px solid var(--lj-border) !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--lj-primary) 8%, transparent),
    color-mix(in srgb, var(--lj-primary) 4%, transparent)
  ) !important;
  font-weight: 700 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pf:hover:not(.active) {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--lj-primary) 45%, var(--lj-border)) !important;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.1) !important;
}

.pf.active {
  background: linear-gradient(
    135deg,
    var(--lj-primary),
    color-mix(in srgb, var(--lj-primary) 80%, #000)
  ) !important;
  border-color: var(--lj-primary) !important;
  color: var(--lj-on-primary) !important;
  box-shadow: 0 8px 24px rgba(var(--lj-primary-rgb), 0.3) !important;
  transform: translateY(-2px) !important;
}

/* -----------------------------
   Responsive Enhancements
----------------------------- */
@media (max-width: 768px) {
  .qp-options {
    gap: 8px !important;
  }
  
  .qp-option-btn {
    padding: 12px 14px !important;
    font-size: 0.95rem !important;
  }
  
  .qp-qhead {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  
  .qp-qhead-right {
    width: 100% !important;
    justify-content: space-between !important;
  }
  
  #quizForm .qp-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  #quizForm .qp-actions .lj-btn {
    width: 100% !important;
  }
  
  .pf {
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 480px) {
  .qp-options {
    grid-template-columns: 1fr !important;
  }
  
  .qp-option-btn {
    padding: 14px 16px !important;
  }
  
  .q-chip {
    min-width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
  }
}

/* -----------------------------
   Accessibility Improvements
----------------------------- */
.qp-option-btn:focus-visible,
.lj-btn:focus-visible,
.pf:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--lj-primary) 50%, transparent) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(var(--lj-primary-rgb), 0.2) !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .qp-option-btn {
    border-width: 3px !important;
  }
  
  .q-chip {
    border-width: 3px !important;
  }
  
  .pf {
    border-width: 3px !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .qp-option-btn,
  .q-chip,
  .pf,
  .lj-btn,
  #markBtn,
  #question-container .lj-card {
    transition: none !important;
    animation: none !important;
  }
  
  .qp-option-btn:hover,
  .q-chip:hover,
  .pf:hover,
  .lj-btn:hover {
    transform: none !important;
  }
}