:root {

  --app-bg: #f3f4f6;

  --soft-bg: #f5f7fb;

  --text-strong: #0b1220;

  --text-muted: #475569;

  --brand: #2563eb;

  --brand-2: #7c3aed;

  --radius-lg: 1rem;

  --radius-md: 0.9rem;

  --shadow-sm: 0 10px 26px rgba(15, 23, 42, 0.08);

  --shadow-xs: 0 6px 18px rgba(15, 23, 42, 0.06);

}



@media (max-width: 991.98px) {

  .notif-icon-btn {

    width: 38px;

    height: 38px;

  }

  .notif-icon-btn svg {

    width: 18px;

    height: 18px;

  }

  .notif-host {

    top: 56px;

  }

  body.app-mobile-sidebar-open .app-notif-fab {

    top: 78px;

  }

  body.app-mobile-sidebar-open .app-notif-fab.in-topbar {

    transform: translateY(56px);

  }

  body.app-mobile-sidebar-open .app-notif-fab.in-topbar {

    transition: transform 160ms ease;

  }

  body.app-mobile-sidebar-open .notif-host {

    top: 120px;

  }

  .app-notif-fab {

    top: calc(12px + env(safe-area-inset-top));

    right: max(12px, env(safe-area-inset-right));

  }

  .app-notif-fab.in-topbar {

    transform: none;

  }

}



html[data-bs-theme="dark"] {

  --app-bg: #0b1220;

  --soft-bg: #0b1220;

  --text-strong: #e5e7eb;

  --text-muted: #a8b3c7;

  --shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.35);

  --shadow-xs: 0 6px 18px rgba(0, 0, 0, 0.25);

}



body {

  background:

    radial-gradient(900px 520px at 10% 10%, rgba(37, 99, 235, 0.08), transparent 55%),

    radial-gradient(900px 520px at 90% 90%, rgba(124, 58, 237, 0.06), transparent 55%),

    var(--app-bg);

  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  color: var(--text-strong);

  font-size: 16px;

  line-height: 1.5;

  font-weight: 450;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-rendering: optimizeLegibility;

}



a {

  text-decoration-thickness: 0.08em;

  text-underline-offset: 0.18em;

}



.app-shell {

  min-height: 100vh;

}



.app-layout {

  display: grid;

  grid-template-columns: 280px 1fr;

  min-height: 100vh;

}



.app-sidebar {

  position: sticky;

  top: 0;

  height: 100vh;

  padding: 1rem;

  overflow-y: auto;

  overscroll-behavior: contain;

  scrollbar-width: thin;

  scrollbar-color: transparent transparent;

  background:

    radial-gradient(520px 420px at 12% 12%, rgba(37, 99, 235, 0.22), transparent 60%),

    radial-gradient(620px 520px at 85% 35%, rgba(124, 58, 237, 0.18), transparent 62%),

    radial-gradient(520px 420px at 35% 92%, rgba(14, 165, 233, 0.12), transparent 60%),

    rgba(245, 247, 251, 0.90);

  backdrop-filter: blur(12px);

  border-right: 1px solid rgba(15, 23, 42, 0.08);

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}



.app-sidebar::-webkit-scrollbar {

  width: 8px;

}



.app-sidebar::-webkit-scrollbar-track {

  background: transparent;

}



.app-sidebar::-webkit-scrollbar-thumb {

  background-color: transparent;

  border-radius: 999px;

  border: 2px solid transparent;

  background-clip: content-box;

}



.app-sidebar:hover {

  scrollbar-color: rgba(15, 23, 42, 0.28) transparent;

}



.app-sidebar:hover::-webkit-scrollbar-thumb {

  background-color: rgba(15, 23, 42, 0.28);

}



html[data-bs-theme="dark"] .app-sidebar {

  background:

    radial-gradient(520px 420px at 12% 12%, rgba(37, 99, 235, 0.22), transparent 60%),

    radial-gradient(620px 520px at 85% 35%, rgba(124, 58, 237, 0.20), transparent 62%),

    radial-gradient(520px 420px at 35% 92%, rgba(14, 165, 233, 0.12), transparent 60%),

    rgba(15, 23, 42, 0.90);

  border-right: 1px solid rgba(255, 255, 255, 0.08);

}



html[data-bs-theme="dark"] .app-sidebar:hover {

  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;

}



html[data-bs-theme="dark"] .app-sidebar:hover::-webkit-scrollbar-thumb {

  background-color: rgba(255, 255, 255, 0.22);

}



.app-side-header {

  padding: 0.25rem 0.5rem 1rem;

}



.app-side-body {

  padding: 0px;

}



.app-side-extra {

  padding: 0.25rem;

}



.app-side-footer {

  margin-top: auto;

  padding: 0.75rem 0.25rem 0.25rem;

}



.app-side-nav .nav-link {

  border-radius: 0.85rem;

  padding: 0.55rem 0.8rem;

  color: var(--text-muted);

}



.app-side-nav .nav-link:hover {

  background: rgba(37, 99, 235, 0.08);

  color: var(--text-strong);

}



.app-side-nav .nav-link.active {

  background: linear-gradient(90deg, rgba(37, 99, 235, 0.18), rgba(124, 58, 237, 0.12));

  border: 1px solid rgba(37, 99, 235, 0.18);

  color: var(--text-strong);

}



html[data-bs-theme="dark"] .app-side-nav .nav-link:hover {

  background: rgba(37, 99, 235, 0.16);

}



html[data-bs-theme="dark"] .app-side-nav .nav-link.active {

  border: 1px solid rgba(37, 99, 235, 0.25);

}



.app-side-user {

  border: 1px solid rgba(15, 23, 42, 0.08);

  border-radius: var(--radius-md);

  padding: 0.8rem;

  background: rgba(255, 255, 255, 0.72);

}



html[data-bs-theme="dark"] .app-side-user {

  border: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(15, 23, 42, 0.65);

}



.sidebar-card {

  border: 1px solid rgba(15, 23, 42, 0.08);

  border-radius: var(--radius-md);

  padding: 0.85rem;

  background: rgba(255, 255, 255, 0.78);

  box-shadow: var(--shadow-xs);

}



html[data-bs-theme="dark"] .sidebar-card {

  border: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(15, 23, 42, 0.65);

}



.sidebar-card-title {

  font-weight: 800;

  letter-spacing: -0.02em;

  margin-bottom: 0.55rem;

}



.sidebar-card .form-control,

.sidebar-card .form-select {

  background: rgba(255, 255, 255, 0.92);

}



html[data-bs-theme="dark"] .sidebar-card .form-control,

html[data-bs-theme="dark"] .sidebar-card .form-select {

  background: rgba(2, 6, 23, 0.7);

}



 .sidebar-ticker {

  border: 1px solid rgba(15, 23, 42, 0.08);

  border-radius: var(--radius-md);

  background: rgba(255, 255, 255, 0.78);

  box-shadow: var(--shadow-xs);

  padding: 0.55rem 0.75rem;

  overflow: hidden;

 }



 html[data-bs-theme="dark"] .sidebar-ticker {

  border: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(15, 23, 42, 0.65);

 }



 .sidebar-ticker-track {

  display: flex;

  width: max-content;

  animation: sidebarTickerScroll var(--ticker-duration, 18s) linear infinite;

  will-change: transform;

 }



 .sidebar-ticker-item {

  white-space: nowrap;

  padding-right: 2rem;

  font-size: 0.875rem;

  color: var(--text-muted);

  font-weight: 600;

 }



 @keyframes sidebarTickerScroll {

  from {

    transform: translateX(0);

  }

  to {

    transform: translateX(-50%);

  }

 }



 @media (prefers-reduced-motion: reduce) {

  .sidebar-ticker-track {

    animation-duration: 60s;

  }

 }



.app-main {

  min-width: 0;

}



.app-topbar {

  position: sticky;

  top: 0;

  z-index: 1020;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

  padding: 0.75rem 0.9rem;

  background: rgba(255, 255, 255, 0.85);

  backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(15, 23, 42, 0.08);

}



html[data-bs-theme="dark"] .app-topbar {

  background: rgba(15, 23, 42, 0.82);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



html[data-bs-theme="dark"] .app-topbar .navbar-brand img,

html[data-bs-theme="dark"] .app-sidebar .navbar-brand img,

html[data-bs-theme="dark"] .offcanvas .navbar-brand img {

  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));

}



html[data-bs-theme="dark"] .card,

html[data-bs-theme="dark"] .modal-content,

html[data-bs-theme="dark"] .offcanvas {

  border-color: rgba(255, 255, 255, 0.10);

}



html[data-bs-theme="dark"] .form-control,

html[data-bs-theme="dark"] .form-select,

html[data-bs-theme="dark"] textarea.form-control {

  border-color: rgba(255, 255, 255, 0.18);

}



html[data-bs-theme="dark"] .form-control:focus,

html[data-bs-theme="dark"] .form-select:focus,

html[data-bs-theme="dark"] textarea.form-control:focus {

  border-color: rgba(37, 99, 235, 0.65);

  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.18);

}



 .offcanvas {

  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform;

 }



 .offcanvas-backdrop {

  transition: opacity 0.2s ease;

 }



 .navbar-collapse.collapsing {

  transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1);

 }



html[data-bs-theme="dark"] .bg-white {

  background-color: rgba(15, 23, 42, 0.9) !important;

}



html[data-bs-theme="dark"] .bg-light {

  background-color: rgba(2, 6, 23, 0.6) !important;

}



.course-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 1rem;

}



@media (min-width: 992px) {

  .course-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}



@media (min-width: 1200px) {

  .course-grid {

    grid-template-columns: repeat(4, minmax(0, 1fr));

  }

}



.course-thumb {

  width: 100%;

  aspect-ratio: 16 / 9;

  background: rgba(0, 0, 0, 0.04);

  border-radius: 12px;

  overflow: hidden;

}



html[data-bs-theme="dark"] .course-thumb {

  background: rgba(255, 255, 255, 0.06);

}



.course-thumb-img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

}



.course-watch-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 1rem;

}



@media (min-width: 992px) {

  .course-watch-grid {

    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);

    align-items: start;

  }

}



.course-player {

  width: 100%;

  aspect-ratio: 16 / 9;

  border-radius: 12px;

  overflow: hidden;

  background: rgba(0, 0, 0, 0.04);

}



html[data-bs-theme="dark"] .course-player {

  background: rgba(255, 255, 255, 0.06);

}



.course-player-iframe {

  width: 100%;

  height: 100%;

  border: 0;

  display: block;

}



.app-shell.app-layout.app-editor-focus {

  grid-template-columns: 1fr;

}



.app-shell.app-layout.app-editor-focus .app-sidebar,

.app-shell.app-layout.app-editor-focus .feedback-fab {

  display: none !important;

}



.app-shell.app-layout.app-editor-focus .app-main {

  width: 100%;

}



.app-shell.app-layout.app-editor-focus #pageContent {

  max-width: none;

  width: 100%;

  padding: 1rem !important;

}



.min-w-0 {

  min-width: 0;

}



@media (max-width: 991.98px) {

  .app-layout {

    grid-template-columns: 1fr;

  }

}



.navbar-brand {

  font-weight: 600;

  letter-spacing: -0.02em;

}



.form-label {

  font-weight: 600;

  letter-spacing: -0.01em;

}



.card-kpi .kpi-value {

  font-size: 1.4rem;

  font-weight: 700;

}



h1, h2, h3, h4, h5 {

  letter-spacing: -0.02em;

}



h1, h2, h3 {

  font-weight: 800;

}



h4, h5 {

  font-weight: 750;

}



.card {

  border-color: rgba(15, 23, 42, 0.08);

}



.btn {

  border-radius: 0.85rem;

}



.btn-primary {

  border: 0;

  background: linear-gradient(180deg, rgba(37, 99, 235, 1), rgba(124, 58, 237, 0.96));

}



.btn-primary:hover {

  background: linear-gradient(180deg, rgba(29, 78, 216, 1), rgba(124, 58, 237, 1));

}



.btn-outline-primary {

  border-color: rgba(37, 99, 235, 0.55);

  color: var(--brand);

}



.btn-outline-primary:hover {

  background-color: rgba(37, 99, 235, 0.08);

  border-color: rgba(37, 99, 235, 0.65);

  color: var(--brand);

}



.avatar {

  width: 34px;

  height: 34px;

  border-radius: 999px;

  overflow: hidden;

  border: 1px solid rgba(15, 23, 42, 0.12);

  background: rgba(15, 23, 42, 0.04);

  flex: 0 0 auto;

}



.avatar-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  cursor: zoom-in;

}



.avatar-img:hover {

  filter: brightness(0.95);

}



.avatar-fallback {

  width: 100%;

  height: 100%;

  background: radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.35), rgba(124, 58, 237, 0.25));

}



.form-control,

.form-select {

  border-radius: 0.85rem;

  border-color: rgba(15, 23, 42, 0.14);

}



.form-control:focus,

.form-select:focus,

.btn:focus {

  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.20) !important;

  border-color: rgba(37, 99, 235, 0.65);

}



.py-lg-6 {

  padding-top: 4.5rem !important;

  padding-bottom: 4.5rem !important;

}



.bg-soft {

  background: var(--soft-bg);

}



.landing-hero {

  background:

    radial-gradient(900px 520px at 18% 18%, rgba(37, 99, 235, 0.34), transparent 56%),

    radial-gradient(900px 520px at 82% 30%, rgba(124, 58, 237, 0.30), transparent 60%),

    radial-gradient(700px 520px at 65% 85%, rgba(14, 165, 233, 0.18), transparent 62%),

    linear-gradient(180deg, #0b1220 0%, #0a0f1a 100%);

  position: relative;

  overflow: hidden;

}



.landing-hero::before {

  content: "";

  position: absolute;

  inset: -6rem -4rem -6rem -4rem;

  background-image: url("../Free.png");

  background-size: cover;

  background-position: center right;

  opacity: 0.24;

  filter: grayscale(0.35) saturate(1.05) blur(0.6px);

  transform: scale(1.04);

  z-index: 0;

}



.landing-hero::after {

  content: "";

  position: absolute;

  inset: 0;

  background:

    linear-gradient(180deg, rgba(225, 225, 230, 0) 80%, var(--app-bg) 100%),

    radial-gradient(900px 520px at 15% 25%, rgba(15, 23, 42, 0.30), transparent 62%),

    radial-gradient(900px 520px at 85% 30%, rgba(2, 6, 23, 0.26), transparent 62%),

    linear-gradient(90deg, rgba(2, 6, 23, 0.82) 0%, rgba(2, 6, 23, 0.60) 55%, rgba(2, 6, 23, 0.42) 100%);

  z-index: 0;

}



.landing-hero > .container {

  position: relative;

  z-index: 1;

}



.landing-hero,

.landing-hero .navbar-brand {

  color: #f8fafc;

}



.landing-hero .text-muted {

  color: rgba(226, 232, 240, 0.78) !important;

}



.landing-hero .mini-stat,

.landing-hero .feature-card,

.landing-hero .landing-card {

  background: rgba(255, 255, 255, 0.88);

}



.badge-soft {

  background: rgba(37, 99, 235, 0.10);

  border: 1px solid rgba(37, 99, 235, 0.22);

  padding: 0.4rem 0.6rem;

  border-radius: 999px;

}



.landing-card {

  border-radius: var(--radius-lg);

}



.feature-card {

  border: 1px solid rgba(15, 23, 42, 0.08);

  background: #fff;

  border-radius: 0.9rem;

  padding: 0.9rem;

  height: 100%;

}



.feature-title {

  font-weight: 700;

  color: var(--text-strong);

  margin-bottom: 0.2rem;

}



.feature-desc {

  color: var(--text-muted);

  font-size: 0.95rem;

}



.mini-stat {

  border: 1px solid rgba(15, 23, 42, 0.08);

  background: rgba(255, 255, 255, 0.7);

  backdrop-filter: blur(6px);

  border-radius: var(--radius-md);

  padding: 0.75rem 0.9rem;

}



.mini-stat-title {

  font-size: 0.8rem;

  color: var(--text-muted);

}



.mini-stat-value {

  font-size: 1.1rem;

  font-weight: 800;

  color: var(--text-strong);

}



.step-badge {

  width: 2.25rem;

  height: 2.25rem;

  border-radius: 999px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  background: rgba(37, 99, 235, 0.12);

  color: var(--brand);

  border: 1px solid rgba(37, 99, 235, 0.22);

}



.category-card {

  height: 100%;

  border-radius: var(--radius-md);

  border: 1px solid rgba(15, 23, 42, 0.08);

  background:

    radial-gradient(700px 220px at 15% 10%, rgba(37, 99, 235, 0.14), transparent 55%),

    radial-gradient(700px 220px at 85% 90%, rgba(124, 58, 237, 0.10), transparent 55%),

    rgba(255, 255, 255, 0.92);

  padding: 1.05rem 1.05rem;

  color: var(--text-strong);

  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;

  display: flex;

  align-items: center;

  gap: 0.85rem;

  overflow: hidden;

  position: relative;

}



.category-card:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-sm);

  border-color: rgba(37, 99, 235, 0.22);

}



.category-card::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 35%, transparent 65%);

  transform: translateX(-120%);

  transition: transform 600ms ease;

}



.category-card:hover::after {

  transform: translateX(120%);

}



.category-icon {

  width: 42px;

  height: 42px;

  border-radius: 14px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  letter-spacing: -0.02em;

  background: rgba(37, 99, 235, 0.12);

  border: 1px solid rgba(37, 99, 235, 0.18);

  color: var(--brand);

  flex: 0 0 auto;

}



.category-title {

  font-weight: 800;

  letter-spacing: -0.02em;

  line-height: 1.15;

}



.category-meta {

  font-size: 0.86rem;

  color: var(--text-muted);

  margin-top: 0.15rem;

}



.check-card {

  border-radius: var(--radius-md);

  border: 1px solid rgba(15, 23, 42, 0.08);

  background: #fff;

  padding: 1rem;

}



.gym-card {

  border-radius: var(--radius-lg);

  border: 1px solid rgba(15, 23, 42, 0.08);

  background:

    radial-gradient(700px 240px at 15% 10%, rgba(37, 99, 235, 0.10), transparent 55%),

    radial-gradient(700px 240px at 85% 90%, rgba(124, 58, 237, 0.08), transparent 55%),

    rgba(255, 255, 255, 0.92);

}



.mini-kpi {

  border-radius: 0.9rem;

  border: 1px solid rgba(15, 23, 42, 0.08);

  background: rgba(255, 255, 255, 0.92);

  box-shadow: var(--shadow-xs);

  padding: 0.75rem 0.85rem;

}



.mini-kpi-label {

  font-size: 0.78rem;

  color: var(--text-muted);

}



.mini-kpi-value {

  font-weight: 900;

  letter-spacing: -0.02em;

}



html[data-bs-theme="dark"] .gym-card,

html[data-bs-theme="dark"] .mini-kpi {

  border-color: rgba(255, 255, 255, 0.08);

  background: rgba(15, 23, 42, 0.80);

}



.notif-bell {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

}



.notif-bell-icon {

  font-size: 0.95rem;

}



.app-notif-fab {

  position: fixed;

  top: 14px;

  right: 14px;

  z-index: 1070;

}



.app-notif-fab.in-topbar {

  position: static;

  top: auto;

  right: auto;

  z-index: auto;

}



@media (max-width: 991.98px) {

  .app-topbar {

    align-items: center;

  }

  .app-notif-fab.in-topbar {

    margin-left: auto;

  }

}



.notif-icon-btn {

  position: relative;

  width: 44px;

  height: 44px;

  border-radius: 999px;

  border: 1px solid rgba(15, 23, 42, 0.12);

  background: rgba(255, 255, 255, 0.85);

  backdrop-filter: blur(10px);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: rgba(15, 23, 42, 0.92);

  box-shadow: var(--shadow-xs);

}



.notif-icon-btn:hover {

  background: rgba(255, 255, 255, 0.95);

}



html[data-bs-theme="dark"] .notif-icon-btn {

  border: 1px solid rgba(255, 255, 255, 0.16);

  background: rgba(15, 23, 42, 0.75);

  color: rgba(255, 255, 255, 0.95);

}



.notif-host {

  position: fixed;

  top: 62px;

  right: 14px;

  width: min(420px, calc(100vw - 28px));

  z-index: 1070;

}



.notif-host .notif-panel {

  margin-top: 0;

}



.notif-badge {

  position: absolute;

  top: -8px;

  right: -8px;

  border-radius: 999px;

  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.18);

}



.notif-panel {

  margin-top: 0.6rem;

  border-radius: var(--radius-lg);

  border: 1px solid rgba(15, 23, 42, 0.10);

  background:

    radial-gradient(700px 240px at 15% 10%, rgba(37, 99, 235, 0.10), transparent 55%),

    radial-gradient(700px 240px at 85% 90%, rgba(124, 58, 237, 0.08), transparent 55%),

    rgba(255, 255, 255, 0.92);

  box-shadow: var(--shadow-sm);

  overflow: hidden;

}



.notif-panel-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.5rem;

  padding: 0.7rem 0.8rem;

  border-bottom: 1px solid rgba(15, 23, 42, 0.08);

}



.notif-panel-sub {

  padding: 0.5rem 0.8rem;

  font-size: 0.82rem;

  color: var(--text-muted);

  border-bottom: 1px solid rgba(15, 23, 42, 0.08);

}



.notif-panel-body {

  max-height: 320px;

  overflow: auto;

  padding: 0.4rem;

}



.notif-item {

  width: 100%;

  text-align: left;

  border: 1px solid rgba(15, 23, 42, 0.08);

  background: rgba(255, 255, 255, 0.92);

  border-radius: 0.9rem;

  padding: 0.7rem 0.75rem;

  display: grid;

  gap: 0.2rem;

  cursor: pointer;

}



.notif-item + .notif-item {

  margin-top: 0.45rem;

}



.notif-item-title {

  font-weight: 900;

  letter-spacing: -0.02em;

}



.notif-item-body {

  color: var(--text-muted);

  font-size: 0.9rem;

}



.notif-item-meta {

  color: var(--text-muted);

  font-size: 0.78rem;

}



.notif-item.is-read {

  opacity: 0.78;

}



.notif-item:hover {

  border-color: rgba(37, 99, 235, 0.22);

  box-shadow: var(--shadow-xs);

}



html[data-bs-theme="dark"] .notif-panel {

  border-color: rgba(255, 255, 255, 0.10);

  background:

    radial-gradient(700px 240px at 15% 10%, rgba(37, 99, 235, 0.14), transparent 55%),

    radial-gradient(700px 240px at 85% 90%, rgba(124, 58, 237, 0.12), transparent 55%),

    rgba(15, 23, 42, 0.86);

}



html[data-bs-theme="dark"] .notif-panel-header,

html[data-bs-theme="dark"] .notif-panel-sub {

  border-bottom-color: rgba(255, 255, 255, 0.08);

}



html[data-bs-theme="dark"] .notif-item {

  border-color: rgba(255, 255, 255, 0.10);

  background: rgba(15, 23, 42, 0.80);

}



.check-title {

  font-weight: 800;

  color: var(--text-strong);

  margin-bottom: 0.2rem;

}



.check-desc {

  color: var(--text-muted);

  font-size: 0.95rem;

}



.quote {

  font-size: 1.02rem;

  line-height: 1.5;

  color: var(--text-strong);

}



.testimonial-marquee {

  position: relative;

  overflow: hidden;

  border-radius: var(--radius-lg);

  padding: 0.25rem 0;

}



.testimonial-marquee::before,

.testimonial-marquee::after {

  content: "";

  position: absolute;

  top: 0;

  bottom: 0;

  width: 64px;

  z-index: 2;

  pointer-events: none;

}



.testimonial-marquee::before {

  left: 0;

  background: linear-gradient(90deg, var(--soft-bg) 0%, rgba(225, 225, 230, 0) 100%);

}



.testimonial-marquee::after {

  right: 0;

  background: linear-gradient(270deg, var(--soft-bg) 0%, rgba(225, 225, 230, 0) 100%);

}



.testimonial-track {

  display: flex;

  gap: 1rem;

  padding: 0.25rem 0.5rem;

  width: max-content;

  animation: testimonial-scroll 28s linear infinite;

}



.testimonial-marquee:hover .testimonial-track {

  animation-play-state: paused;

}



@keyframes testimonial-scroll {

  from { transform: translateX(0); }

  to { transform: translateX(-50%); }

}



.testimonial-card {

  width: min(420px, 78vw);

  border-radius: var(--radius-md);

  border: 1px solid rgba(15, 23, 42, 0.08);

  background: rgba(255, 255, 255, 0.92);

  box-shadow: var(--shadow-xs);

  padding: 1rem 1.05rem;

}



.testimonial-quote {

  font-size: 0.98rem;

  line-height: 1.5;

  color: var(--text-strong);

}



.testimonial-author {

  margin-top: 0.65rem;

  font-size: 0.85rem;

  color: var(--text-muted);

}



.comment-cta {

  margin-top: 1rem;

  display: grid;

  gap: 0.75rem;

}



.comment-btn {

  width: fit-content;

}



.comment-panel {

  border-radius: var(--radius-lg);

  border: 1px solid rgba(15, 23, 42, 0.08);

  background:

    radial-gradient(700px 220px at 15% 10%, rgba(37, 99, 235, 0.10), transparent 55%),

    radial-gradient(700px 220px at 85% 90%, rgba(124, 58, 237, 0.08), transparent 55%),

    rgba(255, 255, 255, 0.92);

  box-shadow: var(--shadow-sm);

  padding: 1rem;

}



.comment-panel-title {

  font-weight: 800;

  letter-spacing: -0.02em;

  margin-bottom: 0.6rem;

}



.comment-hint {

  font-size: 0.82rem;

  color: var(--text-muted);

  margin-top: 0.35rem;

}



.landing-cta {

  border-radius: var(--radius-lg);

  background:

    radial-gradient(700px 300px at 20% 10%, rgba(37, 99, 235, 0.22), transparent 60%),

    radial-gradient(700px 300px at 80% 90%, rgba(124, 58, 237, 0.18), transparent 60%),

    #ffffff;

 }



 .module-card {

  border-radius: var(--radius-lg);

  border: 1px solid rgba(15, 23, 42, 0.08);

  background:

    radial-gradient(700px 240px at 15% 10%, rgba(37, 99, 235, 0.12), transparent 55%),

    radial-gradient(700px 240px at 85% 90%, rgba(124, 58, 237, 0.10), transparent 55%),

    rgba(255, 255, 255, 0.92);

  box-shadow: var(--shadow-xs);

  padding: 1rem 1.05rem;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  gap: 0.9rem;

  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;

 }



 .module-card:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-sm);

  border-color: rgba(37, 99, 235, 0.22);

 }



 .module-card-header {

  display: flex;

  align-items: flex-start;

  gap: 0.8rem;

 }



 .module-icon {

  width: 46px;

  height: 46px;

  border-radius: 16px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-weight: 900;

  background: rgba(37, 99, 235, 0.12);

  border: 1px solid rgba(37, 99, 235, 0.18);

  color: var(--brand);

  flex: 0 0 auto;

 }



 .module-title {

  font-weight: 900;

  letter-spacing: -0.02em;

 }



 .module-desc {

  margin-top: 0.15rem;

  font-size: 0.92rem;

  color: var(--text-muted);

 }



 .module-card-actions {

  display: flex;

  gap: 0.5rem;

 }



 .module-card-actions .btn {

  flex: 1 1 auto;

 }



 .module-empty {

  border-radius: var(--radius-lg);

  border: 1px solid rgba(15, 23, 42, 0.08);

  background: rgba(255, 255, 255, 0.92);

  box-shadow: var(--shadow-xs);

  padding: 1.25rem;

  margin-top: 1rem;

 }



 .billing-toggle {

  border-radius: 999px;

  padding: 0.25rem;

  background: rgba(255, 255, 255, 0.92);

  border: 1px solid rgba(15, 23, 42, 0.10);

  box-shadow: var(--shadow-xs);

  display: inline-flex;

  gap: 0.25rem;

 }



 .billing-btn {

  border: 0;

  background: transparent;

  padding: 0.55rem 0.9rem;

  border-radius: 999px;

  font-weight: 800;

  color: var(--text-muted);

 }



 .billing-btn.active {

  background: linear-gradient(180deg, rgba(37, 99, 235, 0.95), rgba(124, 58, 237, 0.92));

  color: #ffffff;

 }



 .pricing-card {

  border-radius: var(--radius-lg);

  border: 1px solid rgba(15, 23, 42, 0.08);

  background: rgba(255, 255, 255, 0.92);

  box-shadow: var(--shadow-xs);

  padding: 1.1rem 1.1rem;

  position: relative;

  overflow: hidden;

 }



 .pricing-card::before {

  content: "";

  position: absolute;

  inset: 0;

  background:

    radial-gradient(800px 260px at 18% 15%, rgba(37, 99, 235, 0.12), transparent 58%),

    radial-gradient(800px 260px at 86% 92%, rgba(124, 58, 237, 0.10), transparent 58%);

  pointer-events: none;

 }



 .pricing-card > * {

  position: relative;

  z-index: 1;

 }



 .pricing-featured {

  border-color: rgba(37, 99, 235, 0.28);

  box-shadow: 0 22px 60px rgba(2, 6, 23, 0.14);

 }



 .pricing-badge {

  position: absolute;

  top: 1rem;

  right: 1rem;

  font-size: 0.78rem;

  font-weight: 900;

  letter-spacing: 0.02em;

  background: rgba(37, 99, 235, 0.10);

  border: 1px solid rgba(37, 99, 235, 0.22);

  color: var(--brand);

  border-radius: 999px;

  padding: 0.35rem 0.6rem;

 }



 .pricing-name {

  font-weight: 950;

  letter-spacing: -0.02em;

  font-size: 1.05rem;

 }



 .pricing-price {

  margin-top: 0.6rem;

  display: flex;

  align-items: baseline;

  gap: 0.25rem;

 }



 .pricing-currency {

  font-weight: 900;

  color: var(--text-muted);

 }



 .pricing-value {

  font-weight: 950;

  font-size: 2.2rem;

  letter-spacing: -0.04em;

 }



 .pricing-period {

  font-weight: 800;

  color: var(--text-muted);

 }



 .pricing-sub {

  margin-top: 0.4rem;

  font-size: 0.95rem;

 }



 .pricing-list {

  margin: 0.95rem 0 1rem;

  padding-left: 1.15rem;

  color: var(--text-strong);

 }



 .pricing-list li {

  margin-bottom: 0.4rem;

 }



 .pricing-footnote {

  margin-top: 0.65rem;

  font-size: 0.82rem;

  color: var(--text-muted);

 }



 html[data-bs-theme="dark"] .module-card,

 html[data-bs-theme="dark"] .pricing-card,

 html[data-bs-theme="dark"] .module-empty,

 html[data-bs-theme="dark"] .billing-toggle {

  border-color: rgba(255, 255, 255, 0.10);

  background: rgba(15, 23, 42, 0.72);

 }



 html[data-bs-theme="dark"] .module-desc,

 html[data-bs-theme="dark"] .pricing-sub,

 html[data-bs-theme="dark"] .pricing-period,

 html[data-bs-theme="dark"] .pricing-currency,

 html[data-bs-theme="dark"] .pricing-footnote {

  color: rgba(226, 232, 240, 0.72) !important;

 }



 html[data-bs-theme="dark"] .pricing-badge {

  background: rgba(37, 99, 235, 0.16);

  border-color: rgba(37, 99, 235, 0.30);

 }



 .auth-page {

  min-height: 100vh;

  display: flex;

  align-items: center;

  padding: 4rem 0;

  position: relative;

  overflow: hidden;

  background:

    radial-gradient(900px 520px at 18% 18%, rgba(37, 99, 235, 0.20), transparent 55%),

    radial-gradient(900px 520px at 82% 30%, rgba(124, 58, 237, 0.18), transparent 58%),

    linear-gradient(180deg, #0b1220 0%, #0a0f1a 100%);

 }



 .auth-page::before {

  content: "";

  position: absolute;

  inset: -6rem -4rem -6rem -4rem;

  background-image: url("../Free.png");

  background-size: cover;

  background-position: center right;

  opacity: 0.18;

  filter: grayscale(0.35) saturate(1.05) blur(0.6px);

  transform: scale(1.04);

  z-index: 0;

 }



 .auth-page::after {

  content: "";

  position: absolute;

  inset: 0;

  background:

    radial-gradient(900px 520px at 15% 25%, rgba(15, 23, 42, 0.26), transparent 62%),

    radial-gradient(900px 520px at 85% 30%, rgba(2, 6, 23, 0.22), transparent 62%),

    linear-gradient(90deg, rgba(2, 6, 23, 0.78) 0%, rgba(2, 6, 23, 0.52) 55%, rgba(2, 6, 23, 0.40) 100%);

  z-index: 0;

 }



 .auth-page > .container {

  position: relative;

  z-index: 1;

 }



 .auth-card {

  border-radius: var(--radius-lg);

  border: 1px solid rgba(226, 232, 240, 0.18);

  background: rgba(255, 255, 255, 0.92);

  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.40);

  backdrop-filter: blur(14px);

 }



 .auth-logo {

  height: 72px;

  width: auto;

  display: block;

  margin: 0 auto 0.75rem;

 }



 .auth-switch {

  display: flex;

  justify-content: center;

  gap: 0.5rem;

 }



 .auth-switch .btn {

  border-radius: 999px;

 }



 .auth-switch .btn.active {

  background: var(--brand);

  border-color: var(--brand);

  color: #ffffff;

 }



 .auth-divider {

  position: relative;

  text-align: center;

 }



 .auth-divider::before {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  top: 50%;

  height: 1px;

  background: rgba(15, 23, 42, 0.10);

 }



 .auth-divider span {

  position: relative;

  display: inline-block;

  padding: 0 0.75rem;

  background: rgba(255, 255, 255, 0.92);

  color: var(--text-muted);

  font-size: 0.9rem;

 }



 .auth-card .form-control,

 .auth-card .form-select {

  background: #ffffff;

  border-color: rgba(15, 23, 42, 0.10);

  border-radius: 999px;

  padding: 0.85rem 1.05rem;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);

 }



 .auth-card .form-control:focus,

 .auth-card .form-select:focus {

  background: rgba(255, 255, 255, 0.98);

  border-color: rgba(37, 99, 235, 0.35);

  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.12);

 }



 .auth-card .btn {

  border-radius: 999px;

  padding: 0.85rem 1.05rem;

  font-weight: 600;

  letter-spacing: 0.01em;

  transition: transform 120ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease;

 }



 .auth-card .btn:hover {

  transform: translateY(-1px);

  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.18);

 }



 .auth-card .btn:active {

  transform: translateY(0);

 }



 .auth-card .btn-primary {

  border: 0;

  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.92));

 }



 .auth-card .btn-primary:hover {

  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));

 }



 .btn-google {

  background: #ffffff;

  border: 1px solid rgba(15, 23, 42, 0.14);

  color: rgba(15, 23, 42, 0.92);

 }



 .btn-google:hover {

  background: #ffffff;

  border-color: rgba(15, 23, 42, 0.20);

 }



 .btn-google-inner {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.6rem;

 }



 .btn-google-icon {

  width: 18px;

  height: 18px;

  display: block;

}



.btn.btn-primary .btn-google-icon {

  filter: brightness(0) invert(1);

}



 .btn-white {

  background: #ffffff;

  border: 1px solid rgba(15, 23, 42, 0.14);

  color: rgba(15, 23, 42, 0.92);

 }



 .btn-white:hover {

  background: #ffffff;

  border-color: rgba(15, 23, 42, 0.20);

 }



 .auth-card .btn-link {

  color: rgba(15, 23, 42, 0.70);

  text-decoration: none;

  font-weight: 600;

}



.auth-card .btn-link:hover {

  color: rgba(15, 23, 42, 0.92);

  text-decoration: underline;

}



 .feedback-fab {

  position: fixed;

  right: 18px;

  bottom: 18px;

  width: 52px;

  height: 52px;

  border-radius: 999px;

  border: 1px solid rgba(37, 99, 235, 0.22);

  background: linear-gradient(180deg, rgba(37, 99, 235, 0.95), rgba(124, 58, 237, 0.92));

  color: #ffffff;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.35);

  z-index: 1060;

 }



 .feedback-fab:hover {

  transform: translateY(-2px);

  box-shadow: 0 22px 50px rgba(2, 6, 23, 0.45);

 }



 .feedback-fab:active {

  transform: translateY(0);

 }



 .feedback-fab-icon {

  font-size: 18px;

  line-height: 1;

 }



 .cm-editor {

  border: 1px solid rgba(15, 23, 42, 0.12);

  border-radius: 0.85rem;

  overflow: hidden;

  background: rgba(2, 6, 23, 0.92);

  color: rgba(248, 250, 252, 0.92);

 }



 .cm-editor .cm-scroller {

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  font-size: 13.5px;

 }



 .cm-editor .cm-gutters {

  background: rgba(2, 6, 23, 0.92);

  color: rgba(148, 163, 184, 0.9);

  border-right: 1px solid rgba(148, 163, 184, 0.18);

 }



 .cm-editor.cm-focused {

  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.2);

  border-color: rgba(37, 99, 235, 0.55);

 }



 body.force-light-landing .landing-hero {

  background:

    radial-gradient(900px 520px at 18% 18%, rgba(37, 99, 235, 0.18), transparent 55%),

    radial-gradient(900px 520px at 82% 30%, rgba(124, 58, 237, 0.14), transparent 58%),

    radial-gradient(700px 520px at 65% 85%, rgba(14, 165, 233, 0.10), transparent 60%),

    linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);

 }



 body.force-light-landing .landing-hero::after {

  background:

    linear-gradient(180deg, rgba(225, 225, 230, 0) 75%, var(--soft-bg) 100%),

    radial-gradient(900px 520px at 15% 25%, rgba(15, 23, 42, 0.08), transparent 62%),

    radial-gradient(900px 520px at 85% 30%, rgba(2, 6, 23, 0.06), transparent 62%),

    linear-gradient(90deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.58) 55%, rgba(255, 255, 255, 0.40) 100%);

 }



 body.force-light-landing .landing-hero,

 body.force-light-landing .landing-hero .navbar-brand {

  color: var(--text-strong);

 }



 body.force-light-landing .landing-hero .text-muted {

  color: var(--text-muted) !important;

 }



 body.force-light-auth .auth-page {

  background:

    radial-gradient(900px 520px at 18% 18%, rgba(37, 99, 235, 0.14), transparent 55%),

    radial-gradient(900px 520px at 82% 30%, rgba(124, 58, 237, 0.12), transparent 58%),

    linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);

 }



 body.force-light-auth .auth-page::after {

  background:

    radial-gradient(900px 520px at 15% 25%, rgba(15, 23, 42, 0.08), transparent 62%),

    radial-gradient(900px 520px at 85% 30%, rgba(2, 6, 23, 0.06), transparent 62%),

    linear-gradient(90deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.52) 55%, rgba(255, 255, 255, 0.40) 100%);

 }



 body.force-light-auth .auth-card .btn-primary {

  background: linear-gradient(180deg, rgba(37, 99, 235, 0.95), rgba(124, 58, 237, 0.92));

 }



 body.force-light-auth .auth-card .btn-primary:hover {

  background: linear-gradient(180deg, rgba(37, 99, 235, 1), rgba(124, 58, 237, 0.98));

 }



 .docs-shell {

  display: grid;

  grid-template-columns: 280px 1fr;

  gap: 1rem;

 }



 @media (max-width: 991.98px) {

  .docs-shell {

    grid-template-columns: 1fr;

  }

 }



 .docs-sidebar {

  border: 1px solid rgba(15, 23, 42, 0.08);

  border-radius: var(--radius-md);

  background: rgba(255, 255, 255, 0.78);

  box-shadow: var(--shadow-xs);

  padding: 0.85rem;

 }



 html[data-bs-theme="dark"] .docs-sidebar {

  border: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(15, 23, 42, 0.65);

 }



 .docs-canvas {

  border: 1px solid rgba(15, 23, 42, 0.08);

  border-radius: var(--radius-md);

  background: rgba(255, 255, 255, 0.86);

  box-shadow: var(--shadow-sm);

  overflow: auto;

  padding: 1rem;

 }



 html[data-bs-theme="dark"] .docs-canvas {

  border: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(15, 23, 42, 0.70);

 }



 .doc-zoom-wrap {

  transform-origin: top left;

 }



 .doc-page {

  width: min(816px, 100%);

  margin: 0 auto;

  background: #ffffff;

  border-radius: 0.9rem;

  border: 1px solid rgba(15, 23, 42, 0.10);

  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.10);

 }



 html[data-bs-theme="dark"] .doc-page {

  background: rgba(2, 6, 23, 0.60);

  border: 1px solid rgba(255, 255, 255, 0.10);

 }



 .doc-toolbar {

  position: sticky;

  top: 0;

  z-index: 10;

  background: rgba(255, 255, 255, 0.92);

  border-bottom: 1px solid rgba(15, 23, 42, 0.08);

  padding: 0.6rem 0.75rem;

  border-top-left-radius: 0.9rem;

  border-top-right-radius: 0.9rem;

 }



 html[data-bs-theme="dark"] .doc-toolbar {

  background: rgba(15, 23, 42, 0.86);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

 }



 .doc-editor {

  padding: 0.85rem 1rem 1.15rem;

 }



 .doc-editor .ql-toolbar.ql-snow,

 .doc-editor .ql-container.ql-snow {

  border: 0;

 }



 html[data-bs-theme="dark"] .doc-editor .ql-editor {

  color: rgba(248, 250, 252, 0.92);

 }



 html[data-bs-theme="dark"] .doc-editor .ql-editor a {

  color: #93c5fd;

 }



 .docs-shell-word {

  grid-template-columns: 340px 1fr;

 }



 @media (max-width: 991.98px) {

  .docs-shell-word {

    grid-template-columns: 1fr;

  }

 }



 .docs-tool-tabs {

  display: flex;

  gap: 0.5rem;

 }



 .docs-tool-tabs .btn {

  flex: 1 1 auto;

 }



 .doc-ribbon {

  display: flex;

  flex-direction: column;

  gap: 0.4rem;

 }



 .doc-ribbon-row {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  align-items: center;

 }



 .doc-ribbon-group {

  display: inline-flex;

  align-items: center;

  gap: 0.25rem;

  padding-right: 0.45rem;

  margin-right: 0.15rem;

  border-right: 1px solid rgba(15, 23, 42, 0.10);

 }



 html[data-bs-theme="dark"] .doc-ribbon-group {

  border-right: 1px solid rgba(255, 255, 255, 0.10);

 }



 .doc-ribbon-group:last-child {

  border-right: 0;

  padding-right: 0;

  margin-right: 0;

 }



 .doc-ribbon select,

 .doc-ribbon button {

  border-radius: 0.7rem;

 }



 .doc-ribbon .ql-font,

 .doc-ribbon .ql-size {

  min-width: 150px;

 }



 .doc-ribbon .ql-size {

  min-width: 92px;

 }



 .doc-toolbar.ql-toolbar {

  padding: 0.65rem 0.75rem;

 }



 .doc-toolbar.ql-toolbar button {

  width: 34px;

  height: 34px;

 }



 .doc-toolbar.ql-toolbar .ql-formats {

  margin-right: 0.35rem;

 }



 .doc-toolbar.ql-toolbar.ql-snow {

  border: 0;

 }



 .doc-page .ql-container.ql-snow {

  border: 0;

 }



 .doc-page .ql-editor {

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  font-size: 16px;

  line-height: 1.55;

  min-height: 60vh;

 }



 html[data-bs-theme="dark"] .docs-sidebar .bg-light,

 html[data-bs-theme="dark"] .docs-sidebar .border {

  background: rgba(2, 6, 23, 0.65) !important;

  border-color: rgba(255, 255, 255, 0.10) !important;

  color: rgba(248, 250, 252, 0.90);

 }



 html[data-bs-theme="dark"] .docs-sidebar .list-group-item {

  background: rgba(2, 6, 23, 0.65);

  color: rgba(248, 250, 252, 0.90);

  border-color: rgba(255, 255, 255, 0.10);

 }



 html[data-bs-theme="dark"] .docs-sidebar .list-group-item-action:hover {

  background: rgba(15, 23, 42, 0.86);

 }



 .ql-font-inter {

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

 }



 .ql-font-arial {

  font-family: Arial, Helvetica, sans-serif;

 }



 .ql-font-times-new-roman {

  font-family: "Times New Roman", Times, serif;

 }



 .ql-font-georgia {

  font-family: Georgia, serif;

 }



 .ql-font-courier-new {

  font-family: "Courier New", Courier, monospace;

 }



 .ql-font-serif {

  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

 }



 .ql-font-monospace {

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

 }