:root {
  --bg:           #0b0d12;
  --surface:      #12151c;
  --surface-2:    #1a1e27;
  --surface-3:    #232833;
  --border:       #242935;
  --text:         #e7eaf0;
  --text-muted:   #9aa3b2;
  --text-dim:     #6b7383;
  --accent:       #ff3d6e;
  --accent-hover: #ff5a85;
  --accent-soft:  rgba(255, 61, 110, 0.12);
  --accent-glow:  rgba(255, 61, 110, 0.35);
  --success:      #3ddc84;
  --warning:      #ffb547;
  --danger:       #ff5c5c;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); }

*, *::before, *::after { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; line-height: 1.2; }

article h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; margin-top: 2.5rem; margin-bottom: 1rem; font-size: 1.5rem; }
article h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.75rem; font-size: 1.25rem; }
article p { margin-bottom: 1rem; line-height: 1.7; }
article ul, article ol { margin-bottom: 1rem; padding-left: 1.5rem; }
article li { margin-bottom: 0.5rem; line-height: 1.6; }
article a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
article a:hover { color: var(--accent-hover); }

.faq-item[data-open="true"] .faq-content { display: block; }
.faq-item[data-open="false"] .faq-content { display: none; }
.faq-item[data-open="true"] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.2s; display: inline-block; }

blockquote { border-left: 4px solid var(--accent); padding-left: 1.5rem; margin: 1.5rem 0; font-style: italic; color: var(--text-muted); }

table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
th { background: var(--surface-2); padding: 0.75rem 1rem; text-align: left; font-weight: 600; border-bottom: 2px solid var(--border); }
td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
tr:hover { background: var(--surface); }

code { background: var(--surface-2); padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.875em; }
pre { background: var(--surface-2); padding: 1rem; border-radius: 8px; overflow-x: auto; margin-bottom: 1rem; }
pre code { background: none; padding: 0; }

::selection { background: var(--accent-soft); color: var(--text); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border); }

img { max-width: 100%; height: auto; }

.breadcrumbs { font-size: 0.875rem; color: var(--text-dim); margin-bottom: 1.5rem; }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { margin: 0 0.25rem; }

.rating-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--accent-soft); border: 1px solid var(--accent/30); padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; }

.star-rating { display: inline-flex; gap: 2px; color: var(--warning); }

.card-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; text-align: center; }
.stat-card .value { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; color: var(--accent); }
.stat-card .label { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.25rem; }

.toc-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem; }
.toc-box h2 { margin-top: 0; font-size: 1.125rem; }
.toc-box ol { margin-bottom: 0; padding-left: 1.25rem; }
.toc-box li { margin-bottom: 0.5rem; }
.toc-box a { color: var(--text-muted); }
.toc-box a:hover { color: var(--accent); }

.pros-cons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 640px) { .pros-cons-grid { grid-template-columns: 1fr; } }

.pros-list li::marker { color: var(--success); content: "✓ "; }
.cons-list li::marker { color: var(--danger); content: "✗ "; }

@media (max-width: 640px) {
  .hide-mobile { display: none; }
}
@media (min-width: 1024px) {
  .hide-desktop { display: none; }
}