static/styles.css

:root {
    --flamingo: #f0c6c6;
    --pink: #f5bde6;
    --mauve: #c6a0f6;
    --red: #ed8796;
    --maroon: #ee99a0;
    --peach: #f5a97f;
    --yellow: #eed49f;
    --green: #a6da95;
    --teal: #8bd5ca;
    --sky: #91d7e3;
    --sapphire: #7dc4e4;
    --blue: #8aadf4;
    --lavender: #b7bdf8;
    --text: #cad3f5;
    --subtext1: #b8c0e0;
    --subtext0: #a5adcb;
    --overlay2: #939ab7;
    --overlay1: #8087a2;
    --overlay0: #6e738d;
    --surface2: #5b6078;
    --surface1: #494d64;
    --surface0: #363a4f;
    --base: #24273a;
    --mantle: #1e2030;
    --crust: #181926;
}

body {
    background-color: var(--base);
    color: var(--text);
    font-family: 'Inter', sans-serif;
}

.gradio-container {
    background-color: rgba(36, 39, 58, 0.7) !important;
}

/* ASCII Logo Styling */
.ascii-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    padding: 20px 0;
    background: rgba(54, 58, 79, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ascii-logo {
    font-family: monospace;
    font-size: 2.1em;
    line-height: 1.2;
    white-space: pre;
    text-align: center;
    background: linear-gradient(to right, var(--sapphire), var(--mauve));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.gradio-container .menu-column {
    background: rgba(54, 58, 79, 0.3) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    height: 100vh;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.gradio-container .menu-button,
.gradio-container button.menu-button {
    color: var(--text) !important;
    background: linear-gradient(to right, var(--sapphire), var(--mauve)) !important;
    border: none !important;
    padding: 15px 20px !important;
    width: 80% !important;
    margin-left: 10% !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-bottom: 15px !important;
    border-radius: 25px !important;
    font-size: 1.2em !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.gradio-container .menu-button:hover,
.gradio-container button.menu-button:hover {
    background: linear-gradient(to right, var(--sky), var(--pink)) !important;
    color: var(--base) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
}

.gradio-container .gr-button-primary {
    background: linear-gradient(to right, var(--sapphire), var(--mauve)) !important;
    color: var(--base) !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 24px !important;
    font-size: 1.2em !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.gradio-container .gr-button-secondary {
    background: linear-gradient(to right, var(--lavender), var(--pink)) !important;
    color: var(--base) !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 24px !important;
    font-size: 1.2em !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.gradio-container .gr-button-primary:hover,
.gradio-container .gr-button-secondary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
    background: linear-gradient(to right, var(--sky), var(--flamingo)) !important;
    color: var(--base) !important;
}

.gradio-container .gr-input,
.gradio-container .gr-textarea {
    background: rgba(54, 58, 79, 0.3) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.gradio-container .gr-input:focus,
.gradio-container .gr-textarea:focus {
    border-color: var(--sapphire) !important;
    box-shadow: 0 0 0 2px rgba(125, 196, 228, 0.3) !important;
}

.gradio-container .gr-form {
    background: rgba(54, 58, 79, 0.3) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
}

.gradio-container .gr-box {
    background: rgba(73, 77, 100, 0.3) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
}

.gradio-container .gr-panel {
    background: rgba(54, 58, 79, 0.3) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Scrollbar styling */
.gradio-container ::-webkit-scrollbar {
    width: 10px;
}

.gradio-container ::-webkit-scrollbar-track {
    background: rgba(54, 58, 79, 0.3);
}

.gradio-container ::-webkit-scrollbar-thumb {
    background: rgba(110, 115, 141, 0.5);
    border-radius: 5px;
}

.gradio-container ::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 135, 162, 0.7);
}

/* Media query for larger screens */
@media (min-width: 1200px) {
    .ascii-logo {
        font-size: 2.5em;
    }
}