@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: "Inter", sans-serif;
}




:root {

    --color-primary: #5C56E1;

    --color-primary-dark: #5b21b6;

    --color-accent: #8B5CF6;

    --color-card: #FFFFFF;

    --color-input: #F1F1FF;

    --color-text: #09090E;

    --color-placeholder: #5C5A87;

    --color-border: #D4D4ED;

    --color-gradient:
        linear-gradient(
            135deg,
            #5C56E1,
            #8B5CF6
        );
}


/* Dark Theme */

body.dark-theme {

    --color-card: #1E293B;

    --color-input: #141B2D;

    --color-text: #F3F4F6;

    --color-placeholder: #A3B6DC;

    --color-border: #334155;

    background: var(--color-card);

    background-image:

        radial-gradient(
            circle at 15% 50%,
            rgba(99, 102, 241, 0.15) 0%,
            transparent 35%
        ),

        radial-gradient(
            circle at 85% 30%,
            rgba(139, 92, 246, 0.15) 0%,
            transparent 35%
        ),

        radial-gradient(
            circle at 50% 80%,
            rgba(99, 102, 241, 0.1) 0%,
            transparent 40%
        );
}




body {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 100vh;

    padding: 15px;

    color: var(--color-text);

    background:
        linear-gradient(
            #E9E9FF,
            #C8C7FF
        );
}




.container {

    width: 900px;

    padding: 32px;

    position: relative;

    border-radius: 23px;

    overflow: hidden;

    background: var(--color-card);

    box-shadow:
        0 10px 20px 0
        rgba(0, 0, 0, 0.1);
}


body.dark-theme .container {

    border: 1px solid var(--color-border);
}


/* Top Gradient */

.container::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 5px;

    background:
        var(--color-gradient);
}




.header {

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.logo-wrapper {

    display: flex;

    gap: 18px;

    align-items: center;
}


.logo {

    height: 55px;

    width: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 15px;

    color: white;

    font-size: 1.35rem;

    background:
        var(--color-gradient);
}


.logo-wrapper h1 {

    font-size: 1.9rem;

    font-weight: 700;
}




.theme-toggle {

    height: 43px;

    width: 43px;

    border-radius: 50%;

    border: 1px solid var(--color-border);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-size: 1.05rem;

    color: var(--color-placeholder);

    background:
        var(--color-input);

    transition:
        all 0.3s ease;
}


.theme-toggle:hover {

    color: var(--color-primary);

    transform:
        translateY(-2px);

    box-shadow:
        0 4px 6px -1px
        rgba(0, 0, 0, 0.1);
}




.main-content {

    margin:
        35px 0 5px;
}




.prompt-container {

    width: 100%;

    position: relative;

    margin-bottom: 20px;
}


.prompt-input {

    width: 100%;

    min-height: 120px;

    resize: vertical;

    padding:
        16px 60px 16px 20px;

    line-height: 1.6;

    font-size: 1.05rem;

    color: var(--color-text);

    background:
        var(--color-input);

    border:
        1px solid var(--color-border);

    border-radius: 15px;

    transition:
        all 0.3s ease;
}


.prompt-input::placeholder {

    color:
        var(--color-placeholder);
}


.prompt-input:focus {

    outline: none;

    border-color:
        var(--color-accent);

    box-shadow:
        0 0 0 4px
        rgba(139, 92, 246, 0.15);
}




.prompt-btn {

    position: absolute;

    right: 15px;

    bottom: 15px;

    height: 35px;

    width: 35px;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    color: white;

    font-size: 0.75rem;

    opacity: 0.8;

    background:
        var(--color-gradient);

    transition:
        all 0.3s ease;
}


.prompt-btn:hover {

    opacity: 1;

    transform:
        translateY(-2px);

    box-shadow:
        0 4px 6px -1px
        rgba(0, 0, 0, 0.1);
}




.prompt-action {

    display: grid;

    grid-template-columns:
        1fr 1fr 1fr;

    gap: 14px;
}




.select-wrapper {

    position: relative;
}


/* Dropdown Arrow */

.select-wrapper::after {

    content: "\f078";

    font-family:
        "Font Awesome 6 Free";

    font-weight: 900;

    position: absolute;

    right: 20px;

    top: 50%;

    transform:
        translateY(-50%);

    font-size: 0.9rem;

    color:
        var(--color-placeholder);

    pointer-events: none;

    background:
        var(--color-input);
}




.custom-select {

    width: 100%;

    height: 100%;

    padding:
        12px 45px 12px 20px;

    appearance: none;

    outline: none;

    cursor: pointer;

    font-size: 1rem;

    border-radius: 10px;

    color:
        var(--color-text);

    background:
        var(--color-input);

    border:
        1px solid var(--color-border);

    transition:
        all 0.3s ease;
}


.custom-select:hover,
.custom-select:focus {

    border-color:
        var(--color-accent);

    box-shadow:
        0 0 0 3px
        rgba(139, 92, 246, 0.1);
}




.generate-btn {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding:
        12px 25px;

    border: none;

    border-radius: 10px;

    cursor: pointer;

    font-size: 1rem;

    font-weight: 500;

    color: white;

    background:
        var(--color-gradient);

    transition:
        all 0.3s ease;
}


.generate-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 4px 10px
        rgba(109, 40, 217, 0.3);
}


.generate-btn:disabled {

    cursor: not-allowed;

    opacity: 0.7;

    transform: none;

    box-shadow: none;
}




.gallery-grid {

    display: grid;

    gap: 15px;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(180px, 1fr)
        );
}


.gallery-grid:has(.img-card) {

    margin-top: 30px;
}




.img-card {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    overflow: hidden;

    aspect-ratio: 1;

    border-radius: 16px;

    background:
        var(--color-input);

    border:
        1px solid var(--color-border);

    transition:
        all 0.3s ease;
}


.img-card:not(.loading, .error):hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 10px 15px -3px
        rgba(0, 0, 0, 0.1);
}




.result-img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}




.img-card.loading .result-img,
.img-card.error .result-img {

    display: none;
}




.status-container {

    display: none;

    flex-direction: column;

    align-items: center;

    gap: 13px;

    padding: 15px;
}


.img-card.loading .status-container,
.img-card.error .status-container {

    display: flex;
}


.status-text {

    font-size: 0.85rem;

    text-align: center;

    color:
        var(--color-placeholder);
}



.spinner {

    width: 35px;

    height: 35px;

    border-radius: 50%;

    border:
        3px solid
        var(--color-border);

    border-top-color:
        var(--color-primary);

    animation:
        spin 1s linear infinite;
}


@keyframes spin {

    to {

        transform:
            rotate(360deg);

    }
}


/* Hide spinner when error */

.img-card.error .spinner {

    display: none;
}


/* Error icon */

.img-card.error .status-container i {

    font-size: 1.7rem;

    color: #ef4444;
}




.img-overlay {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 20px;

    display: flex;

    justify-content: flex-end;

    opacity: 0;

    pointer-events: none;

    background:
        linear-gradient(
            transparent,
            rgba(0, 0, 0, 0.8)
        );

    transition:
        all 0.3s ease;
}


.img-card:not(.loading):not(.error):hover
.img-overlay {

    opacity: 1;

    pointer-events: auto;
}




.img-download-btn {

    height: 45px;

    width: 45px;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    color: white;

    background:
        rgba(255, 255, 255, 0.25);

    backdrop-filter:
        blur(5px);

    transition:
        all 0.3s ease;
}


.img-download-btn:hover {

    transform:
        scale(1.05);

    background:
        rgba(255, 255, 255, 0.4);
}


/* responsive */
@media (max-width: 700px) {

    .container {

        width: 100%;

        padding: 20px;
    }


    .logo-wrapper h1 {

        font-size: 1.4rem;
    }


    .prompt-action {

        grid-template-columns:
            1fr;
    }


    .generate-btn {

        min-height: 48px;
    }

}


@media (max-width: 450px) {

    .logo-wrapper {

        gap: 10px;
    }


    .logo {

        width: 48px;

        height: 48px;
    }


    .logo-wrapper h1 {

        font-size: 1.15rem;
    }


    .theme-toggle {

        width: 38px;

        height: 38px;
    }

}