static/custom.css

/* Custom CSS for Japanese Clean Style with Rounded Font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Rounded:wght@400;700&family=Quicksand:wght@400;700&family=Nunito:wght@400;700&family=M+PLUS+Rounded+1c:wght@400;700&display=swap');

body, .gr-block, .gr-root, .gradio-container {
    font-family: 'Noto Sans Rounded', 'Quicksand', 'Nunito', 'M PLUS Rounded 1c', Arial, sans-serif !important;
    background: #fafbfc !important;
    color: #222;
}

.gr-button, button, input[type="button"], input[type="submit"] {
    border-radius: 18px !important;
    background: #f5f7fa !important;
    color: #222 !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
    padding: 0.7em 1.5em !important;
    font-weight: 600;
    transition: background 0.2s;
}

.gr-button:hover, button:hover {
    background: #e3e7ef !important;
}

input, textarea, .gr-textbox, .gr-number, .gr-dataframe {
    border-radius: 14px !important;
    border: 1px solid #e0e0e0 !important;
    background: #fff !important;
    padding: 0.6em 1em !important;
    font-size: 1.05em;
    box-shadow: none !important;
}

.gr-row, .gr-column {
    margin-bottom: 1.5em !important;
}

.gr-markdown, .gr-dataframe, .gr-textbox, .gr-number {
    background: #fff !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

/* Add more whitespace between elements */
.gr-block > * {
    margin-bottom: 1.2em !important;
}

/* Remove heavy borders and shadows */
.gradio-container, .gr-block, .gr-root {
    box-shadow: none !important;
    border: none !important;
} 

/* Card-style section backgrounds */
.gr-card, .section-card {
    background: #fffbe9 !important;
    border-radius: 22px !important;
    box-shadow: 0 2px 12px 0 rgba(240, 180, 80, 0.07);
    padding: 2em 2em 1.5em 2em !important;
    margin-bottom: 2em !important;
    border: 1.5px solid #f7e6b5 !important;
}

/* Table header beautification */
.gr-dataframe thead tr th {
    background: #f7e6b5 !important;
    color: #222 !important;
    border-radius: 14px 14px 0 0 !important;
    font-weight: 700;
    border-bottom: 2px solid #f5f7fa !important;
}

/* Table row beautification */
.gr-dataframe tbody tr {
    background: #fff !important;
    border-bottom: 1px solid #f5f7fa !important;
}

/* Empty state style */
.empty-state {
    text-align: center;
    color: #b0b0b0;
    font-size: 1.2em;
    margin: 1.5em 0;
}

/* Accent pastel colors for buttons */
.gr-button, button {
    background: linear-gradient(90deg, #ffe6ec 0%, #e6f7ff 100%) !important;
    color: #222 !important;
    border: 1.5px solid #f7e6b5 !important;
}

.gr-button:hover, button:hover {
    background: linear-gradient(90deg, #fffbe9 0%, #ffe6ec 100%) !important;
}

/* Emoji size for section headers */
.section-emoji {
    font-size: 2.2em;
    margin-bottom: 0.2em;
    display: block;
}