frontend/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body,#root{height:100%;overflow:hidden}
body{background:#1a1a1a;color:#e0e0e0;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:15px;line-height:1.6}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:#2e2e2e;border-radius:3px}
::-webkit-scrollbar-track{background:transparent}
button{font-family:inherit}
textarea{font-family:inherit}
select{font-family:inherit}

/* ── Markdown output ────────────────────────────── */
.md-body h1{font-size:1.6em;font-weight:700;margin:1em 0 .4em;color:#f0f0f0;border-bottom:1px solid #2a2a2a;padding-bottom:.3em}
.md-body h2{font-size:1.3em;font-weight:600;margin:.9em 0 .35em;color:#e8e8e8}
.md-body h3{font-size:1.1em;font-weight:600;margin:.8em 0 .3em;color:#e0e0e0}
.md-body p{margin:.5em 0;line-height:1.75}
.md-body ul,.md-body ol{margin:.4em 0 .4em 1.4em;padding:0}
.md-body li{margin:.25em 0;line-height:1.7}
.md-body li::marker{color:#666}
.md-body strong{font-weight:600;color:#f0f0f0}
.md-body em{font-style:italic;color:#ccc}
.md-body a{color:#60a5fa;text-decoration:none}
.md-body a:hover{text-decoration:underline}
.md-body blockquote{border-left:3px solid #3a3a3a;margin:.5em 0;padding:.3em .8em;color:#999;font-style:italic}
.md-body hr{border:none;border-top:1px solid #2a2a2a;margin:1em 0}
.md-body table{border-collapse:collapse;width:100%;margin:.6em 0;font-size:.9em}
.md-body th{background:#2a2a2a;padding:8px 12px;text-align:left;font-weight:600;color:#e0e0e0;border:1px solid #333}
.md-body td{padding:7px 12px;border:1px solid #2a2a2a;color:#ccc}
.md-body tr:nth-child(even) td{background:#1e1e1e}
.md-body code:not(.hljs){background:#2a2a2a;color:#e06c75;padding:.1em .4em;border-radius:4px;font-size:.87em;font-family:'Fira Code','Cascadia Code','Consolas',monospace}

/* ── Code blocks ─────────────────────────────────── */
.code-block{margin:.7em 0;border-radius:10px;overflow:hidden;border:1px solid #2e2e2e;background:#1a1a1a}
.code-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:#222;border-bottom:1px solid #2e2e2e}
.code-lang{font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.6px}
.code-actions{display:flex;gap:6px}
.code-btn{padding:4px 10px;border-radius:5px;border:1px solid #333;background:transparent;color:#888;font-size:11px;cursor:pointer;transition:all .15s}
.code-btn:hover{background:#2a2a2a;color:#e0e0e0;border-color:#444}
.code-btn.copied{color:#4ade80;border-color:#4ade8066}
pre{margin:0;overflow-x:auto}
pre code.hljs{padding:14px 16px;font-size:13px;line-height:1.6;background:#1a1a1a;font-family:'Fira Code','Cascadia Code','Consolas',monospace;display:block}

/* highlight.js theme — One Dark */
.hljs{color:#abb2bf}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-keyword,.hljs-formula{color:#c678dd}.hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string{color:#98c379}.hljs-built_in,.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number{color:#d19a66}.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-link{text-decoration:underline}

/* ── Animations ──────────────────────────────────── */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes dotPulse{0%,80%,100%{transform:scale(0);opacity:0}40%{transform:scale(1);opacity:1}}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.fade-in{animation:fadeIn .2s ease}