/* 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: var(--lj-surface, #ffffff);
  --f-surface2: var(--lj-surface2, #f8f9fa);
  --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: #2a2a2a;
  --f-surface2: #3a3a3a;

  --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: #2a2a2a;
    --f-surface2: #3a3a3a;

    --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: #ffffff;
  --f-surface2: #f8f9fa;

  --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),
html:not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light) body,
html:not([data-bs-theme="light"]):not([data-theme="light"]):not(.theme-light):not(.lj-light):not(.light) .bg-body{
  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((100% - 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((100% - 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:48px;
  height:48px;
  border-radius:999px;
  border:0;
  background:var(--bs-primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3000;
  box-shadow:
    0 10px 24px rgba(2,6,23,.18),
    0 0 12px rgba(var(--bs-primary-rgb, 13,110,253), .28);
  touch-action:none;
  cursor:grab;
}

#lj-fab-customizer.lj-fab-customized{
  right:auto !important;
  transform:none !important;
}

#lj-fab-customizer.lj-fab-customized:hover{
  transform:none !important;
}

#lj-fab-customizer.lj-fab-dragging{
  cursor:grabbing;
  transition:none !important;
}

#lj-fab-customizer svg{
  display:block;
  width:20px;
  height:20px;
  fill:currentColor;
}

#lj-fab-customizer .lj-fab-note{
  position:absolute;
  left:50%;
  top:calc(100% + 6px);
  transform:translateX(-50%);
  font-size:10px;
  line-height:1;
  white-space:nowrap;
  background:rgba(15,23,42,.82);
  color:#fff;
  border-radius:999px;
  padding:3px 6px;
  pointer-events:none;
}

/* 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;
}

/* ========== 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;
}

/* ========== FOLDER ITEMS STYLING - CLEAN MODERN DESIGN ========== */
/* Main container for folder tree */
.folder-tree-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.folder-tree-list ul {
  list-style: none !important;
  padding-left: 32px !important;
  margin: 4px 0 !important;
}

/* Folder item container */
.folder-item-container {
  margin-bottom: 8px !important;
  position: relative !important;
  width: 100% !important;
}

/* Main folder item card */
.folder-item {
  background: var(--f-surface) !important;
  border: 1px solid var(--f-border) !important;
  border-radius: var(--f-radius) !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
  position: relative !important;
  width: 100% !important;
  min-height: 70px !important;
  overflow: hidden !important;
}

/* Solid color left border/indicator - using theme primary color */
.folder-item::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: var(--lj-primary) !important;
  border-radius: var(--f-radius) 0 0 var(--f-radius) !important;
  opacity: 0.9 !important;
  z-index: 1 !important;
  transition: all 0.2s ease !important;
}

/* Dark mode adjustment for the border */
html[data-bs-theme="dark"] .folder-item::before,
html[data-theme="dark"] .folder-item::before,
html[data-color*="dark"] .folder-item::before,
body[data-bs-theme="dark"] .folder-item::before,
body[data-theme="dark"] .folder-item::before,
body.lj-dark .folder-item::before,
body.dark .folder-item::before,
.theme-dark .folder-item::before {
  background: var(--lj-primary) !important;
  opacity: 1 !important;
  filter: brightness(1.2) !important;
}

/* Hover effect */
.folder-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  border-color: color-mix(in srgb, var(--lj-primary) 30%, var(--f-border)) !important;
  transform: translateY(-1px) !important;
}

.folder-item:hover::before {
  opacity: 1 !important;
  width: 5px !important;
  background: var(--lj-primary) !important;
  filter: brightness(1.1) !important;
}

/* Expanded state - keep the border shape */
.folder-item-container.expanded > .folder-item {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-color: transparent !important;
}

.folder-item-container.expanded > .folder-item::before {
  border-bottom-left-radius: 0 !important;
  height: calc(100% + 1px) !important; /* Slightly extend to cover the border gap */
  background: var(--lj-primary) !important;
}

/* Folder item main content area */
.folder-item-main {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important; /* Above the border */
}

/* Folder icon - with theme color */
.folder-icon {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--lj-primary) !important;
  font-size: 1.4rem !important;
  flex-shrink: 0 !important;
  background: color-mix(in srgb, var(--lj-primary) 8%, transparent) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.folder-icon i {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.05)) !important;
}

/* Dark mode icon background */
html[data-bs-theme="dark"] .folder-icon,
html[data-theme="dark"] .folder-icon,
html[data-color*="dark"] .folder-icon,
body[data-bs-theme="dark"] .folder-icon,
body[data-theme="dark"] .folder-icon,
body.lj-dark .folder-icon,
body.dark .folder-icon,
.theme-dark .folder-icon {
  background: color-mix(in srgb, var(--lj-primary) 20%, transparent) !important;
}

/* Toggle button for folders with children */
.folder-toggle-btn {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid var(--f-border) !important;
  background: var(--f-surface2) !important;
  color: var(--f-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  margin-right: 8px !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  border-radius: 6px !important;
  position: relative !important;
  z-index: 2 !important;
}

.folder-toggle-btn:hover {
  color: var(--lj-primary) !important;
  border-color: var(--lj-primary) !important;
  background: color-mix(in srgb, var(--lj-primary) 8%, transparent) !important;
}

.folder-toggle-btn i {
  font-size: 0.9rem !important;
  transition: transform 0.2s ease !important;
}

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

.folder-toggle-placeholder {
  width: 28px !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Folder content */
.folder-content {
  flex: 1 !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.folder-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
  flex-wrap: wrap !important;
}

.folder-name {
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--f-text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 200px !important;
}

/* Folder metadata (count, badges) */
.folder-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.item-count {
  font-size: 0.8rem !important;
  color: var(--f-text) !important;
  background: var(--f-surface2) !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  border: 1px solid var(--f-border) !important;
  font-weight: 600 !important;
  min-width: 30px !important;
  text-align: center !important;
}

/* Badge styling */
.badge {
  font-size: 0.75rem !important;
  padding: 3px 8px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
}

.badge-public {
  background: color-mix(in srgb, #28a745 10%, var(--f-surface2)) !important;
  color: #28a745 !important;
  border-color: color-mix(in srgb, #28a745 25%, transparent) !important;
}

.badge-private {
  background: color-mix(in srgb, #dc3545 10%, var(--f-surface2)) !important;
  color: #dc3545 !important;
  border-color: color-mix(in srgb, #dc3545 25%, transparent) !important;
}

.badge-owner {
  background: color-mix(in srgb, #ffc107 10%, var(--f-surface2)) !important;
  color: #856404 !important;
  border-color: color-mix(in srgb, #ffc107 25%, transparent) !important;
}

.badge-admin {
  background: color-mix(in srgb, #17a2b8 10%, var(--f-surface2)) !important;
  color: #0c5460 !important;
  border-color: color-mix(in srgb, #17a2b8 25%, transparent) !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

/* Folder owner info */
.folder-owner-info {
  font-size: 0.8rem !important;
  color: var(--f-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 2px !important;
}

.folder-owner-info i {
  font-size: 0.7rem !important;
  opacity: 0.7 !important;
  width: 14px !important;
}

.folder-owner-info .text-info {
  color: #17a2b8 !important;
  font-weight: 500 !important;
}

/* Folder description */
.folder-description {
  font-size: 0.8rem !important;
  color: var(--f-muted) !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px dashed var(--f-border) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.4 !important;
}

/* Action buttons */
.folder-actions {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-left: 12px !important;
  position: relative !important;
  z-index: 2 !important;
}

.action-btn {
  width: 32px !important;
  height: 32px !important;
  border: 1px solid var(--f-border) !important;
  background: var(--f-surface2) !important;
  border-radius: 6px !important;
  color: var(--f-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  font-size: 0.9rem !important;
}

.action-btn:hover {
  background: var(--f-surface) !important;
  border-color: var(--lj-primary) !important;
  color: var(--lj-primary) !important;
  transform: scale(1.05) !important;
}

.action-btn.btn-view:hover {
  color: var(--lj-primary) !important;
  border-color: var(--lj-primary) !important;
}

.action-btn.btn-edit:hover,
.action-btn.btn-edit-admin:hover {
  color: #ffc107 !important;
  border-color: #ffc107 !important;
}

.action-btn.btn-delete:hover,
.action-btn.btn-delete-admin:hover {
  color: #dc3545 !important;
  border-color: #dc3545 !important;
}

/* Expanded state */
.folder-item-container.expanded > .folder-item {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-color: transparent !important;
}

.folder-item-container.expanded > .folder-item::before {
  border-bottom-left-radius: 0 !important;
  height: calc(100% + 1px) !important;
  background: var(--lj-primary) !important;
}

/* Children container */
.folder-children {
  display: none !important;
  margin-left: 44px !important;
  padding-left: 16px !important;
  border-left: 2px solid color-mix(in srgb, var(--lj-primary) 20%, var(--f-border)) !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.folder-item-container.expanded > .folder-children {
  display: block !important;
}

/* ============================================================
   Dashboard Hub — Default/Effects deco panel
   ============================================================ */

/* Two-column grid: content | deco sidebar */
.lj-hub .lj-hub-shell {
  display: grid !important;
  grid-template-columns: 1fr 300px !important;
  grid-template-rows: auto !important;
  overflow: visible !important;
}

/* Hub content stays in column 1 */
.lj-hub-content {
  grid-column: 1;
}

/* Effects deco aside — column 2, revealed by this skin */
.lj-hub-effects-deco {
  display: block !important;
  grid-column: 2;
  position: relative !important;
  overflow: visible !important;
  min-height: 300px;
  pointer-events: none;
}

/* Responsive: collapse deco on narrow viewports */
@media (max-width: 900px) {
  .lj-hub .lj-hub-shell {
    grid-template-columns: 1fr !important;
  }
  .lj-hub-effects-deco {
    display: none !important;
  }
}

/* ---- Deco image base class ---- */
.edeco {
  position: absolute;
  pointer-events: none;
  max-width: 100%;
  height: auto;
}

/* ---- Astronaut — centred bottom, floats up/down ---- */
.edeco-astronaut {
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 170px;
  animation: fx-float 4.8s ease-in-out infinite;
}

/* ---- Planet — top area ---- */
.edeco-planet {
  top: 0px;
  right: -10px;
  width: 150px;
  animation: fx-drift 7s ease-in-out infinite;
}

/* ---- Orbs cluster — left side ---- */
.edeco-orbs {
  top: 10px;
  left: 0px;
  width: 80px;
  animation: fx-twinkle 3.5s ease-in-out infinite;
}

/* ---- Keyframe animations ---- */
@keyframes fx-float {
  0%   { transform: translateX(-50%) translateY(0px); }
  50%  { transform: translateX(-50%) translateY(-10px); }
  100% { transform: translateX(-50%) translateY(0px); }
}

@keyframes fx-drift {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-6px) rotate(3deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes fx-twinkle {
  0%   { opacity: 1;    transform: scale(1); }
  40%  { opacity: 0.6;  transform: scale(0.94); }
  70%  { opacity: 0.9;  transform: scale(1.05); }
  100% { opacity: 1;    transform: scale(1); }
}

/* Nested folder items */
.folder-children .folder-item {
  background: var(--f-surface2) !important;
  border-color: var(--f-border) !important;
  min-height: 60px !important;
  padding: 10px 14px !important;
}

.folder-children .folder-item::before {
  background: var(--lj-primary) !important;
  opacity: 0.7 !important;
}

.folder-children .folder-item:hover::before {
  opacity: 1 !important;
  background: var(--lj-primary) !important;
}

.folder-children .folder-icon {
  width: 32px !important;
  height: 32px !important;
  font-size: 1.1rem !important;
  background: color-mix(in srgb, var(--lj-primary) 6%, transparent) !important;
}

/* Dark mode adjustments for nested folders */
html[data-bs-theme="dark"] .folder-children .folder-item::before,
html[data-theme="dark"] .folder-children .folder-item::before,
html[data-color*="dark"] .folder-children .folder-item::before,
body[data-bs-theme="dark"] .folder-children .folder-item::before,
body[data-theme="dark"] .folder-children .folder-item::before,
body.lj-dark .folder-children .folder-item::before,
body.dark .folder-children .folder-item::before,
.theme-dark .folder-children .folder-item::before {
  background: var(--lj-primary) !important;
  opacity: 0.8 !important;
  filter: brightness(1.2) !important;
}

/* Empty state */
.empty-state {
  text-align: center !important;
  padding: 40px 20px !important;
  background: var(--f-surface) !important;
  border: 1px solid var(--f-border) !important;
  border-radius: var(--f-radius) !important;
}

.empty-state-icon {
  font-size: 3rem !important;
  color: var(--f-muted) !important;
  opacity: 0.5 !important;
  margin-bottom: 16px !important;
}

.empty-state-title {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: var(--f-text) !important;
  margin-bottom: 8px !important;
}

.empty-state-text {
  color: var(--f-muted) !important;
  margin-bottom: 20px !important;
  font-size: 0.9rem !important;
}

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

.folders-toolbar-left,
.folders-toolbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Search bar */
.folders-search {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}

.folders-search input {
  flex: 1 !important;
  border: 1px solid var(--f-border) !important;
  border-radius: var(--f-radius) !important;
  padding: 10px 14px !important;
  background: var(--f-surface) !important;
  color: var(--f-text) !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
}

.folders-search input:focus {
  outline: none !important;
  border-color: var(--lj-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lj-primary) 15%, transparent) !important;
}

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

/* Select dropdown */
.folders-select {
  border: 1px solid var(--f-border) !important;
  border-radius: var(--f-radius-sm) !important;
  padding: 8px 12px !important;
  background: var(--f-surface) !important;
  color: var(--f-text) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  min-width: 150px !important;
}

.folders-select:focus {
  outline: none !important;
  border-color: var(--lj-primary) !important;
}

/* Checkbox */
.folders-check {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  user-select: none !important;
}

.folders-check input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  border-radius: 4px !important;
  border: 1px solid var(--f-border) !important;
  background: var(--f-surface) !important;
  cursor: pointer !important;
}

.folders-check label {
  font-size: 0.9rem !important;
  color: var(--f-text) !important;
  cursor: pointer !important;
  font-weight: 500 !important;
}

/* Load more button */
#foldersLoadMoreBtn {
  margin: 16px auto !important;
  padding: 8px 24px !important;
  background: var(--f-surface) !important;
  border: 1px solid var(--f-border) !important;
  border-radius: var(--f-radius) !important;
  color: var(--f-text) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#foldersLoadMoreBtn:hover {
  background: var(--f-surface2) !important;
  border-color: var(--lj-primary) !important;
  color: var(--lj-primary) !important;
}

.is-hidden {
  display: none !important;
}

/* Dark mode specific overrides for the entire folder section */
@media (prefers-color-scheme: dark) {
  html:not([data-bs-theme="light"]) .folder-item::before {
    background: var(--lj-primary) !important;
    opacity: 1 !important;
    filter: brightness(1.2) !important;
  }
  
  html:not([data-bs-theme="light"]) .folder-item:hover::before {
    filter: brightness(1.4) !important;
  }
  
  html:not([data-bs-theme="light"]) .folder-children .folder-item::before {
    filter: brightness(1.1) !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);
}

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

/* ========== 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;
}

/* Global body loader (used by js/base/loader.js) */
body.spinner {
  overflow: hidden !important;
}

body.spinner::before {
  content: "";
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bs-body-bg, #ffffff) 72%, var(--lj-text, #111827) 28%);
  opacity: .42;
  backdrop-filter: blur(0.1875em);
  z-index: 300000;
}

body.spinner::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: -1.375rem;
  margin-top: -1.375rem;
  border-radius: 50%;
  border: 0.22rem solid color-mix(in srgb, var(--lj-primary, #0d6efd) 28%, transparent);
  border-top-color: var(--lj-primary, #0d6efd);
  border-right-color: var(--lj-primary, #0d6efd);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--lj-primary, #0d6efd) 12%, transparent);
  animation: ljBodySpinner .75s linear infinite;
  z-index: 300001;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ljBodySpinner { 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; }

/* ========== 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; }

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

  .modal-container { max-width: 100%; }
  
  .folder-item {
    padding: 12px 14px !important;
    min-height: 60px !important;
  }
  
  .folder-item-main {
    gap: 8px !important;
  }
  
  .folder-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.2rem !important;
  }
  
  .folder-name {
    max-width: 150px !important;
    font-size: 0.95rem !important;
  }
  
  .folder-actions {
    gap: 4px !important;
    margin-left: 8px !important;
  }
  
  .action-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.8rem !important;
  }
  
  .folder-tree-list ul {
    padding-left: 20px !important;
  }
  
  .folder-children {
    margin-left: 36px !important;
    padding-left: 12px !important;
  }
}

/* ========== 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;
}

/* Ensure Bootstrap modals stay clickable above all theme overlays */
.modal-backdrop{
  z-index: var(--lj-z-backdrop, 21040) !important;
}
.modal{
  z-index: var(--lj-z-modal, 21050) !important;
  pointer-events: auto;
}
.modal-dialog{
  /* keep backdrop click-to-close behavior */
  pointer-events: none;
}
.modal .modal-content{
  pointer-events: auto;
}

/* Popovers/tooltips above modal (Bootstrap sometimes uses 1070/1080) */
.popover{ z-index: var(--lj-z-popover, 21100) !important; }
.tooltip{ z-index: var(--lj-z-tooltip, 21200) !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;
  }
}

/* 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;
  }
}
/* =========================================================
   DREAMY THEME OVERRIDES (append at END of lj-ui-effects.css)
   - pastel sky background + sparkles
   - glass surfaces + soft shadows
   - gradient topnav + softer rail
   - folder rows + widget/cards look dreamy
========================================================= */

/* ---------- 1) Dreamy tokens (light mode baseline) ---------- */
:root{
  /* Dreamy primary gradient family (still respects --primary if your customizer sets it) */
  --lj-primary: color-mix(in srgb, var(--primary, #2f7df6) 90%, #7c6cff 10%);
  --lj-primary-rgb: var(--primary-rgb, 47, 125, 246);
  --lj-on-primary: #ffffff;

  /* Glass surfaces */
  --lj-surface: rgba(255,255,255,.78);
  --lj-surface2: rgba(255,255,255,.52);
  --lj-border: rgba(17,24,39,.10);

  /* Shadows + blur */
  --lj-glass-blur: 16px;
  --lj-shadow-soft: 0 14px 40px rgba(2,6,23,.08);
  --lj-shadow-pop: 0 20px 60px rgba(2,6,23,.14);

  /* Optional: softer text */
  --lj-text: var(--text, #111827);
  --lj-muted: color-mix(in srgb, var(--lj-text) 55%, transparent);
}

/* ---------- 2) Pastel sky background + sparkles ---------- */
/* Your app uses .bg-body; this makes it “dreamy” without touching layout */
.bg-body{
  position: relative;
  background:
    radial-gradient(1200px 600px at 18% 18%, rgba(86,184,255,.55), transparent 60%),
    radial-gradient(900px 520px at 80% 22%, rgba(255,193,245,.55), transparent 55%),
    radial-gradient(900px 520px at 56% 82%, rgba(180,200,255,.55), transparent 55%),
    linear-gradient(180deg, #cfe9ff 0%, #f0e9ff 45%, #dff3ff 100%) !important;
}

/* Sparkles overlay */
.bg-body::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 26%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.7) 0 1px, transparent 3px),
    radial-gradient(circle at 62% 22%, rgba(255,255,255,.8) 0 2px, transparent 4px),
    radial-gradient(circle at 84% 40%, rgba(255,255,255,.8) 0 1px, transparent 3px),
    radial-gradient(circle at 72% 72%, rgba(255,255,255,.75) 0 2px, transparent 4px),
    radial-gradient(circle at 18% 78%, rgba(255,255,255,.65) 0 1px, transparent 3px);
  opacity:.55;
  filter: blur(.2px);
}

/* Soft vignette */
.bg-body::after{
  content:"";
  position:absolute;
  inset:-60px;
  pointer-events:none;
  background: radial-gradient(1200px 800px at 50% 40%, transparent 55%, rgba(2,6,23,.08) 100%);
  opacity:.35;
}

/* Make sure content sits above bg overlays */
.lj-page, .dashboard, .container, .container-fluid{
  position: relative;
  z-index: 1;
}

/* ---------- 3) Glassify panels/cards/widgets ---------- */
.lj-panel,
.lj-panel-soft,
.card.lj-panel,
.card.lj-widget,
.folders-embed-root .folder-center-panel,
.folders-embed-root .folder-side-panel,
.folders-panel,
.folders-panel-soft{
  background: var(--lj-surface) !important;
  border: 1px solid var(--lj-border) !important;
  box-shadow: var(--lj-shadow-soft) !important;
  backdrop-filter: blur(var(--lj-glass-blur));
  -webkit-backdrop-filter: blur(var(--lj-glass-blur));
}

/* Widget headers: gentle gradient strip */
.lj-widget .card-header,
.lj-card-header,
.modal .modal-header,
.modal .modal-footer{
  background: linear-gradient(
    90deg,
    rgba(var(--lj-primary-rgb), .14),
    rgba(var(--lj-primary-rgb), .06)
  ) !important;
  border-color: rgba(17,24,39,.08) !important;
}

/* ---------- 4) Dreamy topnav + rail ---------- */
.lj-topnav{
  border-radius: 0 0 var(--lj-radius-lg) var(--lj-radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--lj-shadow-pop) !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--lj-primary) 90%, #6a5cff 10%) 0%,
    color-mix(in srgb, var(--lj-primary) 65%, #47b6ff 35%) 55%,
    #6ac7ff 100%
  ) !important;
}
.lj-topnav .nav-link,
.lj-topnav .navbar-brand,
.lj-topnav .navbar-text{
  color: rgba(255,255,255,.92) !important;
  font-weight: 800;
}

/* Vertical rail (when enabled) */
body.lj-menu-vertical .lj-rail{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--lj-primary) 88%, #6a5cff 12%) 0%,
    color-mix(in srgb, var(--lj-primary) 70%, #47b6ff 30%) 60%,
    color-mix(in srgb, var(--lj-primary) 55%, #6ac7ff 45%) 100%
  ) !important;
  box-shadow: var(--lj-shadow-pop) !important;
}

/* ---------- 5) Buttons = soft pills ---------- */
.lj-btn{
  border-radius: 999px !important;
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(17,24,39,.10) !important;
  box-shadow: 0 10px 28px rgba(2,6,23,.08) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lj-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(2,6,23,.12) !important;
}
.lj-btn-primary{
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--lj-primary) 92%, #6a5cff 8%) 0%,
    color-mix(in srgb, var(--lj-primary) 70%, #47b6ff 30%) 100%
  ) !important;
  border-color: transparent !important;
  color: var(--lj-on-primary) !important;
}

/* ---------- 6) Folder rows = glass card rows ---------- */
/* Main folder item card */
.folder-item{
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(17,24,39,.10) !important;
  box-shadow: 0 12px 32px rgba(2,6,23,.08) !important;
  backdrop-filter: blur(var(--lj-glass-blur));
  -webkit-backdrop-filter: blur(var(--lj-glass-blur));
}
.folder-item:hover{
  box-shadow: 0 18px 40px rgba(2,6,23,.12) !important;
  border-color: rgba(var(--lj-primary-rgb), .28) !important;
}

/* Replace the hard left stripe with a soft glow stripe */
.folder-item::before{
  background: linear-gradient(
    180deg,
    rgba(var(--lj-primary-rgb), .95),
    rgba(var(--lj-primary-rgb), .45)
  ) !important;
  box-shadow: 0 0 18px rgba(var(--lj-primary-rgb), .35);
}

/* Folder icon tile (dreamy) */
.folder-icon{
  background: linear-gradient(
    135deg,
    rgba(var(--lj-primary-rgb), .16),
    rgba(var(--lj-primary-rgb), .08)
  ) !important;
  border: 1px solid rgba(var(--lj-primary-rgb), .14) !important;
  border-radius: 14px !important;
}

/* Action buttons inside folder rows */
.action-btn,
.folder-toggle-btn{
  background: rgba(255,255,255,.55) !important;
  border-color: rgba(17,24,39,.10) !important;
  box-shadow: 0 10px 26px rgba(2,6,23,.08) !important;
}
.action-btn:hover,
.folder-toggle-btn:hover{
  border-color: rgba(var(--lj-primary-rgb), .45) !important;
  box-shadow: 0 16px 32px rgba(2,6,23,.12) !important;
}

/* Children indentation line: softer */
.folder-children{
  border-left: 2px solid rgba(var(--lj-primary-rgb), .22) !important;
}

/* ---------- 7) Inputs/search fields look frosted ---------- */
.folders-search input,
.form-control,
.folders-select{
  background: rgba(255,255,255,.62) !important;
  border-color: rgba(17,24,39,.10) !important;
  box-shadow: 0 10px 28px rgba(2,6,23,.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.folders-search input:focus,
.form-control:focus{
  border-color: rgba(var(--lj-primary-rgb), .55) !important;
  box-shadow: 0 0 0 3px rgba(var(--lj-primary-rgb), .14) !important;
}

/* ---------- 8) Modals = dreamy glass ---------- */
.modal .modal-content{
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(17,24,39,.10) !important;
  backdrop-filter: blur(calc(var(--lj-glass-blur) + 6px));
  -webkit-backdrop-filter: blur(calc(var(--lj-glass-blur) + 6px));
}

/* ---------- 9) Dark mode: keep dreamy but actually dark ---------- */
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: rgba(15,23,42,.72);
  --lj-surface2: rgba(15,23,42,.52);
  --lj-border: rgba(255,255,255,.12);
  --lj-text: rgba(226,232,240,.96);
  --lj-muted: rgba(226,232,240,.68);
}

html[data-bs-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-body,
html[data-color*="dark"] .bg-body{
  background:
    radial-gradient(1200px 600px at 18% 18%, rgba(56,189,248,.22), transparent 60%),
    radial-gradient(900px 520px at 80% 22%, rgba(236,72,153,.16), transparent 55%),
    radial-gradient(900px 520px at 56% 82%, rgba(99,102,241,.16), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #0a1020 45%, #07121a 100%) !important;
}
/* =========================
   LETZJAM THEME TOKENS
   (Customizer-driven)
========================= */

/* If your customizer already sets these, this just provides safe fallbacks */
:root{
  /* Primary */
  --lj-primary: var(--primary, var(--theme-primary, var(--bs-primary, #0d6efd)));
  --lj-on-primary: var(--primaryText, #ffffff);

  /* Typography */
  --lj-font-color: var(--lj-text, var(--fontColor, var(--bs-body-color, #111827)));

  /* Radius (CUSTOMIZER) – make cards react */
  --lj-radius: var(--radius, 16px);            /* if your customizer sets --radius */
  --lj-radius-card: var(--lj-radius);
  --lj-radius-inner: calc(var(--lj-radius) - 4px);
  --lj-radius-pill: 999px;

  /* Surfaces (LIGHT defaults) */
  --lj-surface: rgba(255,255,255,.88);
  --lj-surface-2: rgba(255,255,255,.55);
  --lj-border: rgba(0,0,0,.12);
  --lj-text: rgba(17,24,39,.96);
  --lj-muted: rgba(17,24,39,.62);

  --lj-shadow: 0 16px 48px rgba(0,0,0,.20);
}

/* If your customizer uses buttons like Rounded/Standard/Flat but does NOT set --radius,
   you can hook it by setting an attribute on <html> or <body>.
   Example: <html data-lj-radius="flat"> ... */
html[data-lj-radius="flat"]{ --lj-radius: 10px; }
html[data-lj-radius="standard"]{ --lj-radius: 16px; }
html[data-lj-radius="rounded"]{ --lj-radius: 24px; }

/* DARK MODE – respects BOTH bootstrap theme + system preference */
@media (prefers-color-scheme: dark){
  :root{
    --lj-surface: rgba(15,23,42,.74);
    --lj-surface-2: rgba(15,23,42,.52);
    --lj-border: rgba(148,163,184,.22);
    --lj-text: rgba(226,232,240,.96);
    --lj-muted: rgba(226,232,240,.68);
    --lj-shadow: 0 18px 60px rgba(0,0,0,.45);
  }
}

/* Bootstrap dark override (this is the one your customizer toggle likely uses) */
html[data-bs-theme="dark"],
body[data-bs-theme="dark"]{
  --lj-surface: rgba(15,23,42,.74);
  --lj-surface-2: rgba(15,23,42,.52);
  --lj-border: rgba(148,163,184,.22);
  --lj-text: rgba(226,232,240,.96);
  --lj-muted: rgba(226,232,240,.68);
  --lj-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* Keep global text stable (prevents “text became white” moments) */
body{
  color: var(--lj-text, var(--lj-font-color));
}
/* =========================
   DREAMY COMPONENT BASE
========================= */

.lj-card,
.right-sidebar .lj-card,
.lj-dash-scope .lj-card,
.folders-modern .lj-card{
  background: var(--lj-surface) !important;
  color: var(--lj-text) !important;
  border: 1px solid var(--lj-border) !important;
  box-shadow: var(--lj-shadow) !important;
  border-radius: var(--lj-radius-card) !important;
  overflow: hidden;
}

.lj-card-header,
.right-sidebar .lj-card-header,
.lj-dash-scope .lj-card-header{
  background: color-mix(in srgb, var(--lj-primary) 10%, transparent) !important;
  border-bottom: 1px solid var(--lj-border) !important;
  color: var(--lj-text) !important;
}

.lj-card-body{ color: var(--lj-text) !important; }

/* Buttons/pills */
.lj-pill-btn,
.lj-todo-btn,
.lj-chip{
  border-radius: var(--lj-radius-pill) !important;
  border: 1px solid var(--lj-border) !important;
  color: var(--lj-text) !important;
  background: color-mix(in srgb, var(--lj-primary) 14%, transparent) !important;
}
.lj-pill-btn.is-active{
  background: color-mix(in srgb, var(--lj-primary) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--lj-primary) 40%, var(--lj-border)) !important;
}

/* Inner panels/items should follow the SAME radius */
.lj-dash-panel,
.lj-dash-item,
.folder-item,
.online-user-item,
.lj-todo-item{
  border-radius: var(--lj-radius-inner) !important;
  border: 1px solid var(--lj-border) !important;
  background: color-mix(in srgb, var(--lj-surface-2) 60%, transparent) !important;
  color: var(--lj-text) !important;
}

/* Muted text */
.lj-dash-sub,
.lj-card-subtitle,
.lj-todo-empty,
.lj-card-list-subtitle,
.text-muted{
  color: var(--lj-muted) !important;
}

/* MODALS should also be theme-aware */
.modal-content,
.lj-modal{
  background: var(--lj-surface) !important;
  color: var(--lj-text) !important;
  border: 1px solid var(--lj-border) !important;
  border-radius: var(--lj-radius-card) !important;
  box-shadow: var(--lj-shadow) !important;
}
.modal-header,
.modal-body,
.modal-footer{
  background: transparent !important;
  color: var(--lj-text) !important;
  border-color: var(--lj-border) !important;
}

/* Backdrop stays dark, but won’t “eat clicks” */
.modal-backdrop{ background: rgba(0,0,0,.75) !important; }

/* Use the background variables from header.php */
body{
  background-color: var(--lj-bg, var(--bs-body-bg));
  background-image: var(--lj-bg-image, none);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Optional overlay layer (so text stays readable) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--lj-bg-overlay, transparent);
  z-index: -1;
}

/* ========== ENHANCED CARD BORDER SYSTEM ========== */
/* Variables for thickness and style – can be overridden per card */
:root {
  --lj-border-width: 1px;
  --lj-border-style: solid;
  --lj-accent-width: 4px;
  --lj-gradient-width: 2px;
}

/* Thickness utilities */
.lj-border-thin   { --lj-border-width: 1px; }
.lj-border-medium { --lj-border-width: 2px; }
.lj-border-thick  { --lj-border-width: 3px; }

/* Border style utilities */
.lj-border-solid  { --lj-border-style: solid; }
.lj-border-dashed { --lj-border-style: dashed; }
.lj-border-dotted { --lj-border-style: dotted; }
.lj-border-double { --lj-border-style: double; }

/* Side‑specific border utilities */
.lj-border-top    { border-top:    var(--lj-border-width) var(--lj-border-style) var(--lj-border); border-right: 0; border-bottom: 0; border-left: 0; }
.lj-border-right  { border-right:  var(--lj-border-width) var(--lj-border-style) var(--lj-border); border-top: 0; border-bottom: 0; border-left: 0; }
.lj-border-bottom { border-bottom: var(--lj-border-width) var(--lj-border-style) var(--lj-border); border-top: 0; border-right: 0; border-left: 0; }
.lj-border-left   { border-left:   var(--lj-border-width) var(--lj-border-style) var(--lj-border); border-top: 0; border-right: 0; border-bottom: 0; }

/* ===== BASE CARD BORDER ===== */
.lj-card-border {
  border: var(--lj-border-width) var(--lj-border-style) var(--lj-border);
  border-radius: var(--lj-radius);
  background: var(--lj-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lj-card-border:hover {
  border-color: var(--lj-primary);
  box-shadow: 0 4px 12px rgba(var(--lj-primary-rgb), 0.15);
}

/* ===== ACCENT BORDER (LEFT SIDE) ===== */
.lj-card-accent {
  position: relative;
  border: var(--lj-border-width) var(--lj-border-style) var(--lj-border);
  border-radius: var(--lj-radius);
  background: var(--lj-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease;
  overflow: hidden;
}

.lj-card-accent::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--lj-accent-width, 4px);
  background: var(--lj-primary);
  border-radius: var(--lj-radius) 0 0 var(--lj-radius);
  opacity: 0.9;
  transition: width 0.2s ease, opacity 0.2s ease;
}

.lj-card-accent:hover {
  box-shadow: 0 4px 12px rgba(var(--lj-primary-rgb), 0.15);
}

.lj-card-accent:hover::before {
  width: calc(var(--lj-accent-width, 4px) + 1px);
  opacity: 1;
}

/* Accent thickness utilities */
.lj-accent-thin  { --lj-accent-width: 2px; }
.lj-accent-thick { --lj-accent-width: 6px; }

/* ===== GRADIENT BORDER ===== */
.lj-card-gradient {
  position: relative;
  border-radius: var(--lj-radius);
  background: var(--lj-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease;
}

.lj-card-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: var(--lj-gradient-width, 2px);
  border-radius: var(--lj-radius);
  background: linear-gradient(
    135deg,
    var(--lj-primary) 0%,
    color-mix(in srgb, var(--lj-primary) 60%, transparent) 100%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.lj-card-gradient:hover {
  box-shadow: 0 4px 12px rgba(var(--lj-primary-rgb), 0.2);
}

.lj-card-gradient:hover::before {
  opacity: 0.9;
}

/* Gradient thickness utilities */
.lj-gradient-thin  { --lj-gradient-width: 1px; }
.lj-gradient-thick { --lj-gradient-width: 3px; }

/* ===== COMBINATION EXAMPLES ===== */
/* 
   Use like:
   <div class="lj-card-border lj-border-dashed lj-border-thick">
   <div class="lj-card-accent lj-accent-thin lj-border-dotted">
   <div class="lj-border-top lj-border-medium lj-border-dashed">
*/

/* =========================================================
   OVERFLOW / RIGHT-WHITESPACE FIX
   - prevents viewport bleed on the right side
   - fixes container-fluid + row negative-margin overflow
   - keeps boxed layout from using scrollbar-inclusive width
========================================================= */
html,
body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body,
.bg-body,
.lj-page,
.dashboard{
  overflow-x: hidden !important;
}

/* keep decorative overlays from creating horizontal paint overflow */
body::before,
.bg-body::before,
.bg-body::after{
  max-width: 100%;
}

/* boxed layout: use content width, not scrollbar width */
html.lj-layout-boxed body.lj-menu-vertical .lj-page{
  margin-left: calc((100% - var(--lj-boxed-width) - var(--lj-rail-collapsed) - var(--lj-rail-inset)) / 2) !important;
  margin-right: auto !important;
}
html.lj-layout-boxed.lj-pref-pinned body.lj-menu-vertical .lj-page{
  margin-left: calc((100% - var(--lj-boxed-width) - var(--lj-rail-expanded) - var(--lj-rail-inset)) / 2) !important;
  margin-right: auto !important;
}

/* full-width containers with px-0 + Bootstrap rows can overflow because rows use negative margins */
.dashboard .container-fluid,
.container-fluid.px-0,
.lj-page .container-fluid{
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip;
}

/* neutralize row bleed when the parent has no horizontal padding */
.dashboard .container-fluid > .row,
.container-fluid.px-0 > .row,
.lj-page .container-fluid > .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* children inside the zeroed rows should keep their inner spacing without pushing page width */
.dashboard .container-fluid > .row > *,
.container-fluid.px-0 > .row > *,
.lj-page .container-fluid > .row > *{
  min-width: 0 !important;
}

/* safety: fixed floating controls should never sit outside viewport */
#lj-fab-customizer{
  right: max(12px, env(safe-area-inset-right, 0px)) !important;
}

/* media and cards should never exceed their columns */
img,
video,
canvas,
svg,
iframe,
.card,
.modal-dialog,
.q-card,
.folder-item{
  max-width: 100%;
}

/* last-resort protection for any accidental 100vw usage elsewhere */
[class*="vw-100"],
[style*="100vw"]{
  max-width: 100% !important;
}


/* =========================================================
   HOTFIX: RIGHT-SIDE WHITESPACE / HORIZONTAL BLEED
   - Prevent viewport bleed from boxed math, Bootstrap row gutters,
     dashboard wrappers, and fixed UI elements.
   - Appended last so it wins.
========================================================= */

html, body{
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body,
.bg-body,
.lj-page,
.dashboard,
main,
.wrapper,
.content,
.container,
.container-fluid{
  max-width: 100% !important;
}

/* Safer clipping where supported */
@supports (overflow: clip){
  html, body, .bg-body, .lj-page, .dashboard{
    overflow-x: clip !important;
  }
}

/* Boxed layout: never use viewport math that can include scrollbar width */
html.lj-layout-boxed body.lj-menu-vertical .lj-page{
  width: min(100%, var(--lj-boxed-width)) !important;
  max-width: min(100%, var(--lj-boxed-width)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html.lj-layout-boxed.lj-pref-pinned body.lj-menu-vertical .lj-page{
  width: min(100%, var(--lj-boxed-width)) !important;
  max-width: min(100%, var(--lj-boxed-width)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Vertical menu reserve space must not create extra page width */
body.lj-menu-vertical{
  box-sizing: border-box !important;
}

/* Dashboard/page rows: Bootstrap negative margins commonly cause the right bleed */
.dashboard .row,
.lj-page .row,
.container .row,
.container-fluid .row{
  margin-right: 0 !important;
  margin-left: 0 !important;
  max-width: 100% !important;
}

.dashboard .row > *,
.lj-page .row > *,
.container .row > *,
.container-fluid .row > *{
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Full-width wrappers should not add phantom width */
.dashboard .container-fluid,
.container-fluid.px-0,
.lj-page .container-fluid,
.lj-page .container{
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Common dashboard two-column areas */
.right-sidebar,
.left-sidebar,
.sidebar,
.content-area,
.main-content{
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Fixed floating customizer button must stay inside viewport */
#lj-fab-customizer{
  right: max(12px, env(safe-area-inset-right, 0px)) !important;
}

/* Prevent decorative overlays from extending layout width */
.bg-body::before,
.bg-body::after,
body::before{
  max-width: 100% !important;
  overflow: hidden !important;
}


/* =========================================================
   LETZJAM CONSOLIDATED CARD + HERO FRAME SYSTEM
   Safe end-of-file overrides so the new system wins while
   you migrate older class names in templates.
========================================================= */

/* ---- Unified shared tokens ---- */
:root{
  --lj-card-bg: var(--lj-surface);
  --lj-card-bg-soft: color-mix(in srgb, var(--lj-surface) 82%, transparent);
  --lj-card-border: color-mix(in srgb, var(--lj-primary) 16%, var(--lj-border));
  --lj-card-border-strong: color-mix(in srgb, var(--lj-primary) 34%, var(--lj-border));
  --lj-card-glow: color-mix(in srgb, var(--lj-primary) 16%, transparent);
  --lj-card-glow-strong: color-mix(in srgb, var(--lj-primary) 28%, transparent);
  --lj-card-shadow: 0 10px 30px rgba(2,6,23,.08);
  --lj-card-shadow-hover: 0 16px 40px rgba(2,6,23,.12);
  --lj-card-radius: var(--lj-radius-lg, 22px);
  --lj-card-radius-inner: var(--lj-radius, 16px);

  --lj-hero-frame-height: clamp(220px, 34vw, 360px);
  --lj-hero-frame-radius: calc(var(--lj-radius-lg, 22px) + 2px);
  --lj-hero-frame-border: color-mix(in srgb, var(--lj-primary) 24%, rgba(255,255,255,.55));
  --lj-hero-frame-fill: color-mix(in srgb, var(--lj-primary) 10%, transparent);
  --lj-hero-frame-fill-2: color-mix(in srgb, white 72%, transparent);
  --lj-hero-frame-glow: color-mix(in srgb, var(--lj-primary) 18%, transparent);
  --lj-hero-frame-glow-strong: color-mix(in srgb, var(--lj-primary) 28%, transparent);
}

/* ---- Single card family ---- */
.lj-card,
.lj-panel,
.card.lj-panel,
.card.lj-widget,
.dashboard-card,
.quick-links-card,
.online-users-card,
.active-tasks-card{
  position: relative;
  background: var(--lj-card-bg) !important;
  color: var(--lj-text) !important;
  border: 1px solid var(--lj-card-border) !important;
  border-radius: var(--lj-card-radius) !important;
  box-shadow: var(--lj-card-shadow) !important;
  overflow: hidden;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease,
    background .2s ease;
}

.lj-card:hover,
.lj-panel:hover,
.card.lj-panel:hover,
.card.lj-widget:hover,
.dashboard-card:hover,
.quick-links-card:hover,
.online-users-card:hover,
.active-tasks-card:hover{
  border-color: var(--lj-card-border-strong) !important;
  box-shadow: var(--lj-card-shadow-hover) !important;
  transform: translateY(-2px);
}

/* cute adaptive border variant */
.lj-card-cute,
.lj-panel-cute,
.card.lj-panel.lj-card-cute,
.card.lj-widget.lj-card-cute{
  background:
    linear-gradient(var(--lj-card-bg), var(--lj-card-bg)) padding-box,
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--lj-primary) 48%, #ffffff 52%),
      color-mix(in srgb, var(--lj-primary) 20%, transparent),
      color-mix(in srgb, var(--lj-primary) 62%, #ffffff 38%)
    ) border-box !important;
  border: 1.5px solid transparent !important;
  box-shadow:
    0 10px 30px rgba(2,6,23,.07),
    0 0 0 1px color-mix(in srgb, var(--lj-primary) 8%, transparent),
    0 0 24px var(--lj-card-glow) !important;
}

.lj-card-cute:hover,
.lj-panel-cute:hover,
.card.lj-panel.lj-card-cute:hover,
.card.lj-widget.lj-card-cute:hover{
  box-shadow:
    0 16px 40px rgba(2,6,23,.11),
    0 0 0 1px color-mix(in srgb, var(--lj-primary) 14%, transparent),
    0 0 30px var(--lj-card-glow-strong) !important;
}

.lj-card-cute::before,
.lj-card-cute::after,
.lj-panel-cute::before,
.lj-panel-cute::after{
  content: "";
  position: absolute;
  width: 74px;
  height: 74px;
  pointer-events: none;
  opacity: .45;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--lj-primary) 22%, #fff 78%) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.9) 0 1.5px, transparent 2.5px);
  background-size: 22px 22px, 30px 30px;
}

.lj-card-cute::before,
.lj-panel-cute::before{
  top: -12px;
  right: -8px;
}

.lj-card-cute::after,
.lj-panel-cute::after{
  left: -10px;
  bottom: -12px;
}

/* shared card anatomy */
.lj-card-header,
.lj-panel .card-header,
.lj-widget .card-header{
  position: relative;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--lj-primary) 8%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--lj-primary) 10%, var(--lj-border)) !important;
  color: var(--lj-text) !important;
  font-weight: 800;
}

.lj-card-body,
.lj-panel .card-body,
.lj-widget .card-body{
  padding: 14px;
  color: var(--lj-text) !important;
  background: transparent !important;
}

.lj-card-footer{
  padding: 12px 14px;
  background: color-mix(in srgb, var(--lj-primary) 4%, transparent) !important;
  border-top: 1px solid color-mix(in srgb, var(--lj-primary) 10%, var(--lj-border)) !important;
}

.lj-card-flat{ box-shadow: none !important; }
.lj-card-glass{
  background: color-mix(in srgb, var(--lj-surface) 74%, transparent) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lj-card-accent{ position: relative; }
.lj-card-accent::after{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--lj-primary) 80%, #fff 20%),
    color-mix(in srgb, var(--lj-primary) 46%, transparent)
  );
  box-shadow: 0 0 14px color-mix(in srgb, var(--lj-primary) 20%, transparent);
}

/* folder rows visually match cards */
.folder-item,
.folder-card,
.folder-row-card{
  background: var(--lj-card-bg) !important;
  color: var(--lj-text) !important;
  border: 1px solid var(--lj-card-border) !important;
  border-radius: var(--lj-card-radius-inner) !important;
  box-shadow: 0 6px 20px rgba(2,6,23,.05) !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.folder-item:hover,
.folder-card:hover,
.folder-row-card:hover{
  border-color: var(--lj-card-border-strong) !important;
  box-shadow: 0 10px 26px rgba(2,6,23,.10) !important;
  transform: translateY(-1px);
}

.folder-item-container.expanded > .folder-item,
.folder-item.is-open,
.folder-item.expanded{
  border-color: color-mix(in srgb, var(--lj-primary) 34%, var(--lj-border)) !important;
  box-shadow:
    0 10px 30px rgba(2,6,23,.08),
    0 0 0 1px color-mix(in srgb, var(--lj-primary) 12%, transparent) !important;
}

/* quick links / list rows use same language */
.lj-card-list-item,
.quick-links-card .list-group-item,
.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;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.lj-card-list-item:hover,
.quick-links-card .list-group-item:hover,
.lj-widget .list-group-item:hover{
  background: color-mix(in srgb, var(--lj-primary) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--lj-primary) 14%, var(--lj-border)) !important;
  transform: translateX(2px);
}

/* ---- Simple hero frame (theme-aware, minimal noise) ---- */
.lj-hero-frame,
.hero-frame,
.lj-simple-hero-frame{
  position: relative;
  width: 100%;
  max-width: 1100px;
  min-height: var(--lj-hero-frame-height);
  margin: 20px auto 28px;
  padding: clamp(18px, 3vw, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--lj-hero-frame-radius);
  border: 1.5px solid transparent;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--lj-hero-frame-fill-2) 72%, transparent),
      color-mix(in srgb, var(--lj-hero-frame-fill) 100%, transparent)
    ) padding-box,
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--lj-primary) 34%, #fff 66%),
      color-mix(in srgb, var(--lj-primary) 16%, transparent),
      color-mix(in srgb, var(--lj-primary) 44%, #fff 56%)
    ) border-box;
  box-shadow:
    0 14px 40px rgba(2,6,23,.08),
    0 0 0 1px color-mix(in srgb, var(--lj-primary) 8%, transparent),
    0 0 26px var(--lj-hero-frame-glow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.lj-hero-frame:hover,
.hero-frame:hover,
.lj-simple-hero-frame:hover{
  transform: translateY(-1px);
  box-shadow:
    0 18px 48px rgba(2,6,23,.12),
    0 0 0 1px color-mix(in srgb, var(--lj-primary) 12%, transparent),
    0 0 34px var(--lj-hero-frame-glow-strong);
}

.lj-hero-frame::before,
.hero-frame::before,
.lj-simple-hero-frame::before{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: calc(var(--lj-hero-frame-radius) - 8px);
  border: 1px solid color-mix(in srgb, var(--lj-primary) 12%, rgba(255,255,255,.48));
  pointer-events: none;
  opacity: .9;
}

.lj-hero-frame::after,
.hero-frame::after,
.lj-simple-hero-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 50% 50%, color-mix(in srgb, var(--lj-primary) 10%, transparent), transparent 72%);
  opacity: .9;
}

.lj-hero-frame > *,
.hero-frame > *,
.lj-simple-hero-frame > *{
  position: relative;
  z-index: 1;
}

.lj-hero-frame.is-empty,
.hero-frame.is-empty,
.lj-simple-hero-frame.is-empty{
  min-height: clamp(180px, 28vw, 300px);
}

@media (max-width: 768px){
  .lj-hero-frame,
  .hero-frame,
  .lj-simple-hero-frame{
    min-height: clamp(180px, 52vw, 240px);
    padding: 18px 14px;
    border-radius: max(18px, calc(var(--lj-radius, 16px) + 2px));
  }

  .lj-hero-frame::before,
  .hero-frame::before,
  .lj-simple-hero-frame::before{
    inset: 8px;
  }
}

/* dark mode tuning */
html[data-bs-theme="dark"] .lj-card,
html[data-theme="dark"] .lj-card,
html[data-color*="dark"] .lj-card,
body.lj-dark .lj-card,
body.dark .lj-card,
.theme-dark .lj-card,
html[data-bs-theme="dark"] .lj-panel,
html[data-theme="dark"] .lj-panel,
html[data-color*="dark"] .lj-panel,
body.lj-dark .lj-panel,
body.dark .lj-panel,
.theme-dark .lj-panel{
  box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
}

html[data-bs-theme="dark"] .lj-card-cute,
html[data-theme="dark"] .lj-card-cute,
html[data-color*="dark"] .lj-card-cute,
body.lj-dark .lj-card-cute,
body.dark .lj-card-cute,
.theme-dark .lj-card-cute,
html[data-bs-theme="dark"] .lj-panel-cute,
html[data-theme="dark"] .lj-panel-cute,
html[data-color*="dark"] .lj-panel-cute,
body.lj-dark .lj-panel-cute,
body.dark .lj-panel-cute,
.theme-dark .lj-panel-cute{
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    0 0 0 1px color-mix(in srgb, var(--lj-primary) 12%, transparent),
    0 0 26px color-mix(in srgb, var(--lj-primary) 20%, transparent) !important;
}

html[data-bs-theme="dark"] .lj-hero-frame,
html[data-theme="dark"] .lj-hero-frame,
html[data-color*="dark"] .lj-hero-frame,
body.lj-dark .lj-hero-frame,
body.dark .lj-hero-frame,
.theme-dark .lj-hero-frame,
html[data-bs-theme="dark"] .hero-frame,
html[data-theme="dark"] .hero-frame,
html[data-color*="dark"] .hero-frame,
body.lj-dark .hero-frame,
body.dark .hero-frame,
.theme-dark .hero-frame{
  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    0 0 0 1px color-mix(in srgb, var(--lj-primary) 14%, transparent),
    0 0 30px color-mix(in srgb, var(--lj-primary) 22%, transparent);
}


/* ===================================================================
   LETZJAM GLOBAL CLEANUP PATCH
   - fixes navbar/profile dropdown clipping
   - makes card action menus open above cards/modals
   - keeps colors theme-aware from primary tokens
   - normalizes common action components without rewriting the whole file
=================================================================== */

/* ---------- THEME-TINTED UTILITY TOKENS ---------- */
:root{
  --lj-primary-soft: color-mix(in srgb, var(--lj-primary) 14%, transparent);
  --lj-primary-softer: color-mix(in srgb, var(--lj-primary) 8%, transparent);
  --lj-primary-border: color-mix(in srgb, var(--lj-primary) 28%, rgba(0,0,0,.08));
  --lj-shadow-soft: 0 10px 30px rgba(2, 6, 23, .08);
  --lj-shadow-pop: 0 16px 40px rgba(2, 6, 23, .14);
  --lj-menu-z: 1085;
  --lj-modal-z: 2000;
}

/* ---------- TOPNAV / PROFILE / DROPDOWN SAFETY ---------- */
.lj-topnav,
.lj-topnav .container,
.lj-topnav .container-fluid,
.lj-topnav .navbar-collapse,
.lj-topnav .navbar-nav,
.lj-topnav .nav-item,
.lj-topnav .dropdown,
.lj-topnav .btn-group{
  overflow: visible !important;
}

.lj-topnav{
  position: sticky;
  top: 0;
  z-index: 1030 !important;
  border-radius: 0 0 var(--lj-radius-lg) var(--lj-radius-lg) !important;
  box-shadow: var(--lj-shadow-pop) !important;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--lj-primary) 90%, #6a5cff 10%) 0%,
      color-mix(in srgb, var(--lj-primary) 66%, #47b6ff 34%) 56%,
      color-mix(in srgb, var(--lj-primary) 52%, #91ddff 48%) 100%
    ) !important;
}

.lj-topnav .dropdown-menu,
.navbar .dropdown-menu{
  z-index: var(--lj-menu-z) !important;
  border-radius: calc(var(--lj-radius) - 2px) !important;
  border: 1px solid var(--lj-primary-border) !important;
  background: color-mix(in srgb, var(--lj-surface) 92%, white 8%) !important;
  color: var(--lj-text) !important;
  box-shadow: var(--lj-shadow-pop) !important;
  overflow: visible !important;
}

html[data-bs-theme="dark"] .lj-topnav .dropdown-menu,
html[data-theme="dark"] .lj-topnav .dropdown-menu,
body.dark .lj-topnav .dropdown-menu,
body.lj-dark .lj-topnav .dropdown-menu{
  background: color-mix(in srgb, var(--lj-surface) 96%, black 4%) !important;
  border-color: rgba(255,255,255,.12) !important;
}

.lj-topnav .dropdown-item{
  color: var(--lj-text) !important;
  border-radius: calc(var(--lj-radius-sm) + 2px);
}

.lj-topnav .dropdown-item:hover,
.lj-topnav .dropdown-item:focus{
  background: var(--lj-primary-soft) !important;
  color: var(--lj-text) !important;
}

/* ---------- GLOBAL ACTION MENU SAFETY ---------- */
.dropdown,
.dropup,
.dropend,
.dropstart,
.btn-group,
.btn-group-vertical{
  position: relative;
}

.dropdown-menu{
  z-index: var(--lj-menu-z) !important;
}

.card,
.card-header,
.card-body,
.card-footer,
.quiz-card,
.quiz-grid,
.quiz-list,
.quiz-item,
.lj-card,
.lj-card-shell,
.lj-card-body,
.lj-card-header,
.table-responsive,
.overflow-hidden,
.position-relative{
  overflow: visible !important;
}

/* Modal sections must NOT inherit overflow-visible, or mobile footers will overlap body content. */
.modal-content{
  overflow: hidden !important;
}
.modal-header{
  overflow: visible !important;
}
.modal-body{
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  min-height: 0 !important;
}
.modal-footer{
  overflow: visible !important;
  position: static !important;
  inset: auto !important;
  bottom: auto !important;
}

.quiz-card,
.lj-card,
.card{
  isolation: isolate;
}

/* common 3-dots / actions button targets */
.card [data-bs-toggle="dropdown"],
.quiz-card [data-bs-toggle="dropdown"],
.lj-card [data-bs-toggle="dropdown"],
.card .dropdown-toggle,
.quiz-card .dropdown-toggle,
.lj-card .dropdown-toggle{
  position: relative;
  z-index: calc(var(--lj-menu-z) + 1);
}

/* ---------- MODALS ABOVE EVERYTHING, MENUS ABOVE MODALS ---------- */
.modal{
  z-index: var(--lj-modal-z) !important;
}
.modal-backdrop{
  z-index: calc(var(--lj-modal-z) - 10) !important;
}
.modal .dropdown-menu{
  z-index: calc(var(--lj-modal-z) + 20) !important;
}

/* ---------- CLEANER THEME-AWARE CARD SURFACES ---------- */
.card,
.lj-card,
.quiz-card,
.modal-content,
.dropdown-menu{
  border-color: var(--lj-primary-border);
}

.card,
.lj-card,
.quiz-card{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--lj-surface) 92%, white 8%),
      color-mix(in srgb, var(--lj-surface) 100%, transparent 0%)
    ) !important;
  box-shadow: var(--lj-shadow-soft);
}

html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .lj-card,
html[data-bs-theme="dark"] .quiz-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .lj-card,
html[data-theme="dark"] .quiz-card,
body.dark .card,
body.dark .lj-card,
body.dark .quiz-card,
body.lj-dark .card,
body.lj-dark .lj-card,
body.lj-dark .quiz-card{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--lj-surface) 96%, white 4%),
      color-mix(in srgb, var(--lj-surface2) 100%, transparent 0%)
    ) !important;
}

/* ---------- COMMON ACTION BUTTONS ---------- */
.lj-btn,
.btn-outline-primary,
.btn-light{
  border-radius: 999px;
}

.btn-primary,
.lj-btn-primary{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--lj-primary) 92%, #6a5cff 8%) 0%,
      color-mix(in srgb, var(--lj-primary) 72%, #47b6ff 28%) 100%
    ) !important;
  border-color: transparent !important;
  color: var(--lj-on-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background: var(--lj-primary-soft) !important;
  border-color: var(--lj-primary-border) !important;
  color: var(--lj-text) !important;
}

/* ---------- MOBILE ---------- */
@media (max-width: 991.98px){
  .lj-topnav .dropdown-menu,
  .navbar .dropdown-menu{
    position: absolute !important;
    inset: auto 0 auto auto;
    min-width: 220px;
    margin-top: .5rem !important;
  }
}

/* ---------- HARD STOP FOR GHOST OVERLAYS BLOCKING CLICKS ---------- */
.lj-rail-wrap{
  pointer-events: none !important;
}
.lj-rail-wrap .lj-rail,
.lj-rail-wrap .lj-rail *{
  pointer-events: auto;
}



/* =========================================================
   GLOBAL MODAL OVERLAP FIX
========================================================= */
.modal,
.modal.show{
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.modal-dialog{
  margin: 1rem auto !important;
  max-width: min(calc(100% - 2rem), var(--bs-modal-width, 500px)) !important;
}

.modal .modal-content{
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100dvh - 2rem) !important;
}

.modal .modal-header{
  flex: 0 0 auto !important;
}

.modal .modal-body{
  flex: 1 1 auto !important;
}

.modal .modal-footer{
  flex: 0 0 auto !important;
  z-index: auto !important;
}

/* Feedback modal */
#feedbackModal .modal-dialog{
  max-width: min(calc(100% - 2rem), 760px) !important;
}

#feedbackModal .modal-content{
  border-radius: 22px !important;
  overflow: hidden !important;
}

#feedbackModal .modal-body{
  padding-bottom: 1rem !important;
}

#feedbackModal #feedbackQuestion,
#feedbackModal #feedbackExplanation,
#feedbackModal .correct-answer-text,
#feedbackModal .you-chose-text,
#feedbackModal #autonextHint,
#feedbackModal #quizTimerModal{
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

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

  .modal .modal-content{
    max-height: calc(100dvh - 1rem) !important;
  }

  .modal .modal-header,
  .modal .modal-body,
  .modal .modal-footer{
    padding: .875rem !important;
  }
}

@media (max-width: 576px){
  #feedbackModal .modal-dialog{
    margin: .5rem auto !important;
    max-width: calc(100% - 1rem) !important;
  }

  #feedbackModal .modal-content{
    max-height: calc(100dvh - 1rem) !important;
    border-radius: 18px !important;
  }

  #feedbackModal .modal-footer .btn,
  #feedbackModal .modal-footer .lj-btn{
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   VERTICAL RAIL SAFETY PATCH
   - keep left rail visible above dashboard/cards
   - enforce content offset so cards do not sit on top of menu
========================================================= */
body.lj-menu-vertical .lj-rail-wrap{
  z-index: 2140 !important;
}

body.lj-menu-vertical .lj-rail{
  position: relative;
  z-index: 2141 !important;
}

/* Re-assert rail spacing late in the cascade */
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 page content below rail stacking context */
body.lj-menu-vertical .lj-page,
body.lj-menu-vertical .dashboard,
body.lj-menu-vertical .dashboard .container-fluid{
  position: relative;
  z-index: 1;
}