/* ============================================================================
   DIGICROME AI - NEURAL LAB DESIGN SYSTEM
   A modern, dark-first UI layer for the Digicrome LMS.
   Loaded LAST so it overrides bootstrap.min.css / app.min.css.
   ----------------------------------------------------------------------------
   SECTIONS
   01. Fonts              11. Forms
   02. Design tokens      12. Tables
   03. Base + ambient     13. Components
   04. Typography         14. Module tiles
   05. Layout shell       15. Custom blocks
   06. Topbar             16. Auth screens
   07. Sidebar            17. Utilities + animations
   08. Page title         18. Responsive
   09. Cards              19. Print
   10. Buttons
   ========================================================================== */

/* -- 01. Fonts ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* -- 02. Design tokens ---------------------------------------------------- */
:root {
  /* Brand ramp */
  --dg-cyan:      #22d3ee;
  --dg-indigo:    #6366f1;
  --dg-violet:    #a855f7;
  --dg-magenta:   #ec4899;
  --dg-emerald:   #34d399;
  --dg-amber:     #fbbf24;
  --dg-rose:      #fb7185;
  --dg-blue:      #38bdf8;

  /* Signature gradients */
  --dg-grad:       linear-gradient(135deg, #22d3ee 0%, #6366f1 48%, #a855f7 100%);
  --dg-grad-soft:  linear-gradient(135deg, rgba(34,211,238,.16) 0%, rgba(99,102,241,.16) 50%, rgba(168,85,247,.16) 100%);
  --dg-grad-warm:  linear-gradient(135deg, #fbbf24 0%, #fb7185 60%, #a855f7 100%);
  --dg-grad-mint:  linear-gradient(135deg, #34d399 0%, #22d3ee 100%);
  --dg-grad-text:  linear-gradient(92deg, #67e8f9 0%, #a5b4fc 45%, #f0abfc 100%);

  /* Surfaces - dark (default) */
  --dg-bg:         #060911;
  --dg-bg-2:       #0a0f1c;
  --dg-surface:    rgba(19, 25, 43, .72);
  --dg-surface-2:  rgba(25, 32, 54, .78);
  --dg-surface-3:  rgba(31, 40, 66, .85);
  --dg-elevated:   rgba(15, 20, 36, .94);
  --dg-line:       rgba(148, 163, 184, .14);
  --dg-line-str:   rgba(148, 163, 184, .26);

  /* Text */
  --dg-text:       #e8ecf7;
  --dg-text-soft:  #aab4cf;
  --dg-text-mute:  #7c88a8;
  --dg-text-dim:   #5b6684;

  /* Effects */
  --dg-blur:       18px;
  --dg-shadow-sm:  0 1px 2px rgba(0,0,0,.35);
  --dg-shadow:     0 10px 30px -12px rgba(2, 6, 23, .85), 0 2px 8px -2px rgba(2,6,23,.5);
  --dg-shadow-lg:  0 28px 70px -24px rgba(2, 6, 23, .95), 0 8px 24px -8px rgba(2,6,23,.6);

  /* Geometry */
  --dg-r-xs: 8px;
  --dg-r-sm: 12px;
  --dg-r:    16px;
  --dg-r-lg: 22px;
  --dg-r-xl: 28px;

  /* Type */
  --dg-font:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --dg-font-disp: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --dg-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Motion */
  --dg-ease:  cubic-bezier(.22, 1, .36, 1);
  --dg-ease-2:cubic-bezier(.4, 0, .2, 1);
  --dg-fast:  .18s;
  --dg-med:   .32s;

  /* Shell metrics - identical to the base template so the collapse /
     sm-sidebar logic already in app.js keeps working. */
  --dg-sidebar: 255px;
  --dg-topbar:  70px;

  /* Bootstrap bridge - remaps the old palette onto the new one */
  --bs-primary: #22d3ee;
  --bs-primary-rgb: 34, 211, 238;
  --bs-body-color: var(--dg-text);
  --bs-border-color: var(--dg-line);
  --bs-text-muted: var(--dg-text-mute);
  --bs-link-color: #67e8f9;
  --bs-link-hover-color: #a5f3fc;
  --bs-input-bg: rgba(15, 20, 36, .7);
  --bs-input-border-color: var(--dg-line-str);
  --bs-heading-color: var(--dg-text);
  --bs-footer-color: var(--dg-text-mute);
  --bs-footer-shadow: none;
  --bs-light: rgba(148,163,184,.10);
  --bs-dark: #e8ecf7;
}

/* Light mode - "Lab Light" */
[data-dg-theme="light"] {
  --dg-bg:         #f4f6fc;
  --dg-bg-2:       #eaeefa;
  --dg-surface:    rgba(255, 255, 255, .86);
  --dg-surface-2:  rgba(255, 255, 255, .96);
  --dg-surface-3:  rgba(238, 242, 252, .96);
  --dg-elevated:   #ffffff;
  --dg-line:       rgba(15, 23, 42, .09);
  --dg-line-str:   rgba(15, 23, 42, .17);

  --dg-text:       #0f172a;
  --dg-text-soft:  #334155;
  --dg-text-mute:  #64748b;
  --dg-text-dim:   #94a3b8;

  --dg-cyan:       #0891b2;
  --dg-grad-text:  linear-gradient(92deg, #0891b2 0%, #4f46e5 45%, #9333ea 100%);

  --dg-shadow-sm:  0 1px 2px rgba(15,23,42,.06);
  --dg-shadow:     0 10px 30px -14px rgba(15, 23, 42, .28), 0 2px 8px -4px rgba(15,23,42,.10);
  --dg-shadow-lg:  0 28px 70px -28px rgba(15, 23, 42, .38);

  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: #4f46e5;
  --bs-link-hover-color: #4338ca;
  --bs-input-bg: #ffffff;
  --bs-dark: #0f172a;
}

/* -- 03. Base + ambient background ---------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

body {
  background-color: var(--dg-bg) !important;
  color: var(--dg-text) !important;
  font-family: var(--dg-font) !important;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Aurora field - soft moving colour behind everything */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(42rem 42rem at 12% 8%,  rgba(34, 211, 238, .16), transparent 62%),
    radial-gradient(38rem 38rem at 88% 4%,  rgba(168, 85, 247, .15), transparent 60%),
    radial-gradient(46rem 46rem at 74% 88%, rgba(99, 102, 241, .14), transparent 62%),
    radial-gradient(30rem 30rem at 22% 82%, rgba(52, 211, 153, .10), transparent 60%);
  filter: blur(16px);
  animation: dgAurora 26s var(--dg-ease-2) infinite alternate;
}

/* Blueprint grid - the "lab" texture */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 184, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 100% 78% at 50% 0%, #000 35%, transparent 88%);
          mask-image: radial-gradient(ellipse 100% 78% at 50% 0%, #000 35%, transparent 88%);
}

[data-dg-theme="light"] body::before { opacity: .8; }
[data-dg-theme="light"] body::after {
  background-image:
    linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px);
}

@keyframes dgAurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.03); }
}

/* Neural particle canvas (injected by digicrome-ai.js) */
#dg-neural {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
}
[data-dg-theme="light"] #dg-neural { opacity: .35; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.32) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(34,211,238,.45), rgba(168,85,247,.45));
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(34,211,238,.75), rgba(168,85,247,.75));
  background-clip: content-box;
}

::selection { background: rgba(34, 211, 238, .32); color: #fff; }

:focus-visible {
  outline: 2px solid var(--dg-cyan);
  outline-offset: 2px;
  border-radius: 6px;
}

/* -- 04. Typography -------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--dg-font-disp) !important;
  color: var(--dg-text) !important;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.25;
}
h1, .h1 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); font-weight: 700; }
h2, .h2 { font-size: clamp(1.5rem, 2.6vw, 2rem);    font-weight: 700; }
h3, .h3 { font-size: 1.375rem; }
h4, .h4 { font-size: 1.1875rem; }
h5, .h5 { font-size: 1.0625rem; }
h6, .h6 { font-size: .9375rem; }

p { color: var(--dg-text-soft); }
a { color: var(--bs-link-color); text-decoration: none; transition: color var(--dg-fast) var(--dg-ease); }
a:hover { color: var(--bs-link-hover-color); }

.text-muted { color: var(--dg-text-mute) !important; }
b, strong { font-weight: 650; }
small, .small { font-size: .8125rem; }
code, kbd, pre, samp, .font-mono { font-family: var(--dg-font-mono) !important; }
label, .form-label { color: var(--dg-text-soft); font-weight: 500; font-size: .8125rem; margin-bottom: .35rem; }

/* Gradient headline utility */
.dg-gradient-text {
  background: var(--dg-grad-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* Eyebrow / kicker */
.dg-kicker {
  font-family: var(--dg-font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dg-cyan);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.dg-kicker::before {
  content: "";
  width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--dg-cyan));
}

/* -- 05. Layout shell ------------------------------------------------------ */
/* No z-index here on purpose. A z-index would make the wrapper a stacking
   context, and every .modal inside it (z-index 1055) would then be outranked
   by Bootstrap's .modal-backdrop (1050), which is appended to <body> and so
   ranks at the root - the backdrop ended up painted OVER the dialog, dimming
   and blurring the very thing it is meant to sit behind. The background
   layers this used to lift the wrapper above (body::before/::after,
   #dg-neural) all sit at negative z-index, so plain `position: relative` is
   already enough. */
#layout-wrapper { position: relative; }

/* Sticky footer.
   The base template floats .footer with `position:absolute; bottom:0` inside
   a .page-content that carries a matching bottom padding. On short pages that
   combination left ~130px of dead scroll below the content. Laying the shell
   out as a flex column instead means the footer follows the content directly
   and a short page fills the viewport exactly - no phantom scroll. */
.main-content {
  overflow: visible !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-content {
  flex: 1 0 auto;
  padding: calc(var(--dg-topbar) + 26px) 26px 32px 26px !important;
  animation: dgPageIn .5s var(--dg-ease) both;
}
@keyframes dgPageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.container-fluid { max-width: 1720px; }

.footer {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  height: auto !important;
  flex: 0 0 auto;
  padding: 1.1rem 26px !important;
  background: transparent !important;
  border-top: 1px solid var(--dg-line);
  color: var(--dg-text-mute) !important;
  box-shadow: none !important;
  font-size: .8125rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.footer .container-fluid { padding-left: 0; padding-right: 0; }

/* -- 06. Topbar ------------------------------------------------------------ */
#page-topbar {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 10px 18px 0 18px;
  transition: padding var(--dg-med) var(--dg-ease);
}

#page-topbar .navbar-header {
  height: calc(var(--dg-topbar) - 12px);
  border-radius: var(--dg-r);
  background: var(--dg-surface);
  -webkit-backdrop-filter: blur(var(--dg-blur)) saturate(160%);
          backdrop-filter: blur(var(--dg-blur)) saturate(160%);
  border: 1px solid var(--dg-line);
  box-shadow: var(--dg-shadow);
  padding: 0 14px 0 8px;
  transition: box-shadow var(--dg-med) var(--dg-ease), background var(--dg-med) var(--dg-ease);
}

/* Condensed state, toggled by JS on scroll */
body.dg-scrolled #page-topbar { padding-top: 6px; }
body.dg-scrolled #page-topbar .navbar-header {
  background: var(--dg-elevated);
  box-shadow: var(--dg-shadow-lg);
  border-color: var(--dg-line-str);
}

.navbar-header .navbar-brand-box { background: transparent !important; }

.header-item {
  height: auto !important;
  color: var(--dg-text-soft) !important;
  border-radius: var(--dg-r-xs) !important;
  transition: background var(--dg-fast) var(--dg-ease), color var(--dg-fast) var(--dg-ease), transform var(--dg-fast) var(--dg-ease);
}
.header-item:hover {
  background: var(--dg-surface-3) !important;
  color: var(--dg-text) !important;
  transform: translateY(-1px);
}
.header-item svg { stroke-width: 1.8; }

.noti-icon .noti-dot {
  box-shadow: 0 0 0 3px rgba(251, 113, 133, .22);
  animation: dgPulse 2s var(--dg-ease-2) infinite;
}
@keyframes dgPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(251,113,133,.22); }
  50%      { box-shadow: 0 0 0 7px rgba(251,113,133, 0); }
}

.header-profile-user {
  width: 34px; height: 34px;
  object-fit: cover;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--dg-bg-2), var(--dg-bg-2)) padding-box,
    var(--dg-grad) border-box;
  transition: transform var(--dg-fast) var(--dg-ease);
}
.header-item:hover .header-profile-user { transform: scale(1.06); }
.user-item-desc .user-name { color: var(--dg-text); font-weight: 600; font-size: .875rem; }

.vertical-menu-btn { color: var(--dg-text-soft) !important; border-radius: var(--dg-r-xs) !important; }
.vertical-menu-btn:hover { background: var(--dg-surface-3) !important; color: var(--dg-cyan) !important; }

/* The legacy "Notification" pill in the header */
#page-topbar .header-item.btn.pt-4 {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  font-weight: 600;
  font-size: .8125rem;
  border: 1px solid var(--dg-line);
  background: var(--dg-surface-2) !important;
}
#page-topbar .header-item.btn.pt-4 .badge {
  top: 2px !important;
  border-radius: 99px !important;
  background: var(--dg-grad-warm) !important;
  font-family: var(--dg-font-mono);
  box-shadow: 0 4px 12px -4px rgba(236,72,153,.7);
}

/* Theme toggle (injected by JS) */
.dg-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  margin: 0 4px;
  border: 1px solid var(--dg-line);
  background: var(--dg-surface-2);
  color: var(--dg-text-soft);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--dg-fast) var(--dg-ease);
}
.dg-theme-toggle:hover {
  color: var(--dg-amber);
  border-color: rgba(251,191,36,.4);
  box-shadow: 0 0 0 3px rgba(251,191,36,.12);
  transform: translateY(-1px);
}

/* Command palette trigger */
.dg-cmdk {
  display: none;
  align-items: center;
  gap: .55rem;
  height: 38px;
  padding: 0 .7rem 0 .8rem;
  margin-right: .35rem;
  border: 1px solid var(--dg-line);
  background: var(--dg-surface-2);
  color: var(--dg-text-mute);
  border-radius: 10px;
  font-size: .8125rem;
  cursor: pointer;
  transition: all var(--dg-fast) var(--dg-ease);
}
.dg-cmdk:hover { border-color: rgba(34,211,238,.45); color: var(--dg-text); }
.dg-cmdk kbd {
  font-family: var(--dg-font-mono);
  font-size: .6875rem;
  padding: .1rem .35rem;
  border-radius: 5px;
  border: 1px solid var(--dg-line-str);
  background: var(--dg-surface-3);
  color: var(--dg-text-mute);
}
@media (min-width: 992px) { .dg-cmdk { display: inline-flex; } }

/* -- 07. Sidebar ----------------------------------------------------------- */
.vertical-menu {
  background: var(--dg-elevated) !important;
  border-right: 1px solid var(--dg-line) !important;
  -webkit-backdrop-filter: blur(var(--dg-blur)) saturate(150%);
          backdrop-filter: blur(var(--dg-blur)) saturate(150%);
  box-shadow: 1px 0 0 rgba(255,255,255,.02), 18px 0 60px -30px rgba(0,0,0,.8);
}
[data-dg-theme="light"] .vertical-menu { box-shadow: 12px 0 40px -30px rgba(15,23,42,.35); }

/* Glowing hairline down the sidebar edge */
.vertical-menu::after {
  content: "";
  position: absolute;
  top: 0; right: -1px; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(34,211,238,.45) 18%, rgba(168,85,247,.45) 62%, transparent);
  pointer-events: none;
}

.vertical-menu .navbar-brand-box {
  background: transparent !important;
  border-bottom: 1px solid var(--dg-line);
  box-shadow: none !important;
}

#sidebar-menu { padding: 14px 12px 24px 12px; }

#sidebar-menu ul li a {
  color: var(--dg-text-mute) !important;
  font-family: var(--dg-font) !important;
  font-size: .8438rem !important;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: .68rem .8rem !important;
  border-radius: 11px;
  margin-bottom: 3px;
  display: flex !important;
  align-items: center;
  gap: .7rem;
  position: relative;
  overflow: hidden;
  transition: color var(--dg-fast) var(--dg-ease), background var(--dg-fast) var(--dg-ease), transform var(--dg-fast) var(--dg-ease);
}

/* Sliding gradient wash on hover */
#sidebar-menu ul li a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dg-grad-soft);
  opacity: 0;
  transition: opacity var(--dg-fast) var(--dg-ease);
}
#sidebar-menu ul li a:hover::before { opacity: 1; }

#sidebar-menu ul li a:hover {
  color: var(--dg-text) !important;
  transform: translateX(3px);
}

#sidebar-menu ul li a .icon,
#sidebar-menu ul li a svg {
  width: 18px; height: 18px;
  min-width: 18px;
  margin: 0 !important;
  stroke-width: 1.9;
  color: var(--dg-text-dim);
  transition: color var(--dg-fast) var(--dg-ease), transform var(--dg-fast) var(--dg-ease);
  position: relative;
  z-index: 1;
}
#sidebar-menu ul li a .menu-item { position: relative; z-index: 1; }
#sidebar-menu ul li a:hover svg { color: var(--dg-cyan); transform: scale(1.12); }

/* Active item */
#sidebar-menu ul li a.active,
#sidebar-menu ul li.mm-active > a {
  color: #fff !important;
  background: var(--dg-grad-soft);
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.28);
}
[data-dg-theme="light"] #sidebar-menu ul li a.active,
[data-dg-theme="light"] #sidebar-menu ul li.mm-active > a { color: #0f172a !important; }

#sidebar-menu ul li a.active svg,
#sidebar-menu ul li.mm-active > a svg { color: var(--dg-cyan); }

/* Active marker rail */
#sidebar-menu ul li a.active::after {
  content: "";
  position: absolute;
  left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  border-radius: 0 4px 4px 0;
  background: var(--dg-grad);
  box-shadow: 0 0 12px rgba(34,211,238,.8);
}

/* Section headings injected by JS */
.dg-nav-section {
  font-family: var(--dg-font-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dg-text-dim);
  padding: 1.1rem .85rem .4rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
}
.dg-nav-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--dg-line-str), transparent);
}
body[data-sidebar-size="sm"] .dg-nav-section { display: none; }

/* Referral banner at the bottom of the rail */
#sidebar-menu > a img {
  border-radius: var(--dg-r-sm);
  border: 1px solid var(--dg-line);
  transition: transform var(--dg-med) var(--dg-ease), box-shadow var(--dg-med) var(--dg-ease);
}
#sidebar-menu > a:hover img {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 34px -18px rgba(34,211,238,.7);
}
body[data-sidebar-size="sm"] #sidebar-menu > a { display: none; }

/* Collapsed rail */
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu ul li a { justify-content: center; }
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu ul li a:hover { transform: none; }

/* Sidebar user card (injected by JS) */
.dg-rail-user {
  margin: 0 4px 10px;
  padding: .75rem .8rem;
  border-radius: var(--dg-r-sm);
  border: 1px solid var(--dg-line);
  background: var(--dg-surface);
  display: flex;
  align-items: center;
  gap: .65rem;
}
.dg-rail-user img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.dg-rail-user .dg-rail-name { font-size: .8125rem; font-weight: 600; color: var(--dg-text); line-height: 1.2; }
.dg-rail-user .dg-rail-role {
  font-family: var(--dg-font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dg-cyan);
}
body[data-sidebar-size="sm"] .dg-rail-user { display: none; }

/* -- 08. Page title / breadcrumb ------------------------------------------- */
.page-title-box {
  padding: 0 0 1.35rem 0 !important;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--dg-line);
  position: relative;
}
.page-title-box::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 84px; height: 2px;
  border-radius: 2px;
  background: var(--dg-grad);
  box-shadow: 0 0 14px rgba(34,211,238,.55);
}
.page-title-box h4 {
  font-family: var(--dg-font-disp) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  text-transform: none;
  margin: 0;
}

.breadcrumb {
  background: var(--dg-surface);
  border: 1px solid var(--dg-line);
  border-radius: 99px;
  padding: .38rem .95rem !important;
  font-size: .78rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--dg-text-dim); content: "/"; }
.breadcrumb-item a { color: var(--dg-text-mute); }
.breadcrumb-item a:hover { color: var(--dg-cyan); }
.breadcrumb-item.active { color: var(--dg-text); font-weight: 550; }

/* -- 09. Cards -------------------------------------------------------------- */
.card {
  background: var(--dg-surface) !important;
  border: 1px solid var(--dg-line) !important;
  border-radius: var(--dg-r-lg) !important;
  box-shadow: var(--dg-shadow) !important;
  -webkit-backdrop-filter: blur(var(--dg-blur)) saturate(150%);
          backdrop-filter: blur(var(--dg-blur)) saturate(150%);
  overflow: hidden;
  position: relative;
  margin-bottom: 1.5rem;
  transition: transform var(--dg-med) var(--dg-ease),
              box-shadow var(--dg-med) var(--dg-ease),
              border-color var(--dg-med) var(--dg-ease);
}

/* Top light seam */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  pointer-events: none;
}
[data-dg-theme="light"] .card::before { display: none; }

.card:hover {
  transform: translateY(-3px);
  border-color: var(--dg-line-str) !important;
  box-shadow: var(--dg-shadow-lg) !important;
}

.card-body { padding: 1.5rem; position: relative; z-index: 1; }

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--dg-line) !important;
  padding: 1.1rem 1.5rem !important;
  font-family: var(--dg-font-disp);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--dg-text) !important;
  letter-spacing: -0.015em;
}
.card-footer {
  background: rgba(148,163,184,.04) !important;
  border-top: 1px solid var(--dg-line) !important;
  padding: 1rem 1.5rem !important;
}
.card-title { font-family: var(--dg-font-disp); font-weight: 600; }

/* Accent variants */
.dg-card-accent::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--dg-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .55;
  pointer-events: none;
}

/* -- 10. Buttons ------------------------------------------------------------ */
.btn {
  font-family: var(--dg-font) !important;
  font-weight: 600 !important;
  font-size: .8438rem !important;
  letter-spacing: -0.005em;
  border-radius: 11px !important;
  padding: .58rem 1.15rem !important;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: transform var(--dg-fast) var(--dg-ease),
              box-shadow var(--dg-fast) var(--dg-ease),
              filter var(--dg-fast) var(--dg-ease),
              background var(--dg-fast) var(--dg-ease);
}
.btn:active { transform: translateY(1px) scale(.99); }

/* Sheen sweep on hover */
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transition: left .55s var(--dg-ease);
  pointer-events: none;
}
.btn:hover::after { left: 130%; }

.btn-primary,
.btn-aniket {
  background: var(--dg-grad) !important;
  border: 0 !important;
  color: #05121b !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 22px -10px rgba(34,211,238,.85), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover,
.btn-aniket:hover {
  color: #05121b !important;
  filter: brightness(1.08) saturate(1.1);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(99,102,241,.85);
}
.btn-primary:focus, .btn-primary:active,
.btn-aniket:focus, .btn-aniket:active {
  background: var(--dg-grad) !important;
  color: #05121b !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.28) !important;
}

.btn-info {
  background: var(--dg-grad-mint) !important;
  border: 0 !important;
  color: #04231b !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 22px -10px rgba(52,211,153,.8);
}
.btn-info:hover { color: #04231b !important; transform: translateY(-2px); filter: brightness(1.07); }

.btn-success {
  background: linear-gradient(135deg, #34d399, #10b981) !important;
  border: 0 !important; color: #04231b !important;
}
.btn-danger {
  background: linear-gradient(135deg, #fb7185, #e11d48) !important;
  border: 0 !important; color: #fff !important;
}
.btn-warning {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  border: 0 !important; color: #2a1a00 !important;
}
.btn-secondary {
  background: var(--dg-surface-3) !important;
  border: 1px solid var(--dg-line-str) !important;
  color: var(--dg-text) !important;
}
.btn-dark {
  background: var(--dg-elevated) !important;
  border: 1px solid var(--dg-line-str) !important;
  color: var(--dg-text) !important;
}
.btn-light {
  background: var(--dg-surface-3) !important;
  border: 1px solid var(--dg-line) !important;
  color: var(--dg-text) !important;
}
.btn-link { color: var(--dg-cyan) !important; text-decoration: none; }
.btn-link:hover { color: #a5f3fc !important; }

/* Outline buttons */
.btn-outline-primary {
  border: 1px solid rgba(34,211,238,.5) !important;
  color: var(--dg-cyan) !important;
  background: rgba(34,211,238,.06) !important;
}
.btn-outline-primary:hover {
  background: var(--dg-grad) !important;
  color: #05121b !important;
  border-color: transparent !important;
}

/* Ghost / glass button utility */
.dg-btn-ghost {
  background: var(--dg-surface-2) !important;
  border: 1px solid var(--dg-line-str) !important;
  color: var(--dg-text) !important;
}
.dg-btn-ghost:hover {
  border-color: rgba(34,211,238,.5) !important;
  color: var(--dg-cyan) !important;
  transform: translateY(-2px);
}

/* Kill the legacy square corners used across the app */
.rounded-0 { border-radius: 11px !important; }
.btn-sm { padding: .38rem .8rem !important; font-size: .78rem !important; border-radius: 9px !important; }
.btn-lg { padding: .8rem 1.6rem !important; font-size: .95rem !important; border-radius: 14px !important; }

/* -- 11. Forms -------------------------------------------------------------- */
.form-control, .form-select, .custom-select, textarea, input[type="text"],
input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="file"], input[type="search"] {
  background-color: var(--bs-input-bg) !important;
  border: 1px solid var(--dg-line-str) !important;
  color: var(--dg-text) !important;
  border-radius: 11px !important;
  padding: .6rem .85rem !important;
  font-size: .875rem !important;
  font-family: var(--dg-font) !important;
  transition: border-color var(--dg-fast) var(--dg-ease),
              box-shadow var(--dg-fast) var(--dg-ease),
              background var(--dg-fast) var(--dg-ease);
}
.form-control::placeholder, textarea::placeholder { color: var(--dg-text-dim); }

.form-control:focus, .form-select:focus, textarea:focus,
input:focus:not([type="checkbox"]):not([type="radio"]) {
  border-color: rgba(34,211,238,.65) !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.16) !important;
  background-color: var(--dg-surface-2) !important;
  outline: none;
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right .8rem center !important;
  background-size: 14px 11px !important;
  padding-right: 2.4rem !important;
}
.form-select option { background: var(--dg-elevated); color: var(--dg-text); }

.form-check-input {
  background-color: var(--dg-surface-3);
  border: 1px solid var(--dg-line-str);
  width: 1.05em; height: 1.05em;
  margin-top: .22em;
}
.form-check-input:checked {
  background-color: var(--dg-cyan);
  border-color: var(--dg-cyan);
  box-shadow: 0 0 10px rgba(34,211,238,.55);
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(34,211,238,.2); border-color: var(--dg-cyan); }
.form-check label { color: var(--dg-text-soft); }

/* Floating labels used on the auth screens */
.form-floating > label { color: var(--dg-text-mute); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--dg-cyan); }
.form-floating-custom .form-floating-icon { color: var(--dg-text-mute); }
.form-floating-custom .form-control:focus ~ .form-floating-icon { color: var(--dg-cyan); }

.invalid-feedback { color: var(--dg-rose); font-size: .78rem; }
.is-invalid { border-color: rgba(251,113,133,.7) !important; }

.input-group-text {
  background: var(--dg-surface-3) !important;
  border: 1px solid var(--dg-line-str) !important;
  color: var(--dg-text-mute) !important;
  border-radius: 11px;
}

/* Search box in the topbar dropdown */
.search-box .form-control { background-color: var(--dg-surface-3) !important; border-radius: 99px !important; }
.search-box .search-icon { color: var(--dg-text-dim); }

/* -- 12. Tables ------------------------------------------------------------- */
.table {
  background: transparent !important;
  color: var(--dg-text) !important;
  border-color: var(--dg-line) !important;
  --bs-table-bg: transparent;
  --bs-table-color: var(--dg-text);
  --bs-table-border-color: var(--dg-line);
  --bs-table-striped-bg: rgba(148,163,184,.05);
  --bs-table-striped-color: var(--dg-text);
  --bs-table-hover-bg: rgba(34,211,238,.07);
  --bs-table-hover-color: var(--dg-text);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--dg-r);
}

.table > :not(caption) > * > * {
  background: transparent !important;
  color: inherit;
  border-bottom-color: var(--dg-line) !important;
  padding: .85rem 1rem;
  vertical-align: middle;
}

.table thead th {
  background: var(--dg-surface-3) !important;
  color: var(--dg-text-mute) !important;
  font-family: var(--dg-font-mono);
  font-size: .6875rem !important;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--dg-line-str) !important;
  white-space: nowrap;
}

.table tbody tr { transition: background var(--dg-fast) var(--dg-ease); }
.table tbody tr:hover > * { background: rgba(34,211,238,.06) !important; }
.table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0 !important; }
.table-responsive { border-radius: var(--dg-r); }

/* Wrap bare tables in a glass panel */
.dg-table-wrap {
  background: var(--dg-surface);
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-r-lg);
  box-shadow: var(--dg-shadow);
  overflow: hidden;
  -webkit-backdrop-filter: blur(var(--dg-blur));
          backdrop-filter: blur(var(--dg-blur));
}
.dg-table-wrap .table { margin-bottom: 0; }

/* -- 13. Components --------------------------------------------------------- */
/* Badges */
.badge {
  font-family: var(--dg-font-mono);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .04em;
  padding: .34em .7em;
  border-radius: 7px;
}
.badge.bg-danger  { background: linear-gradient(135deg,#fb7185,#e11d48) !important; }
.badge.bg-success { background: linear-gradient(135deg,#34d399,#059669) !important; color:#04231b !important; }
.badge.bg-primary { background: var(--dg-grad) !important; color:#05121b !important; }
.badge.bg-warning { background: linear-gradient(135deg,#fbbf24,#f59e0b) !important; color:#2a1a00 !important; }
.badge.bg-info    { background: linear-gradient(135deg,#38bdf8,#0ea5e9) !important; color:#04202b !important; }
.badge-soft-success { background: rgba(52,211,153,.15) !important; color: var(--dg-emerald) !important; }
.badge-soft-danger  { background: rgba(251,113,133,.15) !important; color: var(--dg-rose) !important; }
.badge-soft-primary { background: rgba(34,211,238,.15) !important; color: var(--dg-cyan) !important; }
.badge-soft-warning { background: rgba(251,191,36,.15) !important; color: var(--dg-amber) !important; }

/* Alerts */
.alert {
  border-radius: var(--dg-r-sm) !important;
  border: 1px solid var(--dg-line) !important;
  background: var(--dg-surface-2) !important;
  color: var(--dg-text) !important;
  padding: .85rem 1.1rem;
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--dg-grad);
}
.alert-digi {
  background: var(--dg-grad-soft) !important;
  border-color: rgba(34,211,238,.24) !important;
  color: var(--dg-text) !important;
  border-radius: var(--dg-r-sm) !important;
  font-weight: 550;
  font-size: .8438rem;
}
.alert-digi::before { background: var(--dg-grad-mint); }
.text-digi { color: var(--dg-cyan) !important; }
.alert-success { background: rgba(52,211,153,.10) !important; border-color: rgba(52,211,153,.28) !important; }
.alert-success::before { background: var(--dg-emerald); }
.alert-danger  { background: rgba(251,113,133,.10) !important; border-color: rgba(251,113,133,.28) !important; }
.alert-danger::before { background: var(--dg-rose); }
.alert-warning { background: rgba(251,191,36,.10) !important; border-color: rgba(251,191,36,.28) !important; }
.alert-warning::before { background: var(--dg-amber); }
.alert-info    { background: rgba(56,189,248,.10) !important; border-color: rgba(56,189,248,.28) !important; }
.alert-info::before { background: var(--dg-blue); }

/* Dropdowns */
.dropdown-menu {
  background: var(--dg-elevated) !important;
  border: 1px solid var(--dg-line-str) !important;
  border-radius: var(--dg-r) !important;
  box-shadow: var(--dg-shadow-lg) !important;
  padding: .4rem !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%);
          backdrop-filter: blur(22px) saturate(160%);
  animation: dgDrop .22s var(--dg-ease) both;
}
@keyframes dgDrop {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.dropdown-item {
  color: var(--dg-text-soft) !important;
  border-radius: 9px;
  padding: .55rem .75rem !important;
  font-size: .8438rem;
  transition: background var(--dg-fast) var(--dg-ease), color var(--dg-fast) var(--dg-ease);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--dg-grad-soft) !important;
  color: var(--dg-text) !important;
}
.dropdown-menu .bg-aniket {
  background: var(--dg-grad) !important;
  border-radius: var(--dg-r-sm);
  margin: -.4rem -.4rem .4rem;
  border: 0 !important;
}
.dropdown-menu .bg-aniket h6, .dropdown-menu .bg-aniket p { color: #05121b !important; }
.dropdown-divider { border-color: var(--dg-line); }

/* Notification items */
.notification-item .d-flex { padding: .75rem .85rem; border-radius: 11px; border-bottom-color: var(--dg-line) !important; }
.notification-item:hover .d-flex { background: var(--dg-grad-soft); }
.notification-item h6 { font-size: .8438rem; }
.avatar-title { border-radius: 12px !important; }
.avatar-sm { width: 38px; height: 38px; }

/* Modals */
.modal-content {
  background: var(--dg-elevated) !important;
  border: 1px solid var(--dg-line-str) !important;
  border-radius: var(--dg-r-lg) !important;
  box-shadow: var(--dg-shadow-lg) !important;
  color: var(--dg-text);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
          backdrop-filter: blur(24px) saturate(170%);
  overflow: hidden;
}
.modal-header {
  background: transparent !important;
  border-bottom: 1px solid var(--dg-line) !important;
  padding: 1.15rem 1.5rem !important;
  color: var(--dg-text) !important;
}
.modal-header.bg-primary { background: var(--dg-grad) !important; }
.modal-header.bg-primary .modal-title { color: #05121b !important; }
.modal-title { font-family: var(--dg-font-disp); font-weight: 650; font-size: 1.05rem; }
.modal-body { padding: 1.5rem !important; }
.modal-footer { border-top: 1px solid var(--dg-line) !important; padding: 1rem 1.5rem !important; }
.modal-backdrop.show { opacity: .62; }
.btn-close {
  filter: invert(1) grayscale(1) brightness(2.2);
  opacity: .6;
  transition: opacity var(--dg-fast) var(--dg-ease), transform var(--dg-fast) var(--dg-ease);
}
.btn-close:hover { opacity: 1; transform: rotate(90deg); }
[data-dg-theme="light"] .btn-close { filter: none; }

/* Tabs / pills */
.nav-tabs { border-bottom: 1px solid var(--dg-line); gap: .25rem; }
.nav-tabs .nav-link {
  color: var(--dg-text-mute);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 10px 10px 0 0;
  font-weight: 550;
  font-size: .875rem;
  padding: .65rem 1rem;
  transition: all var(--dg-fast) var(--dg-ease);
}
.nav-tabs .nav-link:hover { color: var(--dg-text); background: var(--dg-surface-3); }
.nav-tabs .nav-link.active {
  color: var(--dg-cyan) !important;
  background: transparent;
  border-bottom-color: var(--dg-cyan);
}
.nav-pills .nav-link { border-radius: 10px; color: var(--dg-text-mute); font-weight: 550; }
.nav-pills .nav-link.active { background: var(--dg-grad) !important; color: #05121b !important; }

/* Pagination */
.pagination { gap: .3rem; }
.page-link {
  background: var(--dg-surface-2) !important;
  border: 1px solid var(--dg-line) !important;
  color: var(--dg-text-soft) !important;
  border-radius: 10px !important;
  padding: .45rem .75rem;
  font-size: .8125rem;
  font-family: var(--dg-font-mono);
  transition: all var(--dg-fast) var(--dg-ease);
}
.page-link:hover {
  background: var(--dg-surface-3) !important;
  color: var(--dg-cyan) !important;
  border-color: rgba(34,211,238,.4) !important;
  transform: translateY(-1px);
}
.page-item.active .page-link {
  background: var(--dg-grad) !important;
  border-color: transparent !important;
  color: #05121b !important;
  box-shadow: 0 6px 16px -8px rgba(34,211,238,.9);
}
.page-item.disabled .page-link { opacity: .4; }

/* Progress */
.progress {
  background: var(--dg-surface-3) !important;
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}
.progress-bar {
  background: var(--dg-grad) !important;
  border-radius: 99px;
  position: relative;
  overflow: hidden;
}
.progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: dgShimmer 2.2s linear infinite;
}
@keyframes dgShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Accordion */
.accordion-item { background: var(--dg-surface) !important; border: 1px solid var(--dg-line) !important; border-radius: var(--dg-r-sm) !important; margin-bottom: .6rem; overflow: hidden; }
.accordion-button { background: transparent !important; color: var(--dg-text) !important; font-weight: 600; font-family: var(--dg-font-disp); box-shadow: none !important; }
.accordion-button:not(.collapsed) { background: var(--dg-grad-soft) !important; color: var(--dg-cyan) !important; }
.accordion-body { color: var(--dg-text-soft); }

/* List groups */
.list-group-item {
  background: var(--dg-surface) !important;
  border-color: var(--dg-line) !important;
  color: var(--dg-text) !important;
}

/* SweetAlert2 skin */
.swal2-popup {
  background: var(--dg-elevated) !important;
  color: var(--dg-text) !important;
  border: 1px solid var(--dg-line-str) !important;
  border-radius: var(--dg-r-lg) !important;
  font-family: var(--dg-font) !important;
  box-shadow: var(--dg-shadow-lg) !important;
}
.swal2-title, .swal2-html-container { color: var(--dg-text) !important; }
.swal2-styled.swal2-confirm { background: var(--dg-grad) !important; color: #05121b !important; border-radius: 11px !important; font-weight: 700; }

/* Horizontal rules */
hr { border-color: var(--dg-line); opacity: 1; }

/* -- 14. Module tiles (category_list) --------------------------------------- */
a.category_list {
  background: var(--dg-surface) !important;
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-r-lg) !important;
  box-shadow: var(--dg-shadow) !important;
  min-height: 132px;
  margin-bottom: 24px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(var(--dg-blur));
          backdrop-filter: blur(var(--dg-blur));
  transition: transform var(--dg-med) var(--dg-ease),
              box-shadow var(--dg-med) var(--dg-ease),
              border-color var(--dg-med) var(--dg-ease) !important;
}

/* Colour bloom that fades in on hover */
a.category_list::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dg-grad-soft);
  opacity: 0;
  transition: opacity var(--dg-med) var(--dg-ease);
  pointer-events: none;
}
a.category_list:hover::before,
a.category_list:focus::before { opacity: 1; }

/* Corner glow */
a.category_list::after {
  content: "";
  position: absolute;
  top: -40%; right: -20%;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.28), transparent 68%);
  opacity: 0;
  transition: opacity var(--dg-med) var(--dg-ease), transform var(--dg-med) var(--dg-ease);
  pointer-events: none;
}
a.category_list:hover::after { opacity: 1; transform: scale(1.15); }

a.category_list:hover,
a.category_list:active,
a.category_list:focus {
  background: var(--dg-surface-2) !important;
  border-color: rgba(34,211,238,.4);
  transform: translateY(-5px);
  box-shadow: 0 26px 52px -24px rgba(34,211,238,.55), var(--dg-shadow-lg) !important;
}

a.category_list div.image_area {
  width: 56px; height: 56px;
  right: 18px;
  z-index: 2;
}
a.category_list div.image_area > img {
  border-radius: 14px !important;
  padding: 11px !important;
  border: 1px solid var(--dg-line-str) !important;
  box-shadow: 0 8px 20px -12px rgba(0,0,0,.9);
  transition: transform var(--dg-med) var(--dg-ease), box-shadow var(--dg-med) var(--dg-ease) !important;
}
a.category_list:hover div.image_area > img,
a.category_list:focus div.image_area > img,
a.category_list:active div.image_area > img {
  background: inherit !important;
  border-color: rgba(255,255,255,.4) !important;
  transform: translateY(-2px) rotate(-4deg) scale(1.06);
}

/* Per-tile accent chips, restyled to the AI palette */
a.category_list.back-0  div.image_area > img { background: linear-gradient(135deg,#22d3ee,#0ea5e9) !important; }
a.category_list.back-1  div.image_area > img { background: linear-gradient(135deg,#fb7185,#e11d48) !important; }
a.category_list.back-2  div.image_area > img { background: linear-gradient(135deg,#34d399,#059669) !important; }
a.category_list.back-3  div.image_area > img { background: linear-gradient(135deg,#38bdf8,#6366f1) !important; }
a.category_list.back-4  div.image_area > img { background: linear-gradient(135deg,#fbbf24,#f97316) !important; }
a.category_list.back-5  div.image_area > img { background: linear-gradient(135deg,#a855f7,#7c3aed) !important; }
a.category_list.back-6  div.image_area > img { background: linear-gradient(135deg,#84cc16,#22c55e) !important; }
a.category_list.back-7  div.image_area > img { background: linear-gradient(135deg,#818cf8,#6366f1) !important; }
a.category_list.back-8  div.image_area > img { background: linear-gradient(135deg,#facc15,#eab308) !important; }
a.category_list.back-9  div.image_area > img { background: linear-gradient(135deg,#ec4899,#be185d) !important; }
a.category_list.back-10 div.image_area > img { background: linear-gradient(135deg,#14b8a6,#0d9488) !important; }
a.category_list.back-11 div.image_area > img { background: linear-gradient(135deg,#8b5cf6,#4f46e5) !important; }

/* Hover background should stay glassy, not flood with colour */
a.category_list.back-0:hover,  a.category_list.back-0:focus,  a.category_list.back-0:active,
a.category_list.back-1:hover,  a.category_list.back-1:focus,  a.category_list.back-1:active,
a.category_list.back-2:hover,  a.category_list.back-2:focus,  a.category_list.back-2:active,
a.category_list.back-3:hover,  a.category_list.back-3:focus,  a.category_list.back-3:active,
a.category_list.back-4:hover,  a.category_list.back-4:focus,  a.category_list.back-4:active,
a.category_list.back-5:hover,  a.category_list.back-5:focus,  a.category_list.back-5:active,
a.category_list.back-6:hover,  a.category_list.back-6:focus,  a.category_list.back-6:active,
a.category_list.back-7:hover,  a.category_list.back-7:focus,  a.category_list.back-7:active,
a.category_list.back-8:hover,  a.category_list.back-8:focus,  a.category_list.back-8:active,
a.category_list.back-9:hover,  a.category_list.back-9:focus,  a.category_list.back-9:active,
a.category_list.back-10:hover, a.category_list.back-10:focus, a.category_list.back-10:active,
a.category_list.back-11:hover, a.category_list.back-11:focus, a.category_list.back-11:active {
  background: var(--dg-surface-2) !important;
}

a.category_list p.head { padding: 0 86px 0 20px; z-index: 2; }
a.category_list p.head > span.course_name {
  font-family: var(--dg-font-disp);
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--dg-text) !important;
  letter-spacing: -0.02em;
  line-height: 1.35;
}
a.category_list p.head > span.courses { color: var(--dg-text-mute) !important; font-size: .78rem; }
a.category_list:hover p.head > span,
a.category_list:focus p.head > span,
a.category_list:active p.head > span { color: var(--dg-text) !important; }
a.category_list:hover p.head > span.course_name { color: var(--dg-cyan) !important; }

/* "Open" affordance that slides in */
a.category_list p.head > span.course_name::after {
  content: " ->";
  font-family: var(--dg-font-mono);
  opacity: 0;
  margin-left: 0;
  transition: opacity var(--dg-fast) var(--dg-ease), margin-left var(--dg-fast) var(--dg-ease);
}
a.category_list:hover p.head > span.course_name::after { opacity: 1; margin-left: 4px; }

/* -- 15. Custom blocks ------------------------------------------------------ */
/* Hero panel */
.dg-hero {
  position: relative;
  border-radius: var(--dg-r-xl);
  border: 1px solid var(--dg-line);
  background:
    linear-gradient(135deg, rgba(34,211,238,.10), rgba(168,85,247,.10)),
    var(--dg-surface);
  -webkit-backdrop-filter: blur(var(--dg-blur)) saturate(150%);
          backdrop-filter: blur(var(--dg-blur)) saturate(150%);
  box-shadow: var(--dg-shadow-lg);
  padding: 2.25rem 2.25rem;
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.dg-hero::before {
  content: "";
  position: absolute;
  top: -60%; right: -12%;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.34), transparent 68%);
  pointer-events: none;
  animation: dgFloat 12s var(--dg-ease-2) infinite alternate;
}
.dg-hero::after {
  content: "";
  position: absolute;
  bottom: -70%; left: -8%;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.26), transparent 68%);
  pointer-events: none;
  animation: dgFloat 15s var(--dg-ease-2) infinite alternate-reverse;
}
@keyframes dgFloat {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-26px, 22px, 0); }
}
.dg-hero > * { position: relative; z-index: 1; }
.dg-hero h1, .dg-hero h2 { margin: .4rem 0 .6rem; }
.dg-hero p { color: var(--dg-text-soft); max-width: 62ch; }

/* Stat card */
.dg-stat {
  position: relative;
  border-radius: var(--dg-r-lg);
  border: 1px solid var(--dg-line);
  background: var(--dg-surface);
  -webkit-backdrop-filter: blur(var(--dg-blur));
          backdrop-filter: blur(var(--dg-blur));
  box-shadow: var(--dg-shadow);
  padding: 1.25rem 1.35rem;
  height: 100%;
  overflow: hidden;
  transition: transform var(--dg-med) var(--dg-ease), box-shadow var(--dg-med) var(--dg-ease), border-color var(--dg-med) var(--dg-ease);
}
.dg-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(34,211,238,.4);
  box-shadow: 0 22px 44px -22px rgba(34,211,238,.5), var(--dg-shadow-lg);
}
.dg-stat::after {
  content: "";
  position: absolute;
  top: -50%; right: -30%;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.18), transparent 70%);
  pointer-events: none;
}
.dg-stat-label {
  font-family: var(--dg-font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dg-text-mute);
  display: block;
  margin-bottom: .45rem;
}
.dg-stat-value {
  font-family: var(--dg-font-disp);
  font-size: 1.95rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--dg-text);
}
.dg-stat-sub { font-size: .75rem; color: var(--dg-text-mute); margin-top: .4rem; }
.dg-stat-icon {
  position: absolute;
  top: 1.15rem; right: 1.15rem;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--dg-grad-soft);
  border: 1px solid var(--dg-line-str);
  color: var(--dg-cyan);
  z-index: 1;
}
.dg-stat-icon svg { width: 18px; height: 18px; }

/* Chip */
.dg-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .7rem;
  border-radius: 99px;
  border: 1px solid var(--dg-line-str);
  background: var(--dg-surface-2);
  font-size: .75rem;
  font-weight: 550;
  color: var(--dg-text-soft);
}
.dg-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dg-emerald); box-shadow: 0 0 8px var(--dg-emerald); }

/* Live indicator */
.dg-live {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--dg-font-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dg-rose);
}
.dg-live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dg-rose);
  animation: dgBlink 1.4s var(--dg-ease-2) infinite;
}
@keyframes dgBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* Empty state */
.dg-empty {
  text-align: center;
  padding: 4rem 1.5rem;
  border: 1px dashed var(--dg-line-str);
  border-radius: var(--dg-r-lg);
  background: var(--dg-surface);
}
.dg-empty-icon {
  width: 68px; height: 68px;
  margin: 0 auto 1.1rem;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: var(--dg-grad-soft);
  border: 1px solid var(--dg-line-str);
  color: var(--dg-cyan);
  font-size: 1.6rem;
}
.dg-empty h5 { margin-bottom: .35rem; }
.dg-empty p { color: var(--dg-text-mute); margin: 0 auto; max-width: 44ch; }

/* Section heading */
.dg-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.25rem 0 1.1rem;
}
.dg-section-head h5 {
  font-family: var(--dg-font-disp);
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  margin: 0;
}
.dg-section-head p { margin: .2rem 0 0; font-size: .8125rem; color: var(--dg-text-mute); }

/* Command palette */
.dg-palette {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 1rem;
  background: rgba(3, 7, 18, .72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.dg-palette.open { display: flex; animation: dgFadeIn .18s var(--dg-ease) both; }
@keyframes dgFadeIn { from { opacity: 0; } to { opacity: 1; } }
.dg-palette-box {
  width: min(620px, 100%);
  background: var(--dg-elevated);
  border: 1px solid var(--dg-line-str);
  border-radius: var(--dg-r-lg);
  box-shadow: var(--dg-shadow-lg);
  overflow: hidden;
  animation: dgPop .24s var(--dg-ease) both;
}
@keyframes dgPop {
  from { opacity: 0; transform: translateY(-14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.dg-palette-input {
  width: 100%;
  border: 0 !important;
  border-bottom: 1px solid var(--dg-line) !important;
  background: transparent !important;
  color: var(--dg-text) !important;
  padding: 1.05rem 1.25rem !important;
  font-size: .975rem !important;
  border-radius: 0 !important;
}
.dg-palette-input:focus { box-shadow: none !important; background: transparent !important; }
.dg-palette-list { max-height: 46vh; overflow-y: auto; padding: .45rem; }
.dg-palette-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .8rem;
  border-radius: 11px;
  color: var(--dg-text-soft);
  font-size: .875rem;
  cursor: pointer;
}
.dg-palette-item.active, .dg-palette-item:hover {
  background: var(--dg-grad-soft);
  color: var(--dg-text);
}
.dg-palette-item .dg-pi-icon {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--dg-surface-3);
  color: var(--dg-cyan);
  font-size: .7rem;
  font-family: var(--dg-font-mono);
}
.dg-palette-empty { padding: 1.5rem; text-align: center; color: var(--dg-text-mute); font-size: .875rem; }
.dg-palette-foot {
  display: flex;
  gap: 1rem;
  padding: .6rem 1rem;
  border-top: 1px solid var(--dg-line);
  font-size: .7rem;
  color: var(--dg-text-dim);
  font-family: var(--dg-font-mono);
}

/* -- 16. Auth screens --------------------------------------------------------
   Login and lockscreen run outside the app shell (no rail, no topbar), so
   they get their own full-bleed split layout.
   -------------------------------------------------------------------------- */
.authentication-bg {
  background: var(--dg-bg) !important;
  background-image: none !important;
  position: relative;
  min-height: 100vh;
}
.authentication-bg .bg-overlay,
.authentication-bg .bg-overlay1 { display: none !important; }

.dg-auth {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
}
@media (max-width: 1099.98px) { .dg-auth { grid-template-columns: 1fr; } }

/* ---------- Left: brand stage ---------- */
.dg-auth-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem clamp(2rem, 5vw, 4.5rem);
  overflow: hidden;
  border-right: 1px solid var(--dg-line);
}
@media (max-width: 1099.98px) { .dg-auth-stage { display: none; } }

.dg-auth-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40rem 40rem at 18% 12%, rgba(34,211,238,.20), transparent 62%),
    radial-gradient(36rem 36rem at 82% 84%, rgba(168,85,247,.20), transparent 62%);
}
.dg-auth-stage > * { position: relative; z-index: 2; }

/* Rotating orbit rings - the "model running" motif */
.dg-auth-orbit {
  position: absolute;
  top: 50%; right: -14%;
  width: 40rem; height: 40rem;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  opacity: .55;
}
.dg-auth-orbit span {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  border: 1px solid rgba(148,163,184,.18);
}
.dg-auth-orbit span:nth-child(1) { width: 100%; height: 100%; animation: dgSpin 46s linear infinite; }
.dg-auth-orbit span:nth-child(2) { width: 72%;  height: 72%;  animation: dgSpin 34s linear infinite reverse; border-color: rgba(34,211,238,.24); }
.dg-auth-orbit span:nth-child(3) { width: 46%;  height: 46%;  animation: dgSpin 22s linear infinite; border-color: rgba(168,85,247,.26); }
.dg-auth-orbit span::after {
  content: "";
  position: absolute;
  top: -4px; left: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dg-cyan);
  box-shadow: 0 0 16px var(--dg-cyan);
}
.dg-auth-orbit span:nth-child(2)::after { background: var(--dg-violet); box-shadow: 0 0 16px var(--dg-violet); }
.dg-auth-orbit span:nth-child(3)::after { background: var(--dg-emerald); box-shadow: 0 0 16px var(--dg-emerald); }
@keyframes dgSpin { to { transform: rotate(360deg); } }

.dg-auth-logo { display: inline-flex; align-items: center; }
.dg-auth-logo img { height: 58px; }

.dg-auth-headline {
  font-family: var(--dg-font-disp) !important;
  font-size: clamp(2rem, 3.4vw, 3.1rem) !important;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin: .9rem 0 1rem;
}

/* Word that cycles inside the headline */
.dg-rotator {
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  height: 1.15em;
}
.dg-rotator > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .45s var(--dg-ease), transform .45s var(--dg-ease);
  background: var(--dg-grad-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.dg-rotator > span.is-active { opacity: 1; transform: none; }

/* Feature list */
.dg-auth-feature {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .6rem 0;
}
.dg-auth-feature-icon {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--dg-grad-soft);
  border: 1px solid var(--dg-line-str);
  color: var(--dg-cyan);
}
.dg-auth-feature h6 { margin: 0 0 .1rem; font-size: .875rem; }
.dg-auth-feature p  { margin: 0; font-size: .8125rem; color: var(--dg-text-mute); }

/* Metrics strip */
.dg-auth-metrics {
  display: flex;
  gap: 2.25rem;
  flex-wrap: wrap;
  padding-top: 1.25rem;
  border-top: 1px solid var(--dg-line);
}
.dg-auth-metric-value {
  font-family: var(--dg-font-disp);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  display: block;
}
.dg-auth-metric-label {
  font-family: var(--dg-font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dg-text-mute);
}

/* Tech marquee */
.dg-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.dg-marquee-track {
  display: flex;
  gap: .5rem;
  width: max-content;
  animation: dgMarquee 28s linear infinite;
}
.dg-marquee:hover .dg-marquee-track { animation-play-state: paused; }
@keyframes dgMarquee { to { transform: translateX(-50%); } }
.dg-marquee .dg-chip { white-space: nowrap; font-family: var(--dg-font-mono); font-size: .7rem; }

/* ---------- Right: form panel ---------- */
.dg-auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
}

.dg-auth-card {
  position: relative;
  width: min(430px, 100%);
  border-radius: var(--dg-r-xl);
  background: var(--dg-surface-2);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
          backdrop-filter: blur(26px) saturate(165%);
  box-shadow: var(--dg-shadow-lg);
  padding: 2.4rem 2.2rem;
  animation: dgPop .55s var(--dg-ease) both;
}

/* Animated gradient hairline border */
@property --dg-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.dg-auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--dg-angle),
    rgba(148,163,184,.22), #22d3ee, rgba(148,163,184,.22),
    #a855f7, rgba(148,163,184,.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: dgBorderSpin 8s linear infinite;
  pointer-events: none;
}
@keyframes dgBorderSpin { to { --dg-angle: 360deg; } }

/* Browsers without @property animate nothing, so give them a static edge. */
@supports not (background: conic-gradient(from var(--dg-angle), red, blue)) {
  .dg-auth-card::before {
    background: var(--dg-grad);
    opacity: .5;
    animation: none;
  }
}

.dg-auth-card > * { position: relative; z-index: 1; }

.dg-auth-mobile-logo { display: none; text-align: center; margin-bottom: 1.75rem; }
.dg-auth-mobile-logo img { height: 54px; }
@media (max-width: 1099.98px) { .dg-auth-mobile-logo { display: block; } }

/* Fields */
.dg-field { margin-bottom: 1.05rem; }
.dg-field label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--dg-text-soft);
  margin-bottom: .4rem;
}
.dg-field-control { position: relative; }
.dg-field-control .dg-field-icon {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--dg-text-dim);
  pointer-events: none;
  transition: color var(--dg-fast) var(--dg-ease);
  line-height: 0;
  z-index: 2;
}
.dg-field-control .form-control { padding-left: 42px !important; height: 46px; }
.dg-field-control .form-control:focus ~ .dg-field-icon { color: var(--dg-cyan); }

.dg-field-action {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--dg-text-mute);
  padding: 7px;
  line-height: 0;
  cursor: pointer;
  border-radius: 8px;
  z-index: 3;
  transition: color var(--dg-fast) var(--dg-ease), background var(--dg-fast) var(--dg-ease);
}
.dg-field-action:hover { color: var(--dg-cyan); background: var(--dg-surface-3); }

.dg-auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.5rem 0 1rem;
  color: var(--dg-text-dim);
  font-family: var(--dg-font-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.dg-auth-divider::before,
.dg-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--dg-line-str); }

.dg-auth-foot {
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--dg-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-size: .75rem;
  color: var(--dg-text-dim);
}

/* ---------- Lockscreen ---------- */
.dg-lock-clock {
  font-family: var(--dg-font-disp) !important;
  font-size: clamp(3.4rem, 9vw, 6.5rem) !important;
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.dg-lock-date {
  font-family: var(--dg-font-mono);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dg-text-mute);
  margin-top: .65rem;
}

.dg-lock-avatar {
  position: relative;
  width: 94px; height: 94px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  padding: 3px;
  background: var(--dg-grad);
  box-shadow: 0 14px 40px -16px rgba(34,211,238,.8);
}
.dg-lock-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--dg-bg);
  background: var(--dg-bg);
}
.dg-lock-avatar::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(34,211,238,.28);
  animation: dgLockPulse 2.8s var(--dg-ease-2) infinite;
}
@keyframes dgLockPulse {
  0%, 100% { transform: scale(1);    opacity: .8; }
  50%      { transform: scale(1.09); opacity: 0; }
}

.dg-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .75rem;
  border-radius: 99px;
  border: 1px solid rgba(251,191,36,.35);
  background: rgba(251,191,36,.1);
  color: var(--dg-amber);
  font-family: var(--dg-font-mono);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (max-width: 575.98px) {
  .dg-auth-panel { padding: 1.5rem 1rem; }
  .dg-auth-card { padding: 1.75rem 1.35rem; }
}

/* -- 17. Utilities + animations ---------------------------------------------- */
.dg-glass {
  background: var(--dg-surface);
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-r-lg);
  -webkit-backdrop-filter: blur(var(--dg-blur));
          backdrop-filter: blur(var(--dg-blur));
  box-shadow: var(--dg-shadow);
}
.dg-mono { font-family: var(--dg-font-mono) !important; }
.dg-grad-bg { background: var(--dg-grad) !important; }

/* Reveal-on-scroll (driven by digicrome-ai.js) */
.dg-reveal { opacity: 0; transform: translateY(18px); }
.dg-reveal.dg-in {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--dg-ease), transform .55s var(--dg-ease);
}

/* Legacy overrides that fight the dark shell */
.bg-white, .bg-light { background: var(--dg-surface-2) !important; }
.text-dark { color: var(--dg-text) !important; }
.border { border-color: var(--dg-line) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: var(--dg-shadow) !important; }
.bg-aniket { background: var(--dg-grad) !important; }

/* Inline <style> in the app hard-codes .table{background:#fff} - undo it */
table.table { background-color: transparent !important; }

/* The dashboard video card overlay */
.video-overlay {
  background: linear-gradient(100deg, rgba(6,9,17,.96) 0%, rgba(6,9,17,.86) 38%, rgba(6,9,17,.35) 68%, transparent 100%) !important;
  width: 100% !important;
}

/* Hackathon launcher tuned to the new palette */
.hkw-launcher {
  box-shadow: 0 12px 34px -12px rgba(168,85,247,.85) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* -- 18. Responsive ---------------------------------------------------------- */
@media (max-width: 991.98px) {
  #page-topbar { padding: 8px 10px 0 10px; }
  .page-content { padding: calc(var(--dg-topbar) + 16px) 14px 70px 14px !important; }
  .dg-hero { padding: 1.6rem 1.35rem; border-radius: var(--dg-r-lg); }
  .page-title-box { flex-direction: column; align-items: flex-start !important; gap: .6rem; }
  .vertical-menu { box-shadow: var(--dg-shadow-lg); }
}

@media (max-width: 575.98px) {
  body { font-size: 13.5px; }
  .card-body { padding: 1.15rem; }
  .page-title-box h4 { font-size: 1.25rem !important; }
  .dg-stat-value { font-size: 1.6rem; }
  a.category_list p.head { padding: 0 76px 0 16px; }
  .btn { padding: .55rem 1rem !important; }
}

/* -- 19. Print ---------------------------------------------------------------- */
@media print {
  body::before, body::after, #dg-neural, .vertical-menu, #page-topbar,
  .footer, .hkw-launcher, .dg-theme-toggle, .dg-cmdk { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .main-content { margin-left: 0 !important; }
  .page-content { padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; background: #fff !important; }
}

/* -- 20. Brand mark ----------------------------------------------------------
   The supplied logo PNGs are navy + amber on transparent, so on the dark
   shell the navy half disappears. Sit them on a light plate instead of
   filtering the artwork (which would destroy the amber).
   -------------------------------------------------------------------------- */
/* NB: the base template hides .navbar-header .navbar-brand-box on desktop and
   shows it again under 992px, so only touch padding/alignment here - forcing a
   display value would surface a second logo next to the sidebar one. */
.navbar-brand-box { padding: 0 .9rem !important; align-items: center; }
.vertical-menu .navbar-brand-box { display: flex; }
/* Do not set `display` here: .logo-dark / .logo-light are toggled by the base
   template and a more specific display would render both marks at once. */
.navbar-brand-box .logo { align-items: center; }

[data-dg-theme="dark"] .navbar-brand-box .logo img {
  background: #ffffff;
  padding: 5px 10px;
  border-radius: 11px;
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255,255,255,.6);
}
[data-dg-theme="dark"] .vertical-menu .navbar-brand-box .logo img { padding: 6px 10px; }

.navbar-brand-box .logo img {
  transition: transform var(--dg-med) var(--dg-ease), box-shadow var(--dg-med) var(--dg-ease);
}
.navbar-brand-box .logo:hover img { transform: translateY(-1px) scale(1.02); }

/* Auth screens use the white SVG mark, so no plate needed there. */
.auth-logo img { background: none !important; box-shadow: none !important; padding: 0 !important; }

/* -- 21. Odds and ends ------------------------------------------------------- */
/* simplebar rails inside the sidebar / dropdowns */
.simplebar-scrollbar::before { background: rgba(148,163,184,.5) !important; border-radius: 99px; }

/* Notification avatar chips */
.avatar-title.bg-danger  { background: linear-gradient(135deg,#fb7185,#e11d48) !important; }
.avatar-title.bg-primary { background: var(--dg-grad) !important; color: #05121b !important; }
.avatar-title.bg-success { background: linear-gradient(135deg,#34d399,#059669) !important; }

/* The section headings we inject into the rail are <li>s inside .metismenu */
.metismenu li.dg-nav-section { list-style: none; }

/* Keep injected topbar controls from wrapping on medium screens */
#page-topbar .navbar-header > .d-flex { flex-wrap: nowrap; }

/* bootstrap-select, used on a few forms */
.bootstrap-select > .dropdown-toggle {
  background: var(--bs-input-bg) !important;
  border: 1px solid var(--dg-line-str) !important;
  color: var(--dg-text) !important;
  border-radius: 11px !important;
}
.bootstrap-select .dropdown-menu li a { color: var(--dg-text-soft); }

/* Quiz option rows read better as selectable cards */
.page-content input[type="radio"] + label { cursor: pointer; color: var(--dg-text-soft); }
.page-content input[type="radio"] { accent-color: var(--dg-cyan); }

/* Invoice / certificate views are printed on white paper - keep them legible
   by forcing the light surface treatment inside those wrappers. */
.invoice-wrap, .certificate-wrap { background: #fff; color: #111; border-radius: var(--dg-r); }
.invoice-wrap *, .certificate-wrap * { color: inherit; }

/* -- 22. Auth page chrome ----------------------------------------------------
   The shared footer partial is included on the auth screens too; the split
   layout provides its own footing, so suppress it there.
   -------------------------------------------------------------------------- */
.authentication-bg ~ .footer,
.authentication-bg ~ script + .footer { display: none !important; }

.authentication-bg { padding: 0; }
.authentication-bg .container { max-width: none; padding: 0; }

/* The auth screens have no .main-content wrapper, so neutralise the rail
   offset that app.min.css applies to the footer. */
.authentication-bg ~ * .footer { margin-left: 0; }

/* -- 23. Legacy element normalisation ---------------------------------------
   A number of views drop bare <button>/<input> elements into tables and
   forms with no class at all, so they fall back to the browser's default
   chrome (a white box) on the dark shell. Give them a sensible default.
   -------------------------------------------------------------------------- */
.page-content button:not([class]),
.modal-body button:not([class]) {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--dg-font);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1;
  padding: .32rem .6rem;
  border-radius: 8px;
  border: 1px solid var(--dg-line-str);
  background: var(--dg-surface-3);
  color: var(--dg-text-soft);
  cursor: pointer;
  transition: all var(--dg-fast) var(--dg-ease);
}
.page-content button:not([class]):hover,
.modal-body button:not([class]):hover {
  border-color: rgba(34,211,238,.5);
  color: var(--dg-cyan);
  transform: translateY(-1px);
}

/* Links sitting directly in table cells read as actions */
.table td > a:not(.btn) {
  color: var(--dg-cyan);
  font-weight: 550;
}
.table td > a:not(.btn):hover { text-decoration: underline; }

/* Bootstrap tooltips */
.tooltip-inner {
  background: var(--dg-elevated);
  border: 1px solid var(--dg-line-str);
  color: var(--dg-text);
  border-radius: 9px;
  font-size: .78rem;
  box-shadow: var(--dg-shadow);
  max-width: 320px;
}
.tooltip .tooltip-arrow::before { border-top-color: var(--dg-line-str); border-bottom-color: var(--dg-line-str); }
.tooltip.show { opacity: 1; }

/* Popovers */
.popover {
  background: var(--dg-elevated);
  border: 1px solid var(--dg-line-str);
  border-radius: var(--dg-r-sm);
  box-shadow: var(--dg-shadow-lg);
}
.popover-header { background: transparent; border-bottom-color: var(--dg-line); color: var(--dg-text); }
.popover-body { color: var(--dg-text-soft); }

/* Pages that wrap content in .container inside .page-content ended up
   narrower than the rest of the shell - line them up. */
.page-content > .container-fluid > .container,
.page-content > .container { max-width: 100%; padding-left: 0; padding-right: 0; }

/* -- 24. Non-blocking popups -------------------------------------------------
   Announcements (birthday prompt, celebration, batch notices) used to run as
   Bootstrap modals: a full-screen dimmed backdrop that swallowed every click
   and locked page scrolling. These render as floating panels instead - no
   backdrop, no dimming, the page stays fully usable underneath. Only the card
   itself receives pointer events.
   -------------------------------------------------------------------------- */
.dg-popup { position: fixed; z-index: 1090; pointer-events: none; }
.dg-popup[hidden] { display: none !important; }

/* Corner popups are collected into a single stack so several can coexist */
#dg-popup-stack {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
  pointer-events: none;
  max-height: calc(100vh - 2.5rem);
  width: min(390px, calc(100vw - 2.5rem));
}

.dg-popup-center {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.dg-popup-card {
  pointer-events: auto;
  position: relative;
  width: 100%;
  border-radius: var(--dg-r-lg);
  border: 1px solid var(--dg-line-str);
  background: var(--dg-elevated);
  box-shadow: var(--dg-shadow-lg);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
          backdrop-filter: blur(24px) saturate(170%);
  overflow: hidden;
  animation: dgPopupIn .38s var(--dg-ease) both;
}
.dg-popup-center > .dg-popup-card { width: min(620px, 100%); max-height: min(86vh, 760px); overflow-y: auto; }

@keyframes dgPopupIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.dg-popup-card.dg-popup-out {
  animation: dgPopupOut .22s var(--dg-ease-2) both;
}
@keyframes dgPopupOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(10px) scale(.97); }
}

/* Accent seam so a floating card still reads as "ours" without a backdrop */
.dg-popup-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--dg-grad);
}

.dg-popup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding: 1.15rem 1.25rem .35rem;
}
.dg-popup-head h5 { margin: 0; font-size: 1rem; }
.dg-popup-body { padding: .35rem 1.25rem 1.25rem; }
.dg-popup-body p { font-size: .8438rem; }

.dg-popup-close {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--dg-line);
  background: var(--dg-surface-3);
  color: var(--dg-text-mute);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--dg-fast) var(--dg-ease);
}
.dg-popup-close:hover {
  color: var(--dg-rose);
  border-color: rgba(251,113,133,.45);
  transform: rotate(90deg);
}

@media (max-width: 575.98px) {
  #dg-popup-stack {
    right: .75rem;
    left: .75rem;
    bottom: .75rem;
    width: auto;
    align-items: stretch;
  }
  .dg-popup-center { padding: .75rem; }
}

/* -- 25. Admin-authored rich text -------------------------------------------
   Notice-board copy is written in a WYSIWYG that bakes colours into inline
   style attributes (e.g. `color: rgb(33, 37, 41)` and white backgrounds).
   Those beat any normal stylesheet rule, so on the dark shell the text
   rendered black-on-black. Inside .dg-rich we override them explicitly and
   let the theme decide the colour instead.
   -------------------------------------------------------------------------- */
.dg-rich {
  font-size: .8438rem;
  line-height: 1.7;
  color: var(--dg-text-soft) !important;
  overflow-wrap: anywhere;
}
.dg-rich *,
.dg-rich p,
.dg-rich span,
.dg-rich div,
.dg-rich li,
.dg-rich td,
.dg-rich th,
.dg-rich h1, .dg-rich h2, .dg-rich h3,
.dg-rich h4, .dg-rich h5, .dg-rich h6 {
  color: var(--dg-text-soft) !important;
  background-color: transparent !important;
  font-family: var(--dg-font) !important;
}
.dg-rich b,
.dg-rich strong,
.dg-rich h1, .dg-rich h2, .dg-rich h3,
.dg-rich h4, .dg-rich h5, .dg-rich h6 {
  color: var(--dg-text) !important;
  font-weight: 650;
}
.dg-rich a,
.dg-rich a * {
  color: var(--dg-cyan) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dg-rich a:hover { color: var(--bs-link-hover-color) !important; }
.dg-rich p { margin-bottom: .7rem; }
.dg-rich p:last-child { margin-bottom: 0; }
.dg-rich ul, .dg-rich ol { padding-left: 1.15rem; margin-bottom: .7rem; }
.dg-rich img { max-width: 100%; height: auto; border-radius: var(--dg-r-sm); }
.dg-rich table { width: 100%; border-collapse: collapse; }
.dg-rich table td, .dg-rich table th {
  border: 1px solid var(--dg-line) !important;
  padding: .45rem .6rem;
}
.dg-rich hr { border-color: var(--dg-line); }

/* -- 26. Theme-aware brand mark on the auth screens --------------------------
   logoa.svg is the all-white lockup: perfect on the dark shell, invisible on
   the light one. Ship both marks and let the theme pick.
   -------------------------------------------------------------------------- */
.dg-logo-light { display: none; }
[data-dg-theme="light"] .dg-logo-dark  { display: none; }
[data-dg-theme="light"] .dg-logo-light { display: inline-block; }

/* -- 27. Sidebar legibility --------------------------------------------------
   The rail labels sat on --dg-text-mute, which is too dim against the dark
   sidebar. Lift resting, hover and active states.
   -------------------------------------------------------------------------- */
#sidebar-menu ul li a {
  color: var(--dg-text-soft) !important;
  font-weight: 550;
}
#sidebar-menu ul li a .menu-item { color: inherit; }

#sidebar-menu ul li a .icon,
#sidebar-menu ul li a svg { color: var(--dg-text-mute); }

#sidebar-menu ul li a:hover,
#sidebar-menu ul li a:focus {
  color: #ffffff !important;
}
[data-dg-theme="light"] #sidebar-menu ul li a:hover,
[data-dg-theme="light"] #sidebar-menu ul li a:focus { color: #0f172a !important; }

#sidebar-menu ul li a.active,
#sidebar-menu ul li.mm-active > a {
  color: #ffffff !important;
  font-weight: 650;
}
[data-dg-theme="light"] #sidebar-menu ul li a.active,
[data-dg-theme="light"] #sidebar-menu ul li.mm-active > a { color: #0f172a !important; }

/* Group headings were near-invisible too */
.dg-nav-section { color: var(--dg-text-mute); }

/* Identity card in the rail */
.dg-rail-user .dg-rail-name { color: var(--dg-text); }

/* -- 28. Quiz module ---------------------------------------------------------
   Lobby, question runner, result summary, history and answer review.
   -------------------------------------------------------------------------- */

/* ---------- Shared shell ---------- */
.dg-quiz { max-width: 880px; margin: 0 auto; }
.dg-quiz-wide { max-width: 1180px; margin: 0 auto; }

/* ---------- Runner: sticky status bar ---------- */
.dg-quiz-bar {
  position: sticky;
  top: calc(var(--dg-topbar) + 8px);
  z-index: 20;
  border-radius: var(--dg-r-lg);
  border: 1px solid var(--dg-line);
  background: var(--dg-elevated);
  -webkit-backdrop-filter: blur(var(--dg-blur)) saturate(160%);
          backdrop-filter: blur(var(--dg-blur)) saturate(160%);
  box-shadow: var(--dg-shadow);
  padding: 1rem 1.25rem .85rem;
  margin-bottom: 1.25rem;
}
.dg-quiz-bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
.dg-quiz-course {
  font-family: var(--dg-font-disp);
  font-weight: 650;
  font-size: .975rem;
  letter-spacing: -0.02em;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dg-quiz-step {
  font-family: var(--dg-font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dg-text-mute);
  display: block;
  margin-bottom: .1rem;
}

/* Countdown pill */
.dg-timer {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .85rem;
  border-radius: 99px;
  border: 1px solid rgba(52, 211, 153, .38);
  background: rgba(52, 211, 153, .10);
  color: var(--dg-emerald);
  font-family: var(--dg-font-mono);
  font-size: .9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  transition: all var(--dg-med) var(--dg-ease);
}
.dg-timer svg { width: 15px; height: 15px; }
.dg-timer.is-warning {
  border-color: rgba(251, 191, 36, .45);
  background: rgba(251, 191, 36, .12);
  color: var(--dg-amber);
}
.dg-timer.is-danger {
  border-color: rgba(251, 113, 133, .5);
  background: rgba(251, 113, 133, .14);
  color: var(--dg-rose);
  animation: dgTimerPulse 1s var(--dg-ease-2) infinite;
}
@keyframes dgTimerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,113,133,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(251,113,133,0); }
}

/* Progress rail */
.dg-quiz-progress {
  height: 6px;
  border-radius: 99px;
  background: var(--dg-surface-3);
  overflow: hidden;
}
.dg-quiz-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--dg-grad);
  box-shadow: 0 0 12px rgba(34, 211, 238, .55);
  transition: width .45s var(--dg-ease);
}

/* ---------- Question card ---------- */
.dg-qcard {
  border-radius: var(--dg-r-lg);
  border: 1px solid var(--dg-line);
  background: var(--dg-surface);
  -webkit-backdrop-filter: blur(var(--dg-blur));
          backdrop-filter: blur(var(--dg-blur));
  box-shadow: var(--dg-shadow);
  overflow: hidden;
  animation: dgQIn .38s var(--dg-ease) both;
}
@keyframes dgQIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.dg-qcard-head { padding: 1.6rem 1.75rem .35rem; }
.dg-q-index {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--dg-font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dg-cyan);
  margin-bottom: .7rem;
}
.dg-q-index::before {
  content: "";
  width: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--dg-cyan));
}
.dg-q-text {
  font-family: var(--dg-font-disp);
  font-size: clamp(1.1rem, 2.1vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.4;
  color: var(--dg-text);
  margin: 0;
}

/* ---------- Options ---------- */
.dg-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  padding: 1.4rem 1.75rem 1.6rem;
}
@media (max-width: 767.98px) { .dg-options { grid-template-columns: 1fr; } }

/* The whole card is the label, so the entire row is clickable - the old
   markup had empty for="" attributes and four duplicate ids, which meant
   only the 12px radio itself responded. */
.dg-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--dg-r);
  border: 1px solid var(--dg-line-str);
  background: var(--dg-surface-2);
  cursor: pointer;
  transition: border-color var(--dg-fast) var(--dg-ease),
              background var(--dg-fast) var(--dg-ease),
              transform var(--dg-fast) var(--dg-ease),
              box-shadow var(--dg-fast) var(--dg-ease);
}
.dg-option:hover {
  border-color: rgba(34, 211, 238, .45);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -16px rgba(34, 211, 238, .7);
}
.dg-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dg-option-key {
  flex: 0 0 30px;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--dg-line-str);
  background: var(--dg-surface-3);
  color: var(--dg-text-mute);
  font-family: var(--dg-font-mono);
  font-size: .75rem;
  font-weight: 700;
  transition: all var(--dg-fast) var(--dg-ease);
}
.dg-option-text {
  flex: 1;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--dg-text-soft);
  overflow-wrap: anywhere;
  transition: color var(--dg-fast) var(--dg-ease);
}

.dg-option input:checked ~ .dg-option-key {
  background: var(--dg-grad);
  border-color: transparent;
  color: #05121b;
  box-shadow: 0 6px 16px -8px rgba(34, 211, 238, .95);
}
.dg-option input:checked ~ .dg-option-text { color: var(--dg-text); font-weight: 550; }
.dg-option:has(input:checked) {
  border-color: rgba(34, 211, 238, .7);
  background: var(--dg-grad-soft);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .35), 0 14px 30px -18px rgba(34, 211, 238, .8);
}
/* Fallback for engines without :has() - JS mirrors the state onto a class. */
.dg-option.is-selected {
  border-color: rgba(34, 211, 238, .7);
  background: var(--dg-grad-soft);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .35), 0 14px 30px -18px rgba(34, 211, 238, .8);
}
.dg-option input:focus-visible ~ .dg-option-key { outline: 2px solid var(--dg-cyan); outline-offset: 2px; }

/* ---------- Runner footer ---------- */
.dg-quiz-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.75rem;
  border-top: 1px solid var(--dg-line);
  background: rgba(148, 163, 184, .04);
}
.dg-quiz-hint {
  font-size: .78rem;
  color: var(--dg-text-mute);
  display: flex;
  align-items: center;
  gap: .45rem;
}
.dg-quiz-hint kbd {
  font-family: var(--dg-font-mono);
  font-size: .66rem;
  padding: .1rem .35rem;
  border-radius: 5px;
  border: 1px solid var(--dg-line-str);
  background: var(--dg-surface-3);
  color: var(--dg-text-mute);
}

/* Busy state while the next question is fetched */
.dg-quiz-loading { position: relative; pointer-events: none; }
.dg-quiz-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--dg-r-lg);
  background: rgba(6, 9, 17, .45);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
[data-dg-theme="light"] .dg-quiz-loading::after { background: rgba(244, 246, 252, .55); }

.dg-spinner {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2.5px solid var(--dg-line-str);
  border-top-color: var(--dg-cyan);
  animation: dgSpin .7s linear infinite;
}

/* ---------- Lobby (setup) ---------- */
.dg-quiz-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .75rem;
  margin-top: 1.25rem;
}
.dg-rule {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem .95rem;
  border-radius: var(--dg-r-sm);
  border: 1px solid var(--dg-line);
  background: var(--dg-surface-2);
}
.dg-rule-icon {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--dg-grad-soft);
  border: 1px solid var(--dg-line-str);
  color: var(--dg-cyan);
}
.dg-rule strong { display: block; font-size: .8125rem; color: var(--dg-text); }
.dg-rule span   { font-size: .75rem; color: var(--dg-text-mute); }

/* ---------- Score ring ---------- */
.dg-score-ring {
  position: relative;
  width: 190px; height: 190px;
  margin: 0 auto;
}
.dg-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dg-score-ring .dg-ring-track { stroke: var(--dg-surface-3); }
.dg-score-ring .dg-ring-value {
  stroke: url(#dgScoreGrad);
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s var(--dg-ease);
}
.dg-score-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.dg-score-pct {
  font-family: var(--dg-font-disp);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dg-score-of {
  font-family: var(--dg-font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dg-text-mute);
  margin-top: .3rem;
}

.dg-verdict {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .85rem;
  border-radius: 99px;
  font-family: var(--dg-font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dg-verdict.is-great { border: 1px solid rgba(52,211,153,.4);  background: rgba(52,211,153,.12);  color: var(--dg-emerald); }
.dg-verdict.is-ok    { border: 1px solid rgba(251,191,36,.42); background: rgba(251,191,36,.12);  color: var(--dg-amber); }
.dg-verdict.is-low   { border: 1px solid rgba(251,113,133,.45);background: rgba(251,113,133,.12); color: var(--dg-rose); }

/* ---------- Answer review ---------- */
.dg-answer {
  border-radius: var(--dg-r);
  border: 1px solid var(--dg-line);
  background: var(--dg-surface);
  padding: 1.1rem 1.2rem;
  margin-bottom: .75rem;
  position: relative;
  overflow: hidden;
}
.dg-answer::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.dg-answer.is-correct::before { background: linear-gradient(180deg, #34d399, #10b981); }
.dg-answer.is-wrong::before   { background: linear-gradient(180deg, #fb7185, #e11d48); }

.dg-answer-head {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .85rem;
}
.dg-answer-no {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--dg-surface-3);
  border: 1px solid var(--dg-line-str);
  color: var(--dg-text-mute);
  font-family: var(--dg-font-mono);
  font-size: .7rem;
  font-weight: 700;
}
.dg-answer-q { font-size: .9rem; font-weight: 550; color: var(--dg-text); line-height: 1.5; margin: 0; }

.dg-answer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .6rem;
}
.dg-answer-cell {
  padding: .65rem .8rem;
  border-radius: var(--dg-r-sm);
  border: 1px solid var(--dg-line);
  background: var(--dg-surface-2);
}
.dg-answer-cell .dg-answer-label {
  display: block;
  font-family: var(--dg-font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dg-text-mute);
  margin-bottom: .25rem;
}
.dg-answer-cell .dg-answer-value { font-size: .82rem; color: var(--dg-text-soft); overflow-wrap: anywhere; }
.dg-answer-cell.is-correct { border-color: rgba(52,211,153,.35);  background: rgba(52,211,153,.08); }
.dg-answer-cell.is-correct .dg-answer-value { color: var(--dg-emerald); }
.dg-answer-cell.is-wrong   { border-color: rgba(251,113,133,.35); background: rgba(251,113,133,.08); }
.dg-answer-cell.is-wrong .dg-answer-value { color: var(--dg-rose); }

/* ---------- History ---------- */
.dg-attempt {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.25rem;
  border-radius: var(--dg-r-lg);
  border: 1px solid var(--dg-line);
  background: var(--dg-surface);
  -webkit-backdrop-filter: blur(var(--dg-blur));
          backdrop-filter: blur(var(--dg-blur));
  box-shadow: var(--dg-shadow);
  margin-bottom: .85rem;
  transition: transform var(--dg-med) var(--dg-ease),
              border-color var(--dg-med) var(--dg-ease),
              box-shadow var(--dg-med) var(--dg-ease);
}
.dg-attempt:hover {
  transform: translateY(-3px);
  border-color: rgba(34,211,238,.38);
  box-shadow: 0 22px 44px -24px rgba(34,211,238,.5), var(--dg-shadow-lg);
}
.dg-attempt-score {
  flex: 0 0 62px;
  width: 62px; height: 62px;
  border-radius: 16px;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid var(--dg-line-str);
  background: var(--dg-surface-3);
  font-family: var(--dg-font-disp);
  line-height: 1;
}
.dg-attempt-score b { font-size: 1.15rem; font-weight: 700; display: block; }
.dg-attempt-score span {
  font-family: var(--dg-font-mono);
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dg-text-mute);
}
.dg-attempt-score.is-great { border-color: rgba(52,211,153,.42);  background: rgba(52,211,153,.12);  color: var(--dg-emerald); }
.dg-attempt-score.is-ok    { border-color: rgba(251,191,36,.42);  background: rgba(251,191,36,.12);  color: var(--dg-amber); }
.dg-attempt-score.is-low   { border-color: rgba(251,113,133,.42); background: rgba(251,113,133,.12); color: var(--dg-rose); }

.dg-attempt-main { flex: 1 1 260px; min-width: 0; }
.dg-attempt-title {
  font-family: var(--dg-font-disp);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 .3rem;
  color: var(--dg-text);
}
.dg-attempt-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.dg-attempt-tags .dg-chip { font-size: .68rem; padding: .2rem .55rem; }
.dg-attempt-meta {
  font-family: var(--dg-font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dg-text-dim);
  margin-top: .45rem;
}
.dg-attempt-bar {
  flex: 1 1 150px;
  height: 6px;
  border-radius: 99px;
  background: var(--dg-surface-3);
  overflow: hidden;
  min-width: 110px;
}
.dg-attempt-bar i { display: block; height: 100%; border-radius: 99px; background: var(--dg-grad); }

@media (max-width: 575.98px) {
  /* No physical keyboard to hint at, and it wrapped over three lines. */
  .dg-quiz-hint { display: none; }
  .dg-quiz-foot { justify-content: stretch; }
  .dg-quiz-foot .btn { width: 100%; justify-content: center; }
  .dg-quiz-bar { top: calc(var(--dg-topbar) + 2px); padding: .85rem 1rem .7rem; }
  .dg-qcard-head { padding: 1.25rem 1.15rem .25rem; }
  .dg-options { padding: 1.1rem 1.15rem 1.25rem; }
  .dg-quiz-foot { padding: 1rem 1.15rem; }
  .dg-score-ring { width: 158px; height: 158px; }
  .dg-score-pct { font-size: 2.1rem; }
}

/* -- 29. Mobile drawer -------------------------------------------------------
   The scrim sits inside #layout-wrapper (see digicrome-ai.js) so it shares a
   stacking context with the rail and can sit under it. It dims the page and
   nothing else - it used to carry a backdrop-filter, which blurred the rail
   too and made the whole screen look out of focus.
   -------------------------------------------------------------------------- */
.dg-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1004;               /* rail is 1005 within this same context */
  background: rgba(3, 7, 18, .62);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--dg-ease);
}
.dg-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
[data-dg-theme="light"] .dg-drawer-backdrop { background: rgba(15, 23, 42, .42); }

@media (min-width: 992px) {
  /* Desktop keeps the rail permanently docked - never dim there. */
  .dg-drawer-backdrop { display: none; }
}

@media (max-width: 991.98px) {
  /* Opaque rail on mobile: a translucent panel over a dimmed page reads as
     muddy, and dropping the blur here is cheaper on phones too. */
  .vertical-menu {
    background: var(--dg-bg-2) !important;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    box-shadow: 18px 0 60px -22px rgba(0, 0, 0, .85);
  }
  [data-dg-theme="light"] .vertical-menu {
    background: #ffffff !important;
    box-shadow: 18px 0 50px -26px rgba(15, 23, 42, .45);
  }
}