/* Image workspace component styles. Application navigation lives in site-shell.css. */
.image-page a{text-decoration:none}
.image-page .skip-link{position:fixed;top:-60px;left:18px;z-index:100;padding:10px 14px;background:#fff;color:#18181b;border:1px solid #e4e4e7;border-radius:5px}
.image-page .skip-link:focus{top:10px}

        :root {
            --bg-primary:#fff;
            --bg-secondary:#f6f6f7;
            --bg-tertiary:#eeeef0;
            --text-primary:#18181b;
            --text-secondary:#71717a;
            --text-muted:#71717a;
            --accent:#27272a;
            --accent-hover:#3f3f46;
            --border:#e4e4e7;
            --success: #10b981;
            --error: #ef4444;
            --radius:8px;
        }

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

        body {
            font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
            background:var(--bg-primary);
            color:var(--text-primary);
            min-height:100vh;
            line-height:1.5;
        }

        .api-input-group {
            display:flex;
            align-items:center;
            gap:10px;
        }

        .api-label {
            font-size:13px;
            color:var(--text-secondary);
        }

        .get-key-btn {
            padding:5px 14px;
            background:var(--bg-secondary);
            color:var(--text-primary);
            border-radius:var(--radius);
            font-size:14px;
            text-decoration:none;
            transition:all 0.15s;
            line-height:1.5;
            border:1px solid var(--border);
            box-sizing:border-box;
        }

        .get-key-btn:hover {
            border-color:var(--accent);
            color:var(--accent);
        }

        input, select, textarea {
            background:var(--bg-secondary);
            border:1px solid var(--border);
            border-radius:var(--radius);
            color:var(--text-primary);
            font-size:14px;
            transition:border-color 0.15s, background 0.15s;
        }

        input:focus, select:focus, textarea:focus {
            outline:none;
            border-color:var(--accent);
            box-shadow:none;
        }

        .api-input {
            width:220px;
            padding:8px 14px;
        }

        /* 主布局 */
        .main {
            display:grid;
            grid-template-columns:1fr 1fr;
            min-height:calc(100vh - 61px);
        }

        .panel {
            padding:32px;
        }

        .panel-left {
            border-right:1px solid var(--border);
            background:var(--bg-primary);
        }

        .panel-right {
            background:var(--bg-secondary);
            overflow-y:auto;
        }

        .section {
            margin-bottom:28px;
        }

        .section-title {
            font-size:13px;
            font-weight:600;
            color:var(--text-secondary);
            margin-bottom:12px;
        }

        /* 配置行 */
        .config-row {
            display:flex;
            gap:16px;
            flex-wrap:wrap;
        }

        .config-item {
            flex:1;
            min-width:120px;
        }

        .config-item label {
            display:block;
            font-size:13px;
            color:var(--text-secondary);
            margin-bottom:8px;
        }

        .config-item select {
            width:100%;
            padding:10px 14px;
            cursor:pointer;
            appearance:none;
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat:no-repeat;
            background-position:right 12px center;
        }

        /* 提示词区域 */
        .prompt-wrapper {
            position:relative;
        }

        .prompt-toolbar {
            position:absolute;
            top:8px;
            right:8px;
            display:flex;
            gap:4px;
            z-index:1;
        }

        .prompt-tool-btn {
            width:28px;
            height:28px;
            border:none;
            background:var(--bg-primary);
            border-radius:6px;
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:center;
            color:var(--text-muted);
            font-size:14px;
            transition:all 0.15s;
            box-shadow:none;
        }

        .prompt-tool-btn:hover {
            background:var(--accent);
            color:#fff;
        }

        .prompt-tool-btn.copied {
            background:var(--success);
            color:#fff;
        }

        .prompt-textarea {
            width:100%;
            height:120px;
            padding:14px;
            padding-right:80px;
            resize:none;
            font-family:inherit;
            line-height:1.6;
        }

        .prompt-textarea::placeholder {
            color:var(--text-muted);
        }

        /* 参考图片区域 */
        .images-row {
            display:flex;
            gap:12px;
            align-items:center;
            flex-wrap:wrap;
        }

        .add-image-btn {
            width:80px;
            height:80px;
            border:2px dashed var(--border);
            border-radius:var(--radius);
            background:var(--bg-secondary);
            cursor:pointer;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            gap:4px;
            transition:all 0.15s;
            flex-shrink:0;
        }

        .add-image-btn:hover {
            border-color:var(--accent);
            background:#f6f6f7;
        }

        .add-image-btn.disabled {
            opacity:0.4;
            cursor:not-allowed;
        }

        .add-image-btn.disabled:hover {
            border-color:var(--border);
            background:var(--bg-secondary);
        }

        .add-icon {
            font-size:24px;
            color:var(--text-muted);
            font-weight:300;
            line-height:1;
        }

        .add-text {
            font-size:11px;
            color:var(--text-muted);
        }

        .preview-item {
            width:80px;
            height:80px;
            position:relative;
            border-radius:var(--radius);
            overflow:hidden;
            flex-shrink:0;
        }

        .preview-item img {
            width:100%;
            height:100%;
            object-fit:cover;
        }

        .preview-item .preview-actions {
            position:absolute;
            inset:0;
            background:rgba(0, 0, 0, 0.5);
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            gap:4px;
            opacity:0;
            transition:opacity 0.15s;
        }

        .preview-item:hover .preview-actions {
            opacity:1;
        }

        .preview-item .preview-btn {
            width:28px;
            height:28px;
            border:none;
            background:rgba(255, 255, 255, 0.9);
            border-radius:6px;
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:12px;
            color:var(--text-primary);
            transition:all 0.15s;
        }

        .preview-item .preview-btn:hover {
            background:#fff;
            transform:scale(1.1);
        }

        .preview-item .preview-btn.copied {
            background:var(--success);
            color:#fff;
        }

        .preview-item .preview-btn.remove {
            background:rgba(239, 68, 68, 0.9);
            color:#fff;
        }

        .preview-item .preview-btn.remove:hover {
            background:var(--error);
        }

        .preview-item.uploading .preview-actions {
            display:none;
        }

        .preview-item.uploading::after {
            content:'';
            position:absolute;
            inset:0;
            background:rgba(255, 255, 255, 0.7);
        }

        .preview-item.uploading::before {
            content:'';
            position:absolute;
            top:50%;
            left:50%;
            width:20px;
            height:20px;
            margin:-10px 0 0 -10px;
            border:2px solid var(--border);
            border-top-color:var(--accent);
            border-radius:50%;
            animation:spin 0.6s linear infinite;
            z-index:1;
        }

        @keyframes spin {
            to { transform:rotate(360deg); }
        }

        /* 生成按钮 */
        .generate-btn {
            width:100%;
            padding:14px 24px;
            background:var(--accent);
            border:none;
            border-radius:var(--radius);
            color:#fff;
            font-size:15px;
            font-weight:500;
            cursor:pointer;
            transition:background 0.15s;
        }

        .generate-btn:hover:not(:disabled) {
            background:var(--accent-hover);
        }

        .generate-btn:disabled {
            opacity:0.5;
            cursor:not-allowed;
        }

        /* 结果面板 */
        .result-area {
            min-height:400px;
        }

        .placeholder {
            text-align:center;
            color:var(--text-muted);
            padding:60px 20px;
        }

        .placeholder-icon {
            font-size:48px;
            opacity:0.4;
            margin-bottom:12px;
        }

        .placeholder-text {
            font-size:14px;
        }

        /* 结果网格 */
        .results-grid {
            display:grid;
            grid-template-columns:repeat(2, 1fr);
            gap:12px;
            align-items:start;
        }

        .results-grid.single {
            grid-template-columns:1fr;
            max-width:400px;
        }

        /* 单个结果卡片 */
        .result-card {
            background:var(--bg-primary);
            border-radius:8px;
            overflow:hidden;
            box-shadow:none;
        }

        .result-card-content {
            position:relative;
            display:flex;
            align-items:center;
            justify-content:center;
            background:var(--bg-tertiary);
            min-height:80px;
        }

        /* 卡片加载状态 */
        .result-card-content.loading {
            flex-direction:column;
            gap:8px;
            padding:30px 20px;
        }

        .result-card-content.loading .card-spinner {
            width:24px;
            height:24px;
            border:2px solid var(--border);
            border-top-color:var(--accent);
            border-radius:50%;
            animation:spin 0.8s linear infinite;
        }

        .result-card-content.loading .card-loading-text {
            font-size:12px;
            color:var(--text-muted);
        }

        /* 卡片错误状态 */
        .result-card-content.error {
            flex-direction:column;
            gap:6px;
            padding:20px 15px;
        }

        .result-card-content.error .error-icon {
            font-size:24px;
            opacity:0.6;
        }

        .result-card-content.error .error-text {
            font-size:11px;
            color:var(--error);
            text-align:center;
            line-height:1.4;
            max-height:50px;
            overflow:hidden;
        }

        /* 卡片成功状态 */
        .result-card-content.success img {
            width:100%;
            height:auto;
            display:block;
            cursor:pointer;
            transition:opacity 0.2s;
        }

        .result-card-content.success img:hover {
            opacity:0.9;
        }

        /* 卡片操作按钮 */
        .result-card-actions {
            display:flex;
            gap:6px;
            padding:8px;
            justify-content:center;
        }

        .card-action-btn {
            flex:1;
            padding:6px 10px;
            border-radius:6px;
            font-size:11px;
            cursor:pointer;
            transition:all 0.15s;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:4px;
        }

        .card-action-btn.download {
            background:var(--success);
            border:none;
            color:#fff;
        }

        .card-action-btn.download:hover {
            background:#eeeef0;
        }

        .card-action-btn.regenerate {
            background:var(--bg-secondary);
            border:1px solid var(--border);
            color:var(--text-secondary);
        }

        .card-action-btn.regenerate:hover {
            border-color:var(--accent);
            color:var(--accent);
        }

        .card-action-btn:disabled {
            opacity:0.5;
            cursor:not-allowed;
        }

        /* 消耗信息 */
        .cost-info {
            margin-top:20px;
            padding:16px 20px;
            background:var(--bg-primary);
            border-radius:var(--radius);
            font-size:14px;
            color:var(--text-secondary);
        }

        .cost-row {
            display:flex;
            justify-content:space-between;
            padding:4px 0;
        }

        .cost-row span:last-child {
            color:var(--text-primary);
            font-weight:500;
        }

        /* 弹窗 */
        .modal-overlay {
            position:fixed;
            inset:0;
            background:rgba(0, 0, 0, 0.5);
            display:none;
            align-items:center;
            justify-content:center;
            z-index:1000;
            padding:20px;
        }

        .modal-overlay.active {
            display:flex;
        }

        .modal {
            background:var(--bg-primary);
            border-radius:8px;
            width:100%;
            max-width:700px;
            max-height:80vh;
            display:flex;
            flex-direction:column;
            box-shadow:0 20px 60px rgba(0, 0, 0, 0.3);
            animation:modalIn 0.2s ease;
        }

        @keyframes modalIn {
            from {
                opacity:0;
                transform:scale(0.95) translateY(10px);
            }
            to {
                opacity:1;
                transform:scale(1) translateY(0);
            }
        }

        .modal-header {
            padding:16px 20px;
            border-bottom:1px solid var(--border);
            display:flex;
            align-items:center;
            justify-content:space-between;
        }

        .modal-title {
            font-size:15px;
            font-weight:600;
        }

        .modal-close {
            width:32px;
            height:32px;
            border:none;
            background:var(--bg-secondary);
            border-radius:6px;
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:18px;
            color:var(--text-muted);
            transition:all 0.15s;
        }

        .modal-close:hover {
            background:var(--error);
            color:#fff;
        }

        .modal-body {
            padding:20px;
            flex:1;
            overflow:auto;
        }

        .modal-textarea {
            width:100%;
            height:300px;
            padding:16px;
            border:1px solid var(--border);
            border-radius:var(--radius);
            font-size:15px;
            line-height:1.8;
            resize:none;
            font-family:inherit;
        }

        .modal-footer {
            padding:16px 20px;
            border-top:1px solid var(--border);
            display:flex;
            justify-content:flex-end;
            gap:12px;
        }

        .modal-btn {
            padding:10px 20px;
            border-radius:var(--radius);
            font-size:14px;
            cursor:pointer;
            transition:all 0.15s;
        }

        .modal-btn-cancel {
            background:var(--bg-secondary);
            border:1px solid var(--border);
            color:var(--text-secondary);
        }

        .modal-btn-cancel:hover {
            border-color:var(--text-muted);
            color:var(--text-primary);
        }

        .modal-btn-confirm {
            background:var(--accent);
            border:none;
            color:#fff;
        }

        .modal-btn-confirm:hover {
            background:var(--accent-hover);
        }

        /* 图片预览弹窗 */
        .image-preview-modal {
            position:fixed;
            inset:0;
            background:rgba(0, 0, 0, 0.9);
            display:none;
            align-items:center;
            justify-content:center;
            z-index:1100;
            cursor:zoom-out;
        }

        .image-preview-modal.active {
            display:flex;
        }

        .image-preview-modal img {
            max-width:90%;
            max-height:90%;
            object-fit:contain;
            border-radius:8px;
        }

        .image-preview-close {
            position:absolute;
            top:20px;
            right:20px;
            width:40px;
            height:40px;
            border:none;
            background:rgba(255, 255, 255, 0.1);
            border-radius:50%;
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:24px;
            color:#fff;
            transition:all 0.15s;
        }

        .image-preview-close:hover {
            background:rgba(255, 255, 255, 0.2);
        }

        /* Toast 提示 */
        .toast {
            position:fixed;
            bottom:30px;
            left:50%;
            transform:translateX(-50%) translateY(100px);
            background:var(--text-primary);
            color:var(--bg-primary);
            padding:12px 24px;
            border-radius:var(--radius);
            font-size:14px;
            opacity:0;
            transition:all 0.3s ease;
            z-index:2000;
        }

        .toast.show {
            opacity:1;
            transform:translateX(-50%) translateY(0);
        }

        /* 响应式 */
        @media (max-width: 900px) {
            .main {
                grid-template-columns:1fr;
            }

            .panel-left {
                border-right:none;
                border-bottom:1px solid var(--border);
            }

            .api-input {
                width:100%;
            }

            .panel {
                padding:20px;
            }

            .results-grid {
                grid-template-columns:repeat(2, 1fr);
            }
        }

        @media (max-width: 500px) {
            .config-row {
                flex-direction:column;
                gap:12px;
            }

            .config-item {
                min-width:100%;
            }

            .results-grid {
                grid-template-columns:1fr;
            }
        }
    
:root{color-scheme:light;--bg:#f6f6f7;--panel:#fff;--text:#18181b;--muted:#71717a;--line:#e4e4e7;--accent:#27272a;--bg-primary:#fff;--bg-secondary:#f6f6f7;--bg-tertiary:#eeeef0;--text-primary:#18181b;--text-secondary:#71717a;--text-muted:#71717a;--border:#e4e4e7;--accent-hover:#3f3f46;--public-font:var(--sans)}
body{background:#fff;color:var(--text);font-family:var(--public-font);-webkit-font-smoothing:antialiased}button,input,select,textarea{font-family:inherit}a,button,input,select,textarea{touch-action:manipulation}:focus-visible{outline:2px solid #18181b;outline-offset:3px}a{transition:color .15s}a:hover{color:#18181b}.image-page .api-input-group{margin-left:auto;flex-wrap:wrap}.image-page .main{max-width:1680px;margin:auto;min-height:calc(100vh - 78px)}.image-page .panel{padding:38px 36px}.image-page .panel-right{background:#fff}.image-page input,.image-page select,.image-page textarea{background:#fff;border-color:#e4e4e7}.image-page input:focus,.image-page select:focus,.image-page textarea:focus{border-color:#a1a1aa;box-shadow:none}.image-page .get-key-btn{background:#18181b;color:#fff;border-color:#18181b;font-size:11px;padding:8px 15px}.image-page .get-key-btn:hover{background:#18181b;color:#fff}.image-page .api-label{font-size:11px;color:#71717a}.image-page .api-input{font-size:12px}.image-page .generate-btn,.image-page .btn-generate{background:#18181b;color:#fff;box-shadow:none}.image-page .generate-btn:hover,.image-page .btn-generate:hover{background:#18181b}.image-page .section-title{font-size:15px;letter-spacing:-.2px}.image-page *{scrollbar-width:thin}.image-page ::-webkit-scrollbar{display:block;width:5px;height:5px}.image-page ::-webkit-scrollbar-thumb{background:#eeeef0;border-radius:8px}
@media(max-width:760px){.image-page .api-input-group{width:100%;margin:0;gap:8px}.image-page .api-input{flex:1;min-width:80px;width:auto}.image-page .api-label{display:none}.image-page .panel{padding:24px 20px}.image-page .main{min-height:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.image-page .generate-btn:hover:not(:disabled){background:#18181b}

.image-page .config-row{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:760px){.image-page .config-row{grid-template-columns:1fr}}
@media(min-width:1100px){.image-page .main{grid-template-columns:minmax(0,560px) minmax(0,1fr)}}



/* Image generation sits inside the shared full-width application canvas. */
body[data-site-page="generator"] .generator-heading h1{font-size:28px;margin:0 0 8px;font-weight:600;letter-spacing:-.6px}
body[data-site-page="generator"] .generator-heading p{font-size:13px;margin:0;color:#52525b}
body[data-site-page="generator"] .generator-help{margin-top:22px;padding:20px 8px;border-top:1px solid #e4e4e7;font-size:12px;color:#52525b;line-height:1.8}
body[data-site-page="generator"] .generator-help p{font-size:12px;color:#18181b;font-weight:600;margin:0 0 8px}
body[data-site-page="generator"] .generator-help span{display:block}
body[data-site-page="generator"] .generator-help a{display:block;margin-top:14px;color:#18181b}
body[data-site-page="generator"] .api-input-group{margin:22px 0 24px;gap:12px;padding:14px 18px;border:1px solid #e4e4e7;border-radius:8px;background:#fff;flex-wrap:wrap}
body[data-site-page="generator"] .api-label{font-size:12px;color:#52525b;display:block}
body[data-site-page="generator"] .api-input{flex:1;max-width:520px;min-width:140px;width:auto;font-size:13px}
body[data-site-page="generator"] .main.generator-workspace{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr);margin:0;max-width:none;min-height:calc(100dvh - 280px);gap:22px}
body[data-site-page="generator"] .panel{padding:24px;border:1px solid #e4e4e7;border-radius:8px;background:#fff;min-width:0}
body[data-site-page="generator"] .panel-right{background:#f6f6f7}
body[data-site-page="generator"] .config-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
body[data-site-page="generator"] .config-item{min-width:0}
body[data-site-page="generator"] .config-item label{font-size:12px;color:#52525b}
body[data-site-page="generator"] .config-item select{font-size:13px;width:100%;min-width:0;text-overflow:ellipsis}
body[data-site-page="generator"] .prompt-textarea{min-height:230px;font-size:14px;line-height:1.8}
body[data-site-page="generator"] .generate-btn{background:#18181b;color:#fff;border:1px solid #18181b}
body[data-site-page="generator"] .generate-btn:hover:not(:disabled){background:#18181b}
body[data-site-page="generator"] .get-key-btn{background:#fff;color:#18181b;border-color:#e4e4e7}
body[data-site-page="generator"] .get-key-btn:hover{background:#f6f6f7;color:#18181b}
body[data-site-page="generator"] .result-area{min-height:320px}
body[data-site-page="generator"] .placeholder{min-height:320px;color:#52525b}
body[data-site-page="generator"] .placeholder-icon{font-size:32px;color:#71717a}
body[data-site-page="generator"] .add-image-btn{padding:0;font:inherit;color:#52525b;background:#f6f6f7}
@media(max-width:1100px){body[data-site-page="generator"] .main.generator-workspace{grid-template-columns:1fr}body[data-site-page="generator"] .result-area,body[data-site-page="generator"] .placeholder{min-height:260px}}
@media(max-width:760px){body[data-site-page="generator"] .generator-heading h1{font-size:24px}body[data-site-page="generator"] .panel{padding:20px}body[data-site-page="generator"] .api-input-group{padding:12px;margin:20px 0}body[data-site-page="generator"] .config-row{grid-template-columns:1fr 1fr}body[data-site-page="generator"] .config-item{min-width:0}body[data-site-page="generator"] .api-input{width:100%;max-width:none}body[data-site-page="generator"] .results-grid{grid-template-columns:1fr}}
@media(max-width:390px){body[data-site-page="generator"] .config-row{grid-template-columns:1fr}}

/* Tool forms stay white and compact; image results retain their own content colors. */
body.image-page[data-site-page="generator"]{background:#f6f6f7}
body[data-site-page="generator"] .panel{border-radius:8px;box-shadow:none}
body[data-site-page="generator"] .panel-right{background:#fff}
body[data-site-page="generator"] .generate-btn{background:#18181b;border-color:#18181b}
body[data-site-page="generator"] .generate-btn:hover:not(:disabled){background:#3f3f46}
body[data-site-page="generator"] .get-key-btn{background:#fff;color:#18181b;border-color:#e4e4e7}
body[data-site-page="generator"] .get-key-btn:hover{background:#eeeef0;color:#18181b}

@media(max-width:520px){
 body[data-site-page="generator"] .api-input-group{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px}
 body[data-site-page="generator"] .api-input-group .api-label{grid-column:1;grid-row:1}
 body[data-site-page="generator"] .api-input-group #accountLink{grid-column:2;grid-row:1;justify-self:end}
 body[data-site-page="generator"] .api-input-group #accountStatus{grid-column:1/-1;grid-row:2;min-width:0;line-height:1.7}
}
body[data-site-page="generator"] .generator-heading h1{font-size:26px}
body[data-site-page="generator"] .result-card{border:1px solid #e4e4e7;box-shadow:none}
body[data-site-page="generator"] .prompt-tool-btn{border:1px solid #e4e4e7;box-shadow:none}
body[data-site-page="generator"] input:focus,body[data-site-page="generator"] select:focus,body[data-site-page="generator"] textarea:focus{border-color:#a1a1aa;box-shadow:0 0 0 2px #18181b0a}
body[data-site-page="generator"] .add-image-btn{background:#f6f6f7}
@media(max-width:760px){body[data-site-page="generator"] .generator-heading h1{font-size:23px}}