/* Genary AI - Dark Gradient Theme */
:root {
    /* Color Palette - Genary AI Dark Theme */
    --primary-violet: #8b5cf6;
    --primary-fuchsia: #d946ef;
    --primary-purple: #a855f7;

    --slate-50: #f8fafc;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    --white: #ffffff;
    --error: #ef4444;

    /* Gradients */
    --gradient-primary: linear-gradient(to right, var(--primary-violet), var(--primary-fuchsia));
    --gradient-bg: linear-gradient(to bottom, var(--slate-950), var(--slate-900), var(--slate-950));

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-violet: 0 10px 15px -3px rgba(139, 92, 246, 0.3);
    --shadow-fuchsia: 0 10px 15px -3px rgba(217, 70, 239, 0.3);

    /* Typography */
    --font-family-base: 'Roboto', sans-serif;
    --font-family-brand: 'Google Sans', 'Roboto', sans-serif;

    /* Shape */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Layout */
    --header-height: 64px;
    --drawer-width: 220px;
    --banner-height: 48px;
}

/* Advertisement Banner */
.advertisement-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: linear-gradient(to right, #a855f7, #c084fc);
    color: #2B1E45;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease-in-out;
}

.advertisement-banner.hidden {
    transform: translateY(-100%);
}

.advertisement-banner .banner-content {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1200px;
    width: 100%;
    justify-content: space-between;
}

.advertisement-banner .banner-text {
    flex: 1;
    text-align: center;
}

.advertisement-banner .banner-button {
    background: white;
    color: #a855f7;
    padding: 6px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.advertisement-banner .banner-button:hover {
    background: #f3e8ff;
    transform: translateY(-1px);
}

.advertisement-banner .banner-close {
    background: transparent;
    border: none;
    color: #000;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.advertisement-banner .banner-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Adjust body padding for banner */
body.has-banner {
    padding-top: 48px;
}

/* Adjust top-app-bar position when banner is present */
body.has-banner .top-app-bar {
    top: 48px !important;
}

@media (max-width: 768px) {
    .advertisement-banner {
        font-size: 14px;
        padding: 6px 12px;
    }

    .advertisement-banner .banner-content {
        flex-direction: column;
        gap: 8px;
    }

    .advertisement-banner .banner-text {
        text-align: center;
    }

    body.has-banner {
        padding-top: 80px;
    }

    /* Adjust top-app-bar position when banner is present on mobile */
    body.has-banner .top-app-bar {
        top: 80px !important;
    }
}

* {
    box-sizing: border-box;
}

body {
    background: var(--gradient-bg);
    color: var(--white);
    font-family: var(--font-family-base);
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    /* overflow: hidden; REMOVE to allow body scroll */
    position: relative;
    overflow-x: hidden;
    /* Prevent horizontal scroll only */
}

/* Background Gradient Orbs */
body::before,
body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(64px);
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

body::before {
    width: 24rem;
    height: 24rem;
    background: var(--primary-violet);
    top: 0;
    left: 25%;
}

body::after {
    width: 24rem;
    height: 24rem;
    background: var(--primary-fuchsia);
    top: 5rem;
    right: 25%;
}

/* App Shell Grid Layout */
.app-shell {
    display: grid;
    grid-template-columns: var(--drawer-width) 1fr;
    grid-template-rows: var(--header-height) 1fr auto;
    /* Add auto row for footer */
    grid-template-areas:
        "header header"
        "drawer main"
        "footer footer";
    /* Footer spans both columns */
    min-height: 100vh;
    /* Use min-height */
    width: 100vw;
    position: relative;
    z-index: 1;
}

/* Top App Bar */
.top-app-bar {
    grid-area: header;
    background-color: rgba(2, 6, 23, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid var(--slate-800);
    z-index: 1000;
    transition: all 0.3s;
    position: sticky;
    /* Make header sticky */
    top: 0;
}

.start-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.end-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.top-app-bar-actions {
    display: flex;
    align-items: center;
    column-gap: 12px;
}

.lang-container {
    position: relative;
}

.lang-toggle {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(148, 163, 184, 0.4);
    background-color: rgba(15, 23, 42, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--slate-300);
    cursor: pointer;
    padding: 0;
    box-shadow: var(--shadow-sm);
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease,
        color 0.15s ease;
}

.lang-toggle:hover {
    background-color: rgba(30, 41, 59, 0.98);
    border-color: rgba(148, 163, 184, 0.7);
    color: var(--white);
}

.lang-toggle:active {
    background-color: rgba(15, 23, 42, 0.98);
    transform: translateY(1px);
    box-shadow: none;
}

.lang-toggle:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

.lang-menu-panel {
    position: absolute;
    right: 0;
    margin-top: 8px;
    min-width: 176px;
    padding: 8px 0;
    background-color: #020617;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity 0.15s ease,
        visibility 0.15s ease,
        transform 0.15s ease;
    z-index: 50;
}

.lang-menu-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--slate-50);
    text-decoration: none;
    cursor: pointer;
}

.lang-menu-item:hover,
.lang-menu-item:focus-visible {
    background-color: rgba(148, 163, 184, 0.15);
    outline: none;
}

.lang-menu-item.active {
    color: #38bdf8;
    background-color: rgba(56, 189, 248, 0.12);
}

.btn-top-login,
.btn-top-primary {
    min-height: 44px;
    padding: 0 20px;
    border-radius: var(--radius-full);
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease;
}

.btn-top-login {
    background-color: #020617;
    border-color: rgba(148, 163, 184, 0.6);
    color: var(--slate-50);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9);
}

.btn-top-login:hover {
    background-color: #020617;
    border-color: rgba(148, 163, 184, 0.9);
    box-shadow: var(--shadow-md);
}

.btn-top-login:active {
    transform: translateY(1px);
    box-shadow: var(--shadow-sm);
}

.btn-top-primary {
    background-color: #1d9bf0;
    color: #ffffff;
    border-color: transparent;
    padding-inline: 24px;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.55);
}

.btn-top-primary:hover {
    background-color: #1b8ad8;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.7);
}

.btn-top-primary:active {
    background-color: #1667b7;
    transform: translateY(1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.7);
}

.btn-top-login:focus-visible,
.btn-top-primary:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

.icon-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    padding: 6px;
    border-radius: 50%;
    color: var(--slate-300);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

/* Increase hit area for randomSeed buttons to 56x56 for better accessibility
   and touch targets. This makes them much easier to click and hover over. */
#randomSeed.icon-button,
#randomSeed.icon-button.suffix,
#randomSeedImg2Img.icon-button,
#randomSeedImg2Img.icon-button.suffix,
#randomSeedVideo.icon-button,
#randomSeedVideo.icon-button.suffix,
#randomSeedVideoImg.icon-button,
#randomSeedVideoImg.icon-button.suffix,
#omniRandomSeed.icon-button,
#omniRandomSeed.icon-button.suffix {
    width: 40px;
    height: 40px;
    padding: 12px;
    /* keep internal spacing consistent */
    border-radius: 50%;
    /* make it a circle for better visual recognition */
    transition: all 0.3s ease;
    /* smooth transition for hover effects */
    background-color: rgba(255, 255, 255, 0.05);
    /* subtle background for better visibility */
}

#randomSeed.icon-button:hover,
#randomSeed.icon-button.suffix:hover,
#randomSeedImg2Img.icon-button:hover,
#randomSeedImg2Img.icon-button.suffix:hover,
#randomSeedVideo.icon-button:hover,
#randomSeedVideo.icon-button.suffix:hover,
#randomSeedVideoImg.icon-button:hover,
#randomSeedVideoImg.icon-button.suffix:hover,
#omniRandomSeed.icon-button:hover,
#omniRandomSeed.icon-button.suffix:hover {
    background-color: rgba(255, 255, 255, 0.15);
    /* stronger background on hover */
    transform: scale(1.1);
    /* slight scale effect on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    /* add shadow for depth */
}

#randomSeed.icon-button:active,
#randomSeed.icon-button.suffix:active,
#randomSeedImg2Img.icon-button:active,
#randomSeedImg2Img.icon-button.suffix:active,
#randomSeedVideo.icon-button:active,
#randomSeedVideo.icon-button.suffix:active,
#randomSeedVideoImg.icon-button:active,
#randomSeedVideoImg.icon-button.suffix:active,
#omniRandomSeed.icon-button:active,
#omniRandomSeed.icon-button.suffix:active {
    transform: scale(0.95);
    /* slight press effect */
}

#randomSeed.icon-button .material-symbols-outlined,
#randomSeedImg2Img.icon-button .material-symbols-outlined,
#randomSeedVideo.icon-button .material-symbols-outlined,
#randomSeedVideoImg.icon-button .material-symbols-outlined,
#omniRandomSeed.icon-button .material-symbols-outlined {
    font-size: 24px;
    /* larger icon to match bigger button */
    color: var(--primary-violet);
    /* use primary color for better visibility */
}

#randomSeed.icon-button:hover .material-symbols-outlined,
#randomSeedImg2Img.icon-button:hover .material-symbols-outlined,
#randomSeedVideo.icon-button:hover .material-symbols-outlined,
#randomSeedVideoImg.icon-button:hover .material-symbols-outlined,
#omniRandomSeed.icon-button:hover .material-symbols-outlined {
    color: var(--primary-fuchsia);
    /* change color on hover for better feedback */
}

/* Keep existing styles for other toggle buttons */
#toggleApiKey.icon-button,
#toggleApiKey.icon-button.suffix,
#toggleVoiceAppid.icon-button,
#toggleVoiceAppid.icon-button.suffix,
#toggleVoiceToken.icon-button,
#toggleVoiceToken.icon-button.suffix {
    width: 40px;
    height: 40px;
    padding: 8px;
}

#toggleApiKey.icon-button .material-symbols-outlined,
#toggleVoiceAppid.icon-button .material-symbols-outlined,
#toggleVoiceToken.icon-button .material-symbols-outlined {
    font-size: 20px;
}

.icon-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

#siteLogo {
    height: 40px;
    width: auto;
}

.site-title {
    font-family: var(--font-family-brand);
    font-size: 22px;
    color: var(--white);
    font-weight: 400;
    letter-spacing: -0.5px;
}

/* Navigation Drawer */
.navigation-drawer {
    grid-area: drawer;
    background-color: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--slate-800);
    /* overflow-y: auto; REMOVE independent scroll */
    padding: 12px;
    display: flex;
    flex-direction: column;
    /* height: 100%; REMOVE to allow margins to affect height */
    /* Stretch to fill grid cell */
    /* Ensure content distribution */
    justify-content: flex-start;
    border-radius: var(--radius-xl);
    /* Full rounded corners */
    border: 1px solid var(--slate-800);
    /* Full border */
    /* Remove separate border-bottom/right since we have full border now? 
       Actually, check existing border-right. 
       Let's use full border to match content card style. 
    */
    /* border-right: 1px solid var(--slate-800); Existing */
    margin-bottom: 24px;
    margin-top: 24px;
    /* Align top as well for consistency */
}

.nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    /* Allow list to take available space */
}

.nav-section-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--slate-400);
    padding: 16px 16px 8px 16px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: 56px;
    border-radius: var(--radius-full);
    text-decoration: none;
    color: var(--slate-300);
    font-family: var(--font-family-brand);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.nav-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--white);
}

.nav-item.active {
    background: linear-gradient(to right, rgba(139, 92, 246, 0.2), rgba(217, 70, 239, 0.2));
    color: var(--white);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.nav-item .material-symbols-outlined {
    font-size: 24px;
}

.divider {
    height: 1px;
    background-color: var(--slate-800);
    margin: 8px 0;
}

/* Free Trial Banner */
.free-trial-banner {
    background: linear-gradient(to right, rgba(168, 85, 247, 0.15), rgba(192, 132, 252, 0.15));
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-top: auto;
    margin-bottom: 8px;
    text-align: center;
}

.free-trial-banner.hidden {
    display: none;
}

.trial-text {
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1.4;
}

.trial-button {
    display: inline-block;
    background: white;
    color: #a855f7;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.trial-button:hover {
    background: #f3e8ff;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .free-trial-banner {
        padding: 12px;
        margin-bottom: 4px;
    }
    
    .trial-text {
        font-size: 13px;
        margin-bottom: 10px;
    }
    
    .trial-button {
        padding: 6px 14px;
        font-size: 13px;
    }
}

/* Main Content */
.main-content {
    grid-area: main;
    background-color: transparent;
    /* overflow-y: auto; REMOVE independent scroll */
    padding: 0;
    display: flex;
    flex-direction: column;
}

.content-container {
    width: 100%;
    margin: 0;
    padding: 24px;
    flex: 1;
    /* Was flex:1 */
    /* overflow: hidden; REMOVE this so content can expand */
    max-width: none;
    /* Ensure it takes at least full height minus footer if needed, or just auto */
    height: auto;
}

/* Two-Column Grid Layout */
.content-grid {
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 24px;
    height: auto;
    /* Remove fixed height constraint */
    min-height: calc(100vh - var(--header-height) - 48px);
    /* Optional: ensure it fills screen at least */
}

/* Input Panel */
.input-panel {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--slate-800);
    border-radius: var(--radius-xl);
    /* overflow-y: auto; REMOVED internal scroll */
    display: flex;
    flex-direction: column;
    height: auto;
    /* Allow to expand */
}

.input-panel-header {
    padding: 24px 24px 20px 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.input-panel-header h1 {
    font-family: var(--font-family-brand);
    font-size: 24px;
    font-weight: 500;
    color: var(--white);
    margin: 0 0 8px 0;
}

.input-panel-header .subtitle {
    font-size: 14px;
    color: var(--slate-400);
    margin: 0;
}

.input-panel-body {
    padding: 24px;
    flex: 1;
}

/* Preview Panel */
.preview-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    height: auto;
    /* Changed from implied flex/grid fit */
}

.preview-main {
    flex: 1;
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--slate-800);
    border-radius: var(--radius-xl);
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* overflow: auto; REMOVED */
    min-height: 600px;
    /* Ensure some height for preview */
    position: relative;
    /* Ensure absolute positioning works for overlay */
}

.preview-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Loading Overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--radius-xl);
}

.preview-media {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - var(--header-height) - 280px);
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
    display: block;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .preview-media {
        max-height: 70vh;
    }
}

.preview-caption {
    margin-top: 16px;
    text-align: center;
    color: var(--slate-300);
    font-size: 14px;
    line-height: 1.5;
}

.preview-gallery {
    height: 140px;
    background: rgba(30, 41, 59, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--slate-800);
    border-radius: var(--radius-lg);
    padding: 16px;
    overflow-x: auto;
    overflow-y: hidden;
}

.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    height: 100%;
}

.thumbnail-item {
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
    background: var(--slate-800);
    position: relative;
}

.thumbnail-item img,
.thumbnail-item video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.thumbnail-item:hover {
    border-color: var(--primary-violet);
    transform: scale(1.05);
}

.thumbnail-item.active {
    border-color: var(--primary-fuchsia);
    box-shadow: 0 0 0 2px rgba(217, 70, 239, 0.2);
}

/* Legacy content header for compatibility */
.content-header {
    margin-bottom: 24px;
}

.content-header h1 {
    font-family: var(--font-family-brand);
    font-size: 28px;
    font-weight: 400;
    color: var(--white);
    margin: 0;
}

/* Compact Form Controls */
.form-group-compact {
    margin-bottom: 20px;
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.settings-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.md-text-field.compact {
    height: 48px;
}

.md-select-field.compact {
    height: 48px;
}

.action-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.action-section .btn-filled {
    width: 100%;
    height: 48px;
    font-size: 16px;
}

/* Cards */
.card {
    background-color: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--slate-800);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all 0.3s;
    margin-bottom: 1.5rem;
}

.card:hover {
    border-color: var(--slate-700);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    padding: 20px 24px;
}

.card-header h5 {
    font-family: var(--font-family-brand);
    font-size: 20px;
    color: var(--white);
    margin: 0;
    font-weight: 500;
}

.card-body {
    padding: 32px 24px;
}

/* Improved spacing for form sections */
.card-body .row {
    margin-bottom: 0;
}

.card-body .mb-4 {
    margin-bottom: 1.5rem !important;
}

/* Improved spacing for form sections */
.card-body .row {
    margin-bottom: 0;
}

.card-body .mb-4 {
    margin-bottom: 1.5rem !important;
}

/* Result Card Specific Styling */
.card.h-100 {
    min-height: 400px;
}

.card .card-body[style*="min-height"] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.3) 0%, rgba(15, 23, 42, 0.4) 100%);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Empty State Styling */
#emptyState {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

#emptyState .material-symbols-outlined {
    color: var(--slate-600);
    margin-bottom: 1rem;
}

#emptyState p {
    color: var(--slate-400);
    font-size: 14px;
}

/* Show number input spin buttons for better UX */
.md-text-field input[type="number"]::-webkit-outer-spin-button,
.md-text-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: auto;
    margin: 0;
}

.md-text-field input[type="number"] {
    -moz-appearance: number-input;
    padding-right: 50px;
    /* Make room for the random seed button */
}

/* Material Text Fields (Floating Label) - Dark Theme */
.md-text-field {
    position: relative;
    border: 1px solid var(--slate-700);
    border-radius: var(--radius-md);
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    transition: all 0.2s;
    background-color: rgba(15, 23, 42, 0.5);
}

.md-text-field:focus-within {
    border-color: var(--primary-violet);
    border-width: 2px;
    padding: 0 15px;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.md-text-field input,
.md-text-field textarea {
    border: none;
    background: transparent;
    width: 100%;
    height: 100%;
    font-family: var(--font-family-base);
    font-size: 16px;
    color: var(--white);
    outline: none;
    padding: 0;
    margin: 0;
    z-index: 1;
}

.md-text-field input::placeholder,
.md-text-field textarea::placeholder {
    color: var(--slate-400);
}

.md-text-field label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(15, 23, 42, 0.9);
    padding: 0 4px;
    color: var(--slate-400);
    font-size: 16px;
    transition: all 0.2s ease-out;
    pointer-events: none;
    z-index: 0;
}

/* Floating Label Logic */
.md-text-field input:focus+label,
.md-text-field input:not(:placeholder-shown)+label,
.md-text-field textarea:focus+label,
.md-text-field textarea:not(:placeholder-shown)+label {
    top: 0;
    left: 12px;
    font-size: 12px;
    color: var(--primary-violet);
    font-weight: 500;
    z-index: 2;
}

.md-text-field input:not(:focus):not(:placeholder-shown)+label,
.md-text-field textarea:not(:focus):not(:placeholder-shown)+label {
    color: var(--slate-400);
}

/* Textarea specific adjustments */
.md-text-field.textarea {
    height: auto;
    align-items: flex-start;
    padding-top: 16px;
}

.md-text-field.textarea label {
    top: 24px;
}

.md-text-field.textarea input:focus+label,
.md-text-field.textarea textarea:focus+label {
    top: -8px;
}

/* Select Field */
.md-select-field {
    position: relative;
    border: 1px solid var(--slate-700);
    border-radius: var(--radius-md);
    height: 56px;
    background-color: rgba(15, 23, 42, 0.5);
    transition: all 0.2s;
}

.md-select-field:focus-within {
    border-color: var(--primary-violet);
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.md-select-field .form-select {
    border: none;
    height: 100%;
    padding: 16px;
    font-size: 16px;
    background-color: transparent;
    box-shadow: none;
    color: var(--white);
}

/* 如果 select 没有 floating label，调整 padding */
.md-select-field:has(.floating-label) .form-select {
    padding: 16px 16px 0 16px;
}

.md-select-field .form-select option {
    background-color: var(--slate-800);
    color: var(--white);
}

.md-select-field .floating-label {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 12px;
    color: var(--slate-400);
    pointer-events: none;
}

/* Helper Text */
.helper-text {
    font-size: 12px;
    color: var(--slate-400);
    margin-top: 4px;
    margin-left: 16px;
}

/* Buttons */
.btn {
    height: 40px;
    border-radius: var(--radius-lg);
    padding: 0 24px;
    font-family: var(--font-family-brand);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
}

.btn-filled {
    background: var(--gradient-primary);
    color: var(--white);
}

.btn-filled:hover {
    box-shadow: var(--shadow-violet);
    transform: translateY(-1px);
}

.btn-outlined {
    background-color: transparent;
    border: 1px solid var(--slate-700);
    color: var(--white);
}

.btn-outlined:hover {
    background-color: rgba(139, 92, 246, 0.1);
    border-color: var(--primary-violet);
}

.btn-text {
    background-color: transparent;
    color: var(--primary-violet);
    padding: 0 12px;
    transition: all 0.3s ease;
}

.btn-text:hover {
    background-color: rgba(139, 92, 246, 0.1);
}

/* Details Toggle Button */
.details-toggle-btn {
    color: #CBD5E1;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.details-toggle-btn:hover {
    color: #FFFFFF;
    background-color: rgba(148, 163, 184, 0.1);
    transform: translateY(-1px);
}

.details-toggle-btn:active {
    transform: translateY(0);
    background-color: rgba(148, 163, 184, 0.2);
}

.details-toggle-btn .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.btn-text.text-danger {
    color: var(--error);
}

.btn-text.text-danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

/* Download Button */
.btn-download {
    width: 100%;
    min-height: 48px;
    /* Mobile touch friendly */
    height: auto;
    padding: 12px;
    background: var(--slate-800);
    z-index: 5;
    /* Ensure clickable */
    position: relative;
    color: #CBD5E1;
    border: 1px solid var(--slate-700);
    border-radius: var(--radius-lg);
    font-size: 16px;
    font-weight: 500;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.btn-download:hover {
    background: var(--slate-700);
    border-color: var(--primary-violet);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-download:active {
    transform: translateY(0);
    background: var(--primary-violet);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-download .material-symbols-outlined {
    font-size: 20px;
    color: #CBD5E1;
}

.btn-download:hover .material-symbols-outlined {
    color: #FFFFFF;
}

/* Specific override for the download image button to ensure correct color */
button#downloadImage.btn.btn-download.mt-3,
button#downloadImage.btn.btn-download.mt-3 .material-symbols-outlined {
    color: #CBD5E1;
}

/* Details Toggle */
.details-toggle-icon {
    transition: transform 0.3s ease;
}

.details-toggle-btn[aria-expanded="true"] .details-toggle-icon {
    transform: rotate(180deg);
}

/* --- Credential Save Buttons Color Fix ---
   統一 `saveOmniCred`, `saveVoiceCred`, `saveApiKey` 的文字顏色為 #94A3B8
   保持深色主題可讀性，同時區分為次要操作按鈕顏色。 */
#saveApiKey,
#saveVoiceCred,
#saveOmniCred {
    color: #94A3B8;
}

/* --- Toggle (visibility) button: increase clickable area and give faster visual feedback ---
   - 擴大 suffix 按鈕的 padding，使點擊區域更大
   - 縮短 transform 時間以減少感知延遲
   - hover/active 效果增強可視反饋
*/
.md-text-field .icon-button.suffix {
    padding: 8px 12px;
    margin-left: 8px;
    transition: transform 0.08s ease, background-color 0.12s ease;
    border-radius: 8px;
}

.md-text-field .icon-button.suffix:hover {
    background-color: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
}

.md-text-field .icon-button.suffix:active,
.md-text-field .icon-button.suffix.active {
    transform: translateY(0);
}

/* Range Slider */
.form-range {
    height: 4px;
    background-color: var(--slate-700);
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
}

.form-range::-webkit-slider-runnable-track {
    height: 4px;
    background: var(--slate-700);
    border-radius: 2px;
}

.form-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    background: var(--primary-violet);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--shadow-md);
    margin-top: -8px;
}

.form-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: var(--shadow-violet);
}

.form-range::-moz-range-thumb {
    background: var(--primary-violet);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--shadow-md);
    border: none;
}

.form-range::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: var(--shadow-violet);
}

.range-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 8px;
    display: block;
}

/* Bootstrap Form Controls - Dark Theme */
.form-control {
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--slate-700);
    color: var(--white);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.form-control:focus {
    background-color: rgba(15, 23, 42, 0.7);
    border-color: var(--primary-violet);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    color: var(--white);
}

.form-control::placeholder {
    color: var(--slate-400);
}

.form-text {
    color: var(--slate-400);
    font-size: 12px;
}

.form-label {
    color: var(--slate-300);
    font-weight: 500;
}

/* Button Groups */
.btn-group .btn-check:checked+.btn-outline-secondary {
    background: var(--gradient-primary);
    border-color: var(--primary-violet);
    color: var(--white);
}

.btn-outline-secondary {
    border-color: var(--slate-700);
    color: var(--slate-300);
    background-color: transparent;
}

.btn-outline-secondary:hover {
    background-color: rgba(139, 92, 246, 0.1);
    border-color: var(--primary-violet);
    color: var(--white);
}

/* Alerts */
.alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    border-radius: var(--radius-lg);
}

/* Utilities */
.d-none {
    display: none !important;
}

.text-secondary {
    color: var(--slate-400) !important;
}

.text-danger {
    color: var(--error) !important;
}

.bg-light {
    background-color: rgba(30, 41, 59, 0.3) !important;
}

/* Spinner */
.spinner-border {
    border-color: var(--primary-violet);
    border-right-color: transparent;
}

@media (min-width: 1440px) {
    .top-app-bar {
        padding-inline: 24px;
    }

    .top-app-bar-actions {
        column-gap: 16px;
    }
}

@media (min-width: 1920px) {
    .top-app-bar {
        padding-inline: 32px;
    }

    .top-app-bar-actions {
        column-gap: 18px;
    }
}

@media (max-width: 1024px) {
    .top-app-bar {
        padding-inline: 12px;
    }

    .btn-top-login,
    .btn-top-primary {
        padding-inline: 16px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .top-app-bar-actions {
        column-gap: 8px;
    }
}

/* Responsive Design */
@media (max-width: 1400px) {
    .content-grid {
        grid-template-columns: 38% 62%;
    }
}

/* 13.6英寸屏幕优化 (1024px - 1200px) */
@media (min-width: 1024px) and (max-width: 1200px) {
    .content-grid {
        grid-template-columns: 40% 60%;
        /* 调整输入面板宽度，确保有足够空间显示比例选择器 */
    }

    .input-panel-body {
        padding: 16px;
    }

    /* 优化图片比例选择器的响应式设计 */
    #ratioSelectorText .size-dropdown,
    #ratioSelectorImg2Img .size-dropdown {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        border-radius: var(--radius-lg);
        padding: 12px;
        z-index: 1000;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    }

    #ratioSelectorText .ratio-grid,
    #ratioSelectorImg2Img .ratio-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    #ratioSelectorText .ratio-btn,
    #ratioSelectorImg2Img .ratio-btn {
        height: 75px;
        padding: 10px 6px;
    }

    #ratioSelectorText .ratio-label,
    #ratioSelectorImg2Img .ratio-label {
        font-size: 11px;
        margin-top: 5px;
    }

    #ratioSelectorText .ratio-icon,
    #ratioSelectorImg2Img .ratio-icon {
        margin-bottom: 5px;
    }

    /* 调整图标大小以适应更小的按钮 */
    #ratioSelectorText .icon-1-1,
    #ratioSelectorImg2Img .icon-1-1 {
        width: 16px;
        height: 16px;
    }

    #ratioSelectorText .icon-3-4,
    #ratioSelectorImg2Img .icon-3-4 {
        width: 12px;
        height: 16px;
    }

    #ratioSelectorText .icon-4-3,
    #ratioSelectorImg2Img .icon-4-3 {
        width: 16px;
        height: 12px;
    }

    #ratioSelectorText .icon-16-9,
    #ratioSelectorImg2Img .icon-16-9 {
        width: 18px;
        height: 10px;
    }

    #ratioSelectorText .icon-9-16,
    #ratioSelectorImg2Img .icon-9-16 {
        width: 10px;
        height: 18px;
    }

    #ratioSelectorText .icon-2-3,
    #ratioSelectorImg2Img .icon-2-3 {
        width: 12px;
        height: 18px;
    }

    #ratioSelectorText .icon-3-2,
    #ratioSelectorImg2Img .icon-3-2 {
        width: 18px;
        height: 12px;
    }

    #ratioSelectorText .icon-21-9,
    #ratioSelectorImg2Img .icon-21-9 {
        width: 20px;
        height: 8px;
    }
}

@media (max-width: 1023px) {
    .content-grid {
        grid-template-columns: 45% 55%;
    }

    .input-panel-body {
        padding: 20px;
    }
}

@media (max-width: 968px) {
    .content-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
    }

    .input-panel {
        max-height: 60vh;
    }

    .preview-panel {
        min-height: 400px;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .app-shell {
        grid-template-columns: 1fr;
        grid-template-rows: var(--header-height) 1fr auto;
        grid-template-areas:
            "header"
            "main"
            "footer";
    }

    .navigation-drawer {
        position: fixed;
        left: -220px;
        top: 0;
        bottom: 0;
        width: 220px;
        z-index: 2000;
        transition: left 0.3s ease;
        box-shadow: var(--shadow-lg);
    }

    .navigation-drawer.open {
        left: 0;
    }

    .main-content {
        padding: 0;
    }

    .content-container {
        padding: 16px;
    }

    .content-grid {
        gap: 16px;
    }

    .input-panel-header {
        padding: 20px 20px 16px 20px;
    }

    .input-panel-body {
        padding: 20px;
    }

    .preview-main {
        padding: 20px;
    }

    .preview-gallery {
        height: auto;
        min-height: 100px;
    }

    .thumbnail-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .settings-row {
        grid-template-columns: 1fr;
    }
}

/* Scrollbar - Dark Theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--slate-700);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--slate-600);
}

/* Footer */
.site-footer {
    grid-area: footer;
    /* Assign to grid area */
    text-align: left;
    padding: 24px;
    color: var(--slate-400);
    font-size: 12px;
    margin-top: auto;
    width: 100%;
}

/* Action Bar */
.action-bar {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Icon Button with Suffix - Fix overlapping */
.md-text-field .icon-button.suffix {
    position: absolute;
    right: 8px;
    padding: 8px;
    /* Ensure button is clickable and not overlapped by other elements */
    z-index: 10;
    /* Add background for better visibility */
    background-color: rgba(15, 23, 42, 0.7);
    border-radius: 50%;
}

/* Adjust random seed button position */

/* API Settings Container */
.api-settings-container {
    padding: 12px;
    background-color: rgba(15, 23, 42, 0.3);
    border-radius: var(--radius-lg);
    margin-top: 8px;
}

/* Size Selector Component - Renewed */
.size-selector {
    position: relative;
    width: 100%;
}

.size-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    height: 56px;
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--slate-700);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--white);
}

.size-selector-header:hover {
    border-color: var(--primary-violet);
    background-color: rgba(30, 41, 59, 0.7);
}

.size-selector-header.active {
    border-color: var(--primary-violet);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.selected-summary {
    font-size: 16px;
}

.dropdown-icon {
    transition: transform 0.3s ease;
    color: var(--slate-400);
}

.size-selector-header.open .dropdown-icon {
    transform: rotate(180deg);
}

.size-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-width: 400px;
    margin-top: 8px;
    background-color: #1e293b;
    border: 1px solid var(--slate-700);
    border-radius: var(--radius-lg);
    z-index: 100;
    padding: 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    gap: 16px;
    /* 確保下拉選單精確定位 */
    box-sizing: border-box;
}

.size-dropdown.d-none {
    display: none;
}

.size-dropdown.open {
    opacity: 1;
    transform: translateY(0);
    /* 平滑展開動畫 */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 确保下拉菜单不会超出父容器范围 */
@media (max-width: 768px) {
    .size-dropdown {
        left: 0;
        width: auto;
        max-width: 100vw;
        transform: translateY(-6px);
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: 20px;
        max-height: 70vh;
        overflow-y: auto;
        /* 精確控制行動端的展開範圍 */
        box-sizing: border-box;
    }

    .size-dropdown.open {
        transform: translateY(0);
    }
}

/* 修正图片比例选择器的展开范围，确保匹配红框标注 */
.size-selector {
    position: relative;
    width: 100%;
}

#ratioSelectorText .size-dropdown,
#ratioSelectorImg2Img .size-dropdown {
    width: calc(200% + 16px);
    max-width: calc(200% + 16px);
    left: 0;
    margin-top: 8px;
    border-radius: var(--radius-lg);
    padding: 16px;
    z-index: 1000;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    min-width: 0;
    transform-origin: top left;
    max-height: 350px;
    overflow-y: auto;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
}

/* 确保比例网格在展开时正确显示 */
#ratioSelectorText .ratio-grid,
#ratioSelectorImg2Img .ratio-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    overflow-x: visible;
    padding-bottom: 0;
    width: 100%;
}

/* 优化比例按钮的大小和间距 */
#ratioSelectorText .ratio-btn,
#ratioSelectorImg2Img .ratio-btn {
    padding: 12px 6px;
    height: 70px;
    width: 100%;
    box-sizing: border-box;
}

#ratioSelectorText .ratio-icon,
#ratioSelectorImg2Img .ratio-icon {
    margin-bottom: 6px;
}

/* 调整解析度选择器的宽度，与图片比例选择器对齐 */
#resSelectorText,
#resSelectorImg2Img {
    width: 100%;
    max-width: 100%;
}

/* 调整图片比例与解析度区域的宽度一致 */
.settings-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

#ratioSelectorText,
#ratioSelectorImg2Img {
    width: 100%;
    max-width: 100%;
}

#resSelectorText,
#resSelectorImg2Img {
    width: 100%;
    max-width: 100%;
}

/* Apple Mac 13.6 寸屏幕优化 (1280px - 1400px) */
@media (min-width: 1280px) and (max-width: 1400px) {
    .content-grid {
        grid-template-columns: 400px 1fr;
    }

    #ratioSelectorText .size-dropdown,
    #ratioSelectorImg2Img .size-dropdown {
        width: 200%;
        max-width: 200%;
        left: 0;
        padding: 16px;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }

    #ratioSelectorText .ratio-grid,
    #ratioSelectorImg2Img .ratio-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    #ratioSelectorText .ratio-btn,
    #ratioSelectorImg2Img .ratio-btn {
        height: 75px;
        padding: 14px 8px;
    }

    #ratioSelectorText .ratio-label,
    #ratioSelectorImg2Img .ratio-label {
        font-size: 12px;
        margin-top: 6px;
    }

    #ratioSelectorText .ratio-icon,
    #ratioSelectorImg2Img .ratio-icon {
        margin-bottom: 6px;
    }

    /* 调整图标大小以适应按钮 */
    #ratioSelectorText .icon-1-1,
    #ratioSelectorImg2Img .icon-1-1 {
        width: 22px;
        height: 22px;
    }

    #ratioSelectorText .icon-3-4,
    #ratioSelectorImg2Img .icon-3-4 {
        width: 17px;
        height: 22px;
    }

    #ratioSelectorText .icon-4-3,
    #ratioSelectorImg2Img .icon-4-3 {
        width: 22px;
        height: 17px;
    }

    #ratioSelectorText .icon-16-9,
    #ratioSelectorImg2Img .icon-16-9 {
        width: 24px;
        height: 13px;
    }

    #ratioSelectorText .icon-9-16,
    #ratioSelectorImg2Img .icon-9-16 {
        width: 13px;
        height: 24px;
    }

    #ratioSelectorText .icon-2-3,
    #ratioSelectorImg2Img .icon-2-3 {
        width: 16px;
        height: 24px;
    }

    #ratioSelectorText .icon-3-2,
    #ratioSelectorImg2Img .icon-3-2 {
        width: 24px;
        height: 16px;
    }

    #ratioSelectorText .icon-21-9,
    #ratioSelectorImg2Img .icon-21-9 {
        width: 26px;
        height: 11px;
    }
}

/* 桌面端 (≥1400px) */
@media (min-width: 1400px) {

    #ratioSelectorText .size-dropdown,
    #ratioSelectorImg2Img .size-dropdown {
        width: 200%;
        max-width: 200%;
        left: 0;
    }
}

/* 平板端 (768px-1279px) */
@media (min-width: 768px) and (max-width: 1279px) {

    #ratioSelectorText .size-dropdown,
    #ratioSelectorImg2Img .size-dropdown {
        width: 200%;
        max-width: 200%;
        left: 0;
        padding: 16px;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }

    #ratioSelectorText .ratio-grid,
    #ratioSelectorImg2Img .ratio-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    #ratioSelectorText .ratio-btn,
    #ratioSelectorImg2Img .ratio-btn {
        height: 80px;
        padding: 16px 6px;
    }
}

/* 行動端 (≤767px) */
@media (max-width: 767px) {

    #ratioSelectorText .size-dropdown,
    #ratioSelectorImg2Img .size-dropdown {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        padding: 16px;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }

    #ratioSelectorText .ratio-grid,
    #ratioSelectorImg2Img .ratio-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    #ratioSelectorText .ratio-btn,
    #ratioSelectorImg2Img .ratio-btn {
        height: 70px;
        padding: 12px 4px;
    }

    .ratio-label {
        font-size: 11px;
        margin-top: 6px;
    }

    .icon-1-1 {
        width: 18px;
        height: 18px;
    }

    .icon-3-4 {
        width: 14px;
        height: 18px;
    }

    .icon-4-3 {
        width: 18px;
        height: 14px;
    }

    .icon-16-9 {
        width: 20px;
        height: 11px;
    }

    .icon-9-16 {
        width: 11px;
        height: 20px;
    }

    .icon-2-3 {
        width: 13px;
        height: 20px;
    }

    .icon-3-2 {
        width: 20px;
        height: 13px;
    }

    .icon-21-9 {
        width: 22px;
        height: 9px;
    }
}

/* 超小屏幕優化 */
@media (max-width: 480px) {

    #ratioSelectorText .ratio-grid,
    #ratioSelectorImg2Img .ratio-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    #ratioSelectorText .ratio-btn,
    #ratioSelectorImg2Img .ratio-btn {
        height: 65px;
        padding: 10px 4px;
    }

    .ratio-label {
        font-size: 10px;
        margin-top: 5px;
    }
}

.section-label {
    font-size: 14px;
    color: var(--slate-400);
    margin-bottom: 12px;
    font-weight: 500;
}

/* Auto Toggle Styles */
.auto-toggle-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auto-label {
    font-size: 14px;
    color: var(--slate-400);
    font-weight: 500;
}

.auto-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.auto-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
}

.auto-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(148, 163, 184, 0.3);
    transition: 0.3s;
    border-radius: 24px;
}

.auto-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.auto-checkbox:checked + .auto-slider {
    background-color: var(--primary-violet);
}

.auto-checkbox:checked + .auto-slider:before {
    transform: translateX(24px);
}

/* Ratio Grid Disabled State */
.ratio-grid.disabled .ratio-btn {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ratio-grid.disabled .ratio-btn.active {
    border-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.5);
}

/* Auto Toggle Label Active State */
.auto-checkbox:checked ~ .auto-label {
    color: var(--primary-violet);
}

/* Selector top labels */
.selector-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--slate-400);
    margin-bottom: 6px;
}

@media (max-width: 768px) {
    .size-dropdown {
        left: 0;
        width: 100%;
        max-width: 100%;
        transform: translateY(-6px);
        position: absolute;
        top: 100%;
    }

    .ratio-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .ratio-btn {
        padding: 12px 6px;
    }
}

/* Resolution - Segmented Control Style */
.resolution-group {
    display: flex;
    padding: 4px;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: var(--radius-md);
    border: 1px solid var(--slate-700);
}

.resolution-btn {
    flex: 1;
    text-align: center;
    padding: 8px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--slate-400);
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    border: none;
}

.resolution-btn:hover {
    color: var(--white);
}

.resolution-btn.active {
    background-color: var(--white);
    color: var(--slate-900);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Ratio Grid */
.ratio-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    overflow-x: visible;
    padding-bottom: 0;
}

/* Hide scrollbar styles not needed for grid */
.ratio-grid::-webkit-scrollbar {
    display: none;
}

.ratio-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    background-color: rgba(255, 255, 255, 0.05);
    /* Dark card bg */
    color: var(--slate-400);
}

.ratio-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.ratio-btn.active {
    background-color: rgba(30, 41, 59, 0.8);
    border-color: var(--white);
    /* White border for active */
    color: var(--white);
    box-shadow: none;
}

.ratio-label {
    font-size: 12px;
    margin-top: 8px;
    font-weight: 500;
}

/* Ratio Icons (Filled Shapes) */
.ratio-icon {
    background-color: currentColor;
    /* Use text color (slate-400 inactive, white active) */
    border-radius: 2px;
    transition: all 0.2s;
}

/* Dimensions for filled icons */
.icon-1-1 {
    width: 22px;
    height: 22px;
}

.icon-3-4 {
    width: 17px;
    height: 22px;
}

.icon-4-3 {
    width: 22px;
    height: 17px;
}

.icon-16-9 {
    width: 24px;
    height: 13px;
}

.icon-9-16 {
    width: 13px;
    height: 24px;
}

.icon-2-3 {
    width: 16px;
    height: 24px;
}

.icon-3-2 {
    width: 24px;
    height: 16px;
}

.icon-21-9 {
    width: 26px;
    height: 11px;
}

/* Custom Size Toggle */
.custom-size-toggle {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--slate-700);
}

.custom-size-toggle .btn-text {
    font-size: 13px;
    padding: 0;
}

/* ========================================
   Footer Styles (Matching login.html)
   ======================================== */
.site-footer {
    border-top: 1px solid #1e293b;
    padding: 3rem 1rem;
    background-color: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    margin-top: 2rem;
    position: relative;
    z-index: 10;
    /* Use default system font to match login.html */
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    text-align: left;
}

@media (min-width: 640px) {
    .site-footer {
        padding: 3rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .site-footer {
        padding: 3rem 2rem;
    }
}

.footer-container {
    max-width: 80rem;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.footer-brand {
    grid-column: span 1;
}

@media (min-width: 640px) {
    .footer-brand {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    .footer-brand {
        grid-column: span 1;
    }
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.footer-logo .logo-icon {
    width: 2rem;
    height: 2rem;
    background: linear-gradient(to bottom right, #8b5cf6, #d946ef);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 640px) {
    .footer-logo .logo-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}

.footer-logo .logo-svg {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

@media (min-width: 640px) {
    .footer-logo .logo-svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

.footer-logo-text {
    font-size: 1.25rem;
    color: white;
}

.footer-description {
    color: #94a3b8;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.5;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #1e293b;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease-in-out;
    text-decoration: none;
}

.social-link:hover {
    background-color: #334155;
}

.social-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #cbd5e1;
}

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-heading {
    color: white;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 500;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-link {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
    font-size: 1rem;
    line-height: 1.5;
}

.footer-link:hover {
    color: white;
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid #1e293b;
    text-align: center;
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.5;
}

/* Language menu show overrides: ensure JS toggled `.show` makes it visible */
#lang-menu {
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

#lang-menu.invisible {
    visibility: hidden;
    opacity: 0;
}

#lang-menu.show {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Language menu styling tweaks per UX request */
#lang-menu {
    /* enforce a slightly wider, fixed menu width */
    min-width: 170px;
    width: 170px;
    background-color: #2D2D2D !important;
    padding: 6px 8px;
    border: none;
    /* remove outer divider look */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
    /* center the menu under the globe icon */
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-8px);
    transform-origin: top center;
    margin-top: 20px !important;
}

/* Language menu item styling */
.lang-menu-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    color: #FFFFFF;
    background: transparent;
    border: 2px solid transparent;
    /* keeps layout stable when active */
    border-radius: 6px;
    margin: 0;
    /* no visual separators/gaps between items */
}

.lang-menu-item.active {
    border-color: #3B82F6;
    /* blue border to indicate selected */
    outline: 2px solid #3B82F6;
    outline-offset: -2px;
    background-color: rgba(59, 130, 246, 0.06);
}

.lang-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* User Menu Styles */
.user-menu-container {
    position: relative;
}

.user-menu-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: var(--radius-lg);
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.user-menu-button:hover {
    background-color: rgba(51, 65, 85, 0.9);
    border-color: rgba(148, 163, 184, 0.6);
    transform: translateY(-1px);
}

.user-menu-button:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gradient-primary);
    overflow: hidden;
}

.avatar-icon {
    font-size: 24px;
    color: var(--white);
}

.username-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
}

.menu-arrow {
    font-size: 18px;
    color: var(--slate-400);
    transition: transform 0.2s;
}

.user-menu-button[aria-expanded="true"] .menu-arrow {
    transform: rotate(180deg);
}

.user-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 280px;
    background-color: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s;
    z-index: 50;
    overflow: hidden;
}

.user-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-header {
    padding: 16px;
    background: linear-gradient(to bottom right, rgba(139, 92, 246, 0.1), rgba(217, 70, 239, 0.1));
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar-large {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-primary);
    overflow: hidden;
}

.user-avatar-large .material-symbols-outlined {
    font-size: 32px;
    color: var(--white);
}

.user-details {
    flex: 1;
}

.user-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 2px;
}

.user-email {
    font-size: 13px;
    color: var(--slate-400);
}

.menu-divider {
    height: 1px;
    background-color: rgba(148, 163, 184, 0.1);
    margin: 0;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--slate-300);
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-size: 14px;
}

.menu-item:hover {
    background-color: rgba(148, 163, 184, 0.1);
    color: var(--white);
}

.menu-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--slate-400);
    transition: color 0.2s;
}

.menu-item:hover .material-symbols-outlined {
    color: var(--white);
}

.menu-item-arrow {
    margin-left: auto;
    font-size: 18px;
}

.logout-item {
    color: var(--error);
}

.logout-item:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.logout-item .material-symbols-outlined {
    color: var(--error);
}

.logout-item:hover .material-symbols-outlined {
    color: var(--error);
}

/* Button secondary style for Sign Up */
.btn-secondary {
    background-color: transparent;
    color: #FFFFFF;
    border: 1px solid #94A3B8;
    border-radius: 8px;
    padding: 0.625rem 1.5rem;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
    transition: all 0.3s;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary:hover {
    background-color: rgba(148, 163, 184, 0.1);
    border-color: #FFFFFF;
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* Preview Controls Overlay */
/* Preview Controls Overlay */
.preview-controls-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    /* Gradient background with blur (Red Box area style) */
    background: linear-gradient(to top,
            rgba(15, 23, 42, 0.95) 0%,
            rgba(15, 23, 42, 0.8) 60%,
            rgba(15, 23, 42, 0) 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    padding: 32px 16px 16px 16px;
    z-index: 5;

    display: flex;
    flex-direction: column;
    gap: 16px;

    border-bottom-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);

    /* Interaction Styles transform: scale(0.55);改這裡 */
    opacity: 0.15;
    transform: scale(0.45);
    transform-origin: bottom center;
    transition: opacity 0.3s ease 300ms, transform 0.3s ease 300ms;
}

.preview-controls-overlay:hover,
.preview-controls-overlay:focus-within {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0s;
}

.controls-top {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    /* Ensure buttons are clickable */
    pointer-events: auto;
}

/* Override existing preview-gallery style for the overlay context */
.preview-controls-overlay .preview-gallery {
    /* Reset outdated fixed styles if needed */
    height: auto;
    min-height: 100px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    padding: 0;
    /* Ensure gallery scrolls horizontally */
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 8px;
    width: 100%;
}

.preview-controls-overlay .thumbnail-grid {
    display: flex;
    flex-wrap: nowrap;
    /* Horizontal scroll */
    gap: 12px;
    justify-content: center;
    /* Center thumbnails if few */
    /* If many, justified start via scroll */
}

/* Adjust button style to be full width if preferred, similar to screenshot? 
   Screenshot shows a wide button: "Download". 
   Let's make it block width in the container or specific width. 
   User screenshot: Download button bar spans full width approx.
*/
.controls-top .btn-download {
    width: 100%;
    max-width: 600px;
    /* Max width for aesthetics */
    background-color: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: var(--radius-lg);
    transition: all 0.2s;
}

.controls-top .btn-download:hover {
    background-color: rgba(56, 189, 248, 0.2);
    border-color: rgba(56, 189, 248, 0.5);
    color: #fff;
}

/* Details button area */
.controls-bottom {
    /* Green Box area */
    position: relative;
    z-index: 10;
}

.details-toggle-btn {
    color: var(--slate-400);
}

.details-toggle-btn:hover {
    color: var(--white);
}

/* Adjust main preview image to be full height but allow space for overlay? 
   Actually overlay sits ON TOP. 
*/
.preview-main {
    padding: 0;
    /* Remove padding so image goes edge to edge or use minimal padding */
    overflow: hidden;
    /* contain overlay */
}

.preview-media {
    /* Max height might need adjustment so it isn't fully covered by overlay */
    max-height: calc(100vh - var(--header-height) - 48px);
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    /* Black bg for media area */
}