/* --- Bold Purple Cute Aesthetic Theme --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0');

/* --- Light Theme Variables (Your Original Block - UNCHANGED) --- */
:root {
    /* Bold Purple Palette */
    --clr-primary: rgb(106, 68, 173);
    /* Vibrant Wisteria Purple */
    --clr-primary-dark: rgb(81, 44, 141);
    /* Darker Purple for hover/accents */
    --clr-primary-light: #e3daef;
    /* Light Lavender for backgrounds/focus */
    --clr-primary-text: #FFFFFF;
    /* White text on purple */

    /* Complementary & Neutrals */
    --clr-secondary: #F1C40F;
    /* Bold Yellow/Gold accent */
    --clr-secondary-dark: #C8A30C;
    --clr-secondary-text: #655106;

    --clr-background: #fcf9ff;
    /* Very pale lavender background */
    --clr-surface: #FFFFFF;
    /* White cards */
    --clr-on-surface: #32234a;
    /* Dark Purple-Gray text */
    --clr-on-surface-variant: #726a84;
    /* Lighter Purple-Gray text */
    --clr-outline: #c4bedb;
    /* Slightly stronger purple outline */
    --clr-error: #E74C3C;
    /* Standard Bold Red */
    --clr-error-container: #FADBD8;
    --clr-on-error-container: #A93226;

    /* Bolder Shadows with Purple Tint */
    --clr-shadow-base-rgb: 76, 41, 96;
    /* Store RGB for easier alpha change */
    --clr-shadow: rgba(var(--clr-shadow-base-rgb), 0.18);
    /* Darker purple shadow base */

    /* Typography (UNCHANGED) */
    --font-family-base: 'Poppins', sans-serif;
    --fs-base: 16px;
    --fs-small: 14px;
    --fs-large: 18px;
    --fs-h1: 34px;
    --fs-h2: 22px;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Shapes & Elevation (UNCHANGED) */
    --radius-small: 10px;
    --radius-medium: 20px;
    --radius-large: 30px;
    --radius-full: 999px;

    /* Stronger Shadows (UNCHANGED - will reference --clr-shadow) */
    --shadow-1: 0px 6px 18px var(--clr-shadow);
    --shadow-2: 0px 10px 25px var(--clr-shadow);
    --shadow-inset: inset 0px 2px 4px rgba(0, 0, 0, 0.06);

    /* Transitions (UNCHANGED) */
    --transition-fast: 0.15s ease-in-out;
    --transition-medium: 0.25s ease-in-out;
    --transition-colors: background-color var(--transition-medium), color var(--transition-medium), border-color var(--transition-medium);
}


/* --- Dark Mode Variable Overrides --- */
html[data-theme="dark"] {
    --clr-primary: #8969bd;
    /* Slightly brighter purple */
    --clr-primary-dark: #a389d3;
    /* Lighter purple for "darker" interaction */
    --clr-primary-light: #3c2e5a;
    /* Dark purple bg/focus */
    /* --clr-primary-text: #FFFFFF; */
    /* Usually stays white */

    --clr-secondary: #F3D053;
    /* Slightly brighter yellow */
    --clr-secondary-dark: #F1C40F;
    --clr-secondary-text: #4E3E04;

    --clr-background: #251d35;
    /* Dark purple-gray background */
    --clr-surface: #362a4a;
    /* Slightly lighter card surface */
    --clr-on-surface: #ece8f9;
    /* Light lavender text */
    --clr-on-surface-variant: #b8b3c9;
    /* Dimmer light text */
    --clr-outline: #53486b;
    /* Lighter outline */

    --clr-error: #E57373;
    /* Slightly lighter red */
    --clr-error-container: #5D2A2A;
    /* Dark red container */
    --clr-on-error-container: #F4C4C4;
    /* Light text on dark red */

    /* Reduce shadow opacity for dark mode */
    --clr-shadow: rgba(var(--clr-shadow-base-rgb), 0.1);
    /* Modify inset shadow for dark background */
    --shadow-inset: inset 0px 2px 4px rgba(0, 0, 0, 0.15);
}


/* --- Base Styles (Add Transitions) --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* (Keep existing font, size, etc.) */
    font-family: var(--font-family-base);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    background-color: var(--clr-background);
    /* Use variable */
    color: var(--clr-on-surface);
    /* Use variable */
    line-height: 1.7;
    padding: 50px 30px;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* ADD transition for background color */
    transition: background-color var(--transition-medium), color var(--transition-medium);
}

.app-container {
    /* (UNCHANGED) */
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

/* --- Header (Adjust layout for button) --- */
.app-header {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Keep centered */
    gap: 8px;
    /* Re-adjust gap */
    padding: 10px 0;
    position: relative;
}

.app-logo {
    width: 55px;
}

.app-header h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-extrabold);
    color: var(--clr-primary);
    letter-spacing: -1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
    text-align: center;
    margin-right: auto;
    /* Push button to the right */
    transition: color var(--transition-medium);
}

/* --- Theme Toggle Button Styles --- */
.theme-toggle-button {
    background-color: var(--clr-primary-light);
    color: var(--clr-primary-dark);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: var(--shadow-inset);
    transition: background-color var(--transition-medium), color var(--transition-medium), transform var(--transition-fast), box-shadow var(--transition-medium);
    flex-shrink: 0;
    margin-left: 10px;
    /* Space from title */
}

.theme-toggle-button:hover {
    background-color: var(--clr-outline);
    transform: scale(1.1);
}

.theme-toggle-button .icon-theme {
    font-size: 24px;
    font-variation-settings: 'FILL' 1;
}

/* --- Content Area (UNCHANGED) --- */
.content-area {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* --- Card Styling (Add Transitions) --- */
.card {
    background-color: var(--clr-surface);
    /* Use variable */
    color: var(--clr-on-surface);
    /* Use variable */
    border-radius: var(--radius-large);
    padding: 30px 35px;
    box-shadow: var(--shadow-1);
    /* Use variable */
    border: 1.5px solid var(--clr-outline);
    /* Use variable */
    /* ADD color transitions */
    transition: box-shadow var(--transition-medium), transform var(--transition-medium), border-color var(--transition-medium), background-color var(--transition-medium), color var(--transition-medium);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.card:hover {
    /* (UNCHANGED - colors will update via vars) */
    box-shadow: var(--shadow-2);
    transform: translateY(-4px);
    border-color: var(--clr-primary);
}

.card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px; /* Add gap between title and button */
}

.card .card-header h2 {
    margin-bottom: 0;
}

.card h2 {
    /* (Add transition) */
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    color: var(--clr-primary-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
    transition: color var(--transition-medium);
}

.card h2 .material-symbols-outlined {
    /* (Add transition) */
    font-size: 1.3em;
    color: var(--clr-primary);
    flex-shrink: 0;
    transition: color var(--transition-medium);
}


/* --- Buttons (Add Transitions) --- */
.button {
    /* (Add color transitions) */
    font-family: var(--font-family-base);
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
    padding: 14px 32px;
    border-radius: var(--radius-full);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: background var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast),
        box-shadow var(--transition-medium), border-color var(--transition-medium),
        transform var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 55px;
    text-decoration: none;
    box-shadow: var(--shadow-1), var(--shadow-inset);
    letter-spacing: 0.5px;
}

.button .material-symbols-outlined {
    /* (UNCHANGED) */
    font-size: 1.4em;
}

.button:hover {
    /* (UNCHANGED - shadow uses variable) */
    box-shadow: var(--shadow-2), var(--shadow-inset);
    transform: translateY(-3px);
}

.button:active {
    /* (UNCHANGED - shadow uses variable) */
    box-shadow: var(--shadow-inset);
    transform: translateY(0px);
}

.button:focus-visible {
    /* (UNCHANGED - color uses variable) */
    outline: 3px solid var(--clr-primary-light);
    outline-offset: 3px;
}

.button.primary-button {
    /* (UNCHANGED - colors use variables) */
    background: linear-gradient(180deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
    color: var(--clr-primary-text);
    border-color: var(--clr-primary-dark);
}

.button.primary-button:hover {
    /* (UNCHANGED - colors use variables) */
    background: linear-gradient(180deg, color-mix(in srgb, var(--clr-primary) 90%, white) 0%, var(--clr-primary-dark) 100%);
    border-color: var(--clr-primary-dark);
    transform: translateY(-4px) scale(1.02);
}

.button.primary-button:active {
    /* (UNCHANGED - color uses variable) */
    background: var(--clr-primary-dark);
    transform: translateY(0px) scale(1);
}

.button.primary-button:disabled,
.button.secondary-button:disabled {
    /* (Add opacity, transitions) */
    background-color: var(--clr-outline);
    color: var(--clr-on-surface-variant);
    cursor: not-allowed;
    box-shadow: var(--shadow-inset);
    transform: none;
    border-color: var(--clr-outline);
    opacity: 0.7;
    transition: var(--transition-colors), opacity var(--transition-medium), box-shadow var(--transition-medium);
}

.button.icon-button {
    background-color: var(--clr-primary-light);
    color: var(--clr-primary-dark);
    width: 40px;
    height: 40px;
    padding: 0;
    min-height: unset;
    box-shadow: var(--shadow-inset);
}

.button.icon-button:hover {
    background-color: var(--clr-outline);
    transform: scale(1.1);
}

.button.icon-button .material-symbols-outlined {
    font-size: 22px;
}


/* --- Upload Specific (Add Transitions) --- */
.upload-card {
    align-items: center;
    background-color: color-mix(in srgb, var(--clr-surface), var(--clr-primary) 3%);
    border-width: 2px;
    border-style: dashed;
    border-color: var(--clr-primary-light);
    /* ADD transitions */
    transition: background-color var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium);
}

.upload-card.dragover {
    border-color: var(--clr-primary);
    background-color: var(--clr-primary-light);
}

.file-name-display {
    /* (Add transitions) */
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--clr-on-surface-variant);
    margin-top: 15px;
    font-style: normal;
    word-break: break-all;
    text-align: center;
    background-color: var(--clr-primary-light);
    padding: 8px 15px;
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-inset);
    /* ADD transitions */
    transition: var(--transition-colors), box-shadow var(--transition-medium);
}

/* --- Preview Specific (Add Transitions) --- */
.preview-card {
    align-items: center;
    padding: 25px;
}

#image-preview {
    /* (Add transitions) */
    max-width: 100%;
    max-height: 380px;
    border-radius: var(--radius-medium);
    margin-top: 15px;
    object-fit: contain;
    background-color: var(--clr-background);
    border: 2px solid var(--clr-outline);
    padding: 8px;
    box-shadow: var(--shadow-1);
    /* ADD transitions */
    transition: background-color var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium);
}

/* --- Action Card Specific (UNCHANGED) --- */
.action-card {
    /* (styles unchanged) */
    align-items: center;
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 10px 0 0 0;
}

.action-card:hover {
    /* (styles unchanged) */
    transform: none;
    box-shadow: none;
}

/* --- Description Specific (Add Transitions) --- */
.description-card {
    /* (Add transitions) */
    background: linear-gradient(160deg, var(--clr-surface) 0%, var(--clr-primary-light) 100%);
    border-color: var(--clr-primary-light);
    border-width: 1.5px;
    /* ADD transitions */
    transition: background var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium);
}

/* Styles for Description Content (Add Transitions) */
.description-content {
    width: 100%;
    margin-top: 15px;
}

.description-content h1,
.description-content h2,
.description-content h3 {
    /* (Add transitions) */
    color: var(--clr-primary-dark);
    font-weight: var(--fw-bold);
    margin-top: 1.8em;
    margin-bottom: 0.6em;
    padding-bottom: 0.4em;
    border-bottom: 2px solid var(--clr-primary-light);
    letter-spacing: -0.3px;
    transition: color var(--transition-medium), border-color var(--transition-medium);
}

.description-content h1 {
    font-size: 1.6em;
}

.description-content h2 {
    font-size: 1.4em;
}

.description-content h3 {
    font-size: 1.2em;
}

.description-content p {
    /* (Add transition) */
    margin-bottom: 1.2em;
    line-height: 1.8;
    color: var(--clr-on-surface);
    /* Ensure correct text color */
    transition: color var(--transition-medium);
}

.description-content strong,
.description-content b {
    /* (Add transition) */
    font-weight: var(--fw-bold);
    color: var(--clr-primary);
    letter-spacing: 0.2px;
    transition: color var(--transition-medium);
}

.description-content ul,
.description-content ol {
    /* (UNCHANGED) */
    margin-left: 30px;
    margin-bottom: 1.2em;
    padding-left: 15px;
}

.description-content li {
    /* (Add transition) */
    margin-bottom: 0.7em;
    color: var(--clr-on-surface);
    /* Ensure correct text color */
    transition: color var(--transition-medium);
}

.description-content ul li::marker {
    /* (Add transition) */
    color: var(--clr-primary);
    font-size: 1.2em;
    font-weight: bold;
    transition: color var(--transition-medium);
}

.description-content ol {
    /* (UNCHANGED) */
    list-style-type: decimal;
}

/* Table Styling (Add Transitions) */
.description-content table {
    /* (Add transition) */
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 1.5em;
    font-size: var(--fs-small);
    border: 1px solid var(--clr-outline);
    border-radius: var(--radius-small);
    overflow: hidden;
    transition: border-color var(--transition-medium);
}

.description-content th,
.description-content td {
    /* (Add transitions) */
    border-bottom: 1px solid var(--clr-outline);
    padding: 10px 15px;
    text-align: left;
    transition: background-color var(--transition-medium), color var(--transition-medium), border-color var(--transition-medium);
}

.description-content td {
    /* (Add transition) */
    border-left: 1px solid var(--clr-outline);
    color: var(--clr-on-surface);
    /* Ensure TD text color */
}

.description-content td:first-child {
    /* (UNCHANGED) */
    border-left: none;
}

.description-content th {
    /* (Add transitions) */
    background-color: var(--clr-primary-light);
    font-weight: var(--fw-semibold);
    color: var(--clr-on-surface);
    border-bottom-width: 2px;
    border-left: 1px solid var(--clr-outline);
}

.description-content th:first-child {
    /* (UNCHANGED) */
    border-left: none;
}

.description-content tr:last-child td {
    /* (UNCHANGED) */
    border-bottom: none;
}

.description-content tr:nth-child(even) td {
    /* (Add transition) */
    background-color: color-mix(in srgb, var(--clr-surface), var(--clr-primary) 3%);
}

/* Specific dark mode table styling */
html[data-theme="dark"] .description-content tr:nth-child(even) td {
    background-color: color-mix(in srgb, var(--clr-surface), var(--clr-primary) 5%);
}

/* --- Loader (Add Transitions) --- */
.loader {
    border: 5px solid var(--clr-primary-light);
    border-top: 5px solid var(--clr-primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 0.8s linear infinite;
    margin: 20px auto;
    /* ADD transition */
    transition: border-color var(--transition-medium);
}

@keyframes spin {

    /* (UNCHANGED) */
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- Funky Text --- */
.funky-text {
    color: var(--clr-primary);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    text-align: center;
    animation: pulse-text 1.5s infinite ease-in-out;
}

@keyframes pulse-text {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* --- Error Text (Add Transitions) --- */
.error-text {
    background-color: var(--clr-error-container);
    border: 1.5px solid var(--clr-error);
    color: var(--clr-on-error-container);
    font-weight: var(--fw-semibold);
    margin-top: 15px;
    padding: 14px 20px;
    border-radius: var(--radius-medium);
    text-align: center;
    width: 100%;
    font-size: var(--fs-small);
    box-shadow: 0 3px 6px rgba(200, 0, 0, 0.15);
    /* ADD transitions */
    transition: background-color var(--transition-medium), color var(--transition-medium), border-color var(--transition-medium);
}

/* --- Footer (Add Transitions) --- */
.app-footer.footer-style-1 {
    border-top: 1.5px solid var(--clr-outline);
    padding-top: 25px;
    margin-top: 40px;
    text-align: center;
    font-size: var(--fs-small);
    color: var(--clr-on-surface-variant);
    line-height: 1.6;
    /* ADD transitions */
    transition: color var(--transition-medium), border-color var(--transition-medium);
}

.app-footer.footer-style-1 p {
    /* (UNCHANGED) */
    margin-bottom: 8px;
}

/* Add style for copyright */
.app-footer.footer-style-1 .copyright {
    font-size: calc(var(--fs-small) - 1px);
    opacity: 0.8;
    margin-top: 5px;
    /* Add some space above copyright */
}

.app-footer.footer-style-1 .credits strong {
    /* (Add transition) */
    font-weight: var(--fw-semibold);
    color: var(--clr-on-surface);
    transition: color var(--transition-medium);
}

.app-footer.footer-style-1 .powered-by {
    /* (UNCHANGED) */
    font-weight: var(--fw-medium);
}

.app-footer.footer-style-1 .material-symbols-outlined {
    /* (UNCHANGED) */
    font-size: 1.1em;
    vertical-align: -2px;
    margin: 0 2px;
}

.app-footer.footer-style-1 .icon-heart {
    /* (Add transition) */
    color: var(--clr-primary);
    animation: pulse 1.5s infinite ease-in-out;
    transition: color var(--transition-medium);
    /* Ensure filled */
    font-variation-settings: 'FILL' 1;
}

.app-footer.footer-style-1 .icon-tech {
    /* (Add transition) */
    color: var(--clr-primary-dark);
    transition: color var(--transition-medium);
}

@keyframes pulse {

    /* (UNCHANGED) */
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

/* --- Responsive Adjustments (Add Toggle Button Positioning) --- */
@media (max-width: 992px) {

    /* (UNCHANGED) */
    body {
        padding: 40px 25px;
    }

    .app-container {
        max-width: 700px;
        gap: 30px;
    }

    .app-header h1 {
        font-size: 30px;
    }

    .card {
        padding: 25px 30px;
    }

    .button {
        padding: 12px 28px;
        min-height: 52px;
    }

    #image-preview {
        max-height: 360px;
    }

    .description-content table {
        font-size: calc(var(--fs-small) - 1px);
    }

    .description-content th,
    .description-content td {
        padding: 9px 12px;
    }

    .theme-toggle-button {
        width: 42px;
        height: 42px;
    }

    .theme-toggle-button .icon-theme {
        font-size: 22px;
    }
}

@media (max-width: 600px) {

    /* (Position Toggle Button) */
    body {
        padding: 25px 15px;
        font-size: calc(var(--fs-base) - 1px);
    }

    .app-container {
        gap: 25px;
    }

    .app-header {
        gap: 8px;
        flex-direction: column;
        padding-bottom: 10px;
        /* Keep position: relative; from base .app-header */
    }

    /* Position toggle absolutely in mobile */
    .theme-toggle-button {
        position: absolute;
        top: 10px;
        /* Adjust as needed */
        right: 0px;
        /* Position top-right */
        width: 40px;
        height: 40px;
        margin-left: 0;
        /* Override margin */
    }

    .theme-toggle-button .icon-theme {
        font-size: 20px;
    }

    .app-header h1 {
        font-size: 26px;
        letter-spacing: -0.5px;
        margin-right: 0;
    }

    /* Remove auto margin */
    .app-logo {
        width: 55px;
    }

    .card {
        padding: 20px 20px;
        border-radius: var(--radius-medium);
        gap: 15px;
    }

    .card h2 {
        font-size: 19px;
        margin-bottom: 5px;
    }

    .button {
        padding: 10px 22px;
        min-height: 48px;
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
    }

    .button .material-symbols-outlined {
        font-size: 1.3em;
    }

    .file-name-display {
        padding: 6px 12px;
        margin-top: 10px;
    }

    #image-preview {
        max-height: 300px;
        padding: 6px;
        margin-top: 10px;
    }

    .description-content {
        font-size: var(--fs-small);
        margin-top: 10px;
    }

    .description-content h1 {
        font-size: 1.4em;
    }

    .description-content h2 {
        font-size: 1.25em;
    }

    .description-content h3 {
        font-size: 1.1em;
    }

    .description-content ul,
    .description-content ol {
        margin-left: 20px;
        padding-left: 10px;
    }

    .description-content table {
        font-size: 12px;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        border-radius: var(--radius-small);
    }

    .description-content th,
    .description-content td {
        padding: 8px 10px;
        white-space: nowrap;
    }

    .error-text {
        padding: 12px 15px;
    }

    .app-footer.footer-style-1 {
        padding-top: 20px;
        margin-top: 30px;
    }
}