body {
    font-family: 'Inter', sans-serif;
    background-color: #111015;
    color: #E5E7EB;
}

/* --- Responsive baseline (site-wide) --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

img,
video,
canvas {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

/* Prevent long content from forcing horizontal scroll */
pre,
code {
    overflow-wrap: anywhere;
    word-break: break-word;
}

pre {
    white-space: pre-wrap;
}

/* Ensure flex/grid children can shrink on mobile */
.page,
.prompt-card {
    min-width: 0;
}
.main-bg {
    background-color: #111015;
    background-image: radial-gradient(at 0% 0%, hsla(256, 68%, 20%, 0.4) 0px, transparent 50%),
                      radial-gradient(at 98% 99%, hsla(256, 68%, 25%, 0.3) 0px, transparent 50%);
}
.glass-effect {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.card-bg {
    background-color: #1F1D2B;
}
.btn-primary {
    background-color: #8B5CF6;
    transition: background-color 0.3s;
}
.btn-primary:hover {
    background-color: #7C3AED;
}
.btn-secondary {
    background-color: #374151;
     transition: background-color 0.3s;
}
.btn-secondary:hover {
    background-color: #4B5563;
}
.nav-link.active {
    background-color: #8B5CF6;
    color: white;
}

/* Make embedded blog content and prose blocks behave nicely on small screens */
.prose img,
.prose iframe,
.prose video {
    max-width: 100%;
}

/* Tailwind base reset removes list markers; restore them inside prose content */
.prose ul {
    list-style: disc !important;
    padding-left: 1.5rem !important;
    margin: 0.5rem 0 0.5rem 1rem !important;
}

.prose ol {
    list-style: decimal !important;
    padding-left: 1.5rem !important;
    margin: 0.5rem 0 0.5rem 1rem !important;
}

.prose li {
    display: list-item !important;
    margin: 0.15rem 0 !important;
}

.prose pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    /* Keep tap targets comfortable and reduce excessive spacing */
    .toast-container { left: 0.75rem; right: 0.75rem; }
}