:root {
  --gold: #E03131;
  --gold-light: #FF6B6B;
  --gold-dark: #C92A2A;
  --dark-bg: #1C1C1C;
  --glass-bg: rgba(28, 28, 28, 0.85);
  --glass-border: rgba(224, 49, 49, 0.2);
}

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

html { scroll-behavior: smooth; }
html.dark { color-scheme: dark; }

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', system-ui, sans-serif; }

.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-1, .line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

.prose-content h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 1rem; }
.prose-content h3 { font-size: 1.25rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose-content p { margin-bottom: 1rem; line-height: 1.75; }
.prose-content ul { list-style: none; padding: 0; margin: 1rem 0; }
.prose-content ol { list-style: none; padding: 0; margin: 1rem 0; counter-reset: item; }
.prose-content li { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; }
.prose-content li::before { color: var(--gold); font-weight: 500; }
.prose-content ul li::before { content: "•"; }
.prose-content ol li::before { content: counter(item) "."; counter-increment: item; min-width: 1.25rem; }
.prose-content pre { background: #111827; color: #f3f4f6; padding: 1rem; border-radius: 0.75rem; overflow-x: auto; margin: 1.5rem 0; font-size: 0.875rem; line-height: 1.6; }
.dark .prose-content pre { background: #030712; }
.prose-content code { background: #f3f4f6; color: #db2777; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; font-family: ui-monospace, monospace; }
.dark .prose-content code { background: #1f2937; color: #f472b6; }
.prose-content pre code { background: none; color: inherit; padding: 0; border-radius: 0; }
.prose-content blockquote { border-left: 4px solid var(--gold); padding: 1rem 1.25rem; margin: 1.5rem 0; background: #f9fafb; border-radius: 0 0.5rem 0.5rem 0; font-style: italic; color: #6b7280; }
.dark .prose-content blockquote { background: #11182733; color: #d1d5db; }
.prose-content strong { font-weight: 600; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }


.animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.3s ease-out forwards; }
.animate-shake { animation: shake 0.5s ease-in-out; }


#backToTop { transition: opacity 0.3s, visibility 0.3s, transform 0.3s; }
#backToTop.show { opacity: 1; visibility: visible; transform: translateY(0); }

#readingProgress { transition: transform 0.1s linear; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus { -webkit-text-fill-color: inherit; -webkit-box-shadow: 0 0 0 30px #f9fafb inset; }
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px #1f2937 inset; }

.glass-nav { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); }
.glass-card { background: rgba(255,255,255,0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(224,49,49,0.12); }
.dark .glass-card { background: rgba(255,255,255,0.03); }

.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #fff; font-weight: 700; border: none; }
.btn-gold:hover { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #fff; box-shadow: 0 4px 20px rgba(224,49,49,0.35); }
.btn-gold-outline { border: 2px solid var(--gold); color: var(--gold); background: transparent; font-weight: 600; }
.btn-gold-outline:hover { background: var(--gold); color: #fff; }

.zyvorniq-gradient { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 50%, #871818 100%); }
.zyvorniq-text-gradient { background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.speech-bubble { position: relative; }
.speech-bubble::after { content: ''; position: absolute; bottom: -8px; left: 20px; border-width: 8px 8px 0; border-style: solid; border-color: var(--gold) transparent transparent; }

.voice-quote { position: relative; padding-left: 1rem; border-left: 3px solid var(--gold); font-style: italic; font-weight: 500; }
.dark .voice-quote { border-left-color: var(--gold-light); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}