/* =============================================================
   Tools Ocean — design.css
   Light : fond bleu-gris #f0f5fc  — accent bleu  #3b82f6
   Dark  : fond quasi-noir #09090b — accent lime  #c8f535
   ============================================================= */

/* ── 1. VARIABLES ─────────────────────────────────────────── */
:root {
  /* Colors — light mode (default) */
  --color-primary:       #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-light: #dbeafe;
  --color-primary-text:  #ffffff;

  --color-bg:            #f0f5fc;   /* fond page bleu-gris */
  --color-surface:       #ffffff;   /* cards, panneaux */
  --color-surface-2:     #e8eef8;   /* surfaces secondaires */

  --color-text:          #0a0a14;
  --color-text-muted:    #64748b;
  --color-text-inverse:  #ffffff;

  --color-border:        #dde3ed;
  --color-border-focus:  #3b82f6;

  --color-error:         #ef4444;
  --color-error-bg:      #fef2f2;
  --color-success:       #10b981;
  --color-success-bg:    #f0fdf4;

  --color-code-bg:       #f1f5fb;

  /* Syntax tokens — light */
  --output-bg:           #f8fbff;
  --token-placeholder:   #94a3b8;
  --token-key:           #2563eb;
  --token-string:        #16a34a;
  --token-number:        #d97706;
  --token-boolean:       #dc2626;
  --token-null:          #7c3aed;
  --token-bracket:       #9ca3af;
  --token-tag:           #2563eb;
  --token-attr-name:     #d97706;
  --token-attr-value:    #16a34a;
  --token-comment:       #6b7280;
  --token-prolog:        #7c3aed;
  --token-cdata:         #92400e;

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  4rem;

  /* Shape */
  --radius-sm: 0.375rem;
  --radius:    0.5rem;
  --radius-lg: 0.75rem;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(10, 15, 40, 0.07), 0 1px 2px rgba(10, 15, 40, 0.04);
  --shadow:    0 2px 8px rgba(10, 15, 40, 0.09), 0 1px 3px rgba(10, 15, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(10, 15, 40, 0.11), 0 2px 6px rgba(10, 15, 40, 0.07);

  /* Typography */
  --font:      system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
}

/* ── Dark mode ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-primary:       #c8f535;
  --color-primary-hover: #b3de20;
  --color-primary-light: rgba(200, 245, 53, 0.1);
  --color-primary-text:  #0a0a0a;   /* texte sombre sur fond lime */

  --color-bg:            #09090b;
  --color-surface:       #111116;
  --color-surface-2:     #18181d;

  --color-text:          #fafaf9;
  --color-text-muted:    #71717a;
  --color-text-inverse:  #09090b;

  --color-border:        #27272a;
  --color-border-focus:  #c8f535;

  --color-error:         #f87171;
  --color-error-bg:      #3f0d0d;
  --color-success:       #4ade80;
  --color-success-bg:    #052e16;

  --color-code-bg:       #09090b;

  /* Syntax tokens — dark (VS Code Dark+ sur fond noir) */
  --output-bg:           #0d0d10;
  --token-placeholder:   #52525b;
  --token-key:           #9cdcfe;
  --token-string:        #ce9178;
  --token-number:        #b5cea8;
  --token-boolean:       #569cd6;
  --token-null:          #569cd6;
  --token-bracket:       #6b7280;
  --token-tag:           #569cd6;
  --token-attr-name:     #9cdcfe;
  --token-attr-value:    #ce9178;
  --token-comment:       #6a9955;
  --token-prolog:        #569cd6;
  --token-cdata:         #d7ba7d;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow:    0 2px 8px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Transition globale — uniquement pendant le switch de thème */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* ── 2. RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Radial gradient subtil en dark — spotlight au sommet */
[data-theme="dark"] body {
  background-color: #09090b;
  background-image: radial-gradient(ellipse 100% 45% at 50% 0%, #141620 0%, transparent 60%);
}

img, svg { display: block; max-width: 100%; }
ul, ol { padding-left: 1.5rem; }

/* ── 3. TYPOGRAPHY ────────────────────────────────────────── */
h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; color: var(--color-text); }

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: var(--space-md); }
h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); margin-bottom: var(--space-sm); }
h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: var(--space-xs); }

p  { margin-bottom: var(--space-md); color: var(--color-text); }

a  { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

strong { font-weight: 600; }

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

pre {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  overflow-x: auto;
  line-height: 1.5;
}

pre code { background: none; border: none; padding: 0; font-size: inherit; }

ol li, ul li { margin-bottom: var(--space-xs); }

/* ── 4. LAYOUT ────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .container { padding: 0 var(--space-lg); }
  .grid-2    { grid-template-columns: repeat(2, 1fr); }
}

/* ── 5. HEADER ────────────────────────────────────────────── */
.header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-theme="dark"] .header {
  background: rgba(9, 9, 11, 0.85);
  border-bottom-color: #1c1c20;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.5rem;
  gap: var(--space-md);
}

.logo {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.logo-accent { color: var(--color-primary); }
.logo:hover  { text-decoration: none; opacity: 0.9; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  overflow-x: auto;
}

.nav-link {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.nav-link:hover  { color: var(--color-text); background: var(--color-surface-2); text-decoration: none; }
.nav-link--active {
  color: var(--color-text);
  background: var(--color-surface-2);
  font-weight: 500;
}

/* Compatibilité ancienne classe nav a */
.nav a {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.nav a:hover { color: var(--color-text); background: var(--color-surface-2); text-decoration: none; }

/* Theme toggle */
.theme-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font);
  font-size: 1rem;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius);
  padding: 0.35rem;
  cursor: pointer;
  transition: color 0.15s;
  line-height: 1;
}
.theme-toggle:hover { color: var(--color-text); }
.theme-toggle svg   { width: 18px; height: 18px; flex-shrink: 0; }

/* ── 6. BREADCRUMB ────────────────────────────────────────── */
.breadcrumb {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); text-decoration: none; }

/* ── 7. HERO ──────────────────────────────────────────────── */
.hero {
  background: transparent;
  padding: var(--space-lg) 0 var(--space-md);
}

.hero h1      { color: var(--color-text); }
.hero-desc,
.hero-description {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* ── 8. TOOL SECTION ──────────────────────────────────────── */
.tool-section {
  padding: var(--space-lg) 0;
}

.tool-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.tool-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) { .tool-panels { grid-template-columns: 1fr 1fr; } }

.tool-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.tool-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tool-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tool-textarea {
  width: 100%;
  min-width: 0;
  min-height: 380px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  resize: vertical;
  overflow-x: auto;
  transition: border-color 0.15s;
}
.tool-textarea--large { min-height: 420px; }
.tool-textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.tool-textarea[readonly] { background: var(--color-surface-2); cursor: default; }

/* Syntax-highlighted output panel */
.tool-output-highlight {
  width: 100%;
  min-width: 0;
  min-height: 420px;
  max-height: 600px;
  overflow-x: auto;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--output-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin: 0;
  white-space: pre;
  tab-size: 2;
  box-sizing: border-box;
}
.json-placeholder { color: var(--token-placeholder); font-style: italic; }

/* JSON tokens */
.json-key     { color: var(--token-key);     font-weight: 600; }
.json-string  { color: var(--token-string); }
.json-number  { color: var(--token-number); }
.json-boolean { color: var(--token-boolean); font-weight: 600; }
.json-null    { color: var(--token-null);    font-weight: 600; }

/* XML tokens */
.xml-bracket    { color: var(--token-bracket); }
.xml-tag        { color: var(--token-tag);      font-weight: 600; }
.xml-attr-name  { color: var(--token-attr-name); }
.xml-attr-value { color: var(--token-attr-value); }
.xml-comment    { color: var(--token-comment);  font-style: italic; }
.xml-prolog     { color: var(--token-prolog); }
.xml-cdata      { color: var(--token-cdata); }

.tool-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.tool-options { display: flex; align-items: center; gap: var(--space-md); }
.tool-actions { display: flex; gap: var(--space-sm); }

.option-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.tool-select {
  font-family: var(--font);
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.25rem var(--space-sm);
  cursor: pointer;
}
.tool-select:focus { outline: none; border-color: var(--color-border-focus); }

.tool-error {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  border-radius: var(--radius);
  color: var(--color-error);
  font-size: 0.875rem;
  font-family: var(--font-mono);
}

/* ── 9. BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  text-decoration: none;
}

/* Primary — lime en dark, bleu en light */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  text-decoration: none;
  color: var(--color-primary-text);
}

/* Secondary — outline */
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  background: var(--color-surface-2);
  border-color: var(--color-text-muted);
  text-decoration: none;
  color: var(--color-text);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.btn-ghost:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
  text-decoration: none;
}

/* ── 10. FORM ELEMENTS ────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* ── 11. INPUT GROUP ──────────────────────────────────────── */
.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.input-group label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ── 12. CONTENT / SEO SECTION ────────────────────────────── */
.seo-content {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-border);
}
.seo-content h2 { margin-top: var(--space-lg); }
.seo-content h2:first-child { margin-top: 0; }
.seo-content h3 { margin-top: var(--space-md); color: var(--color-text-muted); }
.seo-content ul, .seo-content ol { margin-bottom: var(--space-md); }

/* Alias pour anciens templates */
.content-section {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-border);
}
.content-prose h2 { margin-top: var(--space-lg); }
.content-prose h2:first-child { margin-top: 0; }
.content-prose h3 { margin-top: var(--space-md); color: var(--color-text-muted); }
.content-prose ol { margin-bottom: var(--space-md); }

/* ── 13. CARDS ────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}
.card h3 {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  font-weight: 600;
}

/* Related card (lien-carte) */
.related-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.related-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--color-text);
}
.related-card strong { color: var(--color-primary); font-weight: 600; }
.related-card span   { font-size: 0.8125rem; color: var(--color-text-muted); }

/* ── 14. EXAMPLES SECTION ─────────────────────────────────── */
.examples-section {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-border);
}
.examples-section h2 { margin-bottom: var(--space-lg); }

.examples-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 768px) { .examples-grid { grid-template-columns: 1fr 1fr; } }

/* ── 15. FAQ ──────────────────────────────────────────────── */
.faq-section {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-border);
}
.faq-section h2 { margin-bottom: var(--space-lg); }

.faq { display: flex; flex-direction: column; gap: var(--space-sm); }

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  text-align: left;
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: none;
  padding: var(--space-md);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s;
}
.faq-question::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--color-text-muted);
  flex-shrink: 0;
  margin-left: var(--space-sm);
}
.faq-question[aria-expanded="true"] {
  background: var(--color-primary-light);
  color: var(--color-text);
}
[data-theme="dark"] .faq-question[aria-expanded="true"] { color: #c8f535; }
.faq-question[aria-expanded="true"]::after { content: '−'; }
.faq-question:hover { background: var(--color-surface-2); }

.faq-answer {
  padding: var(--space-md);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  font-size: 0.9375rem;
  color: var(--color-text);
}
.faq-answer p:last-child { margin-bottom: 0; }

/* ── 16. RELATED TOOLS ────────────────────────────────────── */
.related-section {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-border);
}
.related-section h2 { margin-bottom: var(--space-md); }

.related-tools {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
@media (min-width: 640px)  { .related-tools { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .related-tools { grid-template-columns: repeat(4, 1fr); } }

.related-tool-link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-primary);
  font-size: 0.9375rem;
  transition: border-color 0.15s, background 0.15s;
}
.related-tool-link:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  text-decoration: none;
}

/* ── 17. FOOTER ───────────────────────────────────────────── */
.footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-lg) 0;
}
.footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.footer p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.footer-copy { font-size: 0.875rem; color: var(--color-text-muted); margin: 0; }
.footer-nav  { display: flex; gap: var(--space-md); }
.footer-link { font-size: 0.875rem; color: var(--color-text-muted); }
.footer-link:hover { color: var(--color-text); }
.footer-nav a { font-size: 0.875rem; color: var(--color-text-muted); }
.footer-nav a:hover { color: var(--color-text); text-decoration: none; }

/* ── 18. AD SLOTS ─────────────────────────────────────────── */
.ad-slot {
  width: 100%;
  overflow: hidden;
  text-align: center;
}
.ad-slot--top {
  min-height: 90px;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.ad-slot--mid    { min-height: 90px;  padding: var(--space-md) 0; }
.ad-slot--inline { min-height: 280px; padding: var(--space-md) 0; }
@media (max-width: 767px) {
  .ad-slot--top    { min-height: 50px; }
  .ad-slot--inline { min-height: 200px; }
}

/* ── 19. TOOL TABS ────────────────────────────────────────── */
.tool-tabs {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-md);
}
.tool-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 0.6rem var(--space-md);
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.tool-tab:hover  { color: var(--color-text); }
.tool-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ── 20. OPENAPI VALIDATOR ────────────────────────────────── */
.openapi-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-md);
  align-items: stretch;
}
.openapi-col { min-width: 0; }
.openapi-layout > .openapi-col:first-child { display: flex; flex-direction: column; }
.openapi-tree-empty {
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.openapi-ops-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: var(--space-sm);
}
.openapi-tag-section { border-bottom: 1px solid var(--color-border); }
.openapi-tag-section:last-child { border-bottom: none; }
.openapi-tag-header {
  padding: 0.35rem var(--space-md);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
}
.openapi-op-accordion {
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  transition: border-left-color 0.12s;
  cursor: pointer;
}
.openapi-op-accordion:last-child { border-bottom: none; }
.openapi-op-accordion.active { border-left-color: var(--color-primary); }
.openapi-op-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem var(--space-md) 0.5rem 0.85rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.openapi-op-header:hover { background: var(--color-surface-2); }
.openapi-op-accordion.active > .openapi-op-header {
  background: var(--color-primary-light);
  border-bottom: 1px solid var(--color-border);
}
.openapi-op-chevron {
  margin-left: auto;
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--color-text-muted);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.openapi-op-accordion.active .openapi-op-chevron {
  transform: rotate(90deg);
  border-left-color: var(--color-primary);
}
.openapi-op-body { padding: 0 var(--space-md) var(--space-md); }
.openapi-op-body .openapi-structure-tabs {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-sm);
  padding-left: 0;
  padding-right: 0;
}
.openapi-op-path {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}
.openapi-op-summary {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.http-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.62rem;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  flex-shrink: 0;
  min-width: 3rem;
}
.http-get    { background:#dbeafe; color:#1d4ed8; }
.http-post   { background:#dcfce7; color:#15803d; }
.http-put    { background:#ffedd5; color:#c2410c; }
.http-patch  { background:#f3e8ff; color:#7e22ce; }
.http-delete { background:#fee2e2; color:#b91c1c; }
.http-head, .http-options { background:#f1f5f9; color:#475569; }
[data-theme="dark"] .http-get    { background:#1e3a5f; color:#93c5fd; }
[data-theme="dark"] .http-post   { background:#14532d; color:#86efac; }
[data-theme="dark"] .http-put    { background:#7c2d12; color:#fdba74; }
[data-theme="dark"] .http-patch  { background:#4a1d96; color:#d8b4fe; }
[data-theme="dark"] .http-delete { background:#450a0a; color:#fca5a5; }
[data-theme="dark"] .http-head,
[data-theme="dark"] .http-options { background:#1c1c22; color:#71717a; }

.openapi-meta-badge {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}
.openapi-structure-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.5rem var(--space-md);
}
.openapi-struct-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.1s;
}
.openapi-struct-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.openapi-struct-btn.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 600;
}
.openapi-result {
  margin-top: var(--space-sm);
  border-radius: var(--radius);
  overflow: hidden;
}
.openapi-result--valid   { border: 1px solid var(--color-success); background: var(--color-success-bg); }
.openapi-result--invalid { border: 1px solid var(--color-error);   background: var(--color-error-bg); }
.openapi-result-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.5rem var(--space-md);
  font-weight: 700;
  font-size: 0.875rem;
}
.openapi-result--valid   .openapi-result-header { color: var(--color-success); }
.openapi-result--invalid .openapi-result-header { color: var(--color-error); }
.openapi-error-list {
  padding: 0 var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.openapi-error-item {
  padding: 0.35rem 0.6rem;
  background: rgba(0,0,0,0.05);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}
.openapi-error-path {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-error);
  margin-bottom: 0.1rem;
}
.openapi-error-msg { color: var(--color-text); }

@media (max-width: 900px) {
  .openapi-layout { grid-template-columns: 1fr; }
  .openapi-op-summary { display: none; }
}

/* Param table */
.param-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.param-table thead th {
  text-align: left;
  padding: 0.45rem 0.75rem;
  background: var(--color-surface-2);
  border-bottom: 2px solid var(--color-border);
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.param-table thead th:first-child { width: 28%; }
.param-table td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.param-table tbody tr:last-child td { border-bottom: none; }
.param-table tbody tr:hover { background: var(--color-surface-2); }
.param-name-cell { width: 28%; }
.param-name {
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  word-break: break-all;
  color: var(--color-text);
}
.param-req-star { color: var(--color-error); }
.param-required {
  font-size: 0.7rem;
  color: var(--color-error);
  font-weight: 600;
  margin-top: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.param-optional { font-size: 0.7rem; color: var(--color-text-muted); margin-top: 0.2rem; }
.param-desc-cell { width: 72%; }
.param-desc { color: var(--color-text-muted); font-size: 0.82rem; margin-bottom: 0.35rem; line-height: 1.4; }
.param-type-info { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 0.35rem; }
.param-enum { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 0.35rem; }
.param-enum code { background: var(--color-surface-2); padding: 0.05em 0.3em; border-radius: 3px; font-size: 0.75rem; }
.param-input { width: 100%; box-sizing: border-box; margin-top: 0.25rem; }
.param-input--error { border-color: var(--color-error) !important; background: var(--color-error-bg) !important; }
.param-inline-error { color: var(--color-error); font-size: 0.75rem; margin-top: 0.25rem; }

/* ── 21. REGEX TESTER ─────────────────────────────────────── */
.regex-pattern-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem var(--space-sm);
}
.regex-pattern-row:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.regex-slash {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--color-primary);
  font-weight: 700;
  user-select: none;
  flex-shrink: 0;
  opacity: 0.7;
}
.regex-pattern-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--color-text);
  padding: 0.25rem 0;
  min-width: 0;
}
.regex-pattern-input::placeholder { color: var(--color-text-muted); }
.regex-flags {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-sm);
}
.regex-flag {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius-sm);
  transition: background 0.1s, color 0.1s;
}
.regex-flag:hover { background: var(--color-surface-2); color: var(--color-text); }
.regex-flag input { cursor: pointer; accent-color: var(--color-primary); margin: 0; }

mark.regex-match {
  background: #fef08a;
  color: #713f12;
  border-radius: 2px;
  padding: 0 1px;
}
[data-theme="dark"] mark.regex-match { background: #3d2f00; color: #fde68a; }

.regex-stats { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.85rem; font-weight: 600; }

.regex-match-list {
  margin-top: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.regex-match-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: var(--space-sm);
  align-items: baseline;
  padding: 0.4rem var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.82rem;
}
.regex-match-item:last-child { border-bottom: none; }
.regex-match-item:nth-child(even) { background: var(--color-surface-2); }
.regex-match-idx { color: var(--color-text-muted); font-family: var(--font-mono); }
.regex-match-val { font-family: var(--font-mono); word-break: break-all; color: var(--color-text); }
.regex-match-pos { color: var(--color-text-muted); font-family: var(--font-mono); white-space: nowrap; font-size: 0.75rem; }
.regex-groups {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding-top: 0.2rem;
}
.regex-group-badge {
  font-size: 0.72rem;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  font-family: var(--font-mono);
}
[data-theme="dark"] .regex-group-badge { color: #c8f535; }

/* ── 22. UUID GENERATOR ───────────────────────────────────── */
.uuid-output {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: var(--space-sm);
}
.uuid-single {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
  font-family: var(--font-mono);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  background: var(--color-surface);
  word-break: break-all;
  text-align: center;
}
.uuid-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.55rem var(--space-md);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}
.uuid-item:last-child { border-bottom: none; }
.uuid-item:nth-child(even) { background: var(--color-surface-2); }
.uuid-value { flex: 1; color: var(--color-text); word-break: break-all; }
.uuid-item-copy {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.uuid-item-copy:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ── 23. STORE HERO ───────────────────────────────────────── */
.store-hero {
  background: transparent;
  padding: 4rem var(--space-lg) 3rem;
  text-align: center;
}

.store-hero-inner {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.store-hero-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  border-radius: 999px;
  padding: 0.3rem 1rem;
  letter-spacing: 0.02em;
}

.store-hero-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.02em;
}

.store-hero-accent { color: var(--color-primary); }

.store-hero-desc {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  max-width: 520px;
  margin: 0;
  line-height: 1.65;
}

.store-hero-ctas {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.store-hero-cta-primary { font-size: 0.9375rem; padding: 0.65rem 1.5rem; }

.store-hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 0.25rem;
  padding: 0.75rem 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.store-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0 1.75rem;
}

.store-hero-stat strong {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
}

.store-hero-stat span {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.store-hero-stat-sep {
  width: 1px;
  height: 2rem;
  background: var(--color-border);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .store-hero { padding: 2.5rem var(--space-md) 2rem; }
  .store-hero-title { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .store-hero-stats { padding: 0.65rem 1rem; }
  .store-hero-stat { padding: 0 1rem; }
  .store-hero-stat strong { font-size: 1.25rem; }
}

/* ── 23b. CATEGORY NAV BAR ────────────────────────────────── */
.store-catbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 3.5rem;
  z-index: 90;
}
[data-theme="dark"] .store-catbar { background: rgba(17,17,22,0.92); backdrop-filter: blur(8px); }

.store-catbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 var(--space-lg);
  overflow-x: auto;
  scrollbar-width: none;
}
.store-catbar-inner::-webkit-scrollbar { display: none; }

/* ── Category button ── */
.catbar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.85rem 0.875rem;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.catbar-item:hover     { color: var(--color-text); }
.catbar-item--active   { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }

/* ── Count badge ── */
.catbar-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  line-height: 1.5;
}
.catbar-item--active .catbar-count {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* ── Chevron arrow (CSS only, no icon) ── */
.catbar-arrow {
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.45;
  transition: transform 0.2s, opacity 0.2s;
  flex-shrink: 0;
}
.catbar-cat--open > .catbar-item .catbar-arrow,
.catbar-cat:hover > .catbar-item .catbar-arrow { transform: rotate(180deg); opacity: 0.8; }

/* ── Category wrapper (dropdown host) ── */
.catbar-cat { position: relative; }

/* ── Dropdown ── */
.catbar-dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  min-width: 190px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 0.375rem;
  z-index: 200;
}

/* Show on hover (devices that support it) */
@media (hover: hover) {
  .catbar-cat:hover .catbar-dropdown { display: flex; }
}
/* Always show when category is active (click / touch) */
.catbar-cat--open .catbar-dropdown { display: flex; }

/* ── Subcategory button ── */
.catbar-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text);
  background: none;
  border: none;
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.catbar-sub:hover      { background: var(--color-surface-2); color: var(--color-primary); }
.catbar-sub--active    { color: var(--color-primary); font-weight: 600; background: var(--color-primary-light); }

/* ── Full-width content area (replaces sidebar layout) ── */
.store-content-full {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-lg);
}
@media (max-width: 767px) { .store-content-full { padding: var(--space-md); } }

/* ── 23d. STORE HEADER ────────────────────────────────────── */
.store-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
}
[data-theme="dark"] .store-header { background: rgba(9,9,11,0.85); }

.store-header-inner {
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: 3.5rem;
  padding: 0 var(--space-md);
}
@media (min-width: 768px) { .store-header-inner { padding: 0 var(--space-lg); } }

.store-search-wrap { flex: 1; max-width: 520px; margin: 0 auto; }
.store-search {
  width: 100%;
  font-family: var(--font);
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 2rem;
  padding: 0.45rem 1.1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.store-search:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.store-search::placeholder { color: var(--color-text-muted); }

.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.25rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger:hover { background: var(--color-surface-2); color: var(--color-text); }
@media (min-width: 768px) { .hamburger { display: none; } }

/* ── 24. STORE LAYOUT ─────────────────────────────────────── */
.store-layout { display: flex; min-height: calc(100vh - 3.5rem); }

/* ── 25. STORE SIDEBAR ────────────────────────────────────── */
.store-sidebar-wrapper {
  width: 256px;
  flex-shrink: 0;
  background: #0d0d12;
  position: sticky;
  top: 3.5rem;
  height: calc(100vh - 3.5rem);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #27272a #0d0d12;
  border-right: 1px solid #1c1c22;
}
/* Light mode sidebar */
:root:not([data-theme="dark"]) .store-sidebar-wrapper {
  background: #1a1f2e;
  scrollbar-color: #374151 #1a1f2e;
  border-right-color: #111827;
}
.store-sidebar-wrapper::-webkit-scrollbar { width: 4px; }
.store-sidebar-wrapper::-webkit-scrollbar-track { background: #0d0d12; }
.store-sidebar-wrapper::-webkit-scrollbar-thumb { background: #27272a; border-radius: 2px; }

.store-sidebar { padding: var(--space-md) var(--space-sm); }

.sidebar-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  color: #71717a;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  margin-bottom: var(--space-xs);
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.sidebar-all:hover, .sidebar-all.active { background: rgba(200,245,53,0.08); color: #c8f535; }

.sidebar-cat { margin-bottom: 2px; }

.sidebar-cat-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  color: #a1a1aa;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.sidebar-cat-header:hover   { background: rgba(255,255,255,0.05); color: #e4e4e7; }
.sidebar-cat-header.expanded { color: #e4e4e7; background: rgba(255,255,255,0.05); }

.sidebar-cat-icon { font-size: 1rem; flex-shrink: 0; }
.sidebar-cat-name { flex: 1; }
.sidebar-arrow    { font-size: 0.625rem; color: #52525b; flex-shrink: 0; }

.sidebar-subcats {
  padding: 2px 0 4px 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar-subcat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font);
  font-size: 0.8125rem;
  color: #52525b;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.sidebar-subcat:hover  { background: rgba(255,255,255,0.05); color: #71717a; }
.sidebar-subcat.active { background: rgba(200,245,53,0.1); color: #c8f535; font-weight: 600; }

.sidebar-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: #3f3f46;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  flex-shrink: 0;
}
.sidebar-all.active .sidebar-count,
.sidebar-subcat.active .sidebar-count { color: #a3e635; background: rgba(200,245,53,0.12); }

/* ── 26. STORE CONTENT ────────────────────────────────────── */
.store-content-wrapper {
  flex: 1;
  min-width: 0;
  padding: var(--space-lg);
  background: var(--color-bg);
}

/* ── Section ── */
.store-section { margin-bottom: var(--space-lg); }

.store-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.store-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.store-section-count {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}

/* ── Slider nav buttons ── */
.slider-nav { display: flex; gap: 0.25rem; }

.slider-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  font-size: 1.125rem;
  line-height: 1;
  font-family: var(--font);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  padding: 0;
}
.slider-btn:hover { background: var(--color-surface-2); color: var(--color-primary); border-color: var(--color-primary); }

/* ── Slider wrapper & track ── */
.store-slider {
  overflow: hidden;
  position: relative;
}

.store-slider-track {
  display: flex;
  gap: 10px;            /* keep in sync with SLIDER_GAP in JS */
  will-change: transform;
  cursor: default;
}

/* ── Tool card (compact, slider) ── */
.store-card {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  width: 210px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  user-select: none;
}
.store-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text);
}

.store-card-body {
  padding: 0.55rem 0.7rem;
  min-width: 0;
}

.store-card-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-card-desc {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card icon — theme-aware background */
.store-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  font-size: 1.05rem;
  align-self: stretch;
  background: var(--color-primary-light);
  border-right: 1px solid var(--color-border);
}

/* Legacy aliases */
.store-card-title { font-size: 0.8125rem; font-weight: 600; }
.store-card-badge { display: none; }
.store-cards      { display: flex; gap: 10px; }

.store-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: var(--color-text-muted);
  font-size: 1rem;
  text-align: center;
  gap: var(--space-sm);
}

/* ── 27. SIDEBAR MOBILE OVERLAY ───────────────────────────── */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 150; }
.sidebar-overlay.open { display: block; }

@media (max-width: 767px) {
  .store-sidebar-wrapper {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .store-sidebar-wrapper.open { transform: translateX(0); }
  .store-sidebar-close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid #27272a;
  }
  .store-content-wrapper { padding: var(--space-md); }
}
@media (min-width: 768px) { .store-sidebar-close { display: none; } }

/* ── 28. CODE EDITOR (syntax-highlight overlay) ───────────── */
.code-editor-wrap {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}
.code-editor-wrap:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.code-highlight {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0.6rem 0.75rem;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--color-text);
  tab-size: 2;
  box-sizing: border-box;
}
.code-editor-ta {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  padding: 0.6rem 0.75rem;
  border: none; outline: none;
  background: transparent;
  color: transparent;
  caret-color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  resize: none;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  tab-size: 2;
  box-sizing: border-box;
}
.code-editor-ta::placeholder { color: var(--color-text-muted); opacity: 1; }

/* Token colors — light */
.hl-key     { color: #2563eb; }
.hl-string  { color: #16a34a; }
.hl-number  { color: #d97706; }
.hl-bool    { color: #9333ea; }
.hl-null    { color: #64748b; }
.hl-punct   { color: #94a3b8; }
.hl-comment { color: #94a3b8; font-style: italic; }

/* Token colors — dark */
[data-theme="dark"] .hl-key     { color: #7dd3fc; }
[data-theme="dark"] .hl-string  { color: #86efac; }
[data-theme="dark"] .hl-number  { color: #fbbf24; }
[data-theme="dark"] .hl-bool    { color: #f472b6; }
[data-theme="dark"] .hl-null    { color: #71717a; }
[data-theme="dark"] .hl-punct   { color: #3f3f46; }
[data-theme="dark"] .hl-comment { color: #3f3f46; font-style: italic; }

/* Error line highlight */
.hl-error-line {
  display: inline-block;
  width: 100%;
  background: rgba(220, 38, 38, 0.1);
  border-left: 3px solid #ef4444;
  margin-left: -3px;
  padding-left: 3px;
  box-sizing: border-box;
}
[data-theme="dark"] .hl-error-line {
  background: rgba(239, 68, 68, 0.15);
  border-left-color: #f87171;
}