:root {
    --studio-blue: #196fa8;
    --studio-cyan: #1aa8a1;
    --studio-emerald: #167767;
    --studio-ink: #18343a;
    --studio-muted: #667b7d;
    --studio-line: rgba(123, 159, 156, .25);
    --studio-shadow: 0 24px 70px rgba(13, 50, 51, .16), 0 2px 8px rgba(13, 50, 51, .07);
}

html {
    background: #dbe7e3;
}

body {
    min-width: 320px;
    color: var(--studio-ink);
    background:
        linear-gradient(180deg, rgba(231, 241, 237, .66), rgba(218, 231, 227, .94)),
        url('/assets/editor-backgrounds/image-editor-travel-v1.png') center top / cover fixed no-repeat;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 5%, rgba(255, 239, 203, .36), transparent 30%),
        radial-gradient(circle at 84% 22%, rgba(35, 142, 141, .16), transparent 34%),
        linear-gradient(180deg, rgba(238, 246, 242, .25), rgba(221, 234, 230, .72));
}

.app-container {
    position: relative;
    z-index: 1;
}

.header {
    position: sticky;
    top: 0;
    color: #effcf8;
    border: 0;
    border-bottom: 1px solid rgba(210, 241, 235, .15);
    background: rgba(14, 43, 46, .84);
    box-shadow: 0 12px 38px rgba(12, 43, 44, .2);
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
}

.header::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: min(1260px, calc(100% - 40px));
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(62, 206, 192, .65), rgba(255, 205, 120, .45), transparent);
    transform: translateX(-50%);
}

.header-content {
    width: min(1260px, calc(100% - 40px));
    max-width: none;
    height: 72px;
    padding: 0;
}

.logo {
    color: #f1fcf9;
}

.logo-icon {
    width: 43px;
    height: 43px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 14px;
    background: linear-gradient(145deg, #147e75, #2677a0 62%, #d59d5b);
    box-shadow: 0 10px 25px rgba(10, 50, 54, .28), inset 0 1px rgba(255,255,255,.2);
}

.logo-copy {
    color: #f3fcfa;
}

.logo-copy small {
    color: #8bc9c2;
}

.history-toggle-btn {
    color: #effbf8;
    border-color: rgba(199, 235, 228, .22);
    border-radius: 12px;
    background: rgba(255,255,255,.08);
}

.history-toggle-btn:hover {
    color: #fff;
    border-color: rgba(140, 229, 218, .38);
    background: rgba(255,255,255,.14);
}

.main-content {
    width: min(1320px, 100%);
    max-width: none;
    padding: 28px 30px 58px;
}

.page-header {
    min-height: 245px;
    margin-bottom: 19px;
    padding: 40px 43px;
    border: 1px solid rgba(225, 244, 239, .26);
    border-radius: 28px;
    background:
        linear-gradient(90deg, rgba(5, 34, 39, .9) 0%, rgba(8, 48, 52, .75) 44%, rgba(8, 49, 54, .22) 72%, rgba(5, 31, 35, .42) 100%),
        url('/assets/editor-backgrounds/image-editor-travel-v1.png') center 46% / cover no-repeat;
    box-shadow: 0 30px 85px rgba(13, 49, 48, .24), inset 0 1px rgba(255,255,255,.08);
}

.page-header::before {
    width: 360px;
    height: 360px;
    top: -255px;
    right: 12%;
    border-color: rgba(138, 232, 221, .34);
    box-shadow: 0 0 0 50px rgba(57, 190, 184, .035), 0 0 0 100px rgba(255, 205, 120, .022);
}

.page-header::after {
    width: 220px;
    height: 220px;
    right: -80px;
    bottom: -130px;
    background: rgba(255, 190, 103, .13);
    filter: blur(7px);
}

.page-header-copy {
    max-width: 700px;
}

.page-eyebrow {
    color: #7fe4da;
}

.page-title {
    max-width: 650px;
    color: #fff;
    font-size: clamp(31px, 3.5vw, 47px);
    line-height: 1.2;
    text-shadow: 0 4px 25px rgba(0, 24, 29, .28);
}

.page-description {
    max-width: 670px;
    color: rgba(230, 247, 243, .76);
    font-size: 13px;
}

.feature-pill {
    color: #d8f5ef;
    border-color: rgba(186, 239, 228, .24);
    background: rgba(5, 46, 50, .32);
    backdrop-filter: blur(9px);
}

.hero-visual {
    width: 208px;
    height: 136px;
}

.hero-layer {
    border-color: rgba(255,255,255,.34);
    background: linear-gradient(145deg, rgba(234, 255, 247, .26), rgba(53, 137, 141, .13));
    box-shadow: 0 20px 38px rgba(0, 29, 33, .3);
}

.hero-layer::before {
    background:
        linear-gradient(145deg, rgba(34, 164, 153, .78), rgba(41, 108, 153, .65)),
        url('/assets/editor-backgrounds/image-editor-travel-v1.png') center / cover;
}

.hero-ai {
    background: linear-gradient(135deg, #137d73, #2b7ba2 70%, #d39555);
    box-shadow: 0 15px 34px rgba(0, 33, 36, .32);
}

.mode-tabs {
    border-color: rgba(132, 170, 166, .32);
    background: rgba(242, 249, 246, .82);
    box-shadow: 0 12px 32px rgba(13, 49, 48, .1);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.mode-tab {
    color: #647e7c;
}

.mode-tab:hover {
    color: #0d776d;
    background: rgba(232, 246, 241, .92);
}

.mode-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #147f74, #247ca3);
    box-shadow: 0 9px 22px rgba(18, 111, 108, .24);
}

.editor-workspace {
    gap: 21px;
}

.unified-card {
    border-color: rgba(161, 190, 184, .4);
    border-radius: 22px;
    background: rgba(250, 253, 251, .88);
    box-shadow: var(--studio-shadow);
    backdrop-filter: blur(22px) saturate(112%);
    -webkit-backdrop-filter: blur(22px) saturate(112%);
}

.unified-card:hover {
    border-color: rgba(93, 156, 149, .5);
    box-shadow: 0 28px 80px rgba(13, 50, 51, .2), 0 3px 9px rgba(13, 50, 51, .07);
}

.card-heading {
    border-bottom-color: rgba(143, 178, 172, .28);
}

.card-kicker {
    color: #13786f;
}

.card-title {
    color: #1d4141;
}

.card-meta {
    color: #567a77;
    border-color: rgba(145, 180, 174, .3);
    background: rgba(232, 245, 240, .75);
}

.upload-label {
    color: #365d5b;
}

.upload-area {
    min-height: 182px;
    color: #4d6b69;
    border-color: rgba(109, 156, 151, .5);
    border-radius: 17px;
    background:
        linear-gradient(145deg, rgba(243, 250, 247, .95), rgba(232, 244, 239, .84)),
        url('/assets/editor-backgrounds/image-editor-travel-v1.png') center / cover;
}

.upload-area::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .055;
    background: url('/assets/editor-backgrounds/image-editor-travel-v1.png') center / cover;
}

.upload-area > * {
    position: relative;
    z-index: 1;
}

.upload-area::after {
    background: rgba(32, 151, 141, .08);
}

.upload-area:hover,
.upload-area.dragover {
    border-color: #278d84;
    background: linear-gradient(145deg, #f4fbf8, #e7f5f0);
    box-shadow: inset 0 0 0 4px rgba(23, 127, 116, .055);
}

.upload-area.has-image {
    background: rgba(225, 239, 234, .9);
}

.upload-icon {
    color: #fff;
    background: linear-gradient(135deg, #147e73, #267ba1 75%, #d4a15e);
    box-shadow: 0 10px 24px rgba(20, 111, 106, .23);
}

.upload-text {
    color: #284e4d;
}

.upload-hint {
    color: #748b88;
}

.prompt-textarea,
#genModelSelect {
    color: #1f4646 !important;
    border-color: rgba(126, 169, 162, .4) !important;
    background: rgba(244, 250, 247, .88) !important;
}

.prompt-textarea:focus,
#genModelSelect:focus {
    border-color: #349b91 !important;
    background: #fbfefc !important;
    box-shadow: 0 0 0 4px rgba(23, 127, 116, .1) !important;
}

.btn-primary {
    background: linear-gradient(135deg, #137d72, #277ca1);
    box-shadow: 0 11px 25px rgba(19, 116, 112, .24);
}

.btn-primary:hover {
    box-shadow: 0 15px 31px rgba(19, 116, 112, .3);
}

.btn-secondary {
    color: #4e6f6c;
    border-color: rgba(132, 171, 165, .38);
    background: rgba(244, 249, 247, .86);
}

.btn-secondary:hover {
    color: #0b756b;
    border-color: #71aaa4;
    background: #edf8f4;
}

#resultArea,
.empty-result {
    min-height: 490px;
}

.empty-result {
    color: #728a87;
    border-color: rgba(125, 163, 157, .42);
    background:
        linear-gradient(145deg, rgba(245, 251, 248, .92), rgba(231, 243, 238, .88)),
        url('/assets/editor-backgrounds/image-editor-travel-v1.png') center / cover;
}

.empty-icon {
    background: linear-gradient(135deg, #147e73, #287da1 70%, #cf9857);
    box-shadow: 0 13px 30px rgba(18, 111, 108, .24);
}

.result-item {
    border-color: rgba(135, 173, 167, .36);
    background: rgba(241, 248, 245, .9);
}

.result-item:hover {
    border-color: #6ba99f;
    box-shadow: 0 14px 30px rgba(14, 77, 75, .15);
}

.btn-view {
    color: #186f96;
    border-color: #a9cad8;
    background: #edf7fb;
}

.btn-download {
    color: #08796b;
    border-color: #9ed5ca;
    background: #ecfaf6;
}

.loading-overlay,
.history-overlay {
    background: rgba(5, 30, 32, .68);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.spinner {
    border-top-color: #62e3d5;
    box-shadow: 0 0 34px rgba(67, 213, 199, .28);
}

.history-sidebar {
    border-left-color: rgba(215, 239, 234, .34);
    background: rgba(238, 247, 243, .96);
    box-shadow: -28px 0 80px rgba(5, 31, 32, .3);
    backdrop-filter: blur(22px);
}

.history-header {
    background:
        linear-gradient(115deg, rgba(6, 39, 42, .92), rgba(17, 112, 104, .86)),
        url('/assets/editor-backgrounds/image-editor-travel-v1.png') center / cover;
}

.history-item {
    border-color: rgba(151, 185, 179, .35);
    background: rgba(255,255,255,.86);
}

.history-item:hover {
    border-color: #79afa7;
}

@media (max-width: 1040px) {
    body {
        background-position: center top;
    }
}

@media (max-width: 768px) {
    body {
        background:
            linear-gradient(180deg, rgba(229, 240, 236, .78), rgba(219, 232, 228, .97)),
            url('/assets/editor-backgrounds/image-editor-travel-v1.png') center top / auto 520px no-repeat;
    }
    .header {
        padding-top: env(safe-area-inset-top);
    }
    .header-content {
        width: 100%;
        height: 64px;
        padding: 0 13px;
    }
    .main-content {
        width: 100%;
        padding: 12px 9px calc(36px + env(safe-area-inset-bottom));
    }
    .page-header {
        min-height: 325px;
        padding: 30px 20px;
        align-items: flex-end;
        border-radius: 21px;
        background:
            linear-gradient(180deg, rgba(5, 35, 39, .12), rgba(5, 36, 40, .92) 78%),
            url('/assets/editor-backgrounds/image-editor-travel-v1.png') center / cover no-repeat;
    }
    .page-title {
        font-size: 30px;
    }
    .mode-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .mode-tabs::-webkit-scrollbar {
        display: none;
    }
    .mode-tab {
        min-width: 128px;
        flex: 1 0 auto;
    }
    .unified-card {
        padding: 17px 14px;
        border-radius: 18px;
    }
    #resultArea,
    .empty-result {
        min-height: 315px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}