/* Text-to-image / image-to-image tool pages */
.gen-page-lead{color:var(--site-text-secondary,#94a3b8);text-align:center;max-width:36rem;margin:-.5rem auto 1.25rem;line-height:1.6;font-size:1rem}
.gen-page-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1rem;margin-bottom:1.5rem}
.gen-page-link{font-size:.9rem;font-weight:600;color:var(--site-text-secondary,#94a3b8);text-decoration:none;padding:.35rem .85rem;border-radius:999px;border:1px solid var(--site-border,rgba(71,85,105,.42))}
.gen-page-link:hover{color:var(--site-text,#f8fafc);border-color:var(--site-border-highlight,rgba(100,116,139,.52))}
.gen-page-link.is-active{color:var(--site-text,#f8fafc);background:var(--site-surface-elevated,#272f42);border-color:var(--site-border-highlight,rgba(100,116,139,.52));cursor:default}

body.site-page.generate-page .upper-module {
    width: 100%;
    margin-left: 0;
}

body.site-page.generate-page .upper-module-content {
    margin-left: auto;
    margin-right: auto;
}

/* 生图输入卡片 — 深色 surface，与页面背景协调 */
body.site-page.generate-page .generate-card {
    background: var(--surface-fill, var(--site-surface, #1b2336));
    border: 1px solid var(--site-border, rgba(71, 85, 105, .42));
    box-shadow: var(--elev-inset, inset 0 1px 0 rgba(255, 255, 255, .07)), var(--elev-shadow-sm, 0 4px 16px rgba(0, 0, 0, .36));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.site-page.generate-page .prompt-input {
    color: var(--site-text, #f8fafc);
}

body.site-page.generate-page .prompt-input::placeholder {
    color: var(--site-text-secondary, #94a3b8);
    font-style: normal;
    opacity: 1;
}

body.site-page.generate-page .option-select {
    background-color: var(--site-surface-elevated, #272f42);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color: var(--site-text, #f8fafc);
    border: 1px solid var(--site-border-subtle, rgba(51, 65, 85, .35));
}

body.site-page.generate-page .option-select:hover,
body.site-page.generate-page .option-select:focus {
    background-color: var(--site-surface-elevated, #272f42);
    border-color: var(--site-border-highlight, rgba(100, 116, 139, .52));
}

/* 自定义下拉（mobile-custom-select）— 覆盖浅色 trigger 变量 */
body.site-page.generate-page {
    --select-trigger-bg: var(--site-surface-elevated, #272f42);
    --select-trigger-bg-hover: #2f384c;
    --select-trigger-bg-focus: #353e50;
    --select-trigger-text: var(--site-text, #f8fafc);
    --select-trigger-arrow: var(--site-text-secondary, #94a3b8);
}

body.site-page.generate-page .mobile-custom-select-trigger {
    border: 1px solid var(--site-border-subtle, rgba(51, 65, 85, .35));
    box-shadow: none;
}

body.site-page.generate-page .mobile-custom-select-trigger:hover {
    border-color: var(--site-border-highlight, rgba(100, 116, 139, .52));
}

body.site-page.generate-page .mobile-custom-select-trigger:focus {
    border-color: var(--site-border-highlight, rgba(100, 116, 139, .52));
}

body.site-page.generate-page .public-toggle-label {
    color: var(--site-text-secondary, #94a3b8);
}

body.site-page.generate-page .public-toggle .toggle-slider {
    background-color: var(--site-border, rgba(71, 85, 105, .55));
}

body.site-page.generate-page .public-toggle input:checked + .toggle-slider {
    background-color: var(--site-accent, #94a3b8);
}

/* 图生图 — 上传区与提示词字体（参考深色 UI） */
body.site-page.generate-page[data-gen-mode="img2img"] .source-image-upload-area {
    border-color: var(--site-border, rgba(71, 85, 105, .55));
    background: rgba(148, 163, 184, .06);
}

body.site-page.generate-page[data-gen-mode="img2img"] .source-image-upload-area:hover {
    border-color: var(--site-border-highlight, rgba(100, 116, 139, .65));
    background: rgba(148, 163, 184, .1);
}

body.site-page.generate-page[data-gen-mode="img2img"] .source-image-upload-area.drag-over,
body.site-page.generate-page[data-gen-mode="img2img"] .source-image-upload-area.drag-active {
    border-color: var(--site-border-highlight, rgba(100, 116, 139, .75));
    background: rgba(148, 163, 184, .12);
}

body.site-page.generate-page[data-gen-mode="img2img"] .source-image-upload-area .upload-text {
    color: var(--site-text, #f8fafc);
    font-weight: 600;
}

body.site-page.generate-page[data-gen-mode="img2img"] .source-image-upload-area .upload-hint {
    color: var(--site-text-secondary, #94a3b8);
}

body.site-page.generate-page[data-gen-mode="img2img"] .upload-icon-wrapper {
    color: var(--site-text-secondary, #94a3b8);
}

body.site-page.generate-page[data-gen-mode="img2img"] .prompt-input::placeholder {
    color: var(--site-muted, #64748b);
    font-style: italic;
}

.generate-result-section{
    margin:1.25rem auto 0;
    max-width:min(100%,22rem);
    padding:1rem;
    border-radius:var(--site-radius,16px);
    border:1px solid var(--site-border,rgba(71,85,105,.42));
    background:var(--site-surface,#1b2336);
    box-shadow:0 4px 24px rgba(0,0,0,.18);
    scroll-margin-top:calc(var(--site-nav-h, 52px) + 1.5rem);
    scroll-margin-bottom:calc(var(--site-nav-h, 52px) + 1.5rem);
}
.generate-result-section[hidden]{display:none!important}
.generate-result-section.is-visible{border-color:var(--site-border-highlight,rgba(100,116,139,.55))}
.generate-result-state{min-height:0;margin-bottom:0;color:var(--site-text-secondary,#94a3b8);font-size:.95rem}
.generate-result-state.is-loading{display:flex;align-items:center;justify-content:center;gap:.65rem;min-height:2.5rem;margin-bottom:.75rem}
.generate-result-state.is-error{color:#f87171;text-align:center;margin-bottom:.75rem}
.generate-result-grid{display:flex;justify-content:center}
.generate-result-card{position:relative;width:100%;max-width:20rem;border-radius:12px;overflow:hidden;border:1px solid var(--site-border,rgba(71,85,105,.42));background:var(--site-surface-elevated,#272f42);cursor:pointer}
.generate-result-card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--site-surface-elevated,#272f42)}
.generate-result-card img.loading{opacity:.55}
.generate-result-card img.error{opacity:.45;object-fit:contain}
.generate-result-card-actions{display:flex;gap:.5rem;padding:.65rem}
.generate-result-download{flex:1;font-size:.8rem;padding:.4rem .6rem;border-radius:8px;border:1px solid var(--site-border,rgba(71,85,105,.42));background:transparent;color:var(--site-text,#f8fafc);cursor:pointer}

.public-gallery-hint{
    text-align:center;
    max-width:36rem;
    margin:0 auto 1rem;
    font-size:.875rem;
    color:var(--site-text-secondary,#94a3b8);
    line-height:1.5;
}

/* 全屏生成中蒙版 */
.generate-progress-overlay{
    position:fixed;
    inset:0;
    z-index:10050;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.5rem;
}
.generate-progress-overlay[hidden]{display:none!important}
.generate-progress-backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.72);
    backdrop-filter:blur(4px);
}
.generate-progress-dialog{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.1rem;
    min-width:min(100%,16rem);
    padding:2rem 2.25rem 1.75rem;
    border-radius:var(--site-radius,16px);
    border:1px solid var(--site-border,rgba(71,85,105,.42));
    background:var(--site-surface,#1b2336);
    box-shadow:var(--site-shadow,0 24px 48px rgba(0,0,0,.45));
}
.generate-progress-close{
    position:absolute;
    top:.65rem;
    right:.75rem;
    width:2rem;
    height:2rem;
    border:none;
    border-radius:999px;
    background:transparent;
    color:var(--site-text-secondary,#94a3b8);
    font-size:1.5rem;
    line-height:1;
    cursor:pointer;
}
.generate-progress-close:hover{color:var(--site-text,#f8fafc);background:rgba(148,163,184,.12)}
.generate-progress-spinner{
    width:3rem;
    height:3rem;
    border:3px solid rgba(148,163,184,.25);
    border-top-color:var(--site-text,#f8fafc);
    border-radius:50%;
    animation:generateProgressSpin .85s linear infinite;
}
.generate-progress-text{
    margin:0;
    font-size:1rem;
    font-weight:600;
    color:var(--site-text,#f8fafc);
    text-align:center;
}
@keyframes generateProgressSpin{to{transform:rotate(360deg)}}

.message-center-modal-content{max-width:800px;width:90%;max-height:90vh}
.message-center-modal-body{padding:20px;overflow-y:auto;max-height:calc(90vh - 80px)}
.message-center-btn.pulse-attention{animation:messageCenterPulse 1s ease-in-out 3}
@keyframes messageCenterPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.4)}50%{box-shadow:0 0 0 8px rgba(251,191,36,0)}}