/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.badge--pareto { background: var(--pareto-accent-dim); color: var(--pareto-accent); }
.badge--rhino { background: var(--rhino-accent-dim); color: var(--rhino-accent); }
.badge--gh { background: var(--gh-accent-dim); color: var(--gh-accent); }
.badge--beginner { background: #1a3d25; color: #3fb950; }
.badge--intermediate { background: #3d3314; color: #d29922; }
.badge--advanced { background: #3d1a1a; color: #f85149; }

/* Cards */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--transition-normal);
}
.card:hover {
  border-color: var(--border-color-light);
  box-shadow: var(--shadow-md);
}
.card--clickable { cursor: pointer; }
.card--clickable:hover { transform: translateY(-2px); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.btn--primary {
  background: var(--rhino-accent);
  color: var(--text-inverse);
}
.btn--primary:hover { filter: brightness(1.15); }
.btn--success { background: var(--gh-accent); color: var(--text-inverse); }
.btn--success:hover { filter: brightness(1.15); }
.btn--ghost {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}
.btn--ghost:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-color-light);
}
.btn--pareto {
  background: var(--pareto-accent);
  color: var(--text-inverse);
}

/* Code blocks */
.code-block {
  position: relative;
  background: var(--bg-base);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin: var(--space-md) 0;
  overflow: hidden;
}
.code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.code-block__copy {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  cursor: pointer;
}
.code-block__copy:hover { background: var(--bg-overlay); color: var(--text-primary); }
.code-block__copy.copied { color: var(--success); }

.code-block pre {
  padding: var(--space-md);
  overflow-x: auto;
  font-size: var(--font-size-sm);
  line-height: 1.7;
  tab-size: 4;
}
/* Syntax colors */
.code-block .kw { color: #ff7b72; }
.code-block .str { color: #a5d6ff; }
.code-block .num { color: #79c0ff; }
.code-block .cmt { color: #8b949e; font-style: italic; }
.code-block .fn { color: #d2a8ff; }
.code-block .cls { color: #ffa657; }
.code-block .op { color: #ff7b72; }
.code-block .builtin { color: #ffa657; }

/* Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin: var(--space-md) 0;
}
.data-table th {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-elevated);
  border-bottom: 2px solid var(--border-color);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.data-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-color);
}
.data-table tr:hover td { background: var(--bg-hover); }

/* Collapsible */
.collapsible { border: 1px solid var(--border-color); border-radius: var(--radius-md); margin: var(--space-md) 0; overflow: hidden; }
.collapsible__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-elevated);
  cursor: pointer;
  font-weight: 600;
  user-select: none;
}
.collapsible__header:hover { background: var(--bg-overlay); }
.collapsible__arrow { transition: transform var(--transition-fast); font-size: 12px; }
.collapsible.open .collapsible__arrow { transform: rotate(90deg); }
.collapsible__body { display: none; padding: var(--space-md); }
.collapsible.open .collapsible__body { display: block; }

/* Toast */
.toast-container {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.toast {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-lg);
  animation: toastIn 300ms ease;
  max-width: 320px;
}
.toast--success { border-left: 3px solid var(--success); }
.toast--error { border-left: 3px solid var(--error); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Section headers */
.section-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.section-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

/* Steps */
.steps { counter-reset: step; margin: var(--space-md) 0; }
.step {
  counter-increment: step;
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-color);
}
.step:last-child { border-bottom: none; }
.step__number {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--border-color-light);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--rhino-accent);
}
.step__content { flex: 1; }
.step__instruction { font-weight: 500; margin-bottom: var(--space-xs); }
.step__note { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: var(--space-xs); }

/* Warning box */
.warning-box {
  background: rgba(210, 153, 34, 0.08);
  border: 1px solid rgba(210, 153, 34, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-md) 0;
}
.warning-box__title { color: var(--warning); font-weight: 600; margin-bottom: var(--space-xs); }

/* Guide page */
.guide-page__header { margin-bottom: var(--space-xl); }
.guide-page__title { font-size: var(--font-size-2xl); font-weight: 800; }
.guide-page__subtitle { color: var(--text-secondary); margin-top: var(--space-xs); }

.guide-search {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-surface);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
  transition: border-color var(--transition-fast);
}
.guide-search:focus-within { border-color: var(--rhino-accent); }
.guide-search__icon { font-size: 20px; }
.guide-search__input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text-primary); font-size: var(--font-size-lg);
}
.guide-search__input::placeholder { color: var(--text-muted); }
.guide-search__clear {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-overlay); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px;
}
.guide-search__clear:hover { background: var(--border-color-light); color: var(--text-primary); }
.guide-results-info { color: var(--text-secondary); font-size: var(--font-size-sm); margin-bottom: var(--space-lg); }
.guide-empty { text-align: center; padding: var(--space-3xl); color: var(--text-secondary); }

.guide-category { margin-bottom: var(--space-2xl); }
.guide-category__title {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: var(--font-size-xl); font-weight: 700;
  margin-bottom: var(--space-lg); padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--border-color);
}
.guide-category__icon { font-size: 24px; }
.guide-category__count {
  margin-left: auto; font-size: var(--font-size-sm); color: var(--text-muted);
  background: var(--bg-overlay); padding: 2px 8px; border-radius: var(--radius-full);
}

/* Command card */
.command-card {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: var(--space-lg);
  margin-bottom: var(--space-md); transition: border-color var(--transition-fast);
}
.command-card:hover { border-color: var(--border-color-light); }
.command-card__top {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-sm); flex-wrap: wrap;
}
.command-card__name {
  font-size: var(--font-size-lg); font-weight: 800;
  font-family: var(--font-mono); color: var(--rhino-accent);
}
.command-card__aliases { display: flex; gap: 4px; }
.command-card__alias {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  background: var(--bg-overlay); padding: 1px 6px; border-radius: 4px;
  color: var(--text-muted);
}
.command-card__desc { margin-bottom: var(--space-xs); }
.command-card__usage { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--space-md); }

.command-card__tips { margin-bottom: var(--space-md); }
.command-card__tip {
  font-size: var(--font-size-sm); color: var(--text-secondary);
  padding: 2px 0;
}
.command-card__tip::first-letter { color: var(--pareto-accent); }

.command-card__options {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  margin-bottom: var(--space-md); font-size: var(--font-size-sm);
}
.command-card__options-label { color: var(--text-muted); }
.command-card__option {
  background: var(--bg-elevated); padding: 1px 6px; border-radius: 4px;
  font-size: var(--font-size-xs); color: var(--text-secondary);
}

/* Problem cards */
.command-card__problems { margin-top: var(--space-md); }
.command-card__problems-title {
  font-weight: 600; color: var(--warning); margin-bottom: var(--space-sm);
  font-size: var(--font-size-sm);
}

.problem-card {
  border: 1px solid rgba(210,153,34,0.2); border-radius: var(--radius-md);
  margin-bottom: var(--space-sm); overflow: hidden;
  background: rgba(210,153,34,0.03);
}
.problem-card__header {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); cursor: pointer;
  transition: background var(--transition-fast);
}
.problem-card__header:hover { background: rgba(210,153,34,0.08); }
.problem-card__arrow { font-size: 10px; transition: transform var(--transition-fast); color: var(--text-muted); }
.problem-card.open .problem-card__arrow { transform: rotate(90deg); }
.problem-card__symptom { font-weight: 600; font-size: var(--font-size-sm); flex: 1; }
.problem-card__quickfix {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  background: rgba(63,185,80,0.15); color: var(--gh-accent);
  padding: 2px 8px; border-radius: 4px; white-space: nowrap;
}

.problem-card__body { display: none; padding: var(--space-md); border-top: 1px solid rgba(210,153,34,0.15); }
.problem-card.open .problem-card__body { display: block; animation: fadeIn 200ms ease; }
.problem-card__cause { font-size: var(--font-size-sm); margin-bottom: var(--space-sm); color: var(--text-secondary); }
.problem-card__solutions { font-size: var(--font-size-sm); }
.problem-card__solutions ol { padding-left: var(--space-lg); }
.problem-card__solutions li { margin-bottom: var(--space-xs); color: var(--text-secondary); }
.problem-card__quick { margin-top: var(--space-sm); }

.command-card__related {
  margin-top: var(--space-md); padding-top: var(--space-sm);
  border-top: 1px solid var(--border-color);
  font-size: var(--font-size-sm); color: var(--text-muted);
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
}
.command-card__related-link {
  color: var(--rhino-accent); cursor: pointer; font-family: var(--font-mono);
  font-size: var(--font-size-xs); padding: 1px 6px;
  background: var(--rhino-accent-dim); border-radius: 4px;
}
.command-card__related-link:hover { background: rgba(88,166,255,0.2); text-decoration: none; }

mark { background: rgba(240,136,62,0.3); color: var(--text-primary); border-radius: 2px; padding: 0 2px; }