/*
 * StrataRouter Docs — Master Theme CSS
 * Google-standard look & feel: clean, minimal, professional
 * No emoji anywhere — Font Awesome icons throughout
 * ============================================================
 */

/* ══════════════════════════════════════════
   1. FONTS — Inter (variable weight)
   ══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════
   2. DESIGN TOKENS
   ══════════════════════════════════════════ */
:root {
  /* Brand teal */
  --sr-teal:            #0d9488;
  --sr-teal-light:      #14b8a6;
  --sr-teal-bg:         #f0fdfa;
  --sr-teal-border:     #99f6e4;

  /* Neutrals */
  --sr-white:           #ffffff;
  --sr-bg:              #ffffff;
  --sr-bg-subtle:       #f5f5f7;
  --sr-border:          #d2d2d7;
  --sr-border-strong:   #b0b0b5;

  /* Text */
  --sr-text:            #1d1d1f;
  --sr-text-muted:      #3a3a3c;
  --sr-text-faint:      #6e6e73;

  /* Code blocks — LIGHT THEME */
  --sr-code-bg:         #ffffff;
  --sr-code-fg:         #1e293b;
  --sr-code-border:     #e2e8f0;
  --sr-code-border-h:   #0d9488;

  /* Sidebar nav */
  --sr-nav-active-bg:   #f1f5f9;
  --sr-nav-active-fg:   #0f172a;
  --sr-nav-section:     #0f172a;
  --sr-nav-item:        #475569;
  --sr-nav-item-h:      #0f172a;

  /* Header */
  --sr-header-bg:       #ffffff;
  --sr-header-border:   #e2e8f0;

  /* Tabs */
  --sr-tab-active:      #0f172a;
  --sr-tab-underline:   #0f172a;

  /* Cards */
  --sr-card-bg:         #ffffff;
  --sr-card-border:     #e2e8f0;
  --sr-card-hover-shadow: 0 4px 16px rgba(0,0,0,0.07);
  --sr-card-hover-border: #0d9488;

  /* Status colors */
  --sr-green:           #16a34a;
  --sr-green-bg:        #f0fdf4;
  --sr-green-border:    #bbf7d0;
  --sr-red:             #dc2626;
  --sr-red-bg:          #fef2f2;
  --sr-red-border:      #fecaca;
  --sr-blue:            #2563eb;
  --sr-blue-bg:         #eff6ff;
  --sr-blue-border:     #bfdbfe;
  --sr-amber:           #d97706;
  --sr-amber-bg:        #fffbeb;
  --sr-amber-border:    #fde68a;
}

/* ── Dark mode tokens ── */
[data-md-color-scheme="slate"] {
  --sr-bg:              #0f172a;
  --sr-bg-subtle:       #1e293b;
  --sr-border:          #1e293b;
  --sr-border-strong:   #334155;
  --sr-text:            #f1f5f9;
  --sr-text-muted:      #94a3b8;
  --sr-text-faint:      #64748b;
  --sr-code-bg:         #0d1117;
  --sr-code-fg:         #e2e8f0;
  --sr-code-border:     #21262d;
  --sr-code-border-h:   #0d9488;
  --sr-header-bg:       #0f172a;
  --sr-header-border:   #1e293b;
  --sr-tab-active:      #f1f5f9;
  --sr-tab-underline:   #0d9488;
  --sr-nav-active-bg:   #134e4a;
  --sr-nav-active-fg:   #5eead4;
  --sr-nav-section:     #f1f5f9;
  --sr-nav-item:        #94a3b8;
  --sr-nav-item-h:      #f1f5f9;
  --sr-card-bg:         #1e293b;
  --sr-card-border:     #334155;
}

/* ══════════════════════════════════════════
   3. MATERIAL PALETTE OVERRIDES
   ══════════════════════════════════════════ */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color:                   #0d9488;
  --md-primary-fg-color--light:            #14b8a6;
  --md-primary-fg-color--dark:             #0f766e;
  --md-primary-bg-color:                   #ffffff;
  --md-accent-fg-color:                    #0d9488;
  --md-accent-fg-color--transparent:       rgba(13,148,136,.1);
  --md-default-fg-color:                   #1d1d1f;
  --md-default-fg-color--light:            #3a3a3c;
  --md-default-fg-color--lighter:          #6e6e73;
  --md-default-fg-color--lightest:         #d2d2d7;
  --md-default-bg-color:                   #ffffff;
  --md-default-bg-color--light:            #f5f5f7;
  --md-default-bg-color--lighter:          #f0f0f2;
  --md-typeset-color:                      #1d1d1f;
  --md-typeset-a-color:                    #0d9488;
  --md-code-fg-color:                      #1d1d1f;
  --md-code-bg-color:                      #ffffff;
  --md-footer-bg-color:                    #1d1d1f;
  --md-footer-bg-color--dark:              #111113;
}

/* ══════════════════════════════════════════
   4. GLOBAL FONTS
   ══════════════════════════════════════════ */
:root,
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-text-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  --md-text-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  --md-code-font: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', monospace;
  --md-code-font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', monospace;
}

html, body, * {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

code, pre, kbd,
.md-typeset code,
.md-typeset pre,
.highlight code,
.highlight pre {
  font-family: "JetBrains Mono","JetBrains Mono Fallback",SF Mono,SFMono-Regular,Menlo,Monaco,Cascadia Mono,Segoe UI Mono,Roboto Mono,Oxygen Mono,Ubuntu Monospace,Source Code Pro,Fira Mono,Droid Sans Mono,Consolas,Courier New,monospace !important;
}

/* Restore FA icon fonts */
.fa, .fas, .far, .fal, .fat, .fad, .fab, .fa-solid, .fa-regular,
.fa-light, .fa-thin, .fa-duotone, .fa-brands,
[class^="fa-"], [class*=" fa-"] {
  font-family: 'Font Awesome 6 Free' !important;
}
.fa-brands, .fab {
  font-family: 'Font Awesome 6 Brands' !important;
}

body {
  background-color: var(--sr-bg) !important;
  color: var(--sr-text) !important;
}

/* ══════════════════════════════════════════
   5. HEADER
   ══════════════════════════════════════════ */
.md-header {
  background-color: var(--sr-header-bg) !important;
  box-shadow: none !important;
  border-bottom: 1px solid #f1f1f1 !important;
  color: var(--sr-text) !important;
  height: 3.5rem !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
}

.md-header[data-md-state="shadow"] {
  box-shadow: none !important;
  border-bottom: 0px solid var(--sr-header-border) !important;
}

.md-header__inner {
  padding: 0 1.25rem !important;
  height: 3.3rem !important;
  display: flex !important;
  align-items: center !important;
}

.md-header__button.md-logo  { order: 0 !important; flex: none !important; }
.md-header__title           { order: 1 !important; flex: none !important; }
.md-search                  { order: 2 !important; flex: 1 !important; }
.md-header__source          { order: 3 !important; flex: none !important; }
.md-header__option          { order: 4 !important; flex: none !important; }

@media screen and (min-width: 76.25em) {
  label.md-header__button[for="__drawer"] { display: none !important; }
}

.md-header__button.md-logo {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.15rem !important;
  text-decoration: none !important;
  flex: none !important;
}

.md-logo img, .md-logo svg {
  height: 1.75rem !important;
  width: auto !important;
  max-width: 11rem !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  overflow: visible !important;
}

.md-header__button.md-logo::after {
  content: '' !important;
  display: none !important;
}

[data-md-color-scheme="slate"] .md-logo img {
  content: url('../assets/logo1.svg');
}

.md-header__title {
  display: none !important;
}

.md-header__title::after {
  display: none !important;
  content: none !important;
}

.md-header__button.md-logo {
  margin-right: 1rem !important;
}

.md-header__button {
  color: var(--sr-text-muted) !important;
}
.md-header__button:hover {
  color: var(--sr-teal) !important;
  opacity: 1 !important;
}

.md-source {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  padding: 0 0.65rem !important;
  height: 1.9rem !important;
  border-radius: 12px !important;
  border: none !important;
  background: #ededed !important;
  color: var(--sr-text-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
}

.md-source:hover {
  background: #111111 !important;
  color: #ffffff !important;
}

.md-source::before { content: none !important; display: none !important; }
.md-source__repository, .md-source__facts { display: none !important; }

.md-source::after {
  content: 'GitHub' !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: inherit !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

[data-md-color-scheme="slate"] .md-source {
  background: #1e293b !important;
  color: #94a3b8 !important;
}
[data-md-color-scheme="slate"] .md-source:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

label[for="__palette"] { color: var(--sr-text-muted) !important; }
label[for="__palette"]:hover { color: var(--sr-teal) !important; }

/* ══════════════════════════════════════════
   6. SEARCH
   ══════════════════════════════════════════ */
.md-search {
  flex: 1 !important;
  max-width: 38rem !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  order: 2 !important;
}

.md-search__form {
  background: #ededed !important;
  border: 0px solid #d0d0d0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  height: 1.9rem !important;
  display: flex !important;
  align-items: center !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  position: relative !important;
}

.md-search__form:hover,
.md-search__form:focus-within {
  border-color: var(--sr-teal) !important;
  box-shadow: 0 0 0 2px rgba(13,148,136,0.12) !important;
  background: #ffffff !important;
}

.md-search__input {
  font-size: 0.72rem !important;
  color: var(--sr-text) !important;
  background: transparent !important;
  flex: 1 !important;
}

.md-search__input::placeholder { color: var(--sr-text-faint) !important; }
.md-search__icon[for="__search"],
.md-search__icon.md-icon { color: var(--sr-text-faint) !important; }

.md-search__form::after {
  content: 'Ctrl K' !important;
  font-size: 0.60rem !important;
  font-weight: 500 !important;
  color: #7e7e7e !important;
  border: 0px solid var(--sr-border) !important;
  border-radius: 4px !important;
  padding: 0.125rem 0.375rem !important;
  margin-right: 0.5rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
  font-family: 'Inter', sans-serif !important;
}
.md-search__form:focus-within::after { opacity: 0 !important; }

.md-search__output {
  border-radius: 8px !important;
  border: 1px solid var(--sr-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  overflow: hidden !important;
}

.md-search__inner { width: 100% !important; }

/* ══════════════════════════════════════════
   7. TABS
   ══════════════════════════════════════════ */
.md-tabs {
  background-color: var(--sr-white) !important;
  border-bottom: 1px solid #f1f3f6 !important;
  box-shadow: none !important;
  height: 2.75rem !important;
  top: 1.9rem !important;
  z-index: 100 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.md-tabs__list {
  padding-right: 40rem !important;
  height: 100% !important;
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
}

.md-tabs__item {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.md-tabs__link {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: var(--sr-text-muted) !important;
  opacity: 1 !important;
  padding: 0 0.1rem !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  border-bottom: none !important;
  position: relative !important;
  transition: color 0.15s !important;
  text-decoration: none !important;
  margin: 0 !important;
  white-space: nowrap !important;
  visibility: visible !important;
}

.md-tabs__link .md-icon,
.md-tabs__link .twemoji,
.md-tabs__link svg:not(.md-tabs__icon) { display: none !important; }

.md-tabs__link:hover { color: var(--sr-text) !important; opacity: 0.9 !important; }

.md-tabs__link:hover::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0.15rem !important;
  right: 0.15rem !important;
  height: 1px !important;
  background: var(--sr-border-strong) !important;
  border-radius: 1px !important;
}

.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
  color: var(--sr-tab-active) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

.md-tabs__link--active::after,
.md-tabs__item--active .md-tabs__link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0.1rem !important;
  right: 0.1rem !important;
  height: 2px !important;
  background: var(--sr-tab-underline) !important;
  border-radius: 1px !important;
}

/* ══════════════════════════════════════════
   8. LEFT SIDEBAR
   ══════════════════════════════════════════ */
.md-sidebar {
  width: 13.2rem !important;
  background: var(--sr-bg) !important;
}

.md-sidebar--secondary {
  border-right: none !important;
  width: 13.5rem !important;
}

.md-sidebar__scrollwrap {
  padding: 0.75rem 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--sr-border) transparent !important;
}

.md-nav__title[for="__drawer"],
label.md-nav__title[for="__drawer"],
.md-nav--primary > .md-nav__title:first-of-type {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  visibility: hidden !important;
}

.md-nav__title{
font-weight:600 !important;}

.md-nav { font-size: 0.875rem !important; }
.md-nav__list { padding: 0 !important; margin: 0 !important; }
.md-nav__item { padding-left:11px !important; }

.md-nav--primary > .md-nav__title,
.md-sidebar .md-nav--primary .md-nav__title,
.md-sidebar--primary .md-nav__title,
.md-nav[aria-label] > .md-nav__title,
.md-sidebar .md-nav__title {
  font-size: 0.65rem !important;
  color: #000000 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0em 1rem 1rem 0.6rem !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
  display: block !important;
  pointer-events: none !important;
  cursor: default !important;
}

.md-nav__item--section > .md-nav__link,
.md-nav__item--section > label {
  display: none !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--sr-text-faint) !important;
  padding: 0.875rem 1rem 0.25rem !important;
  margin: 0 !important;
  cursor: default !important;
  pointer-events: none !important;
  background: transparent !important;
}

.md-nav__link {
margin-top: -.1em;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  color: var(--sr-nav-item) !important;
  padding: 0.375rem 1rem !important;
  border-radius: 18px !important;
  align-items: center !important;
  transition: background 0.12s, color 0.12s !important;
  text-decoration: none !important;
  white-space: normal !important;
  overflow: visible !important;
  word-break: normal !important;
}

.md-nav__link:hover {
  background: #e1e1e1 !important;
  color: var(--sr-nav-item-h) !important;
}

.md-nav__item--active > .md-nav__link {
  background: transparent !important;
  font-weight: 500 !important;
}

.md-nav__item--active:not(.md-nav__item--nested) > .md-nav__link,
.md-nav__link--active {
  background: #c1c5c68a !important;
  color: var(--sr-nav-active-fg) !important;
  font-weight: 500 !important;
}

.md-nav--primary .md-nav .md-nav__link {
  font-size: 0.72rem !important;
}

.md-nav--primary .md-nav .md-nav .md-nav__link {
  padding-left: 1.5rem !important;
}

.md-nav__icon {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0 !important;
}

.md-nav__item--nested > .md-nav__link > .md-nav__icon {
  margin-left: auto !important;
  color: var(--sr-text-faint) !important;
}

.md-nav__link > svg,
.md-nav__link .md-icon svg,
.md-nav__link .twemoji svg,
.md-nav__link .twemoji {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0 !important;
  fill: currentColor !important;
  opacity: 0.6 !important;
  transition: opacity 0.15s, fill 0.15s !important;
}

.md-nav__link--active > svg,
.md-nav__link--active .md-icon svg,
.md-nav__link--active .twemoji svg,
.md-nav__link--active .twemoji,
.md-nav__item--active > .md-nav__link > svg,
.md-nav__item--active > .md-nav__link .md-icon svg {
  opacity: 1 !important;
  fill: #000000 !important;
  color: #000000 !important;
}

.md-nav__link:hover > svg,
.md-nav__link:hover .md-icon svg,
.md-nav__link:hover .twemoji svg { opacity: 0.95 !important; }

.md-nav__item--active > .md-nav__link { font-weight: 600; }
.md-nav__item--active .md-nav__item--active > .md-nav__link { font-weight: 400 !important; }
.md-nav__link--active { font-weight: 600; }

.md-sidebar--primary .md-nav__title { display: none !important; }
.md-nav__title {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════
   9. RIGHT TOC SIDEBAR
   ══════════════════════════════════════════ */
.md-sidebar--secondary .md-nav__title {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--sr-text-muted) !important;
  padding: 1rem 0.875rem 0.5rem !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
}

.md-sidebar--secondary .md-nav__title::before {
  content: '≡' !important;
  font-size: 1rem !important;
  color: var(--sr-text-muted) !important;
}

.md-sidebar--secondary .md-nav__link {
  color: rgb(45, 45, 45) !important;
  font-weight: 400 !important;
  padding-top: .25rem;
  padding-bottom: .25rem;
  margin: 0 !important;
  background: transparent !important;
}

.md-sidebar--secondary .md-nav__link:hover {
  color: #000000 !important;
  background: #ededed !important;
  text-decoration: none !important;
  border-radius: 18px !important;
}

.md-sidebar--secondary .md-nav__link--active {
  color: var(--sr-teal) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* ══════════════════════════════════════════
   10. MAIN CONTENT AREA
   ══════════════════════════════════════════ */
.md-grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 71rem !important;
}

.md-content {
  max-width: 100% !important;
  background: var(--sr-bg) !important;
}

.md-content__inner {
  padding: 2rem 3rem 3rem 2.5rem !important;
  max-width: 54rem !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════
   11. PAGE BREADCRUMB
   ══════════════════════════════════════════ */
.page-breadcrumb {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--sr-text-faint) !important;
  display: block !important;
  margin-bottom: 0.375rem !important;
}

.md-nav--page,
.md-content__inner > .md-typeset > nav.md-breadcrumbs,
[aria-label="Breadcrumb"] { display: none !important; }

/* ══════════════════════════════════════════
   12. TYPOGRAPHY
   ══════════════════════════════════════════ */
.md-typeset {
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
  color: var(--sr-text) !important;
  letter-spacing: -0.01em !important;
}

.md-typeset h1 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  color: var(--sr-text) !important;
  margin: 0 0 0.625rem 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
}

.md-typeset h2 {
  font-size: 1.375rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: var(--sr-text) !important;
  margin: 2.5rem 0 0.875rem !important;
  padding: 0 !important;
  border-bottom: none !important;
}

.md-typeset h3 {
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--sr-text) !important;
  margin: 2rem 0 0.5rem !important;
  padding: 0 !important;
  border-bottom: none !important;
}

.md-typeset h4 {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--sr-text) !important;
  margin: 1.5rem 0 0.375rem !important;
}

.md-typeset p {
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
  color: var(--sr-text-muted) !important;
  margin: 0 0 1.125rem !important;
  letter-spacing: -0.005em !important;
}

.md-typeset h1 + p {
  font-size: 1.0625rem !important;
  color: var(--sr-text-muted) !important;
  margin-bottom: 2rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.md-typeset a {
  color: var(--sr-teal) !important;
  text-decoration: none !important;
}
.md-typeset a:hover { text-decoration: underline !important; }

.md-typeset :not(pre) > code {
  background: var(--sr-bg-subtle) !important;
  border: 1px solid var(--sr-border) !important;
  color: var(--sr-teal) !important;
  border-radius: 4px !important;
  padding: 0.1em 0.4em !important;
  font-size: 0.84em !important;
}

.md-typeset strong {
  color: var(--sr-text) !important;
  font-weight: 600 !important;
}

.md-typeset ul li,
.md-typeset ol li {
  color: var(--sr-text-muted) !important;
  line-height: 1.7 !important;
  margin-bottom: 0.3rem !important;
  font-size: 0.875rem !important;
  letter-spacing: -0.005em !important;
}
.md-typeset ul li strong,
.md-typeset ol li strong { color: var(--sr-text) !important; }

.md-typeset blockquote {
  border-left: 3px solid var(--sr-teal) !important;
  color: var(--sr-text-muted) !important;
  padding: 0.75rem 1.25rem !important;
  margin: 1.5rem 0 !important;
  background: var(--sr-bg-subtle) !important;
  border-radius: 0 6px 6px 0 !important;
}

.md-typeset hr {
  border: none !important;
  border-top: 1px solid var(--sr-border) !important;
  margin: 2rem 0 !important;
}

.md-typeset .headerlink { color: var(--sr-border-strong) !important; }
.md-typeset .headerlink:hover { color: var(--sr-teal) !important; }

/* ══════════════════════════════════════════
   13. CODE BLOCKS
   ══════════════════════════════════════════ */
.md-typeset .highlight,
.md-typeset .highlighttable {
  background: #ffffff !important;
  border: 1px solid #e8e8ed !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  position: relative !important;
  margin: 1.375rem 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.md-typeset pre {
  background: #ffffff !important;
  border: 1px solid #e8e8ed !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  position: relative !important;
  margin: 1.375rem 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.md-typeset .highlight > pre,
.md-typeset .highlight > .highlighttable > tbody > tr > td > .highlight > pre {
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.md-typeset .highlight:hover,
.md-typeset .highlighttable:hover,
.md-typeset pre:not(.md-typeset .highlight > pre):hover {
  border-color: var(--sr-code-border-h) !important;
  box-shadow: 0 0 0 2px rgba(13,148,136,0.10) !important;
}

.md-typeset pre > code,
.md-typeset .highlight code,
.md-typeset .highlighttable code {
  background: transparent !important;
  border: none !important;
  color: var(--sr-code-fg) !important;
  font-size: 0.8125rem !important;
  line-height: 1.7 !important;
  padding: 1.125rem 1.5rem !important;
  display: block !important;
  overflow-x: auto !important;
}

/* Syntax highlighting — light theme */
.md-typeset .highlight .kn,
.md-typeset .highlight .k,
.md-typeset .highlight .kw,
.md-typeset .highlight .kr,
.md-typeset .highlight .ow  { color: #d0369a !important; font-weight: 500 !important; }
.md-typeset .highlight .nb  { color: #0070c1 !important; }
.md-typeset .highlight .nc,
.md-typeset .highlight .nn  { color: #267f99 !important; }
.md-typeset .highlight .nf  { color: #795e26 !important; }
.md-typeset .highlight .s,
.md-typeset .highlight .s1,
.md-typeset .highlight .s2,
.md-typeset .highlight .se,
.md-typeset .highlight .si  { color: #a31515 !important; }
.md-typeset .highlight .mi,
.md-typeset .highlight .mf,
.md-typeset .highlight .mh  { color: #098658 !important; }
.md-typeset .highlight .c,
.md-typeset .highlight .c1,
.md-typeset .highlight .cm,
.md-typeset .highlight .cs  { color: #6a9955 !important; font-style: italic !important; }
.md-typeset .highlight .n,
.md-typeset .highlight .na,
.md-typeset .highlight .nd,
.md-typeset .highlight .nt  { color: #1e293b !important; }
.md-typeset .highlight .o   { color: #475569 !important; }
.md-typeset .highlight .p   { color: #334155 !important; }
.md-typeset .highlight .kc  { color: #0070c1 !important; font-weight: 500 !important; }

.md-typeset .highlight .filename {
  background: #f1f5f9 !important;
  border-bottom: 1px solid var(--sr-code-border) !important;
  color: #64748b !important;
  font-size: 0.75rem !important;
  padding: 0.5rem 1rem !important;
}

/* ══════════════════════════════════════════
   14. TABLES — Apple-standard premium design
   ══════════════════════════════════════════ */
/* scrollwrap = border container; final-fix.css owns its sizing */
.md-typeset__scrollwrap {
  overflow-x: auto !important;
  margin: 1.5rem 0 !important;

}

.md-typeset__table{padding:0px !important;}

.md-typeset table:not([class]) {
  font-size: 0.8125rem !important;
  border-collapse: collapse !important;
  width: auto !important;
  min-width: 0 !important;
  border: 1px solid #efefef !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 0 0 0.5px rgba(0,0,0,0.03) !important;
  overflow: hidden !important;
  margin: 0 !important;
  display: table !important;
  background: #ffffff !important;
}

/* Also handle inline tables */
.md-typeset table {
  font-size: 0.8125rem !important;
  border-collapse: collapse !important;
  width: auto !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  display: table !important;
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

.md-typeset table thead tr {
  background: #f5f5f7 !important;
}

.md-typeset table th {
  background: transparent !important;
  color: #1d1d1f !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  padding: 13px 16px !important;
  text-align: left !important;
  border-bottom: 1px solid #e0e0e5 !important;
  border-right: none !important;
  white-space: nowrap !important;
}

.md-typeset table th:first-child { border-radius: 12px 0 0 0 !important; }
.md-typeset table th:last-child  { border-radius: 0 12px 0 0 !important; border-right: none !important; }

.md-typeset table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid #f0f0f2 !important;
  border-right: none !important;
  color: #3a3a3c !important;
  font-size: 0.8125rem !important;
  vertical-align: middle !important;
  line-height: 1.55 !important;
  letter-spacing: -0.005em !important;
}

.md-typeset table td strong {
  color: #1d1d1f !important;
  font-weight: 600 !important;
}

.md-typeset table td code {
  font-size: 0.75rem !important;
  padding: 0.1em 0.35em !important;
  background: #f5f5f7 !important;
  border-color: #e0e0e5 !important;
}

.md-typeset table tr:last-child td {
  border-bottom: none !important;
}

.md-typeset table tr:last-child td:first-child { border-radius: 0 0 0 12px !important; }
.md-typeset table tr:last-child td:last-child  { border-radius: 0 0 12px 0 !important; }

.md-typeset table tbody tr:hover td {
  background: rgba(0,113,227,0.03) !important;
}

/* Comparison table positive/negative cell coloring */
.md-typeset td.sr-cell-positive { color: #1a7f3c !important; font-weight: 500 !important; }
.md-typeset td.sr-cell-negative { color: #c0392b !important; font-weight: 500 !important; }
.md-typeset td.sr-cell-neutral  { color: #6e6e73 !important; font-style: italic !important; }
.md-typeset td.sr-cell-metric   { color: #1d1d1f !important; font-weight: 600 !important; font-variant-numeric: tabular-nums !important; }

/* ══════════════════════════════════════════
   15. ADMONITIONS
   ══════════════════════════════════════════ */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px !important;
  border: 1px solid var(--sr-border) !important;
  box-shadow: none !important;
  font-size: 0.8125rem !important;
}

.md-typeset .admonition-title,
.md-typeset details summary {
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
}

/* ══════════════════════════════════════════
   16. STATUS BADGES — replace emoji
   ══════════════════════════════════════════ */

/* Inline status pill badges used in content */
.sr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  line-height: 1.4;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

.sr-badge--green {
  background: var(--sr-green-bg);
  color: var(--sr-green);
  border: 1px solid var(--sr-green-border);
}

.sr-badge--red {
  background: var(--sr-red-bg);
  color: var(--sr-red);
  border: 1px solid var(--sr-red-border);
}

.sr-badge--blue {
  background: var(--sr-blue-bg);
  color: var(--sr-blue);
  border: 1px solid var(--sr-blue-border);
}

.sr-badge--amber {
  background: var(--sr-amber-bg);
  color: var(--sr-amber);
  border: 1px solid var(--sr-amber-border);
}

/* ══════════════════════════════════════════
   17. LINK CARDS
   ══════════════════════════════════════════ */
.sr-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
  margin: 1.75rem 0 !important;
}

@media (max-width: 48rem) {
  .sr-card-grid { grid-template-columns: 1fr !important; }
}

a.sr-link-card,
.sr-link-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--sr-card-bg) !important;
  border: 1px solid var(--sr-card-border) !important;
  border-radius: 10px !important;
  padding: 1.25rem 1.5rem 2.75rem !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s !important;
  position: relative !important;
  min-height: 9.5rem !important;
}

a.sr-link-card:hover,
.sr-link-card:hover {
  border-color: var(--sr-card-hover-border) !important;
  box-shadow: var(--sr-card-hover-shadow) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

.sr-link-card__title {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--sr-text) !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.sr-link-card__sep {
  height: 1px !important;
  background: var(--sr-border) !important;
  margin: 0.75rem -1.5rem !important;
  flex-shrink: 0 !important;
}

.sr-link-card__desc {
  font-size: 0.8125rem !important;
  color: var(--sr-text-muted) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  flex: 1 !important;
}

.sr-link-card__arrow {
  position: absolute !important;
  bottom: 1rem !important;
  right: 1.25rem !important;
  color: var(--sr-text-faint) !important;
  font-size: 1.125rem !important;
  transition: color 0.2s, transform 0.2s !important;
  font-style: normal !important;
  text-decoration: none !important;
}

a.sr-link-card:hover .sr-link-card__arrow,
.sr-link-card:hover .sr-link-card__arrow {
  color: var(--sr-teal) !important;
  transform: translateX(3px) !important;
}

/* ══════════════════════════════════════════
   18. FEATURE CARDS
   ══════════════════════════════════════════ */
.sr-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
  margin: 1.5rem 0 !important;
}

@media (max-width: 40rem) {
  .sr-feature-grid { grid-template-columns: 1fr !important; }
}

.sr-feature-card {
  background: var(--sr-card-bg) !important;
  border: 1px solid var(--sr-card-border) !important;
  border-radius: 10px !important;
  padding: 1.25rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.sr-feature-card:hover {
  border-color: var(--sr-card-hover-border) !important;
  box-shadow: var(--sr-card-hover-shadow) !important;
}

.sr-feature-card__icon {
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 8px !important;
  background: var(--sr-teal-bg) !important;
  border: 1px solid var(--sr-teal-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0.875rem !important;
  flex-shrink: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.sr-feature-card__icon > i,
.sr-feature-card__icon .fa-solid,
.sr-feature-card__icon .fa-regular,
.sr-feature-card__icon .fa-brands {
  font-size: 1rem !important;
  color: #6687b9 !important;
  line-height: 1 !important;
  display: block !important;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.sr-feature-card__title {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--sr-text) !important;
  margin: 0 0 0.375rem !important;
  line-height: 1.3 !important;
}

.sr-feature-card__desc {
  font-size: 0.8125rem !important;
  color: var(--sr-text-muted) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════
   19. CHECK / CROSS LISTS (no emoji)
       Use .sr-check-list and .sr-cross-list
   ══════════════════════════════════════════ */
.sr-check-list,
.sr-cross-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0.75rem 0 !important;
}

.sr-check-list li,
.sr-cross-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  font-size: 0.8125rem !important;
  color: var(--sr-text-muted) !important;
  line-height: 1.55 !important;
  margin-bottom: 0.375rem !important;
  padding: 0 !important;
}

.sr-check-list li::before {
  content: "\f00c" !important;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  color: var(--sr-green) !important;
  font-size: 0.6875rem !important;
  margin-top: 0.2rem !important;
  flex-shrink: 0 !important;
}

.sr-cross-list li::before {
  content: "\f00d" !important;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  color: var(--sr-red) !important;
  font-size: 0.6875rem !important;
  margin-top: 0.2rem !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════
   20. STAT PILLS — benchmark callouts
   ══════════════════════════════════════════ */
.sr-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.625rem !important;
  margin: 1rem 0 1.5rem !important;
}

.sr-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  background: var(--sr-bg-subtle) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: 8px !important;
  padding: 0.625rem 1rem !important;
  min-width: 7rem !important;
}

.sr-stat__value {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--sr-text) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
}

.sr-stat__label {
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  color: var(--sr-text-faint) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-top: 0.1875rem !important;
}

/* ══════════════════════════════════════════
   21. FOOTER — Apple-standard best-in-class
   ══════════════════════════════════════════ */

/* — Material prev/next nav strip — */
.md-footer {
  background: transparent !important;
  border-top: none !important;
}

.md-footer-meta { display: none !important; }

.md-footer__inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  width: 100% !important;
  border-top: 1px solid #d2d2d7 !important;
}

.md-footer__link {
  color: #6e6e73 !important;
  font-size: 0.8125rem !important;
  flex: 0 1 auto !important;
  letter-spacing: -0.005em !important;
}

.md-footer__link--prev { margin-right: auto !important; }
.md-footer__link--next { margin-left: auto !important; text-align: right !important; }
.md-footer__inner > .md-footer__link--next:first-child { margin-left: auto !important; }
.md-footer__link:hover { color: #1d1d1f !important; }

.md-footer__title {
  font-weight: 500 !important;
  color: #3a3a3c !important;
  letter-spacing: -0.01em !important;
}

.md-footer__direction {
  font-size: 0.6875rem !important;
  color: #6e6e73 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* — Apple-style .sr-footer — */
.sr-footer {
  background: #1d1d1f;
  color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr-footer__body {
  max-width: 1024px;
  margin: 0 auto;
  padding: 56px 44px 44px;
  display: grid;
  grid-template-columns: 260px 1fr 1fr 1fr;
  gap: 2.5rem;
  border-bottom: 1px solid #424245;
}

@media (max-width: 900px) {
  .sr-footer__body {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 2.5rem;
  }
}

@media (max-width: 600px) {
  .sr-footer__body {
    grid-template-columns: 1fr;
    padding: 40px 24px 32px;
  }
}

.sr-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.sr-footer__logo-link {
  display: inline-block;
  text-decoration: none;
}

.sr-footer__logo {
  height: 26px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.88;
  display: block;
}

.sr-footer__tagline {
  font-size: 13px;
  line-height: 1.65;
  color: #86868b;
  margin: 0;
  font-weight: 400;
}

.sr-footer__social {
  display: flex;
  gap: 0.875rem;
  margin-top: 0.25rem;
}

.sr-footer__social a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: #86868b;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.sr-footer__social a:hover {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.22);
  color: #f5f5f7;
}

.sr-footer__social svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.sr-footer__col {
  display: flex;
  flex-direction: column;
}

.sr-footer__heading {
  font-size: 13px;
  font-weight: 600;
  color: #f5f5f7;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.sr-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.sr-footer__links li a {
  font-size: 13px;
  color: #86868b;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 0.15s;
  line-height: 1;
}

.sr-footer__links li a:hover {
  color: #d4d4d6;
  text-decoration: none;
}

.sr-footer__bottom {
  max-width: 1024px;
  margin: 0 auto;
  padding: 20px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 600px) {
  .sr-footer__bottom {
    padding: 18px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

.sr-footer__copy {
  font-size: 13px;
  color: #86868b;
  letter-spacing: -0.005em;
  line-height: 1.5;
}

.sr-footer__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #86868b;
  letter-spacing: -0.005em;
}

.sr-footer__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #30d158;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(48,209,88,0.2);
}

.sr-footer__bottom-link {
  font-size: 13px;
  color: #86868b;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 0.15s;
}

.sr-footer__bottom-link:hover {
  color: #d4d4d6;
  text-decoration: none;
}

/* Dark mode footer stays the same since it's already dark */
[data-md-color-scheme="slate"] .sr-footer {
  background: #111113;
}
[data-md-color-scheme="slate"] .sr-footer__body {
  border-bottom-color: #2d2d30;
}
[data-md-color-scheme="slate"] .md-footer__inner {
  background: #1a1a1c !important;
  border-top-color: #2d2d30 !important;
}

/* ══════════════════════════════════════════
   22. SCROLLBARS
   ══════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sr-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sr-border-strong); }

/* ══════════════════════════════════════════
   23. MISC
   ══════════════════════════════════════════ */
:focus-visible {
  outline: 0px solid var(--sr-teal) !important;
  outline-offset: 2px !important;
}

.md-tag {
  background: var(--sr-teal-bg) !important;
  color: var(--sr-teal) !important;
  border: 1px solid var(--sr-teal-border) !important;
  border-radius: 4px !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  padding: 0.1em 0.45em !important;
}

/* Mermaid diagrams — Apple clean style */
.mermaid,
.md-typeset .mermaid {
  margin: 1.75rem 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #f8faff !important;
  border: 1px solid #e0e8f0 !important;
  padding: 1.5rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
[data-md-color-scheme="slate"] .mermaid,
[data-md-color-scheme="slate"] .md-typeset .mermaid {
  background: #0d1117 !important;
  border-color: #21262d !important;
}

/* ══════════════════════════════════════════
   24. HOME PAGE — HERO SECTION
   ══════════════════════════════════════════ */
.hero-section {
  padding: 2.5rem 0 2rem !important;
  margin-bottom: 0.5rem !important;
}

.hero-content { max-width: 42rem !important; }

.hero-content h1 {
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  color: var(--sr-text) !important;
  margin: 0 0 0.875rem !important;
}

.hero-subtitle {
  font-size: 1.0625rem !important;
  color: var(--sr-text-muted) !important;
  line-height: 1.6 !important;
  margin: 0 0 1.75rem !important;
  max-width: 36rem !important;
}

.hero-subtitle strong {
  color: var(--sr-text) !important;
  font-weight: 600 !important;
}

.hero-buttons {
  display: flex !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  background: var(--sr-teal) !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  padding: 0.55rem 1.25rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  border: 1.5px solid var(--sr-teal) !important;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.btn-primary:hover {
  background: #0f766e !important;
  border-color: #0f766e !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(13,148,136,0.35) !important;
}

.btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  background: transparent !important;
  color: var(--sr-text) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  padding: 0.55rem 1.25rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  border: 1.5px solid var(--sr-border-strong) !important;
  transition: border-color 0.15s, color 0.15s, transform 0.12s !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.btn-secondary:hover {
  border-color: var(--sr-teal) !important;
  color: var(--sr-teal) !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════
   25. HOME PAGE — FEATURE GRID
   ══════════════════════════════════════════ */
.feature-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
  margin: 1.5rem 0 !important;
}
@media (max-width: 40rem) { .feature-grid { grid-template-columns: 1fr !important; } }

.feature-card {
  background: var(--sr-card-bg) !important;
  border: 1px solid var(--sr-card-border) !important;
  border-radius: 10px !important;
  padding: 1.25rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.feature-card:hover {
  border-color: var(--sr-card-hover-border) !important;
  box-shadow: var(--sr-card-hover-shadow) !important;
}

.feature-icon {
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 8px !important;
  background: var(--sr-teal-bg) !important;
  border: 1px solid var(--sr-teal-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0.875rem !important;
  flex-shrink: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.feature-icon > i,
.feature-icon .fa-solid,
.feature-icon .fa-regular,
.feature-icon .fa-brands {
  font-size: 1rem !important;
  color: var(--sr-teal) !important;
  line-height: 1 !important;
  display: block !important;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  -webkit-font-smoothing: antialiased !important;
}

.feature-card h3 {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--sr-text) !important;
  margin: 0 0 0.375rem !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  border-bottom: none !important;
}

.feature-card p {
  font-size: 0.8125rem !important;
  color: var(--sr-text-muted) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.feature-card p strong {
  color: var(--sr-text) !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════
   26. CTA CARD
   ══════════════════════════════════════════ */
.cta-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
  margin: 1.5rem 0 !important;
}
@media (max-width: 48rem) { .cta-grid { grid-template-columns: 1fr !important; } }

.cta-card {
  background: var(--sr-card-bg) !important;
  border: 1px solid var(--sr-card-border) !important;
  border-radius: 10px !important;
  padding: 1.25rem 1.5rem 2.75rem !important;
  position: relative !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s !important;
  cursor: pointer !important;
  min-height: 9rem !important;
}

.cta-card:hover {
  border-color: var(--sr-card-hover-border) !important;
  box-shadow: var(--sr-card-hover-shadow) !important;
  transform: translateY(-1px) !important;
}

.cta-card h3 {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--sr-text) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cta-card h3::after {
  content: '' !important;
  display: block !important;
  height: 1px !important;
  background: var(--sr-border) !important;
  margin: 0.75rem -1.5rem !important;
}

.cta-card p {
  font-size: 0.8125rem !important;
  color: var(--sr-text-muted) !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}

.cta-card a {
  position: absolute !important;
  bottom: 1rem !important;
  right: 1.25rem !important;
  color: var(--sr-text-faint) !important;
  font-size: 1.125rem !important;
  text-decoration: none !important;
  transition: color 0.2s, transform 0.2s !important;
}

.cta-card:hover a {
  color: var(--sr-teal) !important;
  transform: translateX(3px) !important;
}

/* ══════════════════════════════════════════
   27. COPY BUTTON — custom .sr-copy-btn top-right
   ══════════════════════════════════════════ */

/* Hide Material's built-in clipboard button — we use our own */
.md-clipboard,
.md-clipboard.md-icon {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  z-index: -1 !important;
}

/* Custom copy button injected by extra.js */
.sr-copy-btn {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 6px !important;
  border: 1px solid #e0e0e5 !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #6e6e73 !important;
  opacity: 0 !important;
  transition: opacity 0.15s ease, background 0.15s ease,
              border-color 0.15s ease, color 0.15s ease !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

.md-typeset .highlight:hover .sr-copy-btn,
.md-typeset pre:hover .sr-copy-btn,
.md-typeset .highlight:focus-within .sr-copy-btn {
  opacity: 1 !important;
}

.sr-copy-btn:hover {
  border-color: #b0b0b5 !important;
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
  opacity: 1 !important;
}

.sr-copy-btn--copied {
  border-color: var(--sr-teal) !important;
  background: var(--sr-teal-bg) !important;
  color: var(--sr-teal) !important;
  opacity: 1 !important;
}

[data-md-color-scheme="slate"] .sr-copy-btn {
  border-color: #334155 !important;
  background: #1e293b !important;
  color: #94a3b8 !important;
}
[data-md-color-scheme="slate"] .sr-copy-btn:hover {
  border-color: #475569 !important;
  background: #293548 !important;
  color: #cbd5e1 !important;
}

/* ══════════════════════════════════════════
   28. DARK MODE
   ══════════════════════════════════════════ */
[data-md-color-scheme="slate"] .md-header {
  background-color: #0f172a !important;
  border-bottom-color: #1e293b !important;
}

[data-md-color-scheme="slate"] .md-tabs {
  background-color: #0f172a !important;
  border-bottom-color: #1e293b !important;
}

[data-md-color-scheme="slate"] .md-tabs__link { color: #94a3b8 !important; }
[data-md-color-scheme="slate"] .md-tabs__link--active { color: #f1f5f9 !important; }
[data-md-color-scheme="slate"] .md-sidebar { background: #0f172a !important; }

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset strong { color: #f1f5f9 !important; }

[data-md-color-scheme="slate"] .md-typeset p,
[data-md-color-scheme="slate"] .md-typeset ul li,
[data-md-color-scheme="slate"] .md-typeset ol li { color: #94a3b8 !important; }

[data-md-color-scheme="slate"] .md-typeset :not(pre) > code {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #5eead4 !important;
}

[data-md-color-scheme="slate"] .md-typeset pre,
[data-md-color-scheme="slate"] .md-typeset .highlight,
[data-md-color-scheme="slate"] .md-typeset .highlighttable {
  background: #0d1117 !important;
  border-color: #21262d !important;
  box-shadow: none !important;
}

[data-md-color-scheme="slate"] .md-typeset pre > code,
[data-md-color-scheme="slate"] .md-typeset .highlight code { color: var(--sr-code-fg) !important; }

/* Dark mode syntax */
[data-md-color-scheme="slate"] .md-typeset .highlight .kn,
[data-md-color-scheme="slate"] .md-typeset .highlight .k,
[data-md-color-scheme="slate"] .md-typeset .highlight .kw,
[data-md-color-scheme="slate"] .md-typeset .highlight .kr,
[data-md-color-scheme="slate"] .md-typeset .highlight .ow { color: #f472b6 !important; }
[data-md-color-scheme="slate"] .md-typeset .highlight .nc,
[data-md-color-scheme="slate"] .md-typeset .highlight .nn  { color: #7dd3fc !important; }
[data-md-color-scheme="slate"] .md-typeset .highlight .nf,
[data-md-color-scheme="slate"] .md-typeset .highlight .nb  { color: #4ade80 !important; }
[data-md-color-scheme="slate"] .md-typeset .highlight .s,
[data-md-color-scheme="slate"] .md-typeset .highlight .s1,
[data-md-color-scheme="slate"] .md-typeset .highlight .s2,
[data-md-color-scheme="slate"] .md-typeset .highlight .se,
[data-md-color-scheme="slate"] .md-typeset .highlight .si  { color: #fde68a !important; }
[data-md-color-scheme="slate"] .md-typeset .highlight .mi,
[data-md-color-scheme="slate"] .md-typeset .highlight .mf  { color: #fb923c !important; }
[data-md-color-scheme="slate"] .md-typeset .highlight .c,
[data-md-color-scheme="slate"] .md-typeset .highlight .c1,
[data-md-color-scheme="slate"] .md-typeset .highlight .cm  { color: #64748b !important; font-style: italic !important; }
[data-md-color-scheme="slate"] .md-typeset .highlight .n,
[data-md-color-scheme="slate"] .md-typeset .highlight .na  { color: #e2e8f0 !important; }
[data-md-color-scheme="slate"] .md-typeset .highlight .o   { color: #94a3b8 !important; }
[data-md-color-scheme="slate"] .md-typeset .highlight .p   { color: #cbd5e1 !important; }
[data-md-color-scheme="slate"] .md-typeset .highlight .kc  { color: #7dd3fc !important; }

/* Dark mode cards */
[data-md-color-scheme="slate"] .sr-link-card,
[data-md-color-scheme="slate"] a.sr-link-card { background: #1e293b !important; border-color: #334155 !important; }
[data-md-color-scheme="slate"] .sr-link-card__title { color: #f1f5f9 !important; }
[data-md-color-scheme="slate"] .sr-link-card__sep { background: #334155 !important; }
[data-md-color-scheme="slate"] .sr-feature-card { background: #1e293b !important; border-color: #334155 !important; }
[data-md-color-scheme="slate"] .sr-feature-card__title { color: #f1f5f9 !important; }
[data-md-color-scheme="slate"] .md-search__form { background: #1e293b !important; border-color: #334155 !important; }
[data-md-color-scheme="slate"] .md-typeset table { background: #1e293b !important; border: none !important; box-shadow: none !important; }
[data-md-color-scheme="slate"] .md-typeset table thead tr { background: #16213a !important; }
[data-md-color-scheme="slate"] .md-typeset table th { background: transparent !important; color: #f1f5f9 !important; border-bottom-color: #334155 !important; }
[data-md-color-scheme="slate"] .md-typeset table td { color: #94a3b8 !important; border-bottom-color: #1e293b !important; }
[data-md-color-scheme="slate"] .md-typeset table tbody tr:hover td { background: rgba(255,255,255,0.03) !important; }
[data-md-color-scheme="slate"] .md-typeset__scrollwrap { border-color: #334155 !important; box-shadow: none !important; background: #1e293b !important; }
[data-md-color-scheme="slate"] .feature-card { background: #1e293b !important; border-color: #334155 !important; }
[data-md-color-scheme="slate"] .feature-card h3 { color: #f1f5f9 !important; }
[data-md-color-scheme="slate"] .cta-card { background: #1e293b !important; border-color: #334155 !important; }
[data-md-color-scheme="slate"] .cta-card h3 { color: #f1f5f9 !important; }

[data-md-color-scheme="slate"] .sr-stat {
  background: #1e293b !important;
  border-color: #334155 !important;
}
[data-md-color-scheme="slate"] .sr-stat__value { color: #f1f5f9 !important; }