/* ==========================================================================
   G6 Solver — MkDocs Material Deep Override
   Matches main site aesthetic: true black, monospace body, indigo accents
   ========================================================================== */

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

/* ==========================================================================
   1. Root Variables & Base
   ========================================================================== */

[data-md-color-scheme="slate"] {
  /* Primary palette */
  --md-primary-fg-color:             #6366f1;
  --md-primary-fg-color--light:      #818cf8;
  --md-primary-fg-color--dark:       #4f46e5;
  --md-accent-fg-color:              #8b5cf6;
  --md-accent-fg-color--transparent: rgba(139, 92, 246, 0.12);

  /* Backgrounds — true black */
  --md-default-bg-color:             #000000;
  --md-default-bg-color--light:      #0a0a0a;
  --md-default-bg-color--lighter:    #111111;

  /* Foreground — gray body text, not white */
  --md-default-fg-color:             #9ca3af;
  --md-default-fg-color--light:      #6b7280;
  --md-default-fg-color--lighter:    #4b5563;
  --md-default-fg-color--lightest:   rgba(255, 255, 255, 0.07);

  /* Code */
  --md-code-bg-color:                #0a0a0a;
  --md-code-fg-color:                #c4b5fd;
  --md-code-hl-color:                rgba(99, 102, 241, 0.15);

  /* Typeset */
  --md-typeset-color:                #9ca3af;
  --md-typeset-a-color:              #6366f1;

  /* Footer */
  --md-footer-bg-color:              #000000;
  --md-footer-bg-color--dark:        #000000;
  --md-footer-fg-color:              #6b7280;
  --md-footer-fg-color--light:       #4b5563;
  --md-footer-fg-color--lighter:     rgba(255, 255, 255, 0.06);

  /* G6 tokens */
  --g6-border:       1px solid rgba(255, 255, 255, 0.06);
  --g6-border-hover: 1px solid rgba(255, 255, 255, 0.10);
  --g6-bg-card:      rgba(255, 255, 255, 0.02);
  --g6-bg-hover:     rgba(255, 255, 255, 0.05);
  --g6-glow-indigo:  0 0 40px rgba(99, 102, 241, 0.15);
  --g6-radius:       0.75rem;
  --g6-radius-lg:    1rem;
}

/* Force dark everywhere — kill any light mode artifacts */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #000000;
}

/* Body font: Geist Mono (monospace), matching main site */
[data-md-color-scheme="slate"] .md-typeset {
  font-family: 'Geist Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  color: #9ca3af;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings: Inter (sans-serif) */
[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 h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: #ffffff;
  font-weight: 600;
}

/* Text selection */
[data-md-color-scheme="slate"] ::selection {
  background: rgba(99, 102, 241, 0.3);
  color: #ffffff;
}

[data-md-color-scheme="slate"] ::-moz-selection {
  background: rgba(99, 102, 241, 0.3);
  color: #ffffff;
}

/* Custom scrollbar */
[data-md-color-scheme="slate"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-track {
  background: #0a0a0a;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
  background: #444;
}

/* Firefox scrollbar */
[data-md-color-scheme="slate"] * {
  scrollbar-width: thin;
  scrollbar-color: #333 #0a0a0a;
}

/* ==========================================================================
   2. Header
   ========================================================================== */

[data-md-color-scheme="slate"] .md-header {
  background: rgba(0, 0, 0, 0.80);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: none;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}

/* Scrolled state — more opaque */
[data-md-color-scheme="slate"] .md-header[data-md-state="shadow"] {
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* Logo — 30% larger than default 24px */
[data-md-color-scheme="slate"] .md-header .md-logo img {
  width: auto;
  height: 31.2px;
}

[data-md-color-scheme="slate"] .md-header__title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
}

/* Hide site-name text next to logo */
[data-md-color-scheme="slate"] .md-header__topic:first-child {
  display: none;
}

/* Hide the secondary topic line (version / page title echo) */
[data-md-color-scheme="slate"] .md-header__topic + .md-header__topic {
  display: none;
}

/* Header nav links */
[data-md-color-scheme="slate"] .md-header .md-header__button,
[data-md-color-scheme="slate"] .md-header .md-header__topic {
  color: #9ca3af;
  transition: color 0.2s ease;
}

[data-md-color-scheme="slate"] .md-header .md-header__button:hover {
  color: #ffffff;
}

/* Navigation tabs */
[data-md-color-scheme="slate"] .md-tabs {
  background: rgba(0, 0, 0, 0.80);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-md-color-scheme="slate"] .md-tabs__list {
  flex-wrap: wrap;
}

[data-md-color-scheme="slate"] .md-tabs__link {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
  opacity: 1;
  transition: color 0.2s ease;
}

[data-md-color-scheme="slate"] .md-tabs__link:hover {
  color: #9ca3af;
}

[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: #ffffff;
  border-bottom: 2px solid #6366f1;
}

/* ==========================================================================
   3. Sidebar Navigation
   ========================================================================== */

[data-md-color-scheme="slate"] .md-sidebar {
  background: transparent;
}

[data-md-color-scheme="slate"] .md-sidebar--primary {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

[data-md-color-scheme="slate"] .md-sidebar--secondary {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

/* Nav links */
[data-md-color-scheme="slate"] .md-nav__link {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  color: #6b7280;
  padding: 0.3em 0;
  transition: color 0.15s ease;
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: #9ca3af;
}

/* Active item: left border, not bg highlight */
[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #ffffff;
  font-weight: 600;
  border-left: 2px solid #6366f1;
  padding-left: calc(0.6rem - 2px);
}

/* Remove background on hover/active — just text color */
[data-md-color-scheme="slate"] .md-nav__link:focus,
[data-md-color-scheme="slate"] .md-nav__link:hover {
  background: transparent;
}

/* Section labels */
[data-md-color-scheme="slate"] .md-nav__item--nested > .md-nav__link {
  font-family: 'Inter', sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4b5563;
}

/* ==========================================================================
   4. Content Area — Headings & Body
   ========================================================================== */

[data-md-color-scheme="slate"] .md-main__inner {
  padding-top: 30px;
}

[data-md-color-scheme="slate"] .md-typeset h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 1rem;
}

[data-md-color-scheme="slate"] .md-typeset h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2rem;
}

[data-md-color-scheme="slate"] .md-typeset h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-typeset h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

/* Links */
[data-md-color-scheme="slate"] .md-typeset a {
  color: #6366f1;
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #818cf8;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Horizontal rules */
[data-md-color-scheme="slate"] .md-typeset hr {
  border-color: rgba(255, 255, 255, 0.06);
}

/* Paragraphs */
[data-md-color-scheme="slate"] .md-typeset p {
  color: #9ca3af;
}

/* Lists */
[data-md-color-scheme="slate"] .md-typeset li {
  color: #9ca3af;
}

/* Strong / bold */
[data-md-color-scheme="slate"] .md-typeset strong {
  color: #d1d5db;
  font-weight: 600;
}

/* ==========================================================================
   5. Code Blocks
   ========================================================================== */

[data-md-color-scheme="slate"] .md-typeset pre {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.75rem;
  box-shadow: none;
}

[data-md-color-scheme="slate"] .md-typeset pre > code {
  font-family: 'Geist Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.82rem;
  line-height: 1.65;
  background: transparent;
}

[data-md-color-scheme="slate"] .md-typeset code {
  font-family: 'Geist Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.84em;
}

/* Inline code */
[data-md-color-scheme="slate"] .md-typeset :not(pre) > code {
  background: rgba(99, 102, 241, 0.12);
  border: none;
  color: #c4b5fd;
  border-radius: 0.375rem;
  padding: 0.15em 0.4em;
}

/* Copy button */
[data-md-color-scheme="slate"] .md-clipboard {
  color: rgba(255, 255, 255, 0.2);
  transition: color 0.2s ease;
}

[data-md-color-scheme="slate"] .md-clipboard:hover {
  color: #6366f1;
}

/* Code annotations */
[data-md-color-scheme="slate"] .md-annotation__index {
  background: #6366f1;
  color: #ffffff;
}

/* ==========================================================================
   6. Tables
   ========================================================================== */

[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  font-size: 0.82rem;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--g6-radius);
  overflow: hidden;
  box-shadow: none;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: rgba(255, 255, 255, 0.02);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: #6b7280;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.8em 1em;
  overflow-wrap: anywhere;
  vertical-align: top;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  color: #9ca3af;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.7em 1em;
  overflow-wrap: anywhere;
  vertical-align: top;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* Let long paths and identifiers fit inside narrow documentation tables. */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) td code {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   7. Admonitions
   ========================================================================== */

[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  border-radius: 0.75rem;
  border: none;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: none;
  overflow: hidden;
}

[data-md-color-scheme="slate"] .md-typeset .admonition-title,
[data-md-color-scheme="slate"] .md-typeset summary {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.02);
}

/* Note / info — indigo */
[data-md-color-scheme="slate"] .md-typeset .admonition.note,
[data-md-color-scheme="slate"] .md-typeset .admonition.info,
[data-md-color-scheme="slate"] .md-typeset details.note,
[data-md-color-scheme="slate"] .md-typeset details.info {
  border-left: 3px solid #6366f1;
}
[data-md-color-scheme="slate"] .md-typeset .note > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .info > .admonition-title {
  background: rgba(99, 102, 241, 0.06);
}

/* Tip / success — emerald */
[data-md-color-scheme="slate"] .md-typeset .admonition.tip,
[data-md-color-scheme="slate"] .md-typeset .admonition.success,
[data-md-color-scheme="slate"] .md-typeset details.tip,
[data-md-color-scheme="slate"] .md-typeset details.success {
  border-left: 3px solid #10b981;
}
[data-md-color-scheme="slate"] .md-typeset .tip > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .success > .admonition-title {
  background: rgba(16, 185, 129, 0.06);
}

/* Warning — amber */
[data-md-color-scheme="slate"] .md-typeset .admonition.warning,
[data-md-color-scheme="slate"] .md-typeset details.warning {
  border-left: 3px solid #f59e0b;
}
[data-md-color-scheme="slate"] .md-typeset .warning > .admonition-title {
  background: rgba(245, 158, 11, 0.06);
}

/* Danger / failure — red */
[data-md-color-scheme="slate"] .md-typeset .admonition.danger,
[data-md-color-scheme="slate"] .md-typeset .admonition.failure,
[data-md-color-scheme="slate"] .md-typeset details.danger,
[data-md-color-scheme="slate"] .md-typeset details.failure {
  border-left: 3px solid #ef4444;
}
[data-md-color-scheme="slate"] .md-typeset .danger > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .failure > .admonition-title {
  background: rgba(239, 68, 68, 0.06);
}

/* Example — violet */
[data-md-color-scheme="slate"] .md-typeset .admonition.example,
[data-md-color-scheme="slate"] .md-typeset details.example {
  border-left: 3px solid #8b5cf6;
}
[data-md-color-scheme="slate"] .md-typeset .example > .admonition-title {
  background: rgba(139, 92, 246, 0.06);
}

/* Abstract / quote — subtle */
[data-md-color-scheme="slate"] .md-typeset .admonition.abstract,
[data-md-color-scheme="slate"] .md-typeset .admonition.quote,
[data-md-color-scheme="slate"] .md-typeset details.abstract,
[data-md-color-scheme="slate"] .md-typeset details.quote {
  border-left: 3px solid rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   8. Cards & Content Tabs
   ========================================================================== */

/* Content tabs */
[data-md-color-scheme="slate"] .md-typeset .tabbed-set {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

[data-md-color-scheme="slate"] .md-typeset .tabbed-labels {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-md-color-scheme="slate"] .md-typeset .tabbed-labels > label {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  opacity: 1;
  transition: color 0.2s ease;
}

[data-md-color-scheme="slate"] .md-typeset .tabbed-labels > label:hover {
  color: #9ca3af;
}

[data-md-color-scheme="slate"] .md-typeset .tabbed-labels > .tabbed-labels__active {
  color: #ffffff;
}

/* Tab indicator — indigo */
[data-md-color-scheme="slate"] .md-typeset .tabbed-labels > label::after {
  background: #6366f1;
}

/* ==========================================================================
   9. Search
   ========================================================================== */

[data-md-color-scheme="slate"] .md-search__form {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-md-color-scheme="slate"] .md-search__form:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

[data-md-color-scheme="slate"] .md-search__input {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  color: #9ca3af;
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: #4b5563;
}

[data-md-color-scheme="slate"] .md-search-result {
  background: #0a0a0a;
}

[data-md-color-scheme="slate"] .md-search-result__meta {
  background: #0a0a0a;
  color: #4b5563;
}

[data-md-color-scheme="slate"] .md-search-result__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-md-color-scheme="slate"] .md-search-result mark {
  background: rgba(99, 102, 241, 0.25);
  color: #c4b5fd;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

[data-md-color-scheme="slate"] .md-footer {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

[data-md-color-scheme="slate"] .md-footer-meta {
  background: #000000;
}

[data-md-color-scheme="slate"] .md-footer a {
  color: #6b7280;
  transition: color 0.15s ease;
}

[data-md-color-scheme="slate"] .md-footer a:hover {
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-copyright {
  color: #4b5563;
}

/* Footer nav (prev/next) */
[data-md-color-scheme="slate"] .md-footer__link {
  color: #6b7280;
  transition: color 0.15s ease;
}

[data-md-color-scheme="slate"] .md-footer__link:hover {
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-footer__title {
  color: #9ca3af;
}

/* ==========================================================================
   11. TOC (Right Sidebar)
   ========================================================================== */

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link {
  color: #4b5563;
  font-size: 0.7rem;
  padding: 0.25em 0;
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link:hover {
  color: #9ca3af;
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
  color: #6366f1;
  border-left: 2px solid #6366f1;
  padding-left: calc(0.6rem - 2px);
}

/* ==========================================================================
   12. Buttons / Badges / Tags
   ========================================================================== */

/* Tags */
[data-md-color-scheme="slate"] .md-typeset .md-tag {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
  border-radius: 0.375rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  border: none;
}

/* Buttons */
[data-md-color-scheme="slate"] .md-typeset .md-button {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-typeset .md-button--primary:hover {
  background: linear-gradient(135deg, #818cf8, #a78bfa);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

/* ==========================================================================
   13. Mermaid Diagrams
   ========================================================================== */

[data-md-color-scheme="slate"] .mermaid {
  background: transparent !important;
}

[data-md-color-scheme="slate"] .mermaid .node rect,
[data-md-color-scheme="slate"] .mermaid .node circle,
[data-md-color-scheme="slate"] .mermaid .node polygon {
  fill: #0a0a0a !important;
  stroke: #6366f1 !important;
  stroke-width: 1px !important;
}

[data-md-color-scheme="slate"] .mermaid .nodeLabel,
[data-md-color-scheme="slate"] .mermaid .label {
  color: #ffffff !important;
  fill: #ffffff !important;
}

[data-md-color-scheme="slate"] .mermaid .edgePath .path {
  stroke: #4b5563 !important;
}

[data-md-color-scheme="slate"] .mermaid .edgeLabel {
  background: #0a0a0a !important;
  color: #9ca3af !important;
}

/* ==========================================================================
   14. Definition Lists
   ========================================================================== */

[data-md-color-scheme="slate"] .md-typeset dl {
  margin-bottom: 1.5em;
}

[data-md-color-scheme="slate"] .md-typeset dt {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #ffffff;
  margin-top: 1.2em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-md-color-scheme="slate"] .md-typeset dd {
  margin-left: 1.2em;
  padding-left: 1em;
  border-left: 2px solid rgba(99, 102, 241, 0.15);
  color: #9ca3af;
}

/* ==========================================================================
   15. Blockquotes
   ========================================================================== */

[data-md-color-scheme="slate"] .md-typeset blockquote {
  border-left: 3px solid #6366f1;
  background: rgba(99, 102, 241, 0.04);
  padding: 0.8em 1.2em;
  border-radius: 0 0.75rem 0.75rem 0;
  color: #9ca3af;
}

/* ==========================================================================
   16. Task Lists
   ========================================================================== */

[data-md-color-scheme="slate"] .md-typeset .task-list-indicator::before {
  border-color: rgba(255, 255, 255, 0.15);
}

[data-md-color-scheme="slate"] .md-typeset [type="checkbox"]:checked + .task-list-indicator::before {
  background-color: #6366f1;
  border-color: #6366f1;
}

/* ==========================================================================
   17. Custom G6 Components (Job Agent Explorer etc.)
   ========================================================================== */

.g6-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.g6-filter-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.4em 1em;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 100px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.g6-filter-btn:hover {
  border-color: rgba(255, 255, 255, 0.10);
  color: #9ca3af;
}

.g6-filter-btn.active {
  background: rgba(99, 102, 241, 0.12);
  border-color: #6366f1;
  color: #818cf8;
}

.g6-search-input {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  width: 100%;
  max-width: 400px;
  padding: 0.6em 1em;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.75rem;
  color: #9ca3af;
  outline: none;
  margin-bottom: 1.2rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.g6-search-input::placeholder {
  color: #4b5563;
}

.g6-search-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* Card grid */
.g6-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.g6-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  padding: 1.2em;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.g6-card:hover {
  border-color: rgba(255, 255, 255, 0.10);
  transform: none;
  box-shadow: none;
}

.g6-card.expanded {
  grid-column: 1 / -1;
}

.g6-card__name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #ffffff;
  margin-bottom: 0.4em;
}

.g6-card__desc {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 0.6em;
}

.g6-card__caps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.g6-card__cap-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  padding: 0.2em 0.6em;
  border-radius: 0.375rem;
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
}

.g6-card__details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, margin-top 0.35s ease;
  margin-top: 0;
}

.g6-card.expanded .g6-card__details {
  max-height: 600px;
  margin-top: 1em;
}

.g6-card__detail-section {
  padding-top: 0.8em;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.8rem;
  color: #9ca3af;
  line-height: 1.6;
}

.g6-card-hidden {
  display: none !important;
}

/* ==========================================================================
   18. Responsive
   ========================================================================== */

@media screen and (max-width: 76.25em) {
  [data-md-color-scheme="slate"] .md-sidebar--primary {
    border-right: none;
  }
}

@media screen and (max-width: 60em) {
  .g6-card-grid {
    grid-template-columns: 1fr;
  }

  [data-md-color-scheme="slate"] .md-tabs {
    display: none;
  }

  [data-md-color-scheme="slate"] .md-header__title {
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 44.9375em) {
  [data-md-color-scheme="slate"] .md-typeset h1 {
    font-size: 1.4rem;
  }

  .g6-search-input {
    max-width: 100%;
  }
}