@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root{ --color-primary:#6366f1; --color-secondary:#8b5cf6; }
body{ font-family:'Inter',sans-serif; }
#output-container{ transition:all .3s ease; }
#output-container.loading{ background-color:#f8fafc; color:#64748b; }
.settings-panel{ transition:transform .3s ease; }
.settings-panel.closed{ transform:translateX(100%); }
.settings-panel.open{ transform:translateX(0); }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.toast{ position:fixed; bottom:1rem; left:50%; transform:translateX(-50%) translateY(0); background:#1f2937; color:#fff; padding:.75rem 1rem; border-radius:.5rem; box-shadow:0 8px 20px rgba(0,0,0,.3); z-index:100; opacity:0; transition:opacity .3s,transform .3s; pointer-events:none; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-1rem); }
.dark{ background:#111827; color:#f9fafb; }
.dark body{ background:#111827; color:#f9fafb; }
.dark .bg-gray-50{ background:#1f2937; }
.dark .bg-gray-100{ background:#374151; }
.dark .bg-gray-200{ background:#4b5563; }
.dark .bg-white{ background:#1f2937; }
.dark .text-gray-700{ color:#d1d5db; }
.dark .text-gray-800{ color:#f3f4f6; }
.dark .border-gray-200{ border-color:#374151; }
.dark .border-gray-300{ border-color:#4b5563; }
@media (max-width:768px){ aside{ width:100%; } main{ padding:.75rem; } }