/* ============================================
   SHARED STYLES — loaded by all themes
   Copy button, 404 page, etc.
   ============================================ */

/* --- Copy-to-clipboard button --- */
.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-family: var(--font-sans, -apple-system, sans-serif);
  color: var(--text-muted, #888);
  background: var(--bg-secondary, rgba(128,128,128,0.15));
  border: 1px solid var(--border, rgba(128,128,128,0.2));
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
  z-index: 1;
  line-height: 1.4;
}

pre:hover .copy-btn {
  opacity: 1;
}

.copy-btn:hover {
  background: var(--accent, #6c5ce7);
  color: #fff;
  border-color: var(--accent, #6c5ce7);
}

.copy-btn.copied {
  background: #22c55e;
  color: #fff;
  border-color: #22c55e;
  opacity: 1;
}

/* --- 404 Error Page --- */
.error-page {
  text-align: center;
  padding: 6rem 1rem 4rem;
}

.error-page h1 {
  font-size: 6rem;
  font-weight: 800;
  color: var(--accent, #6c5ce7);
  line-height: 1;
  margin-bottom: 1rem;
  opacity: 0.8;
}

.error-message {
  font-size: 1.2rem;
  color: var(--text-secondary, #666);
  margin-bottom: 2.5rem;
}

.error-nav {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.error-nav a {
  padding: 0.6rem 1.5rem;
  border: 1px solid var(--border, #ddd);
  border-radius: 6px;
  color: var(--accent, #6c5ce7);
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s;
}

.error-nav a:hover {
  background: var(--accent-glow, rgba(108,92,231,0.1));
  border-color: var(--accent, #6c5ce7);
  text-decoration: none;
}