/* SheetStudio V5 Ultimate - Non-Critical CSS (Async Loaded) */
/* Animations & Hover Effects */
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.fade-in{animation:fadeIn .6s ease}
.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}

/* Cards Hover Effects */
.card:hover{transform:translateY(-4px);box-shadow:0 12px 32px var(--shadow-md)}
.card__img img{transition:transform .5s}
.card:hover .card__img img{transform:scale(1.05)}

/* Blog Post Styles */
.prose{max-width:720px;margin:0 auto}
.prose h1,.prose h2,.prose h3{margin-top:2rem;margin-bottom:1rem;color:var(--text)}
.prose h2{padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.prose p{margin-bottom:1.5rem;line-height:1.8}
.prose a{color:var(--primary);text-decoration:underline}
.prose strong{font-weight:700}
.prose ul,.prose ol{padding-left:1.5rem;margin-bottom:1.5rem}
.prose li{margin-bottom:.5rem}
.prose blockquote{border-left:4px solid var(--primary);padding:1rem 1.5rem;margin:2rem 0;background:var(--surface);border-radius:0 8px 8px 0}
.prose code{background:var(--surface);padding:.2em .4em;border-radius:4px;font-size:.9em;font-family:monospace}
.prose pre{background:var(--surface);padding:1.5rem;border-radius:8px;overflow-x:auto;margin:2rem 0}
.prose pre code{background:transparent;padding:0}
.prose img{border-radius:12px;margin:2rem auto}
.prose table{width:100%;border-collapse:collapse;margin:2rem 0}
.prose th{background:var(--surface);padding:12px;text-align:left;border-bottom:2px solid var(--border)}
.prose td{padding:12px;border-bottom:1px solid var(--border)}

/* Loader & Error */
.loader{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;gap:16px}
.error{text-align:center;padding:80px 20px;max-width:480px;margin:0 auto}
.error__icon{font-size:64px;margin-bottom:16px}

/* Utility Classes */
.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.empty{text-align:center;padding:80px 20px;color:var(--text-muted)}

/* Mobile Nav Animation */
#mobile-nav{max-height:0;overflow:hidden;transition:max-height .3s}
#mobile-nav.active{max-height:500px}

/* Print Styles */
@media print{nav,.btn,.card__badge{display:none}body{background:#fff;color:#000}}