/* =========================================================================
   JavaByTechie - shared styles for the microservices pages
   Part 1: site layout (formerly /css/microservices-style.css)
   Part 2: styles that every tutorial page used to repeat in <style> blocks
   Keep the order: later rules override earlier ones.
   ========================================================================= */

/* ===== Part 1: site layout ===== */
/* --- Reset and colour variables --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --primary: #421983;
  --primary-light: #5a2da2;
  --primary-dark: #321264;
  --secondary: #ffcc00;
  --accent: #00c9a7;
  --light: #f8f9fa;
  --dark: #212529;
  --gray: #6c757d;
  --light-gray: #e9ecef;
  --sidebar-width: 280px;
  --sidebar-collapsed: 70px;
  --night-bg: #1a1a1a;
  --night-card: #2d2d2d;
  --night-border: #404040;
  --night-text: #e9ecef;
  --night-text-secondary: #adb5bd;
}
body {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  color: var(--dark);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Inter", sans-serif;
  transition: all 0.3s ease;
}
body.night-mode {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  color: var(--night-text);
}
/* --- Base elements --- */
a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}
ul {
  list-style: none;
}
/* --- Header and top navigation --- */
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}
header {
  background: linear-gradient(to right, var(--primary-dark), var(--primary));
  color: #fff;
  padding: 7px 0;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font-size: 2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  font-family: "Poppins", sans-serif;
}
.logo i {
  color: var(--secondary);
  font-size: 2.4rem;
}
.logo span {
  color: var(--secondary);
  background: linear-gradient(to right, var(--secondary), #ffdd44);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #fff0;
}
nav ul {
  display: flex;
  gap: 5px;
}
nav ul li a {
  padding: 8px 15px;
  border-radius: 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
  font-family: "Poppins", sans-serif;
}
nav ul li a:hover,
nav ul li a.active {
  background-color: rgb(255 255 255 / 0.15);
  transform: translateY(-1px);
}
nav ul li a i {
  font-size: 1.1rem;
}
.dropdown {
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  background: #fff;
  min-width: 240px;
  box-shadow: 0 10px 25px rgb(0 0 0 / 0.15);
  border-radius: 8px;
  z-index: 10;
  top: 100%;
  left: 0;
  overflow: hidden;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(-10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}
.dropdown-content a {
  color: var(--dark);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--light-gray);
  transition: all 0.2s;
  font-family: "Inter", sans-serif;
}
.dropdown-content a:last-child {
  border-bottom: none;
}
.dropdown-content a:hover {
  background-color: var(--light);
  color: var(--primary);
  padding-left: 25px;
}
.dropdown-content a i {
  color: var(--primary);
  width: 20px;
  text-align: center;
}
.dropdown:hover .dropdown-content {
  display: block;
}
body.night-mode header {
  background: linear-gradient(to right, #2d1a5c, #3d2175);
}
body.night-mode .dropdown-content {
  background: var(--night-card);
  border: 1px solid var(--night-border);
}
body.night-mode .dropdown-content a {
  color: var(--night-text);
  border-bottom-color: var(--night-border);
}
body.night-mode .dropdown-content a:hover {
  background: var(--primary);
  color: #fff;
}
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: whitesmoke;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: auto;
  z-index: 1001;
}
/* --- Page toolbar (last updated, actions, share) --- */
.share-dropdown {
  position: relative;
  display: inline-block;
}
.share-option.whatsapp {
  color: #25d366;
  font-size: 15px;
}
.share-option.facebook {
  color: #1877f2;
  font-size: 15px;
}
.share-option.x {
  color: #000;
  font-size: 15px;
}
.share-option.linkedin {
  color: #0a66c2;
  font-size: 15px;
}
.share-option.link {
  color: #6c757d;
  font-size: 15px;
}
.page-actions {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  padding: 12px 0;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}
.actions-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
.action-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.last-updated {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6c757d;
  font-weight: 500;
}
.last-updated i {
  color: #421983;
}
.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: #495057;
  cursor: pointer;
  transition: all 0.2s ease;
}
.action-btn:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
  transform: translateY(-1px);
}
.action-btn:active {
  transform: translateY(0);
}
.action-btn i {
  font-size: 0.9rem;
}
body.night-mode .page-actions {
  background-color: var(--night-card);
  border-bottom-color: var(--night-border);
}
body.night-mode .last-updated {
  color: var(--night-text-secondary);
}
body.night-mode .action-btn {
  background-color: var(--night-card);
  border-color: var(--night-border);
  color: var(--night-text);
}
body.night-mode .action-btn:hover {
  background-color: #3a3a3a;
  border-color: #555;
}
.share-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  z-index: 1000;
  min-width: 180px;
  margin-top: 5px;
}
.share-options.show {
  display: block;
}
.share-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  text-decoration: none;
  color: #495057;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-size: 0.85rem;
}
.share-option:hover {
  background-color: #f8f9fa;
  text-decoration: none;
  color: #495057;
}
body.night-mode .share-options {
  background: var(--night-card);
  border-color: var(--night-border);
}
body.night-mode .share-option {
  color: var(--night-text);
}
body.night-mode .share-option:hover {
  background-color: #3a3a3a;
}
/* --- Previous / next navigation --- */
.page-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e9ecef;
  gap: 20px;
}
.nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  flex: 0 1 280px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  color: #495057;
  min-height: 80px;
}
.nav-icon {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.nav-content {
  flex: 1;
  overflow: hidden;
}
.nav-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* --- Toast message --- */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #28a745;
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
  z-index: 10000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}
/* --- Page layout and left sidebar --- */
.main-content {
  display: flex;
  margin: 40px 0;
  gap: 25px;
  flex: 1;
  transition: all 0.3s ease;
}
.left-sidebar {
  flex: 0 0 var(--sidebar-collapsed);
  background: #fff;
  border-radius: 12px;
  padding: 25px 15px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.8);
  height: fit-content;
  position: sticky;
  top: 100px;
  transition: all 0.3s ease;
  overflow: hidden;
}
.left-sidebar.expanded {
  flex: 0 0 var(--sidebar-width);
  padding: 20px;
}
.content {
  text-align: justify;
  flex: 1;
  background: #fff;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.8);
  transition: all 0.3s ease;
}
.ad-space {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
body.night-mode .left-sidebar,
body.night-mode .content {
  background: var(--night-card);
  border-color: var(--night-border);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.3);
}
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--light-gray);
}
.sidebar-title {
  color: var(--primary);
  font-size: 1.4rem;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}
.left-sidebar:not(.expanded) .sidebar-title span {
  display: none;
}
.sidebar-title i {
  color: var(--secondary);
  font-size: 1.6rem;
}
.toggle-sidebar {
  background: var(--light-gray);
  border: none;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--primary);
}
.toggle-sidebar:hover {
  background: var(--primary);
  color: #fff;
  transform: rotate(180deg);
}
.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: all 0.3s ease;
}
.left-sidebar:not(.expanded) .sidebar-menu {
  opacity: 0;
  pointer-events: none;
}
.sidebar-section {
  margin-bottom: 20px;
  transition: all 0.3s ease;
}
.left-sidebar:not(.expanded) .sidebar-section {
  margin-bottom: 0;
}
.sidebar-section h3 {
  color: var(--primary-light);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 12px;
  padding-left: 10px;
  border-left: 3px solid var(--accent);
  font-family: "Poppins", sans-serif;
  transition: all 0.3s ease;
}
.left-sidebar:not(.expanded) .sidebar-section h3 {
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
}
.sidebar-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 7px;
  border-radius: 8px;
  color: var(--dark);
  transition: all 0.3s;
  font-weight: 420;
  border: 1px solid #fff0;
}
.sidebar-menu a i {
  color: var(--primary);
  width: 20px;
  text-align: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.left-sidebar:not(.expanded) .sidebar-menu a {
  padding: 12px;
  justify-content: center;
}
.left-sidebar:not(.expanded) .sidebar-menu a span {
  display: none;
}
.sidebar-menu a:hover {
  background: linear-gradient(135deg, var(--light) 0%, #f0f2f5 100%);
  color: var(--primary);
  transform: translateX(5px);
  border-color: var(--light-gray);
}
.left-sidebar:not(.expanded) .sidebar-menu a:hover {
  transform: translateX(0) scale(1.05);
}
.sidebar-menu a.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgb(66 25 131 / 0.3);
}
.sidebar-menu a.active i {
  color: var(--secondary);
}
body.night-mode .sidebar-header {
  border-bottom-color: var(--night-border);
}
body.night-mode .sidebar-title {
  color: var(--secondary);
}
body.night-mode .toggle-sidebar {
  background: var(--night-border);
  color: var(--night-text);
}
body.night-mode .toggle-sidebar:hover {
  background: var(--primary);
}
body.night-mode .sidebar-section h3 {
  color: var(--secondary);
}
body.night-mode .sidebar-menu a {
  color: var(--night-text);
}
body.night-mode .sidebar-menu a:hover {
  background: #3a3a3a;
  color: var(--secondary);
}
body.night-mode .sidebar-menu a i {
  color: var(--secondary);
}
/* --- Headings and text --- */
h1 {
  color: var(--primary);
  margin-bottom: 50px;
  font-size: 2.2rem;
  position: relative;
  padding-bottom: 15px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  text-align: left !important;
}
h1:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 4px;
  background: linear-gradient(to right, var(--primary), var(--accent));
  border-radius: 2px;
}
h2 {
  color: var(--primary);
  margin: 35px 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--light-gray);
  font-size: 2rem;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}
p {
  margin-bottom: 20px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.7;
}
body.night-mode h1,
body.night-mode h2 {
  color: var(--secondary);
}
body.night-mode h1:after {
  background: linear-gradient(to right, var(--secondary), var(--accent));
}
body.night-mode h2 {
  border-bottom-color: var(--night-border);
}
body.night-mode p {
  color: var(--night-text);
}
/* --- Advertisement label --- */
.ad-title {
  text-align: center;
  color: var(--gray);
  font-size: 0.9rem;
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: "Inter", sans-serif;
}
body.night-mode .ad-title {
  color: var(--night-text-secondary);
}
/* --- Previous / next buttons --- */
.page-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding-top: 6rem;
  border-top: 1px solid #e9ecef;
  gap: 20px;
}
.nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  flex: 1;
  max-width: 380px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  color: #495057;
}
.nav-btn:hover {
  background: #421983;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(66 25 131 / 0.2);
  border-color: #421983;
}
.nav-btn:active {
  transform: translateY(0);
}
.nav-btn.next {
  text-align: right;
  flex-direction: row-reverse;
}
.nav-icon {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}
.nav-btn:hover .nav-icon {
  transform: translateX(-3px);
}
.nav-btn.next:hover .nav-icon {
  transform: translateX(3px);
}
.nav-content {
  flex: 1;
}
.nav-label {
  display: block;
  font-size: 0.75rem;
  opacity: 0.7;
  margin-bottom: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.nav-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}
body.night-mode .page-navigation {
  border-top-color: var(--night-border);
}
body.night-mode .nav-btn {
  background: var(--night-card);
  border-color: var(--night-border);
  color: var(--night-text);
}
body.night-mode .nav-btn:hover {
  background: #421983;
  color: #fff;
}
/* --- Feedback buttons --- */
.feedback-section {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 2rem;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #421983;
}
.feedback-text {
  font-weight: 500;
  color: #495057;
  margin-right: auto;
}
.feedback-buttons {
  display: flex;
  gap: 10px;
}
.feedback-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #fff;
  color: #495057;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}
.feedback-btn:hover {
  transform: translateY(-1px);
}
.feedback-btn.like:hover {
  background: #e8f5e8;
  border-color: #28a745;
  color: #28a745;
}
.feedback-btn.dislike:hover {
  background: #ffeaea;
  border-color: #dc3545;
  color: #dc3545;
}
.feedback-btn.active {
  background: #421983;
  border-color: #421983;
  color: #fff;
}
.feedback-btn.like.active {
  background: #28a745;
  border-color: #28a745;
}
.feedback-btn.dislike.active {
  background: #dc3545;
  border-color: #dc3545;
}
body.night-mode .feedback-section {
  background: var(--night-card);
  border-left-color: #421983;
}
body.night-mode .feedback-text {
  color: var(--night-text);
}
body.night-mode .feedback-btn {
  background: var(--night-card);
  border-color: var(--night-border);
  color: var(--night-text);
}
body.night-mode .feedback-btn:hover {
  background: #3a3a3a;
}
/* --- Audio player --- */
.audio-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  padding: 12px 20px;
  z-index: 9999;
  box-shadow: 0 -2px 10px rgb(0 0 0 / 0.1);
  display: none;
}
.audio-player {
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 600px;
  margin: 0 auto;
}
.audio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #dee2e6;
  border-radius: 50%;
  background: #fff;
  color: #495057;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}
.audio-btn:hover {
  background: #e9ecef;
  transform: scale(1.05);
}
.audio-btn:active {
  transform: scale(0.95);
}
.audio-progress {
  flex: 1;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.progress-bar {
  height: 100%;
  background: #421983;
  border-radius: 3px;
  width: 0%;
  transition: width 0.1s ease;
}
.audio-time {
  font-size: 0.85rem;
  color: #6c757d;
  min-width: 45px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
}
/* --- Feedback modal --- */
.feedback-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 0.5);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.feedback-modal.show {
  display: flex;
}
.modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.2);
}
.modal-header {
  margin-bottom: 1.5rem;
}
.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.5rem;
}
.modal-description {
  color: #6c757d;
  font-size: 0.9rem;
}
.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-label {
  font-weight: 500;
  color: #495057;
  font-size: 0.9rem;
}
.form-textarea {
  padding: 12px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  font-size: 0.9rem;
}
.form-textarea:focus {
  outline: none;
  border-color: #421983;
  box-shadow: 0 0 0 3px rgb(66 25 131 / 0.1);
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 1rem;
}
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn-secondary {
  background: #6c757d;
  color: #fff;
}
.btn-secondary:hover {
  background: #5a6268;
}
.btn-primary {
  background: #421983;
  color: #fff;
}
.btn-primary:hover {
  background: #341566;
}
body.night-mode .modal-content {
  background: var(--night-card);
  color: var(--night-text);
}
body.night-mode .modal-title {
  color: var(--night-text);
}
body.night-mode .modal-description {
  color: var(--night-text-secondary);
}
body.night-mode .form-textarea {
  background: #3a3a3a;
  border-color: var(--night-border);
  color: var(--night-text);
}
body.night-mode .form-textarea:focus {
  border-color: #421983;
  box-shadow: 0 0 0 3px rgb(66 25 131 / 0.2);
}
/* --- Footer --- */
footer {
  background: linear-gradient(135deg, #1a0a2e 0%, #2c1250 50%, #421983 100%);
  color: #fff;
  padding: 3rem 0 1.5rem;
  margin-top: 4rem;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f8b500, #6c42b5, #f8b500);
}
.footer-wave {
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23421983'%3E%3C/path%3E%3C/svg%3E");
  background-size: 1200px 20px;
}
.footer-content {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}
.footer-section {
  padding: 0 0.5rem;
}
.footer-brand {
  display: flex;
  flex-direction: column;
}
.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 1.2rem;
  font-size: 1.8rem;
  font-weight: 700;
}
.footer-logo i {
  color: #f8b500;
  margin-right: 0.5rem;
  font-size: 2rem;
}
.footer-logo span {
  color: #f8b500;
}
.footer-section h3 {
  color: #f8b500;
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.7rem;
  font-weight: 600;
}
.footer-section h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #f8b500, #6c42b5);
  border-radius: 3px;
}
.footer-section p {
  line-height: 1.7;
  color: #e0e0e0;
  margin-bottom: 1.5rem;
}
.footer-newsletter {
  background: rgb(255 255 255 / 0.05);
  padding: 1.2rem;
  border-radius: 8px;
  margin-top: 1.5rem;
}
.footer-newsletter h4 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 0.8rem;
}
.newsletter-form {
  display: flex;
  gap: 0.5rem;
}
.newsletter-form input {
  flex: 1;
  padding: 0.7rem;
  border: none;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  font-size: 0.9rem;
}
.newsletter-form input::placeholder {
  color: #b0b0b0;
}
.newsletter-form button {
  background: #f8b500;
  color: #2c1250;
  border: none;
  border-radius: 4px;
  padding: 0 1rem;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}
.newsletter-form button:hover {
  background: #ffc93c;
  transform: translateY(-2px);
}
.footer-section ul {
  list-style: none;
  padding: 0;
}
.footer-section ul li {
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}
.footer-section ul li:hover {
  transform: translateX(5px);
}
.footer-section ul li i {
  color: #f8b500;
  margin-right: 0.7rem;
  font-size: 0.8rem;
  width: 16px;
  text-align: center;
}
.footer-section ul li a {
  color: #e0e0e0;
  text-decoration: none;
  transition: all 0.3s ease;
  flex: 1;
}
.footer-section ul li a:hover {
  color: #f8b500;
}
.contact-info {
  margin-top: 1.5rem;
}
.contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.contact-item i {
  color: #f8b500;
  margin-right: 0.8rem;
  margin-top: 0.2rem;
  font-size: 1rem;
}
.contact-text {
  color: #e0e0e0;
  line-height: 1.5;
}
.social-links {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.5rem;
}
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgb(255 255 255 / 0.08);
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.social-links a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f8b500);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 50%;
}
.social-links a:hover::before {
  opacity: 1;
}
.social-links a i {
  position: relative;
  z-index: 1;
}
.social-links a:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 5px 15px rgb(248 181 0 / 0.4);
}
.footer-bottom {
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  color: #b0b0b0;
  font-size: 0.9rem;
  position: relative;
  z-index: 1;
}
.footer-bottom p {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 16px;
}
.footer-badges {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.badge {
  background: rgb(255 255 255 / 0.1);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.badge i {
  color: #f8b500;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.footer-link {
  color: #6c757d;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}
.footer-link:hover {
  color: #fd4;
  text-decoration: underline;
}
body.night-mode footer {
  background: linear-gradient(135deg, #0a0515 0%, #1a0f2e 50%, #2d1a5c 100%);
}
body.night-mode .footer-links {
  border-top-color: var(--night-border);
}
body.night-mode .footer-link {
  color: var(--night-text-secondary);
}
body.night-mode .footer-link:hover {
  color: #8b5cf6;
}
/* --- Responsive layout --- */
@media (max-width: 1400px) {
  .container {
      max-width: 100%;
      padding: 0 20px;
  }
  .left-sidebar.expanded {
      flex: 0 0 250px;
  }
  .ad-space {
      flex: 0 0 300px;
  }
}
@media (max-width: 1200px) {
  .left-sidebar.expanded {
      flex: 0 0 230px;
  }
  .ad-space {
      flex: 0 0 280px;
  }
}
@media (max-width: 1024px) {
  .left-sidebar {
      display: none;
  }
  .ad-space {
      display: none;
  }
}
@media (max-width: 992px) {
  .main-content {
      flex-direction: column;
  }
  .left-sidebar {
      flex: 1;
      margin-bottom: 30px;
      position: static;
  }
  .left-sidebar.expanded {
      flex: 1;
  }
  .ad-space {
      flex: 1;
      flex-direction: row;
      flex-wrap: wrap;
  }
  .ad-space > div {
      flex: 1;
      min-width: 300px;
  }
}
@media (max-width: 768px) {
  .header-container {
      flex-wrap: wrap;
  }
  nav {
      order: 3;
      width: 100%;
      margin-top: 15px;
  }
  nav ul {
      justify-content: center;
      flex-wrap: wrap;
  }
  .content {
      padding: 25px;
  }
  h1 {
      font-size: 1.8rem;
  }
  h2 {
      font-size: 1.5rem;
  }
  .page-navigation {
      flex-direction: column;
  }
  .nav-btn {
      max-width: 100%;
  }
  .feedback-section {
      flex-direction: column;
      text-align: center;
  }
  .feedback-text {
      margin-right: 0;
      margin-bottom: 15px;
  }
}
@media (max-width: 576px) {
  .container {
      padding: 0 15px;
  }
  .content {
      padding: 20px;
  }
  nav ul li a {
      padding: 6px 10px;
      font-size: 0.9rem;
  }
  .dropdown-content {
      min-width: 200px;
  }
  .page-actions {
      padding: 10px 0;
  }
  .actions-container {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
  }
  .action-group {
      width: 100%;
      justify-content: space-between;
  }
  .share-options {
      left: 0;
      right: auto;
  }
  .footer-content {
      grid-template-columns: 1fr;
      gap: 2rem;
  }
  .footer-section {
      padding: 0;
  }
  .footer-links {
      flex-direction: column;
      gap: 1rem;
      text-align: center;
  }
}
@media (max-width: 768px) {
  nav ul {
      display: none;
  }
  .mobile-menu-btn {
      display: block;
  }
  .mobile-menu {
      position: fixed;
      top: 0;
      left: -100%;
      width: 280px;
      height: 100vh;
      background: #fff;
      z-index: 2000;
      transition: left 0.3s ease;
      box-shadow: 2px 0 10px rgb(0 0 0 / 0.1);
      overflow-y: auto;
  }
  .mobile-menu.active {
      left: 0;
  }
  .mobile-menu-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      background: var(--primary);
      color: #fff;
  }
  .mobile-menu-close {
      background: none;
      border: none;
      color: #fff;
      font-size: 1.5rem;
      cursor: pointer;
  }
  .mobile-nav ul {
      display: flex;
      flex-direction: column;
      padding: 20px;
  }
  .mobile-nav ul li a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 15px;
      border-radius: 6px;
      margin-bottom: 5px;
      color: var(--dark);
  }
  .mobile-nav ul li a:hover,
  .mobile-nav ul li a.active {
      background: var(--light-gray);
  }
  .mobile-dropdown-content {
      display: none;
      padding-left: 20px;
      margin-top: 5px;
  }
  .mobile-dropdown.active .mobile-dropdown-content {
      display: block;
  }
  .mobile-dropdown-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
  }
  .mobile-dropdown-toggle i:last-child {
      transition: transform 0.3s ease;
  }
  .mobile-dropdown.active .mobile-dropdown-toggle i:last-child {
      transform: rotate(180deg);
  }
}
body.night-mode .mobile-menu {
  background: var(--night-card);
}
body.night-mode .mobile-nav ul li a {
  color: var(--night-text);
}
body.night-mode .mobile-nav ul li a:hover,
body.night-mode .mobile-nav ul li a.active {
  background: #3a3a3a;
}
/* --- Print and accessibility --- */
@media print {
  .left-sidebar,
  .ad-space,
  .page-actions,
  .page-navigation,
  .feedback-section,
  footer {
      display: none;
  }
  .content {
      box-shadow: none;
      border: none;
      padding: 0;
  }
  body {
      background: white !important;
      color: black !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
  }
}
a:focus,
button:focus,
.action-btn:focus,
.nav-btn:focus,
.feedback-btn:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
@media (prefers-contrast: high) {
  :root {
      --primary: #000080;
      --secondary: #ff0000;
      --accent: #008000;
  }
}
@media (prefers-color-scheme: dark) {
  body:not(.light-mode) {
      background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
      color: #e9ecef;
  }
  body:not(.light-mode) .content,
  body:not(.light-mode) .left-sidebar {
      background: #2d2d2d;
      border-color: #404040;
  }
  body:not(.light-mode) header {
      background: linear-gradient(to right, #2d1a5c, #3d2175);
  }
}
/* --- Utility classes --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.text-center {
  text-align: center;
}
.mb-0 {
  margin-bottom: 0;
}
.mt-0 {
  margin-top: 0;
}
.loading {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}
.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}
/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}
body.night-mode ::-webkit-scrollbar-track {
  background: #2d2d2d;
}
body.night-mode ::-webkit-scrollbar-thumb {
  background: #555;
}
body.night-mode ::-webkit-scrollbar-thumb:hover {
  background: #666;
}
/* --- Font size controls --- */
.font-size-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 5px;
}
.font-size-controls .action-btn {
  padding: 8px 10px;
  min-width: auto;
}
.font-size-controls .action-btn i:first-child {
  margin-right: 2px;
}
.font-size-controls .action-btn i:last-child {
  font-size: 0.7rem;
}
.content.font-sm {
  font-size: 0.9em;
}
.content.font-sm h1 {
  font-size: 1.8rem;
}
.content.font-sm h2 {
  font-size: 1.6rem;
}
.content.font-sm p {
  font-size: 1rem;
}
.content.font-lg {
  font-size: 1.1em;
}
.content.font-lg h1 {
  font-size: 2.4rem;
}
.content.font-lg h2 {
  font-size: 2.1rem;
}
.content.font-lg p {
  font-size: 1.2rem;
}
.content.font-xl {
  font-size: 1.3em;
}
.content.font-xl h1 {
  font-size: 2.8rem;
}
.content.font-xl h2 {
  font-size: 2.4rem;
}
.content.font-xl p {
  font-size: 1.4rem;
}
.font-size-controls .action-btn.active {
  background: #421983;
  border-color: #421983;
  color: #fff;
}
body.night-mode .font-size-controls .action-btn {
  background-color: #3d3d3d;
  border-color: #555;
  color: #e9ecef;
}
body.night-mode .font-size-controls .action-btn:hover {
  background-color: #4a4a4a;
  border-color: #6c757d;
}
body.night-mode .font-size-controls .action-btn.active {
  background: #421983;
  border-color: #421983;
  color: #fff;
}
/* --- Responsive toolbar and audio player --- */
@media (max-width: 768px) {
  .font-size-controls {
      order: -1;
      margin: 0 0 10px 0;
      width: 100%;
      justify-content: center;
  }
  .font-size-controls .action-btn span {
      display: none;
  }
}
@media (max-width: 480px) {
  .font-size-controls .action-btn {
      padding: 6px 8px;
  }
  .font-size-controls .action-btn i {
      font-size: 0.8rem;
  }
}
@media (max-width: 768px) {
  .actions-container {
      flex-direction: column;
      align-items: flex-start;
  }
  .action-group {
      width: 100%;
      justify-content: space-between;
  }
  .share-options {
      right: auto;
      left: 0;
  }
  .page-navigation {
      flex-direction: column;
      gap: 15px;
  }
  .nav-btn {
      max-width: 100%;
      width: 100%;
      flex: 1;
  }
  .nav-btn.next {
      text-align: left;
      flex-direction: row;
  }
  .feedback-section {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
  }
  .feedback-buttons {
      width: 100%;
      justify-content: space-between;
  }
  .feedback-btn {
      flex: 1;
      justify-content: center;
  }
  .footer-links {
      gap: 1rem;
  }
  .audio-player {
      gap: 10px;
  }
  .audio-btn {
      width: 32px;
      height: 32px;
      font-size: 0.8rem;
  }
  .audio-time {
      font-size: 0.8rem;
      min-width: 40px;
  }
}
@media (max-width: 480px) {
  .action-btn span {
      display: none;
  }
  .action-btn {
      padding: 8px 10px;
  }
  .share-options {
      min-width: 160px;
  }
  .nav-btn {
      padding: 14px 16px;
      min-height: 70px;
  }
  .nav-title {
      font-size: 0.9rem;
  }
  .modal-content {
      padding: 1.5rem;
  }
  .footer-links {
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
  }
  .audio-controls {
      padding: 10px 15px;
  }
  .audio-player {
      gap: 8px;
  }
  .audio-btn {
      width: 28px;
      height: 28px;
  }
  #speedBtn span {
      font-size: 0.75rem;
  }
}
@media (max-width: 1024px) {
  nav ul {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #fff;
      box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
      z-index: 1000;
      flex-direction: column;
      padding: 1rem 0;
      margin: 0;
  }
  nav ul.show {
      display: flex !important;
  }
  .mobile-menu-btn {
      display: block !important;
  }
  nav ul li {
      width: 100%;
      margin: 0;
  }
  nav ul li a {
      display: block;
      padding: 0.75rem 1.5rem;
      border-bottom: 1px solid #f0f0f0;
      color: #6c42b5;
  }
  .dropdown-content {
      position: static;
      box-shadow: none;
      border-left: 2px solid #f0f0f0;
      margin-left: 1rem;
      display: none;
      width: auto;
  }
  .dropdown:hover .dropdown-content {
      display: none;
  }
  .dropdown.active .dropdown-content {
      display: block;
  }
  .dropdown-content a {
      padding: 0.5rem 1.5rem;
  }
}
@media (max-width: 1024px) {
  nav ul {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #fff;
      box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
      z-index: 1000;
      flex-direction: column;
      padding: 1rem 0;
      margin: 0;
  }
  nav ul.show {
      display: flex !important;
  }
  .mobile-menu-btn {
      display: block !important;
  }
  nav ul li {
      width: 100%;
      margin: 0;
  }
  nav ul li a {
      display: block;
      padding: 0.75rem 1.5rem;
      border-bottom: 1px solid #f0f0f0;
  }
  .dropdown-content {
      position: static;
      box-shadow: none;
      border-left: 2px solid #f0f0f0;
      margin-left: 1rem;
      display: none;
      width: auto;
  }
  .dropdown:hover .dropdown-content {
      display: none;
  }
  .dropdown.active .dropdown-content {
      display: block;
  }
  .dropdown-content a {
      padding: 0.5rem 1.5rem;
  }
}
/* --- Audio player (later overrides) --- */
.audio-controls {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.15);
  z-index: 10000;
  min-width: 320px;
  max-width: 450px;
}
.audio-player {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.audio-btn {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
}
.audio-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}
.audio-progress {
  flex: 1;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  min-width: 120px;
}
.progress-bar {
  height: 100%;
  background: #421983;
  width: 0%;
  transition: width 0.1s ease;
}
.audio-time {
  font-size: 13px;
  color: #666;
  min-width: 45px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
}
.night-mode .audio-controls {
  background: #2d2d2d;
  border-color: #444;
  color: #fff;
}
.night-mode .audio-btn {
  background: #444;
  border-color: #555;
  color: #fff;
}
.night-mode .audio-btn:hover {
  background: #555;
  border-color: #666;
}
.night-mode .audio-progress {
  background: #444;
}
.night-mode .audio-time {
  color: #ccc;
}
/* --- Responsive tweaks --- */
@media (max-width: 480px) {
  .audio-controls {
      bottom: 10px;
      right: 10px;
      left: 10px;
      min-width: auto;
      max-width: none;
  }
  .audio-player {
      gap: 8px;
  }
  .audio-progress {
      min-width: 100px;
  }
}
@media (max-width: 1024px) {
  nav ul {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #fff;
      box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
      z-index: 1000;
      flex-direction: column;
      padding: 1rem 0;
      margin: 0;
  }
  nav ul.show {
      display: flex !important;
  }
  .mobile-menu-btn {
      display: block !important;
  }
  nav ul li {
      width: 100%;
      margin: 0;
  }
  nav ul li a {
      display: block;
      padding: 0.75rem 1.5rem;
      border-bottom: 1px solid #f0f0f0;
      color: #421983;
  }
  .dropdown-content {
      position: static;
      box-shadow: none;
      border-left: 2px solid #f0f0f0;
      margin-left: 1rem;
      display: none;
      width: auto;
  }
  .dropdown:hover .dropdown-content {
      display: none;
  }
  .dropdown.active .dropdown-content {
      display: block;
  }
  .dropdown-content a {
      padding: 0.5rem 1.5rem;
  }
}
@media (min-width: 1025px) {
  .mobile-menu-btn {
      display: none !important;
  }
  nav ul {
      display: flex !important;
  }
}
@media (max-width: 1024px) {
  .mobile-menu-btn {
      display: block !important;
  }
  nav ul {
      display: none;
      position: fixed;
      top: 70px;
      left: 0;
      right: 0;
      background: #fff;
      box-shadow: 0 4px 20px rgb(0 0 0 / 0.15);
      z-index: 1000;
      flex-direction: column;
      padding: 0;
      margin: 0;
      max-height: calc(100vh - 70px);
      overflow-y: auto;
  }
  nav ul.show {
      display: flex !important;
  }
  nav ul li {
      width: 100%;
      margin: 0;
      border-bottom: 1px solid #f0f0f0;
  }
  nav ul li:last-child {
      border-bottom: none;
  }
  nav ul li a {
      display: flex;
      align-items: center;
      padding: 1rem 1.5rem;
      color: #421983;
      text-decoration: none;
      transition: background-color 0.3s ease;
      font-weight: 500;
  }
  nav ul li a:hover,
  nav ul li a:focus {
      background-color: #f8f9fa;
  }
  nav ul li a.active {
      background-color: #421983;
      color: #fff;
  }
  nav ul li a i {
      margin-right: 0.75rem;
      width: 20px;
      text-align: center;
  }
  .dropdown {
      position: relative;
  }
  .dropdown > a {
      position: relative;
      padding-right: 3rem;
  }
  .dropdown > a::after {
      content: "\f078";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      position: absolute;
      right: 1.5rem;
      top: 50%;
      transform: translateY(-50%);
      transition: transform 0.3s ease;
      color: inherit;
  }
  .dropdown.active > a::after {
      transform: translateY(-50%) rotate(180deg);
  }
  .dropdown-content {
      position: static;
      box-shadow: none;
      background: #f8f9fa;
      border-left: 4px solid #421983;
      display: none;
      width: 100%;
      padding: 0;
      opacity: 1;
      visibility: visible;
      transform: none;
  }
  .dropdown:hover .dropdown-content {
      display: none;
  }
  .dropdown.active .dropdown-content {
      display: block !important;
      animation: dropdownFade 0.3s ease;
  }
  .dropdown-content a {
      padding: 0.875rem 1.5rem 0.875rem 3rem;
      border-bottom: 1px solid #e9ecef;
      color: #495057;
      font-weight: 400;
      display: flex;
      align-items: center;
  }
  .dropdown-content a:last-child {
      border-bottom: none;
  }
  .dropdown-content a:hover {
      background-color: #e9ecef;
      color: #421983;
  }
  .dropdown-content a i {
      margin-right: 0.75rem;
      color: #6c757d;
      width: 16px;
      text-align: center;
  }
  @keyframes dropdownFade {
      from {
          opacity: 0;
          transform: translateY(-10px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }
}
@media (min-width: 1025px) {
  .mobile-menu-btn {
      display: none !important;
  }
  nav ul {
      display: flex !important;
  }
  .dropdown-content {
      display: none;
      position: absolute;
      background: #fff;
      box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
      border-radius: 6px;
      padding: 0.5rem 0;
      min-width: 200px;
      z-index: 1000;
  }
  .dropdown:hover .dropdown-content {
      display: block;
  }
  .dropdown-content a {
      padding: 0.75rem 1rem;
      display: block;
      color: #421983;
      text-decoration: none;
      transition: background-color 0.3s ease;
  }
  .dropdown-content a:hover {
      background-color: #f8f9fa;
  }
}
/* Go to Top Button Styles */
.go-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #f8b500;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  border: none;
  font-size: 18px;
}

.go-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.go-to-top:hover {
  background-color: #5a2ca0;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.go-to-top:active {
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .go-to-top {
      bottom: 20px;
      right: 20px;
      width: 45px;
      height: 45px;
  }
}

/* --- Note box --- */
.note-box {
  margin-bottom: 15px;
  padding: 13px 12px;
  background-color: whitesmoke;
  border-left: 6px solid #421983;
}

/* ===== Part 2: shared tutorial page styles ===== */

/* --- Base page styles (fonts, page meta line, tutorial layout) --- */
.ad-space{width:300px;min-width:300px;padding:15px}
.ad-title{font-size:12px;color:#666;text-align:center;margin-bottom:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.sticky-ad-container{position:sticky;top:20px;display:flex;flex-direction:column;gap:20px}
.ad-unit{margin-bottom:20px;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgb(0 0 0 / .1)}
@media (max-width:1200px){.ad-space{width:250px;min-width:250px}}
@media (max-width:1024px){.ad-space{display:none}}
@media (max-width:1024px){.mobile-menu-btn{display:block!important}nav ul{display:none;position:fixed;top:70px;left:0;right:0;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.15);z-index:1000;flex-direction:column;padding:0;margin:0;max-height:calc(100vh - 70px);overflow-y:auto}nav ul.show{display:flex!important}nav ul li{width:100%;margin:0;border-bottom:1px solid #f0f0f0}nav ul li:last-child{border-bottom:none}nav ul li a{display:flex;align-items:center;padding:1rem 1.5rem;color:#421983;text-decoration:none;transition:background-color .3s ease;font-weight:500}nav ul li a:focus,nav ul li a:hover{background-color:#f8f9fa}nav ul li a.active{background-color:#421983;color:#fff}nav ul li a i{margin-right:.75rem;width:20px;text-align:center}.dropdown{position:relative}.dropdown>a{position:relative;padding-right:3rem}.dropdown>a::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);transition:transform .3s ease;color:inherit}.dropdown.active>a::after{transform:translateY(-50%) rotate(180deg)}.dropdown-content{position:static;box-shadow:none;background:#f8f9fa;border-left:4px solid #421983;display:none;width:100%;padding:0;opacity:1;visibility:visible;transform:none}.dropdown:hover .dropdown-content{display:none}.dropdown.active .dropdown-content{display:block!important;animation:dropdownFade .3s ease}.dropdown-content a{padding:.875rem 1.5rem .875rem 3rem;border-bottom:1px solid #e9ecef;color:#495057;font-weight:400;display:flex;align-items:center}.dropdown-content a:last-child{border-bottom:none}.dropdown-content a:hover{background-color:#e9ecef;color:#421983}.dropdown-content a i{margin-right:.75rem;color:#6c757d;width:16px;text-align:center}@keyframes dropdownFade{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}}
@media (min-width:1025px){.mobile-menu-btn{display:none!important}nav ul{display:flex!important}.dropdown-content{display:none;position:absolute;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15);border-radius:6px;padding:.5rem 0;min-width:240px;z-index:1000}.dropdown:hover .dropdown-content{display:block}.dropdown-content a{padding:.75rem 1rem;display:block;color:#421983;text-decoration:none;transition:background-color .3s ease}.dropdown-content a:hover{background-color:#f8f9fa}}
body.menu-open{overflow:hidden}

/* --- Tutorial article: tabs, table of contents, tables, code editor, FAQ --- */
.rt-faq details {
      margin: 12px 0;
      border: 1px solid #d0d7de;
      border-radius: 10px;
      background: #ffffff;
      overflow: hidden;
    }
.rt-faq summary {
      cursor: pointer;
      list-style: none;
      padding: 14px 44px 14px 16px;
      font-weight: 600;
      color: #1f2328;
      position: relative;
    }
.rt-faq summary::-webkit-details-marker { display: none; }
.rt-faq summary::after {
      content: "+";
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
      color: #421983;
    }
.rt-faq details[open] summary::after { content: "\2212"; }
.rt-faq details[open] summary {
      background: #f4f0fb;
      border-bottom: 1px solid #d0d7de;
    }
.rt-faq details > div { padding: 4px 16px 12px; }
.rt-faq pre[class*="language-"],
    .rt-faq pre:not([class]) {
      margin: 12px 0;
      border-radius: 8px;
      font-size: 14px;
      line-height: 1.55;
    }
.rt-article .table-wrap {
      overflow-x: auto;
      margin: 20px 0;
      border: 1px solid #d0d7de;
      border-radius: 8px;
    }
.rt-article table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rt-article th {
      background: #421983;
      color: #ffffff;
      text-align: left;
      padding: 10px 14px;
    }
.rt-article td { padding: 10px 14px; border-top: 1px solid #e5e7eb; vertical-align: top; }
.rt-article th,
    .rt-article td { text-align: left; }
.rt-article tbody tr:nth-child(even) { background: #f6f8fa; }
.rt-article th code { background: rgba(255, 255, 255, 0.18); color: #ffffff; padding: 2px 6px; border-radius: 4px; }
.rt-article td code {
      background: #eef1f5;
      color: #b42318;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 14px;
    }
body > .container,
    .main-content,
    .rt-article { min-width: 0; max-width: 100%; }
.rt-article :not(pre) > code { overflow-wrap: anywhere; }
.rt-article h1,
    .rt-article h2,
    .rt-article h3 { text-align: left; }
.rt-tabs {
      display: flex;
      gap: 6px;
      margin: 8px 0 28px;
      padding: 6px;
      background: #f4f0fb;
      border: 1px solid #e3d9f5;
      border-radius: 12px;
    }
.rt-tab {
      flex: 1 1 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 18px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #421983;
      font: 600 15px/1.2 Inter, system-ui, sans-serif;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
.rt-tab:hover { background: #ece4fa; }
.rt-tab:focus-visible { outline: 2px solid #421983; outline-offset: 2px; }
.rt-tab[aria-selected="true"] {
      background: #421983;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(66, 25, 131, 0.28);
    }
.rt-tab .tab-count {
      min-width: 24px;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(66, 25, 131, 0.12);
      font-size: 12px;
    }
.rt-tab[aria-selected="true"] .tab-count { background: rgba(255, 255, 255, 0.22); }
.rt-panel[hidden] { display: none; }
.rt-panel { animation: edaFade 0.25s ease; }
@keyframes edaFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
      .rt-tab { padding: 10px 8px; font-size: 14px; gap: 6px; }
    }
.rt-article .toc {
      margin: 24px 0 32px;
      padding: 20px 24px;
      background: #f8f5fd;
      border: 1px solid #e3d9f5;
      border-left: 4px solid #421983;
      border-radius: 10px;
    }
.rt-article .toc-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      font-size: 17px;
      color: #421983;
    }
.rt-article .toc ol {
      list-style: none;
      counter-reset: toc;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px 24px;
    }
.rt-article .toc li {
      counter-increment: toc;
      margin: 0;
    }
.rt-article .toc a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 8px;
      border-radius: 6px;
      color: #1f2328;
      text-decoration: none;
      text-align: left;
      line-height: 1.4;
      transition: background-color 0.2s ease, color 0.2s ease;
    }
.rt-article .toc a::before {
      content: counter(toc);
      flex: 0 0 26px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #421983;
      color: #ffffff;
      font-size: 12px;
      font-weight: 600;
    }
.rt-article .toc a:hover,
    .rt-article .toc a:focus-visible {
      background: #ece4fa;
      color: #421983;
    }
@media (max-width: 640px) {
      .rt-article .toc { padding: 16px; }
      .rt-article .toc ol { grid-template-columns: 1fr; }
    }
.rt-panel > ul,
    .rt-faq ul { list-style: disc; padding-left: 1.5rem; margin: 12px 0; }
.rt-faq ol { list-style: decimal; padding-left: 1.5rem; margin: 12px 0; }
.rt-panel > ul li,
    .rt-faq li { margin: 6px 0; line-height: 1.6; }
.rt-article .code-editor {
      margin: 20px 0 28px;
      border-radius: 10px;
      overflow: hidden;
      background: #1e1e1e;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    }
.rt-article .editor-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: #2d2d2d;
      border-bottom: 1px solid #3a3a3a;
    }
.rt-article .editor-bar .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }
.rt-article .dot.red { background: #ff5f56; }
.rt-article .dot.yellow { background: #ffbd2e; }
.rt-article .dot.green { background: #27c93f; }
.rt-article .editor-bar .file-name {
      margin-left: 10px;
      color: #c9d1d9;
      font: 13px/1 Consolas, Monaco, "Courier New", monospace;
    }
.rt-article .editor-bar .copy-btn {
      margin-left: auto;
      background: #3c3c3c;
      color: #e6e6e6;
      border: 1px solid #555;
      border-radius: 5px;
      padding: 4px 10px;
      font-size: 12px;
      cursor: pointer;
    }
.rt-article .editor-bar .copy-btn:hover { background: #4a4a4a; }
.rt-article .code-editor pre[class*="language-"] {
      margin: 0;
      border-radius: 0;
      background: #1e1e1e;
      font-size: 14px;
      line-height: 1.6;
    }
.rt-article .code-editor pre[class*="language-"] > code {
      font-size: inherit;
      line-height: inherit;
      padding: 0;
      background: none;
    }
body.night-mode .rt-tabs { background: #1f1a2e; border-color: #3b2f5c; }
body.night-mode .rt-tab { color: #cdb9f5; }
body.night-mode .rt-tab:hover { background: #2c2442; }
body.night-mode .rt-tab[aria-selected="true"] { background: #6a3fc1; color: #ffffff; }
.rt-panel:focus { outline: none; }
.rt-article .note-box { margin: 1.2rem 0; padding: .9rem 1rem; border-left: 4px solid #f0ad4e; background: rgba(240,173,78,.10); border-radius: 6px; line-height: 1.6; }
.rt-article > ul { list-style: disc; padding-left: 1.5rem; margin: 12px 0; }
.rt-article > ol { list-style: decimal; padding-left: 1.5rem; margin: 12px 0; }
.rt-article > ul li, .rt-article > ol li { margin: 6px 0; line-height: 1.6; }
.rt-article p a, .rt-article ul li a, .rt-article td a, .rt-article .note-box a { color: #421983; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rt-article p a:hover, .rt-article ul li a:hover, .rt-article td a:hover, .rt-article .note-box a:hover { color: #00a88b; }
body.night-mode .rt-article p a, body.night-mode .rt-article ul li a, body.night-mode .rt-article td a, body.night-mode .rt-article .note-box a { color: #cdb9f5; }
.rt-faq details > div { padding: 14px 16px 16px; }
.rt-faq summary, .rt-faq details > div p, .rt-faq details > div li { text-align: left; }
.rt-faq details > div > :first-child { margin-top: 0; }
.rt-faq details > div > :last-child { margin-bottom: 0; }
.rt-article .editor-bar .file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-article .editor-bar .copy-btn { flex-shrink: 0; }
.rt-tabs { margin-top: 48px !important; margin-bottom: 44px !important; }

/* --- Left sidebar menu --- */
.left-sidebar .sidebar-section h3 { margin: 0; padding: 0; }
.left-sidebar .msmenu-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 4px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.left-sidebar .msmenu-toggle:hover { background: #f6f3fc; color: var(--primary); }
.left-sidebar .msmenu-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.left-sidebar .msmenu-title { flex: 1; }
.left-sidebar .msmenu-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f1ecfa;
  color: var(--primary);
  font-size: 0.68rem;
  letter-spacing: 0;
  text-align: center;
}
.left-sidebar .msmenu-chevron { font-size: 0.7rem; transition: transform 0.2s ease; }
.left-sidebar .msmenu-toggle[aria-expanded="false"] .msmenu-chevron { transform: rotate(-90deg); }
.left-sidebar .sidebar-menu[hidden] { display: none; }
.left-sidebar .msmenu-soon {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 12px;
  border-radius: 8px;
  color: #9aa1ab;
  font-size: 0.92rem;
  line-height: 1.35;
  text-align: left;
  cursor: default;
}
.left-sidebar .msmenu-soon > span:first-child { flex: 1; }
.left-sidebar .msmenu-badge {
  flex-shrink: 0;
  padding: 1px 7px;
  border: 1px solid #e6e1ef;
  border-radius: 999px;
  color: #8b8f98;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (min-width: 1025px) {
  .left-sidebar:not(.expanded) { height: calc(100vh - 190px); }
}
.left-sidebar .sidebar-menu { gap: 2px; }
.left-sidebar .sidebar-menu a,
.left-sidebar .msmenu-soon {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 0.9rem;
  line-height: 1.35;
}
.left-sidebar .msmenu-toggle { padding-top: 5px; padding-bottom: 5px; }
.left-sidebar .sidebar-title { font-size: 1.05rem; line-height: 1.3; }
.left-sidebar .sidebar-section { margin: 0; padding: 6px 0; border-top: 1px solid #f0edf5; }
.left-sidebar .sidebar-header + .sidebar-section { border-top: 0; }
.left-sidebar .sidebar-section h3 {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--primary);
  font-family: "Poppins", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.3;
}
.left-sidebar .sidebar-menu a.active {
  background: #efe8fb;
  color: var(--primary);
  font-weight: 600;
  box-shadow: none;
  border-color: transparent;
}
.left-sidebar.expanded { padding-bottom: 24px; }
.left-sidebar:not(.expanded) .sidebar-section { border-top: 0; padding: 0; }
body.night-mode .left-sidebar .sidebar-section { border-top-color: #3b3b45; }
body.night-mode .left-sidebar .sidebar-header + .sidebar-section { border-top: 0; }
body.night-mode .left-sidebar .sidebar-section h3 { color: #cdb9f5; }
body.night-mode .left-sidebar .sidebar-menu a.active { background: #2c2442; color: #cdb9f5; }
.left-sidebar .sidebar-menu a::before,
.left-sidebar .msmenu-soon::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-right: 2px;
  border-radius: 50%;
  background: #b9a5df;
  position: static;
}
.left-sidebar .sidebar-menu a:hover::before { background: var(--primary); }
.left-sidebar .sidebar-menu a.active::before { background: currentColor; }
.left-sidebar .msmenu-soon::before { background: #d3d6db; }
body.night-mode .left-sidebar .sidebar-menu a::before { background: #6a5a8c; }
body.night-mode .left-sidebar .sidebar-menu a:hover::before,
body.night-mode .left-sidebar .sidebar-menu a.active::before { background: #cdb9f5; }
body.night-mode .left-sidebar .msmenu-soon::before { background: #4a4a55; }
@media (min-width: 1025px) {
  .left-sidebar.expanded {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
.left-sidebar::-webkit-scrollbar { width: 6px; }
.left-sidebar::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
.left-sidebar::-webkit-scrollbar-thumb { background: #c9b8ea; border-radius: 999px; }
.left-sidebar::-webkit-scrollbar-thumb:hover { background: #5a2da2; }
@supports (-moz-appearance: none) {
  .left-sidebar.expanded { scrollbar-width: thin; scrollbar-color: #c9b8ea transparent; }
}
body.night-mode .left-sidebar::-webkit-scrollbar-thumb { background: #4f4566; }
body.night-mode .left-sidebar .msmenu-toggle:hover { background: #2c2442; color: #cdb9f5; }
body.night-mode .left-sidebar .msmenu-count { background: #2c2442; color: #cdb9f5; }
body.night-mode .left-sidebar .msmenu-soon { color: #6f6a7d; }
body.night-mode .left-sidebar .msmenu-badge { border-color: #3b2f5c; color: #8a8399; }

/* --- Top navigation dropdowns --- */
#main-menu .dd-head{display:block;color:#8a7fa8;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
#main-menu .dd-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25;text-align:left}
#main-menu .dd-txt strong{font-weight:600;color:inherit}
#main-menu .dd-ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#5a2da2;background:#f1ecfa}
#main-menu .dd-ic i{margin:0!important;width:auto!important;color:inherit!important}
#main-menu .dd-ver{background:linear-gradient(135deg,#421983,#7a4fc4);color:#fff;font-family:'Poppins',sans-serif;font-weight:700}
@media (min-width:1025px){
#main-menu>li.dropdown{position:relative}
#main-menu .dropdown-content.dd-panel{display:none;position:absolute;top:100%;left:50%;min-width:0;width:max-content;margin-top:10px;padding:10px;border:1px solid #ebe5f7;border-radius:16px;background:#fff;box-shadow:0 24px 48px -12px rgba(36,18,69,.3),0 4px 14px rgba(36,18,69,.06);transform:translateX(-50%);z-index:1100;text-align:left;overflow:visible!important}
#main-menu .dd-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:16px}
#main-menu .dd-panel::after{content:"";position:absolute;top:-7px;left:50%;width:12px;height:12px;border-left:1px solid #ebe5f7;border-top:1px solid #ebe5f7;background:#fff;transform:translateX(-50%) rotate(45deg)}
#main-menu .dropdown:hover>.dd-mega,#main-menu .dropdown:focus-within>.dd-mega{display:grid;grid-template-columns:repeat(2,minmax(350px,1fr));gap:14px;padding:16px;animation:ddIn .18s ease-out}
#main-menu .dropdown:hover>.dd-simple,#main-menu .dropdown:focus-within>.dd-simple{display:block;animation:ddIn .18s ease-out}
#main-menu .dd-mega .dd-col{gap:4px;padding:8px}
#main-menu .dd-mega .dd-head{padding:4px 12px 10px;font-size:12px}
#main-menu .dd-mega a.dd-item{gap:14px;padding:11px 14px 11px 10px;border-radius:12px}
#main-menu .dd-mega .dd-ic{width:44px;height:44px;border-radius:12px;font-size:18px}
#main-menu .dd-mega .dd-ver{font-size:16px}
#main-menu .dd-mega .dd-txt strong{font-size:15.5px}
#main-menu .dd-mega .dd-txt small{margin-top:4px;font-size:13px}
@keyframes ddIn{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
#main-menu .dd-col{display:flex;flex-direction:column;gap:2px;padding:6px}
#main-menu .dd-col-alt{border-radius:12px;background:#f8f5fd}
#main-menu .dd-head{padding:4px 10px 8px}
#main-menu .dropdown-content a.dd-item{display:flex;align-items:center;gap:12px;margin:0;padding:8px 12px 8px 8px;border:0;border-radius:10px;background:transparent;color:#241245;font-size:14.5px;text-decoration:none;white-space:nowrap;transition:background-color .15s ease,box-shadow .15s ease}
#main-menu .dropdown-content a.dd-item::after,#main-menu .dropdown-content a.dd-item::before{display:none}
#main-menu .dropdown-content a.dd-item:hover,#main-menu .dropdown-content a.dd-item:focus-visible{background:#f3eefc;color:#421983;outline:none}
#main-menu .dd-col-alt a.dd-item:hover,#main-menu .dd-col-alt a.dd-item:focus-visible{background:#fff;box-shadow:0 2px 10px rgba(66,25,131,.1)}
#main-menu .dd-ic{width:38px;height:38px;border-radius:10px;font-size:16px;transition:background-color .15s ease,color .15s ease}
#main-menu a.dd-item:hover .dd-ic:not(.dd-ver){background:#421983;color:#fff}
#main-menu .dd-ver{font-size:14px}
#main-menu .dd-txt small{margin-top:3px;color:#6b6585;font-size:12.5px;font-weight:400}
body.night-mode #main-menu .dropdown-content.dd-panel,body.night-mode #main-menu .dd-panel::after{border-color:#3b3b45;background:#1f1e27}
body.night-mode #main-menu .dd-col-alt{background:#26242f}
body.night-mode #main-menu .dropdown-content a.dd-item{color:#e6e1f5}
body.night-mode #main-menu .dropdown-content a.dd-item:hover{background:#2c2442;color:#fff;box-shadow:none}
body.night-mode #main-menu .dd-txt small{color:#a9a3ba}
body.night-mode #main-menu .dd-ic:not(.dd-ver){background:#2c2442;color:#cdb9f5}
}
@media (min-width:1025px) and (max-width:1199px){
#main-menu .dropdown-content.dd-mega{left:0;transform:none}
#main-menu .dropdown:hover>.dd-mega,#main-menu .dropdown:focus-within>.dd-mega{grid-template-columns:repeat(2,minmax(310px,1fr))}
#main-menu .dd-mega::after{left:36px;transform:rotate(45deg)}
#main-menu .dropdown:hover>.dd-mega,#main-menu .dropdown:focus-within>.dd-mega{animation:ddInL .18s ease-out}
@keyframes ddInL{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media (max-width:1024px){
#main-menu{overflow-x:hidden}
#main-menu .dd-head{padding:.8rem 1.5rem .3rem 3rem}
#main-menu .dd-col+.dd-col{border-top:1px solid #e9ecef}
#main-menu .dd-txt small{display:none}
#main-menu .dd-ic{width:28px;height:28px;margin-right:.75rem;border-radius:8px;font-size:13px}
#main-menu .dd-ver{font-size:12px}
body.night-mode #main-menu .dd-ic:not(.dd-ver){background:#2c2442;color:#cdb9f5}
}

/* --- Search box --- */
.page-actions .jbt-search-btn{display:inline-flex;align-items:center;gap:10px;min-width:260px;padding:8px 10px 8px 14px;border:1px solid #ddd3f1;border-radius:10px;background:#fff;color:#6b6585;font:500 14px/1.2 Inter,sans-serif;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}
.page-actions .jbt-search-btn:hover,.page-actions .jbt-search-btn:focus-visible{border-color:#7a4fc4;box-shadow:0 0 0 3px rgba(122,79,196,.14);color:#421983;outline:none}
.page-actions .jbt-search-btn i{color:#7a4fc4}
.page-actions .jbt-search-btn span{flex:1;text-align:left}
.page-actions .jbt-search-btn kbd{padding:2px 7px;border:1px solid #e3dcf2;border-radius:6px;background:#f8f5fd;color:#6b6585;font:600 11.5px/1.4 Inter,sans-serif;box-shadow:none}
body.night-mode .page-actions .jbt-search-btn{background:#24242c;border-color:#3b3b45;color:#b9b4c8}
body.night-mode .page-actions .jbt-search-btn kbd{background:#2c2442;border-color:#3b3b45;color:#cdb9f5}
@media (max-width:768px){.page-actions .actions-container{flex-wrap:wrap;gap:10px}.page-actions .action-group{flex-wrap:wrap;gap:8px;max-width:100%}.page-actions .action-group:has(.jbt-search-btn){width:100%}.page-actions .jbt-search-btn{width:100%;min-width:0}.page-actions .jbt-search-btn span{display:inline!important}.page-actions .jbt-search-btn kbd{display:none}}
.jbt-header-search{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 14px;margin-left:14px;border:1px solid rgba(255,255,255,.28);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font:600 14px/1 Inter,sans-serif;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.jbt-header-search:hover,.jbt-header-search:focus-visible{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);outline:none}
.jbt-header-search kbd{padding:1px 6px;border:1px solid rgba(255,255,255,.3);border-radius:5px;background:transparent;color:rgba(255,255,255,.8);font:600 11px/1.4 Inter,sans-serif;box-shadow:none}
.header-container > nav{margin-left:auto}
@media (max-width:1200px){.jbt-header-search span,.jbt-header-search kbd{display:none}.jbt-header-search{width:40px;padding:0}}
@media (max-width:1024px){.jbt-header-search{order:1;margin-left:auto}.header-container .mobile-menu-btn{order:2;margin-left:6px}.header-container > nav{margin-left:0}}
p.page-meta.page-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:14px 0 26px;padding:0;color:#6b6585;font-size:14.5px;line-height:1.5;text-align:left}
.page-meta span{display:inline-flex;align-items:center;gap:7px}
.page-meta i{color:#7a4fc4}
.page-meta .page-meta-sep{width:4px;height:4px;border-radius:50%;background:#cdbdec}
body.night-mode .page-meta{color:#b9b4c8}
body.night-mode .page-meta i{color:#cdb9f5}
.kt-hero p.page-meta.page-meta{margin:0 0 22px;color:rgba(255,255,255,.82)}
.kt-hero .page-meta i{color:#00c9a7}
.kt-hero .page-meta .page-meta-sep{background:rgba(255,255,255,.45)}
.page-meta .pm-short{display:none}
@media (max-width:480px){p.page-meta.page-meta{flex-wrap:nowrap;gap:8px;font-size:13px}p.page-meta.page-meta span{gap:5px;white-space:nowrap}.page-meta .pm-long{display:none}.page-meta .pm-short{display:inline}}
.jbt-s-overlay{position:fixed;inset:0;z-index:5000;display:none;align-items:flex-start;justify-content:center;padding:9vh 16px 16px;background:rgba(20,10,40,.55);backdrop-filter:blur(3px)}
.jbt-s-overlay.open{display:flex;animation:jbtFade .15s ease-out}
@keyframes jbtFade{from{opacity:0}to{opacity:1}}
.jbt-s-box{display:flex;flex-direction:column;width:100%;max-width:840px;max-height:80vh;overflow:hidden;border:1px solid #ebe5f7;border-radius:16px;background:#fff;box-shadow:0 30px 70px rgba(20,10,40,.35);font-family:Inter,sans-serif;text-align:left}
.jbt-s-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #efeaf8}
.jbt-s-head > i{color:#7a4fc4;font-size:18px}
.jbt-s-input{flex:1;min-width:0;padding:6px 0;border:0;background:transparent;color:#241245;font:500 18px/1.4 Inter,sans-serif;outline:none;box-shadow:none}
.jbt-s-input::-webkit-search-cancel-button{display:none}
.jbt-s-close{display:inline-flex;align-items:center;padding:4px 9px;border:1px solid #e3dcf2;border-radius:7px;background:#f8f5fd;color:#6b6585;font:600 12px/1.4 Inter,sans-serif;cursor:pointer}
.jbt-s-close i{display:none}
.jbt-s-chips{display:flex;gap:8px;padding:10px 18px;overflow-x:auto;border-bottom:1px solid #efeaf8;scrollbar-width:none}
.jbt-s-chips::-webkit-scrollbar{display:none}
.jbt-s-chips[hidden]{display:none}
.jbt-s-head,.jbt-s-chips,.jbt-s-foot{flex-shrink:0}
.jbt-s-overlay .jbt-s-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;height:auto;min-height:32px;margin:0;padding:6px 12px!important;line-height:1!important;box-shadow:none;border:1px solid #e3dcf2;border-radius:999px;background:#fff;color:#421983;font:600 13px/1 Inter,sans-serif;cursor:pointer;white-space:nowrap}
.jbt-s-overlay .jbt-s-chip span{padding:2px 6px;border-radius:999px;background:#f1ecfa;font-size:11px}
.jbt-s-overlay .jbt-s-chip[aria-pressed="true"]{border-color:#421983;background:#421983;color:#fff}
.jbt-s-overlay .jbt-s-chip[aria-pressed="true"] span{background:rgba(255,255,255,.2)}
.jbt-s-body{flex:1;overflow-y:auto;padding:8px}
.jbt-s-body:empty{display:none}
.jbt-s-foot{margin-top:auto}
.jbt-s-labelrow{display:flex;align-items:center;justify-content:space-between}
.jbt-s-label{margin:8px 10px 6px;color:#8a7fa8;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.jbt-s-clear{margin-right:10px;padding:0;border:0;background:none;color:#7a4fc4;font:600 12px/1 Inter,sans-serif;cursor:pointer}
.jbt-s-recent{display:flex;flex-wrap:wrap;gap:8px;margin:0 10px 10px;padding:0;list-style:none}
.jbt-s-recent button{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid #e3dcf2;border-radius:999px;background:#faf8fe;color:#3d3d4e;font:500 13.5px/1 Inter,sans-serif;cursor:pointer}
.jbt-s-recent button:hover{border-color:#7a4fc4;color:#421983}
.jbt-s-recent i{color:#b9a5df}
.jbt-s-list{margin:0;padding:0;list-style:none}
.jbt-s-item a{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:10px;color:#241245;text-decoration:none}
.jbt-s-item a:hover,.jbt-s-item.active a{background:#f3eefc}
.jbt-s-ic{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:34px;height:34px;margin-top:2px;border-radius:9px;background:#f1ecfa;color:#5a2da2;font-size:14px}
.jbt-s-item.active .jbt-s-ic{background:#421983;color:#fff}
.jbt-s-txt{flex:1;min-width:0}
.jbt-s-txt strong{display:block;font-size:15px;font-weight:600;line-height:1.35}
.jbt-s-txt mark{padding:0 1px;border-radius:3px;background:#ffe9a8;color:inherit}
.jbt-s-txt small{display:block;margin-top:3px;overflow:hidden;color:#6b6585;font-size:13px;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}
.jbt-s-sec{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:999px;background:#f1ecfa;color:#5a2da2;font-size:11.5px;font-weight:700}
.jbt-s-jump{color:#3d3d4e}
.jbt-s-jump i{margin-right:3px;color:#b9a5df;font-size:11px;transform:rotate(90deg) scaleY(-1)}
.jbt-s-go{align-self:center;color:#cdbdec;font-size:13px;opacity:0;transition:opacity .15s ease}
.jbt-s-item.active .jbt-s-go,.jbt-s-item a:hover .jbt-s-go{opacity:1;color:#421983}
.jbt-s-empty{padding:28px 16px;color:#6b6585;font-size:15px;line-height:1.6;text-align:center}
.jbt-s-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 18px;border-top:1px solid #efeaf8;background:#faf8fe;color:#8a7fa8;font-size:12.5px}
.jbt-s-foot kbd{padding:1px 6px;border:1px solid #e3dcf2;border-radius:5px;background:#fff;color:#6b6585;font:600 11px/1.4 Inter,sans-serif;box-shadow:none}
.jbt-s-foot a{color:#421983;font-weight:600;text-decoration:none}
.jbt-s-foot a:hover{text-decoration:underline}
body.night-mode .jbt-s-box{background:#1f1e27;border-color:#3b3b45}
body.night-mode .jbt-s-head,body.night-mode .jbt-s-foot,body.night-mode .jbt-s-chips{border-color:#3b3b45}
body.night-mode .jbt-s-foot{background:#24222f}
body.night-mode .jbt-s-input,body.night-mode .jbt-s-item a{color:#f1edfb}
body.night-mode .jbt-s-item a:hover,body.night-mode .jbt-s-item.active a{background:#2c2442}
body.night-mode .jbt-s-txt small,body.night-mode .jbt-s-empty,body.night-mode .jbt-s-jump{color:#b9b4c8}
body.night-mode .jbt-s-ic,body.night-mode .jbt-s-sec,body.night-mode .jbt-s-overlay .jbt-s-chip span{background:#2c2442;color:#cdb9f5}
body.night-mode .jbt-s-chip,body.night-mode .jbt-s-recent button{background:#24242c;border-color:#3b3b45;color:#d4cfe0}
body.night-mode .jbt-s-overlay .jbt-s-chip[aria-pressed="true"]{background:#6a3fc0;border-color:#6a3fc0;color:#fff}
body.night-mode .jbt-s-foot a{color:#cdb9f5}
@media (max-width:600px){
  .jbt-s-overlay{padding:0}
  .jbt-s-box{max-width:none;height:100%;max-height:none;border:0;border-radius:0}
  .jbt-s-head{padding:12px 14px}
  .jbt-s-input{font-size:17px}
  .jbt-s-close{padding:6px 10px}
  .jbt-s-close .jbt-s-esc{display:none}
  .jbt-s-close i{display:inline;font-size:15px}
  .jbt-s-chips{padding:10px 14px}
  .jbt-s-foot .jbt-s-keys{display:none}
}

/* --- Text alignment fixes --- */
:where(main.content) :is(p, li) { text-align: left; }
.rt-panel > ol { padding-left: 1.5rem; margin: 12px 0; }
.rt-panel > ol li { margin: 6px 0; line-height: 1.6; }

/* --- Headings --- */
#main-content.content h2 { font-size: 1.6rem; margin-top: 56px; }
#main-content.content.font-sm h2 { font-size: 1.4rem; }
#main-content.content.font-lg h2 { font-size: 1.8rem; }
#main-content.content.font-xl h2 { font-size: 2rem; }
#main-content.content .soon-box h2 { font-size: 21px; margin: 0 0 10px; }
@media (max-width: 768px) {
      #main-content.content h2 { font-size: 1.35rem; margin-top: 44px; }
    }

/* --- Toolbar icon buttons --- */
.page-actions .jbt-search-btn {
      height: 38px; padding: 0 6px 0 12px; border-radius: 8px;
      border: 1px solid #d0d7de; background: #ffffff; color: #57606a; box-shadow: none;
    }
.page-actions .jbt-search-btn i { color: #57606a; }
.page-actions .jbt-search-btn:hover { border-color: #8c959f; box-shadow: none; color: #1f2328; }
.page-actions .jbt-search-btn:focus-visible { border-color: #421983; box-shadow: 0 0 0 3px rgba(66, 25, 131, .15); }
.page-actions .jbt-search-btn kbd { border: 1px solid #d0d7de; border-radius: 6px; background: #f6f8fa; color: #57606a; padding: 1px 6px; }
.page-actions .action-group:not(:has(.jbt-search-btn)) {
      align-items: center; gap: 8px; flex-wrap: nowrap;
      background: none; border: 0; box-shadow: none; padding: 0; height: auto;
    }
.page-actions .action-btn:not(.jbt-search-btn) {
      height: 34px; padding: 0 14px; gap: 7px; justify-content: center;
      border: 0; border-radius: 999px; background: #efeaf8; color: #421983;
      font: 600 13px/1 Inter, system-ui, sans-serif; box-shadow: none;
      transition: background-color .15s ease, color .15s ease, transform .1s ease;
    }
.page-actions .action-btn:not(.jbt-search-btn) > i { font-size: 13px; color: inherit; }
.page-actions .action-btn:not(.jbt-search-btn) > span { display: inline; }
.page-actions .action-btn:not(.jbt-search-btn):hover { background: #421983; color: #ffffff; border: 0; transform: none; }
.page-actions .action-btn:not(.jbt-search-btn):active { transform: scale(.96); }
.page-actions .action-btn:not(.jbt-search-btn):focus-visible { outline: 2px solid #421983; outline-offset: 2px; box-shadow: none; }
.page-actions #shareBtn[aria-expanded="true"] { background: #421983; color: #ffffff; }
.page-actions #shareBtn::after, .page-actions #shareBtn::before,
    .page-actions #textToSpeechBtn::after, .page-actions #textToSpeechBtn::before,
    .page-actions #printBtn::after, .page-actions #printBtn::before,
    .page-actions #nightModeBtn::after, .page-actions #nightModeBtn::before { display: none; }
.page-actions .font-size-controls {
      gap: 0; margin: 0; padding: 0 3px; height: 34px; align-items: center;
      background: #efeaf8; border: 0; border-radius: 999px;
    }
.page-actions .font-size-controls .action-btn { width: 32px; height: 30px; padding: 0; min-width: 0; background: transparent; }
.page-actions .font-size-controls .action-btn.active { background: #ffffff; color: #421983; box-shadow: 0 1px 2px rgba(66, 25, 131, .18); }
.page-actions .font-size-controls .action-btn.active:hover { background: #421983; color: #ffffff; }
.page-actions .fs-glyph { font-family: Inter, system-ui, sans-serif; font-weight: 700; line-height: 1; }
.page-actions .action-btn > b.fs-small { font-size: 11px; }
.page-actions .action-btn > b.fs-large { font-size: 15px; }
.page-actions .font-size-controls .action-btn > i { font-size: 12px; }
body.night-mode .page-actions .jbt-search-btn { background: #161b22; border-color: #30363d; color: #8b949e; }
body.night-mode .page-actions .jbt-search-btn i { color: #8b949e; }
body.night-mode .page-actions .jbt-search-btn:hover { border-color: #6e7681; color: #e6edf3; }
body.night-mode .page-actions .jbt-search-btn kbd { background: #21262d; border-color: #30363d; color: #8b949e; }
body.night-mode .page-actions .action-btn:not(.jbt-search-btn),
    body.night-mode .page-actions .font-size-controls { background: #2f2645; color: #e3d9f5; }
body.night-mode .page-actions .font-size-controls .action-btn { background: transparent; }
body.night-mode .page-actions .action-btn:not(.jbt-search-btn):hover,
    body.night-mode .page-actions #shareBtn[aria-expanded="true"] { background: #6a3fc1; color: #ffffff; }
body.night-mode .page-actions .font-size-controls .action-btn.active { background: #4a3a72; color: #ffffff; box-shadow: none; }
body.night-mode .page-actions #nightModeBtn > i { color: #f5b301; }
body.night-mode .page-actions #nightModeBtn:hover > i { color: #ffffff; }
@media (max-width: 768px) {
      .page-actions .action-group:not(:has(.jbt-search-btn)) { width: fit-content; max-width: 100%; justify-content: flex-start; gap: 6px; }
      .page-actions .action-btn:not(.jbt-search-btn) { width: 34px; padding: 0; }
      .page-actions .action-btn:not(.jbt-search-btn) > span { display: none; }
      .page-actions .font-size-controls { width: auto; order: 0; }
      .page-actions .font-size-controls .action-btn { width: 32px; }
    }

/* --- Toolbar tooltips --- */
.page-actions .action-btn[data-tip] { position: relative; }
.page-actions .action-btn[data-tip]::after,
    .page-actions .action-btn[data-tip]::before {
      position: absolute; left: 50%; pointer-events: none; opacity: 0;
      transition: opacity .15s ease, transform .15s ease; z-index: 1000;
    }
.page-actions .action-btn[data-tip]::after {
      content: attr(data-tip);
      top: calc(100% + 10px);
      transform: translate(-50%, -4px);
      padding: 6px 10px; border-radius: 6px;
      background: #1f1a2e; color: #ffffff;
      font: 500 12px/1.2 Inter, system-ui, sans-serif; letter-spacing: .01em;
      white-space: nowrap; box-shadow: 0 6px 16px rgba(31, 18, 64, .22);
    }
.page-actions .action-btn[data-tip]::before {
      content: ""; top: calc(100% + 4px);
      transform: translate(-50%, -4px);
      border: 6px solid transparent; border-top: 0; border-bottom-color: #1f1a2e;
    }
.page-actions .action-btn[data-tip]:hover::after,
    .page-actions .action-btn[data-tip]:hover::before,
    .page-actions .action-btn[data-tip]:focus-visible::after,
    .page-actions .action-btn[data-tip]:focus-visible::before {
      opacity: 1; transform: translate(-50%, 0); transition-delay: .25s;
    }
.page-actions #nightModeBtn[data-tip]::after { left: auto; right: 0; transform: translateY(-4px); }
.page-actions #nightModeBtn[data-tip]:hover::after,
    .page-actions #nightModeBtn[data-tip]:focus-visible::after { transform: translateY(0); }
.page-actions #shareBtn[aria-expanded="true"]::after,
    .page-actions #shareBtn[aria-expanded="true"]::before { display: none; }
body.night-mode .page-actions .action-btn[data-tip]::after { background: #ece8f5; color: #1f1a2e; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
body.night-mode .page-actions .action-btn[data-tip]::before { border-bottom-color: #ece8f5; }
@media (hover: none) {
      .page-actions .action-btn[data-tip]::after, .page-actions .action-btn[data-tip]::before { display: none; }
    }

/* --- Share menu --- */
.page-actions .share-options {
      left: 0; right: auto; top: calc(100% + 12px); margin-top: 0;
      min-width: 196px; padding: 6px;
      background: #ffffff; border: 1px solid #e6e0f0; border-radius: 14px;
      box-shadow: 0 16px 40px rgba(31, 18, 64, .16), 0 2px 6px rgba(31, 18, 64, .06);
    }
.page-actions .share-options.show { animation: jbtShareIn .16s ease-out; }
@keyframes jbtShareIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.page-actions .share-options::before {
      content: "Share this page"; display: block;
      padding: 6px 10px 10px; margin-bottom: 4px;
      border-bottom: 1px solid #efeaf7;
      font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
      color: #8a7fa8;
    }
.page-actions .share-option {
      gap: 12px; padding: 8px 10px; border-radius: 10px;
      font: 500 14px/1.2 Inter, system-ui, sans-serif; color: #2b2540 !important;
      transition: background-color .15s ease;
    }
.page-actions .share-option:hover,
    .page-actions .share-option:focus-visible { background: #f4f0fb; color: #421983 !important; outline: none; }
.page-actions .share-option > i,
    .page-actions .share-option > svg {
      flex: 0 0 auto; box-sizing: border-box; width: 32px; height: 32px; padding: 8px;
      border-radius: 9px; color: #ffffff; font-size: 16px; line-height: 16px; text-align: center;
    }
.page-actions .share-option.linkedin > i { background: #0A66C2; }
.page-actions .share-option.whatsapp > i { background: #25D366; }
.page-actions .share-option.facebook > i { background: #1877F2; }
.page-actions .share-option.x > svg { background: #000000; padding: 9px; }
.page-actions .share-option.link > i { background: #efe9fa; color: #421983; }
.page-actions .share-option.link { margin-top: 4px; position: relative; }
.page-actions .share-option.link::before {
      content: ""; position: absolute; left: 10px; right: 10px; top: -4px;
      border-top: 1px solid #efeaf7;
    }
body.night-mode .page-actions .share-options { background: #221d31; border-color: #3b2f5c; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
body.night-mode .page-actions .share-options::before { color: #a99cc9; border-bottom-color: #3b2f5c; }
body.night-mode .page-actions .share-option { color: #ece8f5 !important; }
body.night-mode .page-actions .share-option:hover,
    body.night-mode .page-actions .share-option:focus-visible { background: #2f2645; color: #ffffff !important; }
body.night-mode .page-actions .share-option.x > svg { background: #ffffff; color: #000000; }
body.night-mode .page-actions .share-option.link > i { background: #3b2f5c; color: #e3d9f5; }
body.night-mode .page-actions .share-option.link::before { border-top-color: #3b2f5c; }

/* --- Mobile header --- */
@media (max-width: 1024px) {
      header[role="banner"] nav { margin: 0; }
    }

/* --- Night mode fixes --- */
body.night-mode :is(#main-content, main) table tbody tr:nth-child(even):not([class]) { background-color: #262630; }
body.night-mode :is(#main-content, main) table tbody tr:nth-child(odd):not([class]) { background-color: transparent; }
body.night-mode :is(#main-content, main) table td { color: #e6e6e6; border-top-color: #3b3b45; }
body.night-mode :is(#main-content, main) table td code { background-color: #2c2442; color: #f0b4b4; }
body.night-mode :is(#main-content, main) .table-wrap { border-color: #3b3b45; }
body.night-mode :is(#main-content, main) td[class$="-empty"] { color: #a9a3ba; }
body.night-mode :is(#main-content, main) details { background-color: #24242c; border-color: #3b3b45; }
body.night-mode :is(#main-content, main) details > summary { color: #e6e6e6; }
body.night-mode :is(#main-content, main) details[open] > summary { background-color: #2c2442; border-bottom-color: #3b3b45; }
body.night-mode :is(#main-content, main) .toc { background-color: #1f1a2e; border-color: #3b2f5c; }
body.night-mode :is(#main-content, main) .toc a { color: #e6e1f5; }
body.night-mode :is(#main-content, main) .toc a:hover, body.night-mode :is(#main-content, main) .toc a:focus-visible { background-color: #2c2442; color: #fff; }
body.night-mode :is(#main-content, main) .toc-title, body.night-mode :is(#main-content, main) .toc-title strong { color: #cdb9f5; }
body.night-mode main a:not([class]) { color: #cdb9f5; }
body.night-mode main a:not([class]) code { color: #d6c8f5; }
body.night-mode :is(#main-content, main) .note-box-blue { background-color: #1e2238; }
body.night-mode :is(#main-content, main) p.note-box, body.night-mode :is(#main-content, main) div.note-box:not(.note-box-blue) { background-color: #2b2516; }
body.night-mode :is(#main-content, main) .note-box, body.night-mode :is(#main-content, main) .note-box strong, body.night-mode :is(#main-content, main) .note-box em { color: #e6e6e6; }
body.night-mode :is(#main-content, main) .jv-ref, body.night-mode :is(#main-content, main) .jv-cells-legend, body.night-mode :is(#main-content, main) .jv-cells-legend span, body.night-mode :is(#main-content, main) .jv-node small { color: #a9a3ba; }
body.night-mode .left-sidebar [class*="menu-soon"], body.night-mode .left-sidebar [class*="menu-soon"] > span { color: #9b96ad; }
body.night-mode :is(#main-content, main) .ac-panel h4 { color: #cdb9f5; }
body.night-mode :is(#main-content, main) .feature-box, body.night-mode :is(#main-content, main) .pattern-category { background-color: #24242c; border-color: #3b3b45; }
body.night-mode :is(#main-content, main) .feature-box h3, body.night-mode :is(#main-content, main) .pattern-category h3, body.night-mode :is(#main-content, main) .stat-number { color: #cdb9f5; }
body.night-mode :is(#main-content, main) .stat-label { color: #a9a3ba; }

/* --- Diagrams (jbt-fig SVG figures) --- */
.jbt-fig { margin: 24px 0; padding: 18px 16px 12px; border: 1px solid #e3d9f5; border-radius: 12px; background: #fbf9ff; }
.jbt-fig svg { display: block; width: 100%; height: auto; }
.jbt-fig-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) { .jbt-fig-scroll svg { min-width: var(--jf-min, 560px); } }
.jbt-fig figcaption { margin-top: 10px; font-size: 14px; line-height: 1.55; color: #4b5563; text-align: center; }
.jbt-fig text { font-family: Inter, system-ui, sans-serif; font-size: 13px; white-space: pre; }
.jbt-fig .jf-t { fill: #1f2937; }
.jbt-fig .jf-s { fill: #6b7280; font-size: 12px; }
.jbt-fig .jf-h { fill: #421983; font-weight: 700; font-size: 13.5px; }
.jbt-fig .jf-code { fill: #421983; font: 600 13px 'JetBrains Mono', ui-monospace, monospace; }
.jbt-fig .jf-ok { fill: #13795b; font-weight: 600; }
.jbt-fig .jf-bad { fill: #b42318; font-weight: 600; }
.jbt-fig .jf-box { stroke-width: 1.5; }
.jbt-fig .jf-p { fill: #f3effc; stroke: #7c5cc4; }
.jbt-fig .jf-g { fill: #e7f8ee; stroke: #22a05a; }
.jbt-fig .jf-b { fill: #e8f1fd; stroke: #3b82f6; }
.jbt-fig .jf-a { fill: #fff4e0; stroke: #e69a1c; }
.jbt-fig .jf-r { fill: #fdecec; stroke: #e05252; }
.jbt-fig .jf-n { fill: #ffffff; stroke: #cbd5e1; }
.jbt-fig .jf-d { fill: #421983; stroke: #421983; }
.jbt-fig .jf-d + text, .jbt-fig .jf-white { fill: #ffffff; }
.jbt-fig .jf-lid { filter: brightness(1.04); }
.jbt-fig .jf-line { stroke: #6b7280; stroke-width: 1.8; fill: none; }
.jbt-fig .jf-line-p { stroke: #7c5cc4; stroke-width: 2; fill: none; }
.jbt-fig .jf-line-g { stroke: #22a05a; stroke-width: 2; fill: none; }
.jbt-fig .jf-line-r { stroke: #e05252; stroke-width: 2; fill: none; }
.jbt-fig .jf-arrowhead { fill: #6b7280; }
.jbt-fig .jf-th { fill: #421983; }
.jbt-fig .jf-thtxt { fill: #ffffff; font-weight: 700; font-size: 12.5px; }
.jbt-fig .jf-row { fill: #ffffff; stroke: #e5e7eb; }
.jbt-fig .jf-row-dim { fill: #f3f4f6; stroke: #e5e7eb; }
.jbt-fig .jf-row-hl { stroke: #e5e7eb; }
.jbt-fig .jf-row-hl.jf-g { fill: #dcfce7; }
.jbt-fig .jf-row-hl.jf-r { fill: #fee2e2; }
.jbt-fig .jf-row-hl.jf-a { fill: #fef3c7; }
.jbt-fig .jf-row-hl.jf-b { fill: #dbeafe; }
.jbt-fig .jf-colhl { fill: none; stroke: #e69a1c; stroke-width: 3; }
.jbt-fig .jf-tframe { fill: none; stroke: #c4b5e6; stroke-width: 1.2; }
.jbt-fig .jf-venn { fill: none; stroke: #421983; stroke-width: 2; }
.jbt-fig .jf-venn-on { fill: #8b5cf6; fill-opacity: .35; }
body.night-mode .jbt-fig { background: #1f1a2e; border-color: #3b2f5c; }
body.night-mode .jbt-fig figcaption { color: #b8b3c7; }
body.night-mode .jbt-fig .jf-t { fill: #f3f4f6; }
body.night-mode .jbt-fig .jf-s { fill: #a1a1aa; }
body.night-mode .jbt-fig .jf-h, body.night-mode .jbt-fig .jf-code { fill: #cdb9f5; }
body.night-mode .jbt-fig .jf-ok { fill: #4ade80; }
body.night-mode .jbt-fig .jf-bad { fill: #f87171; }
body.night-mode .jbt-fig .jf-p { fill: #2c2442; stroke: #9f7aea; }
body.night-mode .jbt-fig .jf-g { fill: #14321f; stroke: #34c374; }
body.night-mode .jbt-fig .jf-b { fill: #172a45; stroke: #60a5fa; }
body.night-mode .jbt-fig .jf-a { fill: #3a2a10; stroke: #f0b14a; }
body.night-mode .jbt-fig .jf-r { fill: #3a1a1a; stroke: #f87171; }
body.night-mode .jbt-fig .jf-n { fill: #2a2538; stroke: #4b4560; }
body.night-mode .jbt-fig .jf-d { fill: #6d3fd1; stroke: #6d3fd1; }
body.night-mode .jbt-fig .jf-line { stroke: #9ca3af; }
body.night-mode .jbt-fig .jf-arrowhead { fill: #9ca3af; }
body.night-mode .jbt-fig .jf-th { fill: #5b32b0; }
body.night-mode .jbt-fig .jf-row { fill: #241f33; stroke: #3b2f5c; }
body.night-mode .jbt-fig .jf-row-dim { fill: #1b1726; stroke: #3b2f5c; }
body.night-mode .jbt-fig .jf-row-hl { stroke: #3b2f5c; }
body.night-mode .jbt-fig .jf-row-hl.jf-g { fill: #14532d; }
body.night-mode .jbt-fig .jf-row-hl.jf-r { fill: #5a1d1d; }
body.night-mode .jbt-fig .jf-row-hl.jf-a { fill: #4a3510; }
body.night-mode .jbt-fig .jf-row-hl.jf-b { fill: #1e3a5f; }
body.night-mode .jbt-fig .jf-tframe { stroke: #5b4a85; }
body.night-mode .jbt-fig .jf-venn { stroke: #b9a2ff; }
.jbt-fig .jf-code, .jbt-fig figcaption code, .mbr-article code { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.rt-faq .rt-iq-group { margin: 26px 0 6px; font-size: 1.05rem; color: #421983; }
.rt-faq .rt-iq-group:first-child { margin-top: 8px; }
body.night-mode .rt-faq .rt-iq-group { color: #cdb9f5; }
.jbt-fig .jf-arrowhead-p { fill: #7c5cc4; }
body.night-mode .jbt-fig .jf-arrowhead-p { fill: #9f7aea; }

/* --- Interview question groups --- */
#panel-faq .rt-iq-group{margin:26px 0 6px;font-size:1.05rem;color:#421983}
#panel-faq h3.rt-iq-group:first-of-type{margin-top:8px}
body.night-mode #panel-faq .rt-iq-group{color:#cdb9f5}

/* --- Print-only page header: site name and page address (added by microservices-script.js) --- */
.print-site-header { display: none; }
.print-site-header .print-site-name { font-family: "Poppins", "Inter", sans-serif; font-size: 20px; font-weight: 700; color: #421983; line-height: 1.3; }
.print-site-header .print-page-url { font-size: 13px; color: #421983; text-decoration: underline; word-break: break-all; }

/* --- Print: only the page heading (<h1>) and the tutorial --- */
@media print {
  #main-content > .print-site-header {
      display: block !important;
  }
  /* Site header, toolbar, audio player, pop-ups, sidebar, ads, footer */
  body > :not(.container),
  .main-content > :not(main),
  .copy-btn {
      display: none !important;
  }
  /* Let the article use the full page width */
  body > .container,
  .main-content,
  #main-content {
      display: block !important;
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
      box-shadow: none !important;
      border: 0 !important;
  }
  /* Inside the article: drop the "Last updated" line; on tabbed pages keep only the <h1> and the
     Tutorial panel (no tabs, Interview Questions, feedback or previous/next buttons) */
  #main-content > .page-meta,
  #main-content:has(> #panel-tutorial) > :not(h1):not(#panel-tutorial):not(.print-site-header) {
      display: none !important;
  }
  /* Print everything (header, title, text, code, tables, diagrams) at 85% of its screen size */
  #main-content {
      zoom: 0.85;
  }
  /* Space above the page heading */
  #main-content h1:first-of-type {
      padding-top: 40px !important;
  }
  /* Print the tutorial even when the Interview Questions tab is open */
  #main-content > #panel-tutorial {
      display: block !important;
  }
  /* Paper cannot scroll sideways: wrap long code lines and show wide tables and diagrams in full */
  #main-content pre,
  #main-content pre > code {
      white-space: pre-wrap !important;
      overflow-wrap: anywhere !important;
      overflow: visible !important;
  }
  #main-content .line-numbers-rows {
      display: none !important;
  }
  /* Shadows print as grey bands */
  #main-content .code-editor {
      box-shadow: none !important;
  }
  #main-content .table-wrap,
  #main-content .jbt-fig-scroll {
      overflow: visible !important;
  }
  * {
      transition: none !important;
      animation: none !important;
  }
}