@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html,
body {
  background: linear-gradient(180deg, #f2f4fa 0%, #edf1f7 100%) !important;
  color: #211a2c !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  box-sizing: border-box !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

a {
  color: #ff5a1f !important;
  text-decoration-color: rgba(255, 90, 31, 0.45) !important;
  text-underline-offset: 2px !important;
  transition: color 0.2s ease, text-decoration-color 0.2s ease !important;
}

a:hover,
a:focus {
  color: #de3232 !important;
  text-decoration-color: rgba(222, 50, 50, 0.6) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #190d23 !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
}

p,
li,
span,
small,
div {
  color: inherit !important;
}

/* Header */
#mainNav {
  position: relative !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #150720 0%, #22081f 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 136, 51, 0.2), 0 14px 30px rgba(21, 7, 32, 0.36) !important;
  z-index: 20 !important;
}

#mainNav::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(255, 90, 31, 0), rgba(255, 136, 51, 0.75), rgba(255, 90, 31, 0)) !important;
  pointer-events: none !important;
}

#mainNav .navbar-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 72px !important;
}

#mainNav .container-fluid {
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding: 14px 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

#mainNav .brand,
#mainNav .navbar-brand {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: auto !important;
}

#mainNav .brand img,
#mainNav .navbar-brand img {
  max-height: 34px !important;
  width: auto !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18)) !important;
}

#mainNav .nav-collapse {
  margin-left: auto !important;
}

#mainNav .nav {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

#mainNav .nav > li {
  margin: 0 !important;
}

#mainNav .nav > li > a {
  color: #f4ebff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  opacity: 0.9 !important;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease !important;
}

#mainNav .nav > li > a:hover,
#mainNav .nav > li > a:focus {
  color: #ffffff !important;
  opacity: 1 !important;
  background: rgba(255, 136, 51, 0.18) !important;
}

#mainNav .nav > li.active > a {
  color: #ffffff !important;
  background: rgba(255, 90, 31, 0.24) !important;
  opacity: 1 !important;
}

/* Hero */
#docsSearch {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 76px 20px 82px !important;
  text-align: center !important;
  background: radial-gradient(120% 120% at 12% -4%, rgba(255, 136, 51, 0.14) 0%, rgba(255, 136, 51, 0) 34%), linear-gradient(155deg, #150720 0%, #250b28 45%, #370e24 80%, #421019 100%) !important;
}

#docsSearch::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -128px !important;
  width: min(960px, 94vw) !important;
  height: 280px !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(ellipse at center, rgba(255, 136, 51, 0.34) 0%, rgba(255, 90, 31, 0.13) 42%, rgba(255, 90, 31, 0) 76%) !important;
  pointer-events: none !important;
}

#docsSearch h1 {
  position: relative !important;
  margin: 0 auto 22px !important;
  max-width: 850px !important;
  color: #f7efff !important;
  font-size: clamp(30px, 5vw, 46px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  text-wrap: balance !important;
}

#docsSearch #searchBar {
  position: relative !important;
  margin: 0 auto !important;
  max-width: 760px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  padding: 8px !important;
  border-radius: 18px !important;
  background: rgba(247, 239, 255, 0.1) !important;
  border: 1px solid rgba(247, 239, 255, 0.2) !important;
  box-shadow: 0 18px 44px rgba(6, 2, 10, 0.38) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

#docsSearch #searchBar .search-query {
  width: 100% !important;
  margin: 0 !important;
  height: 52px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(247, 239, 255, 0.3) !important;
  border-radius: 12px !important;
  background: rgba(247, 239, 255, 0.14) !important;
  color: #fcf8ff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

#docsSearch #searchBar .search-query::placeholder {
  color: rgba(247, 239, 255, 0.8) !important;
}

#docsSearch #searchBar .search-query:focus {
  outline: none !important;
  border-color: rgba(255, 136, 51, 0.92) !important;
  box-shadow: 0 0 0 3px rgba(255, 136, 51, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

#docsSearch #searchBar button {
  margin: 0 !important;
  height: 52px !important;
  min-width: 130px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #ff8833 0%, #ff5a1f 100%) !important;
  color: #2f1300 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 8px 20px rgba(255, 90, 31, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}

#docsSearch #searchBar button:hover,
#docsSearch #searchBar button:focus {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(255, 90, 31, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  filter: saturate(1.05) !important;
}

/* Main content shell */
#contentArea {
  max-width: 1160px !important;
  margin: 24px auto 0 !important;
  padding: 38px 24px 54px !important;
  background: #f8faff !important;
  border: 1px solid #dfe5f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 40px rgba(22, 27, 48, 0.06) !important;
}

#contentArea .container-fluid,
#contentArea .row-fluid {
  margin: 0 !important;
  padding: 0 !important;
}

#contentArea h2 {
  color: #260e1f !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
}

#main-content .category-description,
#main-content .categoryDescription {
  margin: 0 0 18px !important;
  color: #5c6984 !important;
  font-size: 16px !important;
}

#sortBy {
  min-width: 190px !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid #cfd8ea !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #2f2740 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(21, 29, 50, 0.06) !important;
}

#sortBy:focus {
  outline: none !important;
  border-color: rgba(255, 90, 31, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.16) !important;
}

#main-content .articleList {
  margin: 16px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

#main-content .articleList li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#main-content .articleList li a {
  display: block !important;
  padding: 13px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #dde4f2 !important;
  background: #ffffff !important;
  color: #332545 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

#main-content .articleList li a:hover,
#main-content .articleList li a:focus {
  color: #ff5a1f !important;
  border-color: rgba(255, 90, 31, 0.42) !important;
  transform: translateY(-1px) !important;
}

/* Popular articles */
.most-pop-articles {
  margin: 0 0 28px !important;
  padding: 0 !important;
  background: transparent !important;
}

.most-pop-articles h2 {
  margin: 0 0 14px !important;
}

.popArticles {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.popArticles li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.popArticles li a {
  display: block !important;
  padding: 13px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #dde4f2 !important;
  background: #ffffff !important;
  color: #342245 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

.popArticles li a:hover,
.popArticles li a:focus {
  color: #ff5a1f !important;
  border-color: rgba(255, 90, 31, 0.42) !important;
  background: #ffffff !important;
  transform: translateY(-1px) !important;
}

.icon-article-doc {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
}

.sep {
  margin: 28px 0 !important;
  border: 0 !important;
  border-top: 1px solid #dfe5f0 !important;
}

/* Category cards */
.category-list {
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.category-list .category {
  position: relative !important;
  display: block !important;
  min-height: 145px !important;
  padding: 20px 18px !important;
  border-radius: 14px !important;
  border: 1px solid #dde4f2 !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(21, 29, 50, 0.08) !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.category-list .category::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #ff8833 0%, #ff5a1f 70%, #de3232 100%) !important;
  opacity: 0.35 !important;
  transition: opacity 0.2s ease !important;
}

.category-list .category:hover,
.category-list .category:focus {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 90, 31, 0.34) !important;
  box-shadow: 0 16px 30px rgba(21, 7, 32, 0.15) !important;
}

.category-list .category:hover::before,
.category-list .category:focus::before {
  opacity: 1 !important;
}

.category-list .category h3,
.category-list .category h4 {
  margin: 0 0 8px !important;
  color: #251a36 !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

.category-list .category .article-count {
  margin: 0 !important;
  color: #5f6d87 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.category-list .category .article-count .notranslate {
  color: #2f2244 !important;
  font-weight: 700 !important;
}

/* Article pages */
#main-content,
#fullArticle,
.article-body,
.article-content,
.contentWrapper {
  color: #2a1828 !important;
}

#main-content h1,
#fullArticle h1,
.article-body h1,
.article-content h1 {
  color: #180a22 !important;
  font-size: clamp(30px, 4vw, 40px) !important;
  line-height: 1.14 !important;
  margin: 0 0 16px !important;
}

a[href='javascript:window.print()'] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: 1px solid #d6deef !important;
  background: #ffffff !important;
  color: #64557d !important;
  text-decoration: none !important;
}

a[href='javascript:window.print()']:hover,
a[href='javascript:window.print()']:focus {
  border-color: rgba(255, 90, 31, 0.36) !important;
  color: #ff5a1f !important;
}

#main-content h2,
#fullArticle h2,
.article-body h2,
.article-content h2 {
  color: #240f22 !important;
  font-size: clamp(24px, 3vw, 30px) !important;
  line-height: 1.25 !important;
  margin: 32px 0 10px !important;
}

#main-content h3,
#fullArticle h3,
.article-body h3,
.article-content h3 {
  color: #2f1530 !important;
  font-size: 21px !important;
  line-height: 1.32 !important;
  margin: 24px 0 8px !important;
}

#main-content p,
#fullArticle p,
.article-body p,
.article-content p,
#main-content li,
#fullArticle li,
.article-body li,
.article-content li {
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: #2f1d2f !important;
}

#main-content ul,
#fullArticle ul,
.article-body ul,
.article-content ul,
#main-content ol,
#fullArticle ol,
.article-body ol,
.article-content ol {
  padding-left: 1.2em !important;
}

#main-content a,
#fullArticle a,
.article-body a,
.article-content a {
  color: #ff5a1f !important;
  font-weight: 600 !important;
}

#main-content a:hover,
#fullArticle a:hover,
.article-body a:hover,
.article-content a:hover {
  color: #de3232 !important;
}

#main-content code,
#fullArticle code,
.article-body code,
.article-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace !important;
  font-size: 0.92em !important;
  color: #ffe7d9 !important;
  background: #23091d !important;
  border: 1px solid rgba(255, 136, 51, 0.38) !important;
  border-radius: 6px !important;
  padding: 0.14em 0.4em !important;
}

#main-content pre,
#fullArticle pre,
.article-body pre,
.article-content pre {
  margin: 20px 0 !important;
  padding: 16px !important;
  border-radius: 10px !important;
  overflow-x: auto !important;
  background: linear-gradient(160deg, #150720 0%, #25091f 100%) !important;
  border: 1px solid rgba(255, 136, 51, 0.32) !important;
  box-shadow: 0 10px 22px rgba(21, 7, 32, 0.22) !important;
}

#main-content pre code,
#fullArticle pre code,
.article-body pre code,
.article-content pre code {
  background: transparent !important;
  border: 0 !important;
  color: #ffe9de !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

#main-content blockquote,
#fullArticle blockquote,
.article-body blockquote,
.article-content blockquote {
  margin: 20px 0 !important;
  padding: 12px 16px !important;
  border-left: 4px solid #ff5a1f !important;
  background: rgba(255, 136, 51, 0.08) !important;
  color: #361527 !important;
  border-radius: 0 10px 10px 0 !important;
}

/* Sidebar, crumbs, metadata */
#sidebar,
.sidebar,
aside#sidebar {
  background: #ffffff !important;
  border: 1px solid #dfe5f0 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  box-shadow: 0 10px 24px rgba(21, 29, 50, 0.06) !important;
}

#sidebar h3,
.sidebar h3 {
  margin: 0 0 10px !important;
  color: #566480 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#sidebar #searchBar.sm,
.sidebar #searchBar.sm {
  margin: 0 0 14px !important;
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#sidebar .search-query,
.sidebar .search-query {
  display: block !important;
  height: 42px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid #cfd8ea !important;
  border-radius: 10px !important;
  background: #f7f9ff !important;
  color: #2a1e3a !important;
  box-shadow: none !important;
}

#sidebar #searchBar.sm button,
.sidebar #searchBar.sm button {
  margin: 0 !important;
  min-width: 86px !important;
  width: 86px !important;
  height: 42px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background: linear-gradient(180deg, #ff8833 0%, #ff5a1f 100%) !important;
  color: #301600 !important;
  box-shadow: 0 8px 18px rgba(255, 90, 31, 0.28) !important;
  transform: none !important;
  text-shadow: none !important;
  overflow: hidden !important;
}

#sidebar #searchBar.sm button i,
.sidebar #searchBar.sm button i {
  display: none !important;
}

#sidebar #searchBar.sm button::after,
.sidebar #searchBar.sm button::after {
  content: 'Search' !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

#sidebar .nav,
#sidebar .nav-list,
.sidebar .nav,
.sidebar .nav-list {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#sidebar .nav > li > a,
#sidebar .nav-list > li > a,
.sidebar a {
  display: block !important;
  padding: 10px 11px !important;
  border-radius: 8px !important;
  color: #39284e !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.articleFoot button,
#main-content button {
  border-radius: 10px !important;
}

#sidebar .nav > li > a:hover,
#sidebar .nav-list > li > a:hover,
#sidebar .nav > li.active > a,
#sidebar .nav-list > li.active > a,
.sidebar li.active a {
  color: #ff5a1f !important;
  background: rgba(255, 90, 31, 0.1) !important;
  border-color: rgba(255, 90, 31, 0.28) !important;
}

#sidebar .icon-arrow,
.sidebar .icon-arrow {
  display: none !important;
}

#sidebar .nav li.active a::after,
#sidebar .nav-list li.active a::after,
.sidebar li.active a::after {
  content: '→' !important;
  font-weight: 700 !important;
  margin-left: 6px !important;
  color: #ff5a1f !important;
}

.breadcrumbs,
.breadcrumb,
ol.breadcrumb {
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.breadcrumb a,
.breadcrumbs a {
  color: #730011 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

#fullArticle .articleFoot,
.articleFoot {
  margin-top: 28px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(79, 0, 11, 0.14) !important;
}

.articleFoot time.lu,
time.lu {
  color: #6e576f !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Utility states */
::selection {
  color: #1f0f1f !important;
  background: rgba(255, 136, 51, 0.4) !important;
}

.no-results,
#noResults {
  background: #fff !important;
  border: 1px solid #dde4f2 !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

/* Footer */
footer,
#contentArea footer,
.center footer,
.powered-by {
  margin-top: 34px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(79, 0, 11, 0.1) !important;
  color: #7b667d !important;
  background: transparent !important;
  text-align: center !important;
}

footer p,
footer span,
footer a,
.powered-by,
.powered-by a {
  color: #7b667d !important;
  font-size: 13px !important;
}

footer a:hover,
.powered-by a:hover {
  color: #ff5a1f !important;
}

/* Responsive */
@media (max-width: 980px) {
  #mainNav .container-fluid {
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 12px 16px !important;
  }

  #mainNav .nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  #docsSearch {
    padding: 58px 16px 62px !important;
  }

  #docsSearch #searchBar {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #docsSearch #searchBar button {
    width: 100% !important;
  }

  .popArticles {
    grid-template-columns: 1fr !important;
  }

  .category-list {
    grid-template-columns: 1fr 1fr !important;
  }

  #contentArea {
    margin: 12px auto 0 !important;
    padding: 26px 16px 40px !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 700px) {
  .category-list {
    grid-template-columns: 1fr !important;
  }

  #main-content,
  #fullArticle {
    width: 100% !important;
  }

  #sidebar,
  aside#sidebar,
  .sidebar {
    margin-top: 20px !important;
    padding: 14px !important;
  }

  #main-content p,
  #fullArticle p,
  .article-body p,
  .article-content p,
  #main-content li,
  #fullArticle li,
  .article-body li,
  .article-content li {
    font-size: 16px !important;
  }
}