/* image_agent.html style block 1 */
#topBannerWrapper, html body .chatbot-cards { display:none !important; }
.markdown-content { font-size:13px; line-height:1.6; color:#444; }
.markdown-content h1, .markdown-content h2, .markdown-content h3 { font-size:14px; margin:8px 0 4px; font-weight:600; }
.markdown-content p { margin-bottom:8px; }
.markdown-content ul, .markdown-content ol { padding-left:20px; margin-bottom:8px; }
.result-container { padding-right:0; }
.result-container::-webkit-scrollbar { width:6px; }
.result-container::-webkit-scrollbar-track { background:transparent; }
.result-container::-webkit-scrollbar-thumb { background-color:#ccc; border-radius:3px; }
.apple-action-btn { width:auto; display:flex; align-items:center; justify-content:flex-start; gap:6px; height:auto; background:transparent; border:none; border-radius:0; padding:6px 0; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; font-size:13px; font-weight:500; color:#666; cursor:pointer; transition:all 0.2s ease; box-shadow:none; outline:none; position:relative; }
.apple-action-btn:hover { background:transparent; transform:none; color:#000; opacity:1; }
.apple-action-btn:hover i.fa-magic, .apple-action-btn:hover i.fa-redo-alt { color:#000; }
.apple-action-btn:active { background:transparent; transform:scale(0.98); opacity:0.8; }
.apple-action-btn i { transition:color 0.2s; color:#999; }
.apple-action-btn .action-icon-svg { width:14px; height:14px; flex-shrink:0; color:#9ca3af; transition:color 0.2s ease, transform 0.2s ease; }
.apple-action-btn:hover .action-icon-svg { color:#111827; }
.apple-action-btn.delete-action-btn:hover .action-icon-svg { color:#ef4444; }
.canvas-edit-entry-btn { color:#111; font-weight:600; }
.canvas-edit-entry-btn i { color:#111 !important; }
.canvas-edit-entry-btn:hover { color:#111; }
.result-card { background:transparent; border:none; border-radius:0; margin-bottom:24px; overflow:visible; box-shadow:none; transition:none; }
.result-card-header { padding:8px 0; background:transparent; cursor:pointer; display:flex; justify-content:flex-start; align-items:center; border-bottom:none; user-select:none; gap:8px; }
.result-card-header:hover { background:transparent; opacity:0.8; }
.section-title { font-size:15px; font-weight:600; color:#111; letter-spacing:-0.01em; line-height:18px; }
.section-toggle-icon { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 18px; font-size:20px; line-height:1; color:#666; transition:transform 0.2s; margin-left:2px; margin-top:-8px; transform-origin:center; }
.result-card-header:hover .section-toggle-icon { color:#333; }
.result-card.expanded .result-card-header { border-bottom-color:transparent; }
.result-card-body { padding:0; max-height:0; overflow-y:hidden; opacity:0; transition:max-height 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.3s; border-left:2px solid #e5e5e5; margin-left:4px; padding-left:16px; }
.result-card.expanded .result-card-body { max-height:none; opacity:1; overflow-y:visible; padding-top:8px; padding-bottom:8px; }
.overall-card.expanded .result-card-body { max-height:210px; overflow-y:auto; }
.images-card.expanded .result-card-body { max-height:210px; overflow-y:auto; }
.images-card .result-card-header { justify-content:space-between; align-items:center; gap:12px; }
.image-spec-header-main { display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.image-spec-toolbar { display:none; align-items:center; gap:8px; flex-shrink:0; background:#fff; padding-left:12px; }
.image-spec-toolbar .edit-actions { display:none; }
.spec-edit-hint { color:#ef4444; font-size:10px; font-weight:500; line-height:14px; white-space:nowrap; }
.images-card[data-spec-editable="true"] .image-spec-toolbar { display:flex; }
.images-card.editing-toolbar .image-spec-toolbar .edit-actions { display:flex; gap:8px; }
.images-card.editing-toolbar .image-spec-toolbar .spec-edit-btn { display:none; }
.image-spec-toolbar .spec-edit-btn { display:inline-flex; align-items:center; justify-content:center; height:22px; min-width:36px; padding:0 9px; border:1px solid #111; border-radius:5px; background:#111; color:#fff; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; font-size:11px; font-weight:600; line-height:1; cursor:pointer; opacity:1; box-shadow:0 1px 2px rgba(0,0,0,0.14); transition:background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease; appearance:none; }
.image-spec-toolbar .spec-edit-btn:hover { background:#000; border-color:#000; color:#fff; opacity:1; transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,0.18); }
.image-spec-toolbar .spec-edit-btn:active { transform:translateY(0); box-shadow:0 1px 3px rgba(0,0,0,0.16); }
.image-spec-toolbar .spec-edit-btn:focus-visible { outline:2px solid rgba(0,0,0,0.18); outline-offset:2px; }
.markdown-editor { width:100%; min-height:0; height:auto; max-height:none; padding:12px; border:1px solid #d7dde8; border-radius:6px; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; font-size:13px; resize:none; margin-top:10px; line-height:1.75; color:#1f2937; background:#fff; outline:none; transition:border-color 0.2s, box-shadow 0.2s; display:none; overflow:hidden; white-space:pre-wrap; }
.markdown-editor:focus { border-color:#9fb2d8; box-shadow:0 0 0 3px rgba(99, 126, 180, 0.14); }
.spec-content-body.editing .markdown-editor { display:block; }
.spec-content-body.editing .markdown-view { display:none; }
.spec-content-body .edit-actions { display:none; }
.spec-content-body.editing .edit-actions { display:flex; gap:8px; }
.spec-content-body.editing .spec-edit-btn { display:none; }
.single-spec-item.editing .markdown-editor { display:block; }
.single-spec-item.editing .markdown-content { display:none; }
.result-card-body { scrollbar-width:thin; scrollbar-color:#ccc transparent; }
.result-card-body::-webkit-scrollbar { width:6px; }
.result-card-body::-webkit-scrollbar-track { background:transparent; }
.result-card-body::-webkit-scrollbar-thumb { background-color:#ccc; border-radius:3px; }
.section-toggle-icon { transition:transform 0.3s ease; color:#999; }
.section-toggle-icon.rotated { transform:rotate(-90deg); }
.section-subtitle { font-size:12px; color:#888; margin-top:2px; font-weight:normal; }
.spec-content-body { max-height:none; overflow-y:visible; padding-right:0; }
.image-specs-container { max-height:none; overflow-y:visible; opacity:1; }
.single-spec-item { border:1px solid #eee; border-radius:8px; margin-bottom:8px; overflow:hidden; transition:all 0.2s ease; }
.single-spec-item:hover { border-color:#ddd; }
.spec-item-header { padding:10px 12px; background:#fdfdfd; cursor:pointer; display:flex; align-items:center; user-select:none; }
.spec-item-header:hover { background:#f8f8f8; }
.spec-index-circle { width:20px; height:20px; background:#007bff; color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; margin-right:10px; font-weight:bold; }
.spec-item-content { flex:1; min-width:0; margin-right:10px; }
.spec-item-title { font-size:13px; font-weight:500; color:#333; margin-bottom:2px; display:flex; align-items:center; gap:6px; }
.spec-item-desc { font-size:11px; color:#888; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spec-edit-btn { opacity:0.6; transition:opacity 0.2s; font-size:11px; color:#999; cursor:pointer; }
.spec-edit-btn:hover { opacity:1; color:#007bff; }
.spec-item-header:hover .spec-edit-btn { opacity:1; }
.spec-toggle-btn { color:#bbb; font-size:12px; transition:transform 0.3s ease; transform:rotate(-90deg); }
.single-spec-item.expanded .spec-toggle-btn { transform:rotate(0deg); }
.spec-details-body { display:none; padding:12px; background:#fff; border-top:1px solid #f0f0f0; font-size:13px; color:#555; }
.single-spec-item.expanded .spec-details-body { display:block; animation:slideDown 0.2s ease-out; }
@keyframes slideDown {
from { opacity:0; transform:translateY(-5px); }
to { opacity:1; transform:translateY(0); }
}
.detail-block { margin-bottom:0; }
.detail-label { font-weight:600; margin-bottom:6px; color:#333; }
.detail-list { padding-left:18px; margin:0; }
.detail-list li { margin-bottom:4px; }
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.9); z-index:9999; display:none; justify-content:center; align-items:center; opacity:0; transition:opacity 0.3s ease; }
.modal-overlay.active { display:flex; opacity:1; }
.modal-content-wrapper { position:relative; max-width:90%; max-height:90%; display:flex; justify-content:center; align-items:center; transform:scale(0.95); transition:transform 0.3s ease; }
.modal-overlay.active .modal-content-wrapper { transform:scale(1); }
#modalImage { max-width:100%; max-height:90vh; object-fit:contain; border-radius:4px; box-shadow:0 4px 20px rgba(0, 0, 0, 0.5); }
.modal-close-btn { position:absolute; top:-25px; right:-25px; background:rgba(255, 255, 255, 0.15); border:1px solid rgba(255, 255, 255, 0.2); color:white; font-size:20px; width:40px; height:40px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s ease; backdrop-filter:blur(4px); }
.modal-close-btn:hover { background:rgba(255, 255, 255, 0.3); }
.modal-download-btn { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); background:rgba(0, 0, 0, 0.6); color:#fff; padding:8px 20px; border-radius:20px; text-decoration:none; font-size:14px; backdrop-filter:blur(4px); border:1px solid rgba(255, 255, 255, 0.2); transition:all 0.2s ease; display:flex; align-items:center; gap:8px; z-index:20; }
.modal-download-btn:hover { background:rgba(0, 0, 0, 0.8); transform:translateX(-50%) scale(1.05); color:#fff; }
.modal-controls { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; z-index:20; }
.modal-controls .modal-download-btn { position:static; transform:none; margin:0; }
.modal-controls .modal-download-btn:hover { transform:scale(1.05); }
.modal-nav-btn { background:rgba(0, 0, 0, 0.6); border:1px solid rgba(255, 255, 255, 0.2); color:white; font-size:14px; width:36px; height:36px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s ease; backdrop-filter:blur(4px); }
.modal-nav-btn:hover { background:rgba(0, 0, 0, 0.8); transform:scale(1.1); }
@media (max-width:768px) {
.modal-close-btn { top:-50px; right:0; }
.modal-nav-btn { width:36px; height:36px; font-size:14px; }
}
:root { --bg-color:#ffffff; --sidebar-bg:#f8f9fa; --text-color:#333333; --text-secondary:#666666; --accent-color:#007bff; --border-color:#e9ecef; --input-bg:#f8f9fa; --card-bg:#f8f9fa; --border-radius:21px; --box-shadow:0 3px 11px rgba(0, 0, 0, 0.05); }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background-color:var(--bg-color); color:var(--text-color); display:flex; flex-direction:column; height:100vh; overflow:hidden; font-size:88%; }
.content-container { display:flex; flex:1; position:relative; overflow:hidden; height:100%; }
.main-content { flex-direction:column; height:100%; overflow-y:auto; overflow-x:hidden; padding:30px; border-radius:0; background-color:#ffffff; background-size:100% 100%, 24px 24px; background-repeat:no-repeat, repeat; width:auto; }
@media (max-width:480px) {
.main-content { margin-left:90px; padding:13px; }
}
.chatbot { display:flex; flex-direction:column; width:80%; max-width:950px; margin:0 auto; background-color:#ffffff; border-radius:12px; overflow:visible; box-shadow:0 2px 10px rgba(0, 0, 0, 0.1); border:1px solid #e0e0e0; margin-bottom:5px; min-height:200px; transform:scale(1.1); transform-origin:bottom center; pointer-events:auto; position:relative; z-index:10; }
.input-area { flex:1; display:flex; flex-direction:column; padding:16px 16px 0; }
@media (max-width:768px) {
.control-bar { flex-direction:column; gap:12px; }
.options-group { justify-content:center; }
.action-group { justify-content:center; }
.chatbot { width:95%; height:auto; min-height:200px; }
.connector { margin:5px 0; }
.text-input-container { width:100%; }
.text-input-container textarea { min-height:60px; padding:10px; }
}
@media (max-width:480px) {
.project-cards { grid-template-columns:1fr; }
.chatbot { width:100%; border-radius:8px; }
.input-area { padding:10px 10px 0; }
.prompt-card { width:50px; height:70px; font-size:12px; }
.option-btn { padding:4px 8px; font-size:11px; }
.generate-btn { width:28px; height:28px; }
}
.text-input-container { flex:1; }
.text-input-container textarea { width:100%; height:100%; min-height:80px; background-color:#ffffff; border:1px solid #ffffff; border-radius:8px; color:var(--text-secondary); font-size:14px; line-height:1.5; padding:20px; resize:none; outline:none; }
.text-input-container textarea::placeholder { color:#999; }
.control-bar { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; }
.options-group { display:flex; gap:5px; flex-wrap:wrap; align-items:flex-end; }
.options-group > * { align-self:flex-end; }
.option-btn { display:flex; align-items:center; gap:4px; background-color:#f0f0f057; border:1px solid #e0e0e01c; border-radius:6px; color:#333; padding:6px 10px; font-size:12px; cursor:pointer; transition:all 0.2s; }
.option-btn:hover { background-color:#e8e8e8; }
.option-btn.active { background-color:#007bffcc; color:#fff; }
.option-btn i { font-size:12px; }
.action-group { display:flex; align-items:center; gap:10px; }
.credits { display:flex; align-items:center; gap:4px; color:#333; padding:6px 10px; border-radius:6px; font-size:12px; }
.input-actions-right { position:absolute; right:16px; bottom:14px; display:flex; align-items:center; gap:12px; }
.generate-btn { width:35px; height:35px; border-radius:50%; background:#000; color:white; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.3s ease; box-shadow:0 2px 8px rgba(0, 123, 255, 0.3); }
.generate-btn:hover { transform:scale(1.05) translateY(-2px); }
.generate-btn:active { transform:scale(0.95); }
.generate-btn:disabled, .generate-btn.loading { opacity:0.65; cursor:not-allowed; pointer-events:none; transform:none; box-shadow:none; }
.chatbot:focus-within { box-shadow:0 4px 16px rgba(0, 123, 255, 0.15); }
.model-selector-container { position:relative; display:inline-block; }
.model-dropdown { position:fixed; width:320px; background-color:#fff; border-radius:12px; box-shadow:0 -4px 20px rgba(0, 0, 0, 0.12); z-index:1200; overflow:hidden; display:none; border:1px solid #eaeaea; padding:0; }
#language-selector-container .model-dropdown { max-height:320px; overflow-y:auto; }
.model-tabs { display:flex; background-color:#f8f9fa; border-bottom:1px solid #eaeaea; }
.model-tab { flex:1; display:flex; align-items:center; justify-content:center; padding:12px 16px; cursor:pointer; transition:all 0.2s ease; border-bottom:2px solid transparent; gap:8px; }
.model-tab:hover { background-color:#e9ecef; }
.model-tab.active { background-color:white; border-bottom-color:#007bff; color:#007bff; }
.model-tab.disabled { opacity:0.5; cursor:not-allowed; pointer-events:none; color:#999; background-color:#f8f9fa; }
.model-tab i { font-size:14px; }
.model-tab span { font-size:13px; font-weight:500; }
.model-content { display:none; padding:8px 0; }
.model-content.active { display:block; }
.model-dropdown.show { display:block; animation:fadeIn 0.2s ease-out; }
@keyframes fadeIn {
from { opacity:0; }
to { opacity:1; }
}
.model-option { display:flex; align-items:center; padding:10px 14px; cursor:pointer; transition:all 0.22s ease; margin:10px 8px; border-radius:14px; border:1px solid transparent; }
.model-option:hover { transform:translateY(-1px); border-color:rgba(0, 0, 0, 0.08); box-shadow:0 10px 24px rgba(15, 23, 42, 0.06); }
.model-option.is-disabled { opacity:0.42; cursor:not-allowed; pointer-events:none; transform:none !important; box-shadow:none !important; filter:grayscale(0.12); }
.model-icon { margin-right:12px; width:36px; height:36px; display:flex; justify-content:center; align-items:center; background:#f8f9fa; border-radius:8px; flex-shrink:0; overflow:hidden; }
.model-icon i { font-size:16px; }
.model-icon-image { width:100%; height:100%; object-fit:cover; }
.model-info { flex:1; min-width:0; }
.model-name { font-size:13px; font-weight:500; color:#333; margin-bottom:4px; }
.model-description { font-size:12px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.model-time { font-size:12px; color:#007bff; font-weight:600; margin-left:12px; white-space:nowrap; }
.model-option .model-checkbox { margin-right:14px; width:16px; height:16px; -webkit-appearance:none; appearance:none; border:1px solid #c9c9c9; border-radius:3px; background:transparent; position:relative; cursor:pointer; background-position:center; background-repeat:no-repeat; background-size:12px 12px; outline:none; transition:border-color 0.2s ease; }
.model-option .model-checkbox:checked { background:transparent; border-color:#007bff; background-image:url('data:image/svg+xml;utf8,'); }
.model-option[data-value="6"] .model-icon { background:linear-gradient(135deg, #fff1cc 0%, #ffe4f2 100%); box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.55); }
.model-option[data-value="6"] .model-name { display:flex; align-items:center; gap:8px; }
.model-option[data-value="6"] .model-name::after { content:"推荐"; display:inline-flex; align-items:center; justify-content:center; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:700; letter-spacing:0.3px; color:#9d174d; background:rgba(255, 255, 255, 0.9); box-shadow:0 4px 10px rgba(236, 72, 153, 0.10); }
.icon-btn { width:32px; height:32px; border:none; background:none; color:#666; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s ease; }
.icon-btn:hover { background-color:#f0f0f0; color:#007bff; }
@media (max-width:768px) {
.control-bar { flex-direction:column; gap:12px; }
.options-group { justify-content:center; }
.action-group { justify-content:center; }
}
.options-group .icon-btn, .options-group #model-selector { width:32px; height:32px; display:flex; align-items:center; justify-content:center; padding:0; background:none; border:none; color:#666; border-radius:8px; position:relative; }
.options-group .icon-btn::after, .options-group #model-selector::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background-color:rgba(17, 24, 39, 0.92); color:#fff; padding:6px 10px; border-radius:6px; font-size:12px; line-height:1.4; white-space:nowrap; box-shadow:0 4px 12px rgba(0, 0, 0, 0.15); opacity:0; visibility:hidden; transition:opacity 0.2s ease; pointer-events:none; z-index:10000; min-width:max-content; }
.options-group > .file-input-wrapper .icon-btn::after { left:0; transform:translateX(0); }
.options-group .icon-btn:hover::after, .options-group #model-selector:hover::after, .file-input-wrapper:hover .icon-btn::after { opacity:1; visibility:visible; }
.options-group .icon-btn:hover, .options-group #model-selector:hover { background-color:#f0f0f0; color:#007bff; transform:none; }
.options-group .icon-btn i, .options-group #model-selector i { font-size:16px; }
.options-group > .file-input-wrapper .icon-btn i { transform:translateY(-1px); }
.image-preview-container { margin:0; min-height:45px; overflow:visible; animation:fadeIn 0.3s ease-out; display:flex; align-items:center; }
@keyframes slideDown {
from { opacity:0; transform:translateY(-10px); }
to { opacity:1; transform:translateY(0); }
}
.preview-grid { display:flex; gap:10px; flex-wrap:nowrap; }
.preview-item { position:relative; width:64px; height:64px; border-radius:8px; overflow:hidden; border:1px solid #e0e0e0; transition:all 0.2s ease; flex-shrink:0; }
.preview-item img { width:100%; height:100%; object-fit:cover; }
.preview-item .remove-btn { position:absolute; top:4px; right:4px; background:rgba(0, 0, 0, 0.6); color:white; border:none; border-radius:50%; width:16px; height:16px; font-size:10px; cursor:pointer; display:none; align-items:center; justify-content:center; transition:all 0.2s ease; }
.preview-item:hover .remove-btn { display:flex; }
.preview-item .remove-btn:hover { background:rgba(220, 53, 69, 0.8); }
.preview-item.loading::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:20px; height:20px; border:2px solid #f3f3f3; border-top:2px solid #007bff; border-radius:50%; animation:spin 1s linear infinite; }
.preview-item.loading img { opacity:0.3; }
@keyframes spin {
0% { transform:translate(-50%, -50%) rotate(0deg); }
100% { transform:translate(-50%, -50%) rotate(360deg); }
}
.upload-toast { position:fixed; top:20px; left:calc(50% + 130px); padding:12px 16px; border-radius:6px; font-size:14px; font-weight:500; z-index:10000; transform:translate(-50%, -10px); opacity:0; transition:transform 0.25s ease, opacity 0.25s ease, left 0.3s ease; box-shadow:0 4px 12px rgba(0, 0, 0, 0.15); }
body.sidebar-collapsed .upload-toast { left:calc(50% + 30px); }
@media (max-width:768px) {
.upload-toast { left:50% !important; }
}
.upload-toast.show { transform:translate(-50%, 0); opacity:1; }
.upload-toast.success, .upload-toast.error, .upload-toast.warning { background:rgba(0, 0, 0, 0.6); color:#fff; border:1px solid rgba(255, 255, 255, 0.2); }
.control-bar .file-input-wrapper::after { display:none; }
.file-input-wrapper::before { display:none; }
.chatbot-container { position:fixed; bottom:20px; left:var(--sidebar-expanded-width, var(--sidebar-width, 260px)); right:0; width:auto; z-index:300; display:flex; flex-direction:column; align-items:center; transform:scale(0.85); transform-origin:bottom center; pointer-events:none; }
body.sidebar-collapsed .chatbot-container { left:60px; }
.chatbot-container.empty-state { position:relative; left:0 !important; right:auto !important; width:100%; bottom:auto; top:auto; transform:scale(0.85); transform-origin:top center; margin:55px auto; padding-bottom:180px; overflow-x:hidden; }
.center-title-container { display:none; text-align:center; margin-bottom:40px; color:#333; pointer-events:none; }
.chatbot-container.empty-state .center-title-container { display:block; }
.chatbot-container:not(.empty-state) .chatbot-cards { display:none !important; }
.chatbot-container:not(.empty-state) .recent-projects-section { display:none !important; }
.chatbot-container:not(.empty-state) .excellent-examples-section { display:none !important; }
.center-title-main { font-size:28px; font-weight:600; margin:0 0 16px 0; letter-spacing:2px; color:#000; }
.center-title-sub { font-size:28px; font-weight:500; margin:0 0 20px 0; letter-spacing:4px; font-family:"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background:#000; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.disclaimer-text { position:fixed; bottom:5px; left:calc(50% + 130px); right:auto; transform:translateX(-50%) scale(0.85); transform-origin:bottom center; text-align:center; font-size:12px; color:#999; z-index:999; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:8px; width:auto; white-space:nowrap; pointer-events:none; flex-wrap:wrap; }
.disclaimer-text a { pointer-events:auto; }
body.sidebar-collapsed .disclaimer-text { left:calc(50% + 30px); }
@media (max-width:768px) {
.disclaimer-text { left:0 !important; width:100%; padding:0 10px; flex-wrap:wrap; }
.center-title-main { font-size:32px !important; margin-bottom:8px !important; letter-spacing:2px !important; }
.center-title-sub { font-size:20px !important; letter-spacing:1px !important; }
.center-title-container { margin-bottom:20px !important; }
}
.chatbot { display:flex; flex-direction:column; width:100%; max-width:950px; background-color:#ffffff; border-radius:18px; box-shadow:0 4px 20px rgba(0, 0, 0, 0.08); border:1px solid #e6e6e6; padding:12px; min-height:auto; pointer-events:auto; position:relative; z-index:10; }
.result-container { width:90%; max-width:950px; margin:10px auto; max-height:none; overflow-y:visible; background:#ffffff; border-radius:12px; padding:20px; box-shadow:0 4px 15px rgba(0, 0, 0, 0.05); border:1px solid #e0e0e0; scrollbar-width:none; scrollbar-color:transparent transparent; }
.result-container::-webkit-scrollbar { width:8px; }
.result-container::-webkit-scrollbar-track { background:#f1f1f1; border-radius:4px; }
.result-container::-webkit-scrollbar-thumb { background:#d1d1d1; border-radius:4px; }
.result-container::-webkit-scrollbar-thumb:hover { background:#b1b1b1; }
@media (max-width:768px) {
.chatbot-container { left:0 !important; right:0 !important; width:96% !important; bottom:10px; margin:0 auto; transform:none !important; }
body.sidebar-collapsed .chatbot-container { left:0 !important; }
.sidebar { position:fixed; left:calc(-1 * var(--sidebar-expanded-width, var(--sidebar-width, 260px))); height:100%; z-index:1000; }
.sidebar.active { left:0; }
.main-content { margin-left:0 !important; padding:10px; width:100%; }
h1 { font-size:24px; }
.subtitle { font-size:14px; }
.disclaimer-text { font-size:10px; flex-wrap:wrap; padding:0 10px; }
.mobile-header { display:flex !important; }
.mobile-close-btn { display:block !important; }
.collapse-btn { display:none !important; }
}
@media (max-width:480px) {
.chatbot-container { width:98% !important; bottom:5px; }
.chatbot { width:100%; border-radius:12px; padding:8px; }
.input-row { gap:8px; }
.upload-widget, .preview-item { width:60px; height:60px; }
}
.disclaimer-links { display:flex; justify-content:center; align-items:center; gap:8px; }
.disclaimer-links a { color:#9ca3af; text-decoration:none; transition:color 0.2s; }
.disclaimer-links a:hover { color:#666; text-decoration:underline; }
.disclaimer-links .separator { color:#e5e7eb; font-size:10px; }
.main-content { padding-bottom:240px; }
.input-row { display:flex; flex-direction:row; gap:12px; min-height:auto; margin-bottom:30px; align-items:flex-end; }
.upload-wrapper { position:relative; display:flex; align-items:center; margin-right:8px; }
.upload-wrapper.has-images:hover .image-preview-container { display:flex !important; }
.upload-count-badge { position:absolute; top:-6px; right:-6px; background-color:#000; color:white; border-radius:50%; width:23px; height:23px; font-size:11px; font-weight:bold; display:flex; align-items:center; justify-content:center; border:2px solid #fff; z-index:5; }
.image-preview-container { position:absolute; bottom:100%; left:0; margin-bottom:12px; background:white; padding:12px; border-radius:12px; box-shadow:0 4px 20px rgba(0, 0, 0, 0.15); border:1px solid #eee; z-index:1000; display:none; width:max-content; max-width:420px; flex-wrap:wrap; gap:10px; animation:fadeIn 0.2s ease-out; }
.upload-wrapper::after { content:''; position:absolute; bottom:100%; left:0; width:100%; height:15px; background:transparent; }
.image-preview-container::-webkit-scrollbar { display:none; }
.upload-widget { display:flex; flex-direction:column; align-items:center; justify-content:center; width:50px; height:50px; background-color:#f8f9fa; border:1px dashed #d1d5db; border-radius:6px; cursor:pointer; transition:all 0.2s ease; flex-shrink:0; color:#666; gap:2px; position:relative; }
.upload-widget:hover::after { content:attr(data-tooltip); position:absolute; bottom:110%; left:50%; transform:translateX(-15%); background:rgba(0, 0, 0, 0.8); color:white; padding:6px 10px; border-radius:6px; font-size:13px; line-height:1.4; white-space:nowrap; z-index:1000; pointer-events:none; }
.upload-wrapper.has-images .upload-widget:hover::after { display:none; }
.preview-item { position:relative; width:64px; height:64px; border-radius:8px; overflow:hidden; border:1px solid #e0e0e0; transition:all 0.2s ease; flex-shrink:0; }
.upload-widget:hover { background-color:#f0f7ff; border-color:#000; color:#000; }
.upload-icon-box { font-size:14px; }
.upload-widget span { font-size:10px; font-weight:500; }
.text-input-wrapper { flex-grow:1; display:flex; flex-direction:column; }
.text-input-wrapper textarea { width:100%; height:100%; min-height:50px; border:none; outline:none; resize:none; font-size:15px; line-height:1.5; color:#333; background:transparent; padding:8px 0; }
.text-input-wrapper textarea::placeholder { color:#aaa; }
.control-bar { display:flex; justify-content:space-between; align-items:center; padding:5px 0px 0; }
.left-controls { display:flex; align-items:center; gap:12px; }
.model-selector-container { position:relative; }
.model-btn-trigger { display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid #e0e0e0; border-radius:8px; font-size:12px; color:#333; font-weight:500; cursor:pointer; transition:all 0.2s; background-color:transparent; }
.model-btn-trigger:hover { background-color:#f8f9fa; border-color:#d0d0d0; }
.model-icon-small { width:20px; height:20px; display:flex; align-items:center; justify-content:center; margin-right:2px; border-radius:4px; overflow:hidden; }
.model-icon-small img { width:100%; height:100%; object-fit:contain; }
.model-icon-small i { font-size:14px; }
.model-btn-trigger i { font-size:14px; }
.setting-tag { display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid #e0e0e0; border-radius:8px; font-size:12px; color:#333; font-weight:500; cursor:pointer; transition:all 0.2s; }
.setting-tag:hover { background-color:#f8f9fa; border-color:#d0d0d0; }
.setting-tag .divider { color:#ddd; font-weight:300; }
.right-controls { display:flex; align-items:center; gap:16px; }
.credits-text { font-size:12px; color:#888; }
.generate-btn { width:36px; height:36px; border-radius:50%; color:white; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; }
.generate-btn:hover { transform:scale(1.05); }
.generate-btn i { font-size:16px; }
#model-selector { position:relative; }
#model-selector::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background-color:rgba(17, 24, 39, 0.92); color:#fff; padding:6px 10px; border-radius:6px; font-size:12px; line-height:1.4; white-space:nowrap; box-shadow:0 4px 12px rgba(0, 0, 0, 0.15); opacity:0; visibility:hidden; transition:opacity 0.2s ease; pointer-events:none; z-index:10000; }
#model-selector:hover::after { opacity:1; visibility:visible; }
.model-dropdown { position:absolute; bottom:100%; left:0; margin-bottom:12px; background:#fff; border-radius:12px; box-shadow:0 4px 20px rgba(0, 0, 0, 0.15); padding:0; display:none; z-index:10001; border:1px solid #eaeaea; width:max-content; min-width:320px; }
.model-dropdown.show { display:block; animation:fadeIn 0.2s ease-out; }
.settings-container { position:relative; }
.settings-popup { position:absolute; bottom:100%; left:0; margin-bottom:9px; background:#fff; border-radius:13px; box-shadow:0 9px 25px rgba(15, 23, 42, 0.12); padding:14px 16px; display:none; z-index:10001; border:1px solid #eaeaea; width:min(558px, calc(100vw - 52px)); max-width:min(558px, calc(100vw - 52px)); }
.settings-popup.show { display:block; animation:fadeIn 0.2s ease-out; }
.settings-section { margin-bottom:14px; }
.settings-section:last-child { margin-bottom:0; }
.section-title { font-size:12px; color:#333; margin-bottom:9px; font-weight:600; }
.resolution-selector { display:flex; background:#f5f5f7; border-radius:11px; padding:4px; gap:4px; flex-wrap:wrap; }
.res-option { flex:1; text-align:center; padding:7px 9px; font-size:11px; color:#666; cursor:pointer; border-radius:9px; transition:all 0.2s; font-weight:600; min-width:65px; letter-spacing:0.1px; }
.res-option.active { background:#fff; color:#111827; box-shadow:0 5px 12px rgba(15, 23, 42, 0.07); }
.resolution-selector.image2-layout { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:9px; padding:0; background:transparent; }
.resolution-selector.image2-layout .res-option { min-width:0; padding:11px 9px; border:1px solid rgba(15, 23, 42, 0.06); background:linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(242, 245, 249, 0.98) 100%); box-shadow:none; }
.resolution-selector.image2-layout .res-option:hover { transform:translateY(-1px); box-shadow:0 7px 16px rgba(15, 23, 42, 0.06); }
.resolution-selector.image2-layout .res-option.active { background:linear-gradient(135deg, #111827 0%, #2b3a67 100%); color:#fff; border-color:transparent; box-shadow:0 9px 20px rgba(17, 24, 39, 0.18); }
.ratio-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); align-items:flex-end; gap:7px 5px; }
.ratio-item { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; min-width:0; }
.ratio-box { width:auto; height:14px; border:1.25px solid #d1d5db; border-radius:3px; transition:all 0.2s; display:flex; align-items:center; justify-content:center; box-sizing:border-box; }
.ratio-box.smart { height:18px; width:18px; border:1.25px solid #d1d5db; }
.count-selector { display:flex; align-items:center; gap:11px; padding:7px 0; }
.count-slider { flex:1; -webkit-appearance:none; height:4px; background:#e0e0e0; border-radius:2px; outline:none; }
.count-slider::-webkit-slider-thumb { -webkit-appearance:none; width:13px; height:13px; background:#fff; border:2px solid #d1d5db; border-radius:50%; cursor:pointer; box-shadow:0 2px 4px rgba(0, 0, 0, 0.1); transition:transform 0.1s; }
.count-display { width:38px; height:26px; display:flex; align-items:center; justify-content:center; border:1px solid #e0e0e0; border-radius:6px; font-size:12px; color:#333; font-weight:500; }
.group-count-settings-section { display:none !important; }
.group-count-selector { display:none; box-sizing:border-box; width:100%; max-width:100%; margin-bottom:8px; pointer-events:auto; overflow:visible; }
.group-count-selector.is-active { display:block; }
.group-count-summary { display:none; }
.group-count-summary strong { color:#111827; font-weight:700; }
.group-count-grid { display:flex; flex-wrap:wrap; gap:6px; width:100%; padding-top:2px; }
.group-count-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:rgba(248, 250, 252, 0.86); border:1px solid rgba(226, 232, 240, 0.9); min-height:28px; box-shadow:none; transition:padding 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.group-count-chip-copy { display:flex; align-items:center; min-width:0; flex:0 1 auto; }
.group-count-chip-label { font-size:11px; color:#334155; font-weight:600; white-space:nowrap; letter-spacing:0.03px; }
.group-count-chip-note { display:none; }
.group-count-chip-controls { display:inline-flex; align-items:center; gap:0; flex-shrink:0; min-width:18px; }
.group-count-chip-btn { width:0; height:18px; border:0 solid transparent; border-radius:999px; background:#ffffff; color:#64748b; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:none; font-size:10px; line-height:1; transition:all 0.18s ease; opacity:0; overflow:hidden; pointer-events:none; transform:scale(0.86); }
.group-count-chip-btn:hover:not(:disabled) { border-color:#d7dee8; background:#f8fafc; color:#0f172a; }
.group-count-chip-btn:disabled { opacity:0.42; cursor:not-allowed; box-shadow:none; background:#fbfdff; }
.group-count-chip-value { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; text-align:center; font-size:11px; color:#0f172a; font-weight:700; border-radius:999px; background:#ffffff; border:1px solid rgba(226, 232, 240, 0.95); transition:all 0.18s ease; }
.ratio-item span { font-size:8px; color:#666; margin-top:2px; white-space:nowrap; }
.ratio-item.active .ratio-box { border-color:#000; border-width:2px; }
.ratio-item.active span { color:#000; font-weight:600; }
.ratio-box i { font-size:12px; color:#666; }
.ratio-item.active .ratio-box i { color:#000; }
.dimensions-input { display:flex; align-items:center; gap:9px; background:#fff; }
.dimensions-input input { flex:1; border:1px solid #e0e0e0; border-radius:8px; padding:6px 9px; font-size:11px; text-align:center; outline:none; color:#333; background:#fff; }
.dimensions-input input:focus { border-color:#007bff; }
.dimensions-input i { color:#999; font-size:10px; }
.chat-content-area { position:absolute; top:30px; left:var(--sidebar-expanded-width, var(--sidebar-width, 260px)); right:0; bottom:260px; overflow-y:auto; padding:10px; display:none; flex-direction:column; align-items:center; gap:80px; z-index:100; scroll-behavior:smooth; }
body:not(.empty-state-active) .chat-content-area.active { display:flex; }
@media (max-width:768px) {
.chat-content-area { left:0; padding:10px; top:60px; bottom:260px; }
}
body.sidebar-collapsed .chat-content-area { left:60px; }
.chat-message { display:flex; width:100%; opacity:0; transform:translateY(20px); animation:slideUp 0.3s forwards; justify-content:center; }
@keyframes slideUp {
to { opacity:1; transform:translateY(0); }
}
.chat-message.assistant { flex-direction:column; align-items:center; max-width:100%; }
.progress-card { border-radius:12px; padding:14px; width:80%; max-width:800px; margin:0 auto; }
.progress-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.progress-icon { width:24px; height:24px; background:#f0f4ff; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#007bff; font-size:11px; }
.progress-icon.spinning { animation:spin 1s linear infinite; }
.progress-title-text { font-size:13px; font-weight:600; color:#333; }
.progress-subtitle { font-size:11px; color:#888; margin-top:1px; }
.progress-steps-container { position:relative; padding:0 8px; margin-top:18px; }
.progress-bar-bg { position:absolute; top:10px; left:8px; right:8px; height:2px; background:#f5f5f5; z-index:1; }
.progress-bar-fill { position:absolute; top:10px; left:8px; height:2px; background:#007bff; z-index:2; transition:width 0.5s ease; width:0%; }
.progress-steps { display:flex; justify-content:space-between; position:relative; z-index:3; }
.step-item { display:flex; flex-direction:column; align-items:center; gap:5px; position:relative; }
.step-dot { width:20px; height:20px; background:#fff; border:2px solid #e0e0e0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; color:#bbb; transition:all 0.3s ease; font-weight:600; }
.step-item.active .step-dot { border-color:#007bff; background:#fff; color:#007bff; box-shadow:0 0 0 3px rgba(0, 123, 255, 0.1); }
.step-item.completed .step-dot { border-color:#007bff; background:#007bff; color:#fff; }
.step-label { font-size:10px; color:#aaa; font-weight:500; text-align:center; width:50px; line-height:1.2; }
.step-item.active .step-label { color:#007bff; font-weight:600; }
.step-item.completed .step-label { color:#555; }
.result-container { width:80%; max-width:800px; display:flex; flex-direction:column; gap:10px; }
.overall-spec-card { display:flex; align-items:center; cursor:pointer; transition:all 0.2s ease; flex-wrap:wrap; }
.spec-icon-circle { width:32px; height:32px; background:#f7f9fc; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; color:#555; flex-shrink:0; }
.spec-content { flex:1; min-width:0; }
.spec-main-title { font-size:13px; font-weight:600; color:#333; margin-bottom:2px; display:flex; align-items:center; justify-content:space-between; }
.spec-edit-btn { color:#999; font-size:11px; cursor:pointer; padding:4px; transition:color 0.2s; }
.spec-edit-btn:hover { color:#007bff; }
.spec-sub-desc { font-size:11px; color:#888; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.section-header { display:flex; align-items:center; gap:8px; margin:6px 0 2px 0; padding:0 4px; }
.section-icon-box { width:24px; height:24px; background:transparent; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#666; font-size:12px; }
.section-title { font-size:13px; font-weight:600; color:#444; }
.section-subtitle { font-size:10px; color:#999; margin-left:auto; }
.single-spec-item { background:#fff; border:1px solid #e6e6e6; border-radius:8px; margin-bottom:8px; overflow:hidden; transition:all 0.2s ease; }
.single-spec-item:hover { box-shadow:0 2px 6px rgba(0, 0, 0, 0.04); }
.spec-item-header { padding:12px 16px; display:flex; align-items:center; gap:12px; cursor:pointer; background:#fff; }
.spec-index-circle { width:24px; height:24px; background:#f5f5f5; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:#333; }
.spec-item-content { flex:1; }
.spec-item-title { font-size:14px; font-weight:600; color:#333; margin-bottom:2px; display:flex; align-items:center; gap:6px; }
.spec-item-desc { font-size:12px; color:#666; line-height:1.4; }
.spec-edit-btn { color:#999; font-size:12px; padding:4px; cursor:pointer; }
.spec-edit-btn:hover { color:#007bff; }
.spec-toggle-btn { color:#999; transition:transform 0.3s ease; padding:4px; font-size:12px; }
.single-spec-item.expanded .spec-toggle-btn { transform:rotate(180deg); }
.spec-details-body { padding:0 16px 16px 52px; display:none; border-top:1px solid transparent; }
.single-spec-item.expanded .spec-details-body { display:block; border-top-color:#f5f5f5; padding-top:12px; }
.detail-block { margin-bottom:8px; }
.detail-label { font-size:12px; font-weight:600; color:#333; margin-bottom:2px; }
.detail-content { font-size:12px; color:#555; line-height:1.5; }
.detail-list { list-style:none; padding:0; margin:0; }
.detail-list li { position:relative; padding-left:10px; margin-bottom:2px; color:#666; }
.detail-list li::before { content:"•"; position:absolute; left:0; color:#999; }
@keyframes shimmer {
0% { background-position:-200% 0; }
100% { background-position:200% 0; }
}
.shimmer-text { background:linear-gradient(344deg, #c7c7c7 0%, #444 50%, #2c3626 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:shimmer 2.5s infinite linear; }
.loading-placeholder { width:100%; height:100%; background:linear-gradient(90deg, #e0e0e0 25%, #cccccc 50%, #e0e0e0 75%); background-size:200% 100%; animation:loading-shimmer 2.5s infinite linear; }
@keyframes loading-shimmer {
0% { background-position:200% 0; }
100% { background-position:-200% 0; }
}
.chatbot-cards { display:flex; justify-content:space-between; width:100%; max-width:1050px; margin:16px auto 0; gap:16px; pointer-events:auto; }
.chatbot-card { position:relative; flex:1; height:80px; border-radius:12px; overflow:hidden; cursor:pointer; box-shadow:0 4px 12px rgba(0, 0, 0, 0.06); transition:transform 0.2s ease, box-shadow 0.2s ease; background:#fff; }
.chatbot-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0, 0, 0, 0.12); }
.chatbot-card.is-disabled { cursor:not-allowed; opacity:1; filter:none; }
.chatbot-card.is-disabled:hover { transform:none; box-shadow:0 4px 12px rgba(0, 0, 0, 0.06); }
.chatbot-card img { width:100%; height:100%; object-fit:cover; display:block; }
.chatbot-card-title { position:absolute; bottom:0; left:0; right:0; padding:30px 12px 12px; background:linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%); color:white; font-size:15px; font-weight:600; text-align:center; text-shadow:0 1px 3px rgba(0, 0, 0, 0.8); letter-spacing:0.5px; }
.universal-edit-card { background:linear-gradient(135deg, #ffb347 0%, #ff8a1d 45%, #ff6a00 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; isolation:isolate; }
.universal-edit-card::before { content:''; position:absolute; inset:auto -10% -45% auto; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 72%); z-index:0; pointer-events:none; }
.universal-edit-card::after { content:''; position:absolute; left:-18px; top:-24px; width:120px; height:72px; border-radius:999px; background:rgba(255, 255, 255, 0.16); transform:rotate(-12deg); z-index:0; pointer-events:none; }
.universal-edit-card .universal-icon { font-size:24px; color:#fff; margin-bottom:6px; z-index:1; text-shadow:0 2px 8px rgba(0, 0, 0, 0.18); line-height:1; }
.universal-edit-card .chatbot-card-title { position:relative; background:none; color:#fff; text-shadow:0 1px 6px rgba(0, 0, 0, 0.18); padding:0 12px; font-size:14px; font-weight:700; letter-spacing:0.3px; z-index:1; white-space:normal; line-height:1.25; }
.recent-projects-section { width:100%; max-width:1860px; margin:42px auto 0; pointer-events:auto; display:none; box-sizing:border-box; padding:0 18px; }
.recent-projects-section.is-visible { display:block; }
.recent-projects-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding:0 2px; }
.recent-projects-title { font-size:20px; font-weight:700; color:#333; line-height:1.2; }
.recent-projects-more { border:none; background:transparent; color:#64748b; font-size:12px; font-weight:700; cursor:pointer; padding:6px 8px; border-radius:8px; transition:background 0.18s ease, color 0.18s ease; }
.recent-projects-more:hover { background:#f1f5f9; color:#0f172a; }
.recent-projects-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
.recent-project-card { min-height:190px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; box-shadow:0 6px 18px rgba(15, 23, 42, 0.06); overflow:hidden; cursor:pointer; transition:transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; display:flex; flex-direction:column; position:relative; }
.recent-project-card:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(15, 23, 42, 0.11); border-color:#cbd5e1; }
.recent-project-card.is-opening { pointer-events:none; transform:translateY(-2px); border-color:#93c5fd; box-shadow:0 16px 34px rgba(37, 99, 235, 0.18); }
.recent-project-opening-overlay { position:absolute; inset:0; z-index:5; display:none; align-items:center; justify-content:center; padding:18px; padding-top:46px; background:linear-gradient(180deg, rgba(248,250,252,0.76), rgba(239,246,255,0.88)); backdrop-filter:blur(4px) saturate(1.05); }
.recent-project-card.is-opening .recent-project-opening-overlay { display:flex; }
.recent-project-opening-pill { position:relative; min-width:164px; min-height:48px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; gap:11px; border-radius:999px; overflow:hidden; isolation:isolate; background:rgba(255,255,255,0.96); color:#1d4ed8; border:1px solid rgba(191,219,254,0.96); font-size:12px; font-weight:850; line-height:18px; letter-spacing:0; box-shadow:0 18px 38px rgba(37, 99, 235, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255,255,255,0.98); transform:translateY(20px); }
.recent-project-opening-pill::after { content:''; position:absolute; inset:1px auto 1px -42%; width:38%; border-radius:inherit; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(219,234,254,0.62), rgba(255,255,255,0)); animation:recent-project-opening-sheen 1.35s ease-in-out infinite; z-index:0; }
.recent-project-opening-spinner { position:relative; z-index:1; top:2px; width:17px; height:17px; flex:0 0 auto; align-self:center; border-radius:50%; border:2px solid rgba(37, 99, 235, 0.16); border-top-color:#2563eb; border-right-color:#60a5fa; animation:spin 0.72s linear infinite; }
.recent-project-opening-pill > span:not(.recent-project-opening-spinner) { position:relative; z-index:1; display:inline-flex; align-items:center; line-height:18px; }
@keyframes recent-project-opening-sheen { 0% { transform:translateX(0); opacity:0; } 20% { opacity:1; } 100% { transform:translateX(360%); opacity:0; } }
.history-item.is-opening { pointer-events:none; opacity:0.72; }
.history-item.is-opening::after { content:''; position:absolute; right:12px; top:50%; width:16px; height:16px; margin-top:-8px; border-radius:50%; border:2px solid rgba(37, 99, 235, 0.18); border-top-color:#2563eb; animation:spin 0.8s linear infinite; flex:0 0 auto; }
.recent-project-delete { position:absolute; top:8px; right:8px; width:28px; height:28px; border:none; border-radius:8px; display:grid; place-items:center; background:rgba(15, 23, 42, 0.72); color:#fff; cursor:pointer; opacity:0; transform:translateY(-4px); transition:opacity 0.16s ease, transform 0.16s ease, background 0.16s ease; z-index:2; }
.recent-project-card:hover .recent-project-delete, .recent-project-delete:focus-visible { opacity:1; transform:translateY(0); }
.recent-project-delete:hover { background:#dc2626; }
.recent-project-delete svg { width:15px; height:15px; display:block; stroke:currentColor; }
.recent-project-thumb { height:136px; background:#f8fafc; border-bottom:1px solid #eef2f7; display:grid; place-items:center; overflow:hidden; position:relative; }
.recent-project-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.recent-project-task-badge { position:absolute; right:10px; top:10px; display:inline-flex; align-items:center; height:24px; padding:0 8px; border-radius:999px; background:rgba(17, 24, 39, .86); color:#fff; font-size:12px; font-weight:700; box-shadow:0 6px 18px rgba(15, 23, 42, .18); }
.recent-project-placeholder { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:#94a3b8; background:#eef2f7; }
.recent-project-body { padding:12px 12px 13px; min-width:0; }
.recent-project-name { font-size:12px; font-weight:800; color:#111827; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-project-meta { margin-top:5px; display:flex; align-items:center; justify-content:space-between; gap:8px; color:#94a3b8; font-size:11px; line-height:1; }
.recent-project-status { flex:0 0 auto; color:#64748b; }
.recent-project-status.is-pending { color:#2563eb; }
.recent-project-status.is-failed { color:#dc2626; }
.recent-project-modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1300; background:rgba(15, 23, 42, 0.38); backdrop-filter:blur(6px); padding:24px; }
.recent-project-modal.is-active { display:flex; }
.recent-project-panel { width:min(1180px, 94vw); height:min(560px, 82vh); max-height:min(620px, 82vh); display:flex; flex-direction:column; background:#fff; border-radius:12px; box-shadow:0 24px 70px rgba(15, 23, 42, 0.22); overflow:hidden; border:1px solid rgba(226, 232, 240, 0.9); }
.recent-project-panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; border-bottom:1px solid #eef2f7; }
.recent-project-panel-title { font-size:16px; font-weight:850; color:#0f172a; }
.recent-project-panel-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.recent-project-range-group { display:flex; align-items:center; gap:6px; padding:4px; border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; }
.recent-project-range-btn { border:none; background:transparent; color:#64748b; height:28px; padding:0 12px; border-radius:8px; font-size:12px; font-weight:750; cursor:pointer; transition:background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; }
.recent-project-range-btn:hover { color:#0f172a; }
.recent-project-range-btn.is-active { background:#fff; color:#111827; box-shadow:0 1px 4px rgba(15, 23, 42, 0.08); }
.recent-project-close { border:none; background:#f8fafc; color:#64748b; width:32px; height:32px; border-radius:8px; display:grid; place-items:center; cursor:pointer; transition:background 0.18s ease, color 0.18s ease; }
.recent-project-close:hover { background:#e2e8f0; color:#0f172a; }
.recent-project-panel-body { padding:16px 16px 12px; overflow-y:auto; flex:1; display:flex; flex-direction:column; }
.recent-project-list { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; align-items:start; min-height:392px; flex:0 0 auto; align-content:start; }
.recent-project-load { position:sticky; bottom:0; z-index:3; margin:8px auto 0; display:flex; align-items:center; justify-content:center; min-height:36px; padding:0 18px; border-radius:8px; border:1px solid #e2e8f0; background:#fff; color:#475569; font-size:13px; font-weight:750; cursor:pointer; box-shadow:0 8px 18px rgba(15, 23, 42, 0.08); transition:background 0.18s ease, border-color 0.18s ease; }
.recent-project-load:hover { background:#f8fafc; border-color:#cbd5e1; }
.recent-project-load:disabled { cursor:not-allowed; opacity:0.65; }
.recent-project-empty { display:none; min-height:392px; flex:1; padding:44px 18px; border:1px dashed #dbe3ed; border-radius:8px; color:#94a3b8; font-size:13px; text-align:center; background:#fbfdff; box-sizing:border-box; align-items:center; justify-content:center; }
.recent-project-empty.is-visible { display:flex; }
@media (max-width: 768px) {
.chatbot-cards { width:96%; gap:8px; flex-wrap:wrap; }
.chatbot-card { min-width:calc(50% - 8px); height:80px; }
.recent-projects-section { width:100%; padding:0 10px; }
.recent-projects-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.recent-project-modal { padding:10px; }
.recent-project-panel { width:100%; height:82vh; max-height:82vh; border-radius:10px; }
.recent-project-list { grid-template-columns:repeat(2, minmax(0, 1fr)); min-height:392px; }
.recent-project-panel-head { flex-wrap:wrap; }
.recent-project-panel-actions { order:3; width:100%; margin-left:0; }
.recent-project-range-group { flex:1; min-width:0; overflow-x:auto; }
.recent-project-range-btn { flex:1 0 auto; padding:0 10px; }
}
.excellent-examples-section { width:100%; max-width:1860px; margin:80px auto 160px; pointer-events:auto; box-sizing:border-box; padding:0 18px; }
.examples-header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.examples-title { font-size:20px; font-weight:700; margin-bottom:0; color:#333; }
.examples-tabs { display:flex; gap:8px; flex-wrap:wrap; padding:4px; border-radius:999px; background:#f8fafc; border:1px solid rgba(226, 232, 240, .84); }
.tab-item { padding:8px 16px; background:transparent; border:1px solid transparent; border-radius:999px; font-size:13px; color:#64748b; cursor:pointer; transition:all 0.2s ease; font-weight:600; line-height:1; }
.tab-item.active, .tab-item:hover { background:#111827; color:#fff; border-color:#111827; box-shadow:0 8px 18px rgba(15, 23, 42, .10); }
.examples-loading, .examples-empty { display:flex; align-items:center; justify-content:center; min-height:180px; border:1px solid rgba(226, 232, 240, .72); color:#94a3b8; font-size:14px; font-weight:500; }
.examples-loading i { margin-right:8px; color:#6366f1; }
.examples-masonry { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); grid-auto-rows:1fr; gap:22px; align-items:stretch; width:100%; }
.examples-masonry.is-hidden { display:none; }
.masonry-item { width:100%; max-width:none; justify-self:stretch; break-inside:avoid; margin-bottom:0; border-radius:28px; overflow:hidden; position:relative; cursor:pointer; border:none; background:linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%); box-shadow:0 18px 42px rgba(15, 23, 42, .06); transition:transform .22s ease, box-shadow .22s ease; aspect-ratio:1 / 1.16; }
.masonry-item.is-skeleton { cursor:default; pointer-events:none; background:transparent; box-shadow:none; }
.masonry-item.is-skeleton:hover { transform:none; box-shadow:none; }
.masonry-item::before, .masonry-item::after { display:none; }
.masonry-item:hover { transform:translateY(-4px); box-shadow:0 24px 48px rgba(15, 23, 42, .08); }
.example-card-shell { position:relative; z-index:1; padding:0; background:transparent; width:100%; height:100%; }
.example-card-head { display:none; }
.example-chip { display:none; }
.example-collage { display:grid; gap:0; border-radius:inherit; overflow:hidden; background:transparent; padding:0; isolation:isolate; width:100%; height:100%; }
.example-collage.variant-single { grid-template-columns:1fr; grid-template-rows:1fr; }
.example-collage.variant-duo { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:1fr; }
.example-collage.variant-stack { grid-template-columns:1.08fr .92fr; grid-template-rows:repeat(2, minmax(0, 1fr)); }
.example-collage.variant-banner { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:1.06fr .94fr; }
.example-collage.variant-quad { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:repeat(2, minmax(0, 1fr)); }
.example-collage-cell { position:relative; overflow:hidden; background:#f5f5f7; border-radius:0; border:none; box-shadow:none; width:100%; height:100%; min-height:0; }
.example-collage-cell::after { display:none; }
.example-collage-cell img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; display:block; transition:transform .35s ease; transform:scale(1.08); background:#f5f5f7; padding:0; }
.media-skeleton { position:relative; width:100%; height:100%; overflow:hidden; border:0; outline:0; box-shadow:none; background:linear-gradient(90deg, #f2f4f7 25%, #e6e9ee 50%, #f2f4f7 75%); background-size:200% 100%; animation:loading-shimmer 2.5s infinite linear; }
.media-skeleton img, .media-skeleton video { opacity:0; transition:opacity .28s ease; border:0; outline:0; box-shadow:none; }
.media-skeleton.media-loaded { animation:none; background:#fff; }
.media-skeleton.media-loaded img, .media-skeleton.media-loaded video { opacity:1; }
.example-collage.variant-stack .example-collage-cell.is-hero { grid-row:1 / span 2; }
.example-collage.variant-banner .example-collage-cell.is-hero { grid-column:1 / span 2; }
.masonry-item:hover .example-collage-cell img { transform:scale(1.12); }
.example-collage-count { position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:24px; padding:0 8px; border-radius:999px; background:rgba(17, 24, 39, .56); backdrop-filter:blur(10px); color:#fff; font-size:11px; font-weight:700; box-shadow:0 8px 20px rgba(15, 23, 42, .10); }
.example-card-badge { display:none; }
.item-overlay { position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:999px; background:rgba(255, 255, 255, .86); backdrop-filter:blur(10px); font-size:11px; font-weight:700; opacity:0; transform:translateY(8px); transition:all .24s ease; color:#111827; box-shadow:0 8px 20px rgba(15, 23, 42, .08); }
.masonry-item:hover .item-overlay { opacity:1; transform:translateY(0); }
.example-detail-modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:24px; z-index:12000; background:radial-gradient(circle at top, rgba(255, 255, 255, .08), transparent 32%), rgba(15, 23, 42, .5); backdrop-filter:blur(14px); }
.example-detail-modal.is-active { display:flex; }
.example-detail-close-floating { position:fixed; top:24px; right:24px; z-index:2147483647; width:56px; height:56px; border:none; border-radius:999px; background:rgba(15, 23, 42, .58); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(10px); transition:transform .2s ease, background .2s ease; pointer-events:auto; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.example-detail-close-floating:hover { background:rgba(15, 23, 42, .72); transform:translateY(-1px); }
.example-detail-close-floating i { font-size:20px; pointer-events:none; }
.example-detail-dialog { position:relative; width:min(1036px, calc(100vw - 72px)); max-height:calc(100vh - 56px); overflow:auto; border-radius:24px; background:transparent; box-shadow:none; border:none; padding:0; scrollbar-width:thin; scrollbar-color:rgba(148, 163, 184, .45) transparent; }
.example-detail-dialog::-webkit-scrollbar { width:8px; }
.example-detail-dialog::-webkit-scrollbar-track { background:transparent; }
.example-detail-dialog::-webkit-scrollbar-thumb { background:rgba(148, 163, 184, .45); border-radius:999px; }
.example-detail-dialog::before { display:none; }
.example-detail-top { display:none; }
.example-detail-top > div { display:none; }
.example-detail-title { font-size:18px; font-weight:800; color:#0f172a; line-height:1.2; letter-spacing:-0.02em; }
.example-detail-sub { margin-top:6px; font-size:13px; color:#64748b; line-height:1.6; }
.example-detail-close { position:relative; z-index:2147483647; width:48px; height:48px; border:none; border-radius:999px; background:rgba(15, 23, 42, .56); color:#fff; cursor:pointer; backdrop-filter:blur(10px); box-shadow:none; transition:transform .2s ease, background .2s ease; pointer-events:auto; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.example-detail-close:hover { background:rgba(15, 23, 42, .5); transform:translateY(-1px); }
.example-detail-meta { display:none; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.example-detail-meta .example-chip { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 12px; border-radius:999px; background:rgba(255, 255, 255, .78); border:1px solid rgba(226, 232, 240, .95); box-shadow:0 8px 18px rgba(15, 23, 42, .04); font-size:12px; font-weight:700; color:#475569; }
.example-detail-compare { position:relative; display:grid; grid-template-columns:minmax(320px, 1.02fr) minmax(420px, 1fr); gap:0; align-items:start; background:transparent; padding:0; overflow:hidden; border-radius:20px; }
.example-detail-close-inline { position:absolute; top:16px; right:16px; z-index:2147483647; width:52px; height:52px; border:none; border-radius:999px; background:rgba(15, 23, 42, .58); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(10px); transition:transform .2s ease, background .2s ease; pointer-events:auto; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.example-detail-close-inline:hover { background:rgba(15, 23, 42, .72); transform:translateY(-1px); }
.example-detail-close-inline i { font-size:20px; pointer-events:none; }
.example-detail-stage { position:relative; min-height:auto; background:transparent; overflow:hidden; border-radius:0; backdrop-filter:none; padding-top:0; }
.example-detail-stage.source-stage { border-right:none; }
.example-detail-stage-label { position:absolute; top:16px; left:16px; z-index:3; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; border-radius:999px; background:rgba(15, 23, 42, .34); backdrop-filter:blur(8px); color:#fff; font-size:14px; font-weight:700; letter-spacing:.01em; box-shadow:none; }
.example-detail-stage-label.generated-label { left:18px; }
.example-detail-source { position:relative; display:flex; align-items:flex-start; justify-content:center; background:transparent; padding:0; }
.example-detail-source img { display:block; width:100%; height:auto; object-fit:contain; filter:none; }
.example-detail-gallery-wrap { position:relative; display:block; }
.example-detail-gallery { width:100%; height:auto; display:grid; gap:0; background:transparent; padding:0; align-items:start; }
.example-detail-gallery.is-count-1 { grid-template-columns:1fr; grid-template-rows:1fr; }
.example-detail-gallery.is-count-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.example-detail-gallery.is-count-3 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.example-detail-gallery.is-count-4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.example-detail-gallery.is-count-many { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.example-detail-gallery-item { position:relative; overflow:hidden; background:transparent; cursor:default; min-height:0; border-radius:0; display:flex; align-items:flex-start; justify-content:center; }
.example-detail-gallery-item img { display:block; max-width:100%; width:100%; height:auto; object-fit:contain; transition:transform .24s ease; }
.example-detail-gallery-item:hover img { transform:translateY(-1px); }
.example-detail-gallery-item::after { display:none; }
.example-detail-empty { font-size:13px; color:#94a3b8; padding:24px 0; text-align:center; }
.result-stage .example-detail-empty { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:transparent; z-index:1; }
.ratio-1-1 { aspect-ratio:1/1; }
.ratio-4-3 { aspect-ratio:4/3; }
.ratio-3-4 { aspect-ratio:3/4; }
.ratio-16-9 { aspect-ratio:16/9; }
@media (min-width: 1600px) {
.examples-masonry { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:22px; }
}
@media (max-width: 1520px) {
.examples-masonry { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1320px) {
.excellent-examples-section { width:100%; max-width:1540px; margin-bottom:140px; }
.examples-masonry { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
}
@media (max-width: 1180px) {
.excellent-examples-section { width:100%; max-width:1320px; }
.examples-masonry { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
}
@media (max-width: 1024px) {
.excellent-examples-section { width:100%; max-width:1100px; }
.examples-masonry { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.example-collage.variant-banner .example-collage-cell.is-hero { aspect-ratio:1.34 / 1; }
}
@media (max-width: 768px) {
.excellent-examples-section { width:96%; max-width:none; margin-top:65px; margin-bottom:110px; }
.examples-header { align-items:flex-start; }
.examples-tabs { gap:6px; padding:3px; }
.tab-item { padding:8px 14px; font-size:12px; }
.examples-masonry { grid-template-columns:1fr; gap:12px; }
.masonry-item { width:100%; max-width:none; margin-bottom:0; }
.item-overlay { opacity:1; transform:none; bottom:10px; right:10px; padding:6px 10px; font-size:11px; }
.example-card-badge { top:14px; left:14px; }
.example-chip { min-height:28px; padding:0 10px; font-size:10px; }
.example-collage { gap:6px; }
.example-collage-cell img { padding:6px; }
.example-collage.variant-stack { grid-template-columns:1fr; grid-template-rows:none; }
.example-collage.variant-stack .example-collage-cell.is-hero { grid-row:auto; aspect-ratio:1 / 1.16; }
.example-collage.variant-stack .example-collage-cell:not(.is-hero) { aspect-ratio:1 / .92; }
.example-collage.variant-banner .example-collage-cell.is-hero { aspect-ratio:1.2 / 1; }
.example-detail-modal { padding:12px; }
.example-detail-dialog { width:calc(100vw - 24px); max-height:calc(100vh - 24px); padding:0; border-radius:20px; }
.example-detail-close-floating { top:12px; right:12px; width:52px; height:52px; }
.example-detail-close { width:44px; height:44px; }
.example-detail-close-inline { top:10px; right:10px; width:46px; height:46px; }
.example-detail-compare { grid-template-columns:1fr; gap:0; }
.example-detail-stage { min-height:auto; padding-top:0; }
.example-detail-stage.source-stage { border-right:none; border-bottom:none; }
.example-detail-gallery.is-count-2, .example-detail-gallery.is-count-3, .example-detail-gallery.is-count-4, .example-detail-gallery.is-count-many { grid-template-columns:1fr; }
}
.watermark-switch-container { display:flex; align-items:center; justify-content:center; height:36px; padding:0 12px; background:rgba(255, 255, 255, 0.8); border:1px solid rgba(0, 0, 0, 0.06); border-radius:12px; margin-left:6px; box-shadow:0 2px 6px rgba(0, 0, 0, 0.02); backdrop-filter:blur(10px); transition:all 0.2s ease; position:relative; opacity:0.75; cursor:not-allowed; }
.watermark-switch-container::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background-color:rgba(17, 24, 39, 0.92); color:#fff; padding:6px 10px; border-radius:6px; font-size:12px; line-height:1.4; white-space:nowrap; box-shadow:0 4px 12px rgba(0, 0, 0, 0.15); opacity:0; visibility:hidden; transition:opacity 0.2s ease; pointer-events:none; z-index:10000; min-width:max-content; }
.watermark-switch-container:hover::after { opacity:1; visibility:visible; }
.watermark-switch-container:hover { border-color:rgba(0, 0, 0, 0.12); box-shadow:0 3px 8px rgba(0, 0, 0, 0.04); }
.watermark-switch-container span { font-size:13px; color:#111827; margin-right:0px; font-weight:600; }
.watermark-switch-container .switch { position:relative; display:inline-block; width:42px; height:20px; margin:0; }
.watermark-switch-container input { opacity:0; width:0; height:0; }
.watermark-switch-container .slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#e5e7eb; transition:.3s cubic-bezier(0.4, 0.0, 0.2, 1); border-radius:20px; box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.05); }
.watermark-switch-container input:checked + .slider { background-color:#3b82f6; }
.watermark-switch-container .slider:before { position:absolute; content:""; height:16px; width:16px; left:2px; bottom:2px; background-color:white; transition:.3s cubic-bezier(0.4, 0.0, 0.2, 1); border-radius:50%; box-shadow:0 1px 3px rgba(0, 0, 0, 0.15); }
.watermark-switch-container input:checked + .slider:before { transform:translateX(14px); }
.seo-agent-section { max-width:1050px; margin:32px auto 0; padding:28px; border:1px solid #eceff3; border-radius:24px; background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); box-shadow:0 8px 24px rgba(15, 23, 42, 0.05); pointer-events:auto; }
.seo-agent-eyebrow { display:inline-flex; align-items:center; gap:8px; background:#111; color:#fff; border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; margin-bottom:14px; }
.seo-agent-section h2 { font-size:26px; font-weight:700; color:#111; line-height:1.35; margin-bottom:12px; }
.seo-agent-section > p { font-size:14px; line-height:1.8; color:#5b6472; margin-bottom:20px; }
.seo-agent-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-bottom:22px; }
.seo-agent-card { background:#fff; border:1px solid #e5e7eb; border-radius:18px; padding:18px; }
.seo-agent-card h3 { font-size:17px; color:#111; margin-bottom:8px; }
.seo-agent-card p { font-size:13px; color:#667085; line-height:1.8; margin-bottom:12px; }
.seo-agent-tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.seo-agent-tags li { background:#f8fafc; border:1px solid #e2e8f0; border-radius:999px; padding:5px 10px; font-size:12px; color:#334155; }
.center-title-desc { max-width:760px; margin:10px auto 0; font-size:14px; line-height:1.8; color:#64748b; pointer-events:auto; }
@media (max-width: 768px) {
.center-title-desc { font-size:13px; padding:0 12px; }
}
/* image_agent.html style block 2 */
.sidebar { font-family:"SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.sidebar-logo-text { font-weight:600 !important; font-size:var(--sidebar-logo-font-size) !important; letter-spacing:0.3px !important; background:linear-gradient(135deg, #111 0%, #444 100%) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
.nav-label { font-size:11px !important; font-weight:600 !important; color:#a1a1aa !important; letter-spacing:0.6px !important; text-transform:uppercase; }
.nav-item { font-size:var(--sidebar-nav-font-size) !important; font-weight:500 !important; color:#3f3f46 !important; letter-spacing:0.2px !important; }
.nav-item-row { display:flex; align-items:center; gap:0; width:100%; min-height:40px; margin:4px 0; border-radius:14px; transition:background-color 0.18s ease; }
.nav-item-row:hover { background:rgba(0, 0, 0, 0.04); }
.nav-item-row.active { background:rgba(220, 231, 255, 0.72); }
.nav-item-link { flex:1; min-width:0; }
.nav-item-row:hover .nav-item-link, .nav-item-row.active .nav-item-link, .nav-item-link.active { background:transparent !important; }
.nav-item-active-style { background:rgba(0, 0, 0, 0.04) !important; font-weight:600 !important; color:#18181b !important; }
body.sidebar-collapsed .nav-item-row { width:36px; min-height:36px; margin:8px auto; justify-content:center; border-radius:12px; }
body.sidebar-collapsed .nav-item-link { flex:0 0 36px; width:36px; min-width:36px; height:36px; padding:0 !important; justify-content:center; }
body.sidebar-collapsed .nav-item-link span { display:none !important; }
body.sidebar-collapsed .nav-label { display:none !important; }
.nav-icon-dark, .nav-text-dark { color:#18181b !important; font-weight:600 !important; }
.nav-badge-new { font-size:9px !important; font-weight:600 !important; letter-spacing:0.4px !important; padding:2px 6px !important; box-shadow:0 1px 2px rgba(0, 0, 0, 0.02); border:1px solid #eaeaea !important; background:#fff !important; color:#5f6368 !important; }
.nav-coming-soon-badge { display:inline-flex !important; align-items:center; justify-content:center; flex-shrink:0; margin-left:auto; padding:2px 7px !important; border-radius:999px; border:1px solid rgba(245, 158, 11, 0.28) !important; background:linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%) !important; color:#92400e !important; font-size:10px !important; font-weight:700 !important; line-height:1.35; letter-spacing:0 !important; box-shadow:0 4px 10px rgba(245, 158, 11, 0.12); }
.nav-item-disabled { cursor:not-allowed !important; opacity:0.78; }
.nav-history-header-style { font-size:12px !important; font-weight:600 !important; color:#71717a !important; letter-spacing:0.2px !important; }
.chat-history-list { display:none !important; }
.chat-history-list .pending-task-count::after { content:""; position:absolute; inset:-2px; border-radius:inherit; border:1px solid rgba(17, 24, 39, 0.12); opacity:0; animation:pendingPulse 2s ease-out infinite; z-index:-1; }
@keyframes pendingPulse {
0% { transform:scale(0.9); opacity:0.28; }
70% { transform:scale(1.26); opacity:0; }
100% { transform:scale(1.26); opacity:0; }
}
.history-empty-state { font-size:12px !important; color:#a1a1aa !important; font-weight:400 !important; letter-spacing:0.2px !important; }
.chat-history-list .history-item { display:flex; align-items:center; padding:0 12px; min-height:50px; cursor:pointer; width:100%; box-sizing:border-box; justify-content:space-between; position:relative; border:1px solid transparent; border-radius:14px; margin:3px 0; transition:background 0.18s ease, border-color 0.18s ease; }
.chat-history-list .history-item:hover, .chat-history-list .history-item.active { background:rgb(244 244 244); }
.chat-history-list .history-item.has-pending-task { background:transparent; border-color:transparent; }
.chat-history-list .history-item.has-pending-task:hover { background:rgb(244 244 244); border-color:transparent; }
.chat-history-list .history-item.has-pending-task.active { background:rgb(244 244 244); border-color:transparent; }
.chat-history-list .item-content { display:flex; align-items:center; flex:1; overflow:hidden; }
.chat-history-list .project-icon { margin-right:8px; color:#333; flex-shrink:0; font-size:14px; }
.chat-history-list .project-name { font-size:12px; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.chat-history-list .pending-task-count { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-width:18px; height:18px; margin-left:8px; padding:0 5px; border-radius:999px; background:#111827; color:#fff; font-size:9px; font-weight:700; line-height:1; box-shadow:0 4px 9px rgba(15, 23, 42, 0.12); position:relative; isolation:isolate; }
.chat-history-list .history-item.active .project-name { font-weight:500; }
.chat-history-list .item-actions { display:none; align-items:center; gap:4px; margin-left:8px; }
.chat-history-list .history-item:hover .item-actions { display:flex; }
.chat-history-list .history-action { color:#666; font-size:12px; padding:6px; cursor:pointer; border-radius:4px; transition:background 0.2s, color 0.2s; }
.chat-history-list .history-action-edit:hover { background:#e6e6e6; }
.chat-history-list .history-action svg { width:13px; height:13px; display:block; stroke:currentColor; }
.chat-history-list .history-action-delete:hover { background:#fee2e2; color:#ef4444; }
.upgrade-title-style { font-size:var(--sidebar-title-font-size) !important; font-weight:600 !important; color:#18181b !important; letter-spacing:0.1px !important; }
.upgrade-desc-style { font-size:11px !important; color:#71717a !important; font-weight:400 !important; }
.user-name-style { font-size:var(--sidebar-title-font-size) !important; font-weight:600 !important; color:#18181b !important; letter-spacing:0.1px !important; }
.user-role-style, .user-points-style { font-size:11px !important; color:#a1a1aa !important; font-weight:500 !important; }
.popup-name-style { font-size:14px !important; font-weight:600 !important; color:#18181b !important; }
.popup-email-style { font-size:11px !important; color:#71717a !important; }
.stat-label-style { font-size:12px !important; color:#71717a !important; }
.stat-value-style { font-size:13px !important; font-weight:600 !important; color:#18181b !important; }
.menu-item-text-style { font-size:13px !important; font-weight:500 !important; color:#3f3f46 !important; }
.mobile-close-btn-style { display:none; position:absolute; top:10px; right:10px; background:none; border:none; color:#333; font-size:20px; }
.nav-group-style { margin-top:-10px; }
.nav-item-active-style { background:rgba(0, 0, 0, 0.05); font-weight:500; }
.nav-icon-dark { color:#333; }
.image-modal-overlay-style { display:none; }
.modal-nav-btn-style { display:none; }
.image-preview-container-style { display:none; }
.model-icon-large { font-size:22px; }
.model-icon-medium { font-size:20px; color:#000; }
.model-icon-small { color:#333; font-size:16px; }
.count-hint-style { font-size:10px; color:#999; font-weight:normal; margin-left:8px; }
.language-icon-margin { margin-right:8px; }
.language-icon-bold { font-weight:bold; color:#333; }
.upload-input-style { display:none; }
.model-badge-testing { background:rgb(255, 200, 0); color:#000; }
.upload-count-badge-style { display:none; }
.mobile-unsupported-message { display:none; }
@media screen and (max-width: 768px) {
*, *::before, *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
body, html { overflow-x:hidden; width:100vw; height:100vh; }
.content-container { flex-direction:column !important; width:100vw; height:100vh; }
.sidebar { position:fixed !important; left:-100% !important; top:0; bottom:0; height:100vh !important; width:80vw !important; max-width:320px; z-index:9999 !important; transition:left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow:2px 0 12px rgba(0, 0, 0, 0.15); display:flex !important; flex-direction:column; }
.sidebar.active { left:0 !important; }
.mobile-header { display:flex !important; align-items:center; justify-content:space-between; padding:0 16px; height:56px; background:#fff; border-bottom:1px solid #f0f0f0; position:sticky; top:0; z-index:900; width:100%; flex-shrink:0; }
.mobile-menu-btn { display:flex !important; align-items:center; justify-content:center; width:44px; height:44px; background:transparent; border:none; font-size:20px; color:#333; padding:0; margin-left:-10px; }
.mobile-header-title { font-size:16px; font-weight:600; color:#111; }
.sidebar-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0, 0, 0, 0.5); z-index:9998; opacity:0; transition:opacity 0.3s; backdrop-filter:blur(2px); }
.sidebar.active ~ .sidebar-overlay, .sidebar-overlay.active { display:block; opacity:1; }
.mobile-close-btn { display:flex !important; align-items:center; justify-content:center; width:44px; height:44px; position:absolute; top:12px; right:12px; background:transparent; border:none; font-size:22px; color:#333; z-index:10000; }
.collapse-btn { display:none !important; }
.main-content { margin-left:0 !important; width:100vw !important; padding:0 !important; height:calc(100vh - 56px) !important; padding-bottom:env(safe-area-inset-bottom, 20px) !important; display:flex; flex-direction:column; }
.result-container { padding:16px !important; padding-bottom:220px !important; flex:1; overflow-y:auto; }
.chatbot { width:100% !important; max-width:100% !important; margin:0 auto !important; border-radius:16px !important; box-shadow:0 -4px 20px rgba(0, 0, 0, 0.08) !important; transform:none !important; z-index:999; background:#fff; padding:10px 12px !important; }
.chatbot-container { position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important; width:100% !important; transform:none !important; padding:0 10px max(10px, env(safe-area-inset-bottom)) !important; margin:0 !important; z-index:999; background:transparent; }
.chatbot-container.empty-state { position:relative !important; bottom:auto !important; margin:0 !important; padding:20px 10px 100px !important; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; height:100%; overflow-y:auto; }
.center-title-main { font-size:24px !important; margin-bottom:8px !important; }
.center-title-sub { font-size:16px !important; margin-bottom:16px !important; }
.input-area { padding:0 !important; }
.input-row { flex-direction:row !important; gap:12px !important; align-items:center !important; margin-bottom:12px !important; }
.upload-wrapper { margin-right:0 !important; }
.upload-widget { width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; }
.upload-widget span { display:none !important; ; }
.text-input-wrapper { flex:1 !important; background:#f8f9fa; border-radius:22px; padding:0 16px; display:flex; align-items:center; }
textarea#prompt, .ai-input { min-height:44px !important; height:44px !important; font-size:15px !important; padding:12px 0 !important; width:100% !important; background:transparent !important; border:none !important; margin:0 !important; }
.control-bar { flex-direction:row !important; flex-wrap:wrap !important; gap:8px !important; align-items:center !important; justify-content:space-between !important; padding:0 !important; }
.left-controls { flex:1; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; ; }
.left-controls::-webkit-scrollbar { display:none; }
.right-controls { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.model-dropdown, .settings-dropdown, .workflow-dropdown { width:90vw !important; max-width:320px !important; left:0 !important; right:auto !important; bottom:100% !important; margin-bottom:10px !important; }
.action-group { display:flex; align-items:center; justify-content:flex-end; width:100%; }
.credits-text { display:none !important; ; }
.options-group, .action-group { width:auto !important; justify-content:flex-start !important; gap:8px !important; }
button, .nav-item, .spec-item-header, .action-btn, .icon-btn, select, input, .apple-action-btn, .model-btn-trigger, .setting-tag { min-height:36px !important; padding:6px 12px !important; white-space:nowrap; }
#holoiBtn { padding:0px 3px !important; }
select { font-size:16px !important; width:100%; }
.modal-content-wrapper { width:100% !important; height:100% !important; margin:0 !important; max-width:100% !important; max-height:100% !important; border-radius:0 !important; }
#modalImage { width:100vw !important; height:100vh !important; object-fit:contain !important; }
.modal-close-btn { top:max(10px, env(safe-area-inset-top)) !important; right:10px !important; width:44px !important; height:44px !important; background:rgba(0, 0, 0, 0.6) !important; color:#fff !important; }
.modal-controls { bottom:max(20px, env(safe-area-inset-bottom)) !important; width:100% !important; justify-content:center !important; gap:20px !important; flex-wrap:wrap; }
.modal-nav-btn, .modal-download-btn { min-height:44px !important; min-width:44px !important; }
img, video, svg, iframe { max-width:100% !important; height:auto; }
.result-image-wrapper img { width:100% !important; height:auto !important; }
@media (max-width: 768px) {
.chatbot, .disclaimer-text { display:none !important; }
.mobile-unsupported-message { display:flex !important; flex-direction:column; align-items:center; justify-content:center; background:#f8f9fa; border-radius:16px; padding:40px 20px; margin:20px 16px; text-align:center; width:calc(100% - 32px); box-sizing:border-box; }
.unsupported-icon { font-size:48px; color:#c0c4cc; margin-bottom:16px; }
.unsupported-title { font-size:18px; font-weight:600; color:#333; margin-bottom:8px; }
.unsupported-sub { font-size:13px; color:#666; line-height:1.5; }
}
@media (max-width: 768px) {
.chatbot-container button, .chatbot-container .model-btn-trigger, .chatbot-container .setting-tag, .chatbot-container .action-btn, .chatbot-container .icon-btn, .chatbot-container select, .upload-widget, .watermark-switch-container { min-height:36px !important; display:flex; align-items:center; justify-content:center; padding-top:6px !important; padding-bottom:6px !important; font-size:13px !important; }
.watermark-switch-container { border-radius:18px !important; height:36px !important; }
.upload-widget { width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important; }
.model-dropdown .model-tab, .model-dropdown .model-option, .settings-popup .res-option, .settings-popup .ratio-item, .examples-tabs .tab-item { min-height:44px !important; padding:10px 16px !important; }
.model-dropdown .model-option { justify-content:flex-start; margin:5px 8px !important; }
.chatbot-container .ai-input, .chatbot-container input[type="text"], .chatbot-container textarea { font-size:16px !important; min-height:38px !important; height:38px !important; padding:8px 0 !important; }
.text-input-wrapper { border-radius:19px !important; }
.control-bar { flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; padding:6px 0 !important; scrollbar-width:none; gap:8px !important; }
.control-bar::-webkit-scrollbar { display:none; ; }
.left-controls { flex-wrap:nowrap !important; flex-shrink:0; }
.right-controls { position:sticky; right:0; background:#fff; padding-left:10px; flex-shrink:0; z-index:10; }
.right-controls::before { content:''; position:absolute; left:-20px; top:0; width:20px; height:100%; background:linear-gradient(to right, transparent, #fff); pointer-events:none; }
.model-selector-container, .settings-container, #language-selector-container { position:static !important; }
.model-dropdown, .settings-popup { position:fixed !important; bottom:0 !important; left:0 !important; width:100vw !important; max-width:100vw !important; border-radius:24px 24px 0 0 !important; margin-bottom:0 !important; max-height:85vh !important; overflow-y:auto !important; z-index:100000 !important; box-shadow:0 -4px 24px rgba(0, 0, 0, 0.15) !important; padding:20px 16px calc(20px + env(safe-area-inset-bottom)) !important; animation:slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; }
@keyframes slideUp {
from { transform:translateY(100%); }
to { transform:translateY(0); }
}
.ratio-grid { display:grid !important; grid-template-columns:repeat(4, 1fr) !important; gap:12px !important; }
.ratio-item { flex-direction:column; height:auto !important; padding:8px !important; }
.image-preview-container { max-width:100% !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
.chatbot-cards { width:100% !important; padding:0 16px !important; gap:12px !important; display:grid !important; grid-template-columns:repeat(2, 1fr) !important; box-sizing:border-box; margin-top:20px !important; }
.chatbot-card { min-width:0 !important; width:100% !important; margin:0 !important; }
.excellent-examples-section { max-width:100% !important; padding:0 16px !important; margin-top:40px !important; box-sizing:border-box; }
.examples-tabs { overflow-x:auto !important; white-space:nowrap !important; scrollbar-width:none; }
.examples-tabs::-webkit-scrollbar { display:none; }
.examples-masonry { column-count:2 !important; column-gap:12px !important; }
.masonry-item { margin-bottom:12px !important; }
.center-title-main { font-size:20px !important; margin-bottom:6px !important; }
.center-title-sub { font-size:14px !important; margin-bottom:12px !important; }
}
@media (hover: none) {
*:hover { transform:none !important; }
.apple-action-btn:hover { background:transparent !important; color:inherit !important; }
.nav-item:hover { background:inherit !important; }
button:active, a:active { opacity:0.7 !important; }
}
}
.chatbot { background:#fff !important; border-radius:16px !important; box-shadow:0 8px 32px rgba(0, 0, 0, 0.06) !important; border:1px solid #f1f5f9 !important; padding:13px 20px !important; transition:box-shadow 0.3s ease !important; position:relative; z-index:10; pointer-events:auto; }
.chatbot:hover { box-shadow:0 12px 48px rgba(0, 0, 0, 0.08) !important; }
.chatbot .input-row { display:flex !important; align-items:flex-start !important; gap:0 !important; margin-bottom:0 !important; border-bottom:none !important; }
.chatbot .upload-wrapper { display:none !important; }
.chatbot .upload-widget { width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important; border-radius:10px !important; background:#f8fafc !important; border:1px solid #e2e8f0 !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; transition:border-color 0.18s ease, color 0.18s ease, background 0.18s ease !important; color:#94a3b8 !important; box-shadow:none !important; padding:0 !important; }
.chatbot .upload-widget:hover { border-color:#cbd5e1 !important; color:#0f172a !important; background:#f1f5f9 !important; }
.chatbot .upload-widget.is-full { opacity:0.8 !important; }
.chatbot .upload-icon-box { width:12px !important; height:12px !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.chatbot .upload-icon-box svg { width:12px !important; height:12px !important; }
.chatbot .upload-count-badge { display:none !important; }
.chatbot .text-input-wrapper { flex-grow:1 !important; min-height:123px !important; display:flex !important; background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important; }
.chatbot .group-count-summary { font-size:12px !important; }
.chatbot .group-count-grid { gap:6px !important; }
.chatbot .group-count-chip { background:rgba248, 250, 252, 0.86) !important; border-color:#e7edf5 !important; }
.chatbot .text-input-wrapper.has-group-counts:hover .group-count-chip { padding:5px 9px 5px 10px !important; background:#ffffff !important; border-color:#dbe5f0 !important; box-shadow:0 6px 16px rgba(15, 23, 42, 0.05) !important; }
.chatbot .text-input-wrapper.has-group-counts:hover .group-count-chip-controls { gap:4px !important; min-width:auto !important; }
.chatbot .text-input-wrapper.has-group-counts:hover .group-count-chip-btn { width:18px !important; height:18px !important; border-width:1px !important; opacity:1 !important; pointer-events:auto !important; transform:scale(1) !important; }
.chatbot .text-input-wrapper.has-group-counts:hover .group-count-chip-value { background:#f8fafc !important; border-color:#dbe5f0 !important; }
.chatbot .ai-input { min-height:74px !important; padding:5px 0 3px !important; font-size:15px !important; line-height:1.5 !important; border:none !important; outline:none !important; box-shadow:none !important; background:transparent !important; resize:none !important; color:#1e293b !important; width:100% !important; }
.chatbot .ai-input::placeholder { color:#94a3b8 !important; }
.chatbot .control-bar { display:flex !important; justify-content:space-between !important; align-items:center !important; padding-top:6px !important; }
.chatbot .left-controls { display:flex !important; gap:8px !important; align-items:center !important; flex-wrap:wrap !important; }
.chatbot .model-btn-trigger, .chatbot .setting-tag { display:inline-flex !important; align-items:center !important; gap:6px !important; padding:6px 12px !important; border-radius:8px !important; border:1px solid transparent !important; background:transparent !important; font-size:13px !important; color:#64748b !important; font-weight:500 !important; transition:background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important; cursor:pointer !important; height:auto !important; min-height:28px !important; }
.chatbot .model-btn-trigger::before, .chatbot .setting-tag::before { content:"" !important; width:6px !important; height:6px !important; border-right:1.25px solid currentColor !important; border-bottom:1.25px solid currentColor !important; transform:translateY(-2px) rotate(45deg) !important; transform-origin:center !important; opacity:0.5 !important; flex:0 0 6px !important; margin-left:4px !important; order:99 !important; transition:transform 0.18s ease, opacity 0.18s ease !important; }
.chatbot .model-btn-trigger:hover, .chatbot .setting-tag:hover { background:#f8fafc !important; color:#0f172a !important; border-color:#e2e8f0 !important; }
.chatbot .model-btn-trigger:hover::before, .chatbot .setting-tag:hover::before { opacity:0.82 !important; }
.chatbot .model-btn-trigger.is-open, .chatbot .setting-tag.is-open { background:rgba(248, 250, 252, 0.96) !important; color:#0f172a !important; border-color:#dbe5f0 !important; box-shadow:0 1px 2px rgba(15, 23, 42, 0.04) !important; }
.chatbot .model-btn-trigger.is-open::before, .chatbot .setting-tag.is-open::before { transform:translateY(1px) rotate(-135deg) !important; opacity:0.9 !important; }
#set-selector-container.is-fixed-selector .model-dropdown { display:none !important; }
#set-selector-container.is-fixed-selector #set-selector { cursor:default !important; pointer-events:none !important; }
#set-selector-container.is-fixed-selector #set-selector::before { display:none !important; }
#set-selector-container.universal-count-selector .model-dropdown { width:260px; padding:14px 16px; }
#set-selector-container.universal-count-selector .universal-count-popup { display:block; }
#set-selector-container.universal-count-selector .universal-count-popup .section-title { font-size:13px; color:#334155; margin-bottom:10px; }
#set-selector-container.universal-count-selector .count-selector { gap:10px; }
.set-count-display { color:inherit; font-weight:600; }
.toolbar-count-hidden { display:none !important; }
.chatbot .setting-tag .divider { color:#cbd5e1 !important; margin:0 4px !important; font-weight:300 !important; }
.chatbot .watermark-switch-container { display:flex !important; align-items:center !important; gap:6px !important; background:transparent !important; border:none !important; padding:0 4px !important; margin:0 !important; }
.chatbot .watermark-switch-container span:first-child { font-size:13px !important; color:#64748b !important; margin:0 !important; }
.chatbot .watermark-switch-container .switch { width:32px !important; height:18px !important; margin:0 !important; }
.chatbot .watermark-switch-container .slider { background-color:#e2e8f0 !important; border-radius:18px !important; }
.chatbot .watermark-switch-container .slider:before { height:14px !important; width:14px !important; left:2px !important; bottom:2px !important; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1) !important; }
.chatbot .watermark-switch-container input:checked + .slider { background-color:#0f172a !important; }
.chatbot .watermark-switch-container input:checked + .slider:before { transform:translateX(14px) !important; }
.chatbot .right-controls { display:flex !important; align-items:center !important; gap:12px !important; }
.chatbot .credits-text { font-size:13px !important; color:#94a3b8 !important; font-weight:500 !important; }
.chatbot .generate-btn { width:36px !important; height:36px !important; border-radius:10px !important; background:#0f172a !important; color:#fff !important; display:flex !important; align-items:center !important; justify-content:center !important; transition:all 0.2s !important; box-shadow:0 2px 8px rgba(15, 23, 42, 0.15) !important; border:none !important; cursor:pointer !important; }
.chatbot .generate-btn:hover { transform:translateY(-1px) !important; box-shadow:0 4px 12px rgba(15, 23, 42, 0.25) !important; background:#1e293b !important; }
.chatbot .generate-btn:active { transform:translateY(0) !important; box-shadow:0 2px 4px rgba(15, 23, 42, 0.1) !important; }
.chatbot .generate-btn:disabled, .chatbot .generate-btn.loading { opacity:0.7 !important; cursor:not-allowed !important; pointer-events:none !important; transform:none !important; box-shadow:none !important; background:#64748b !important; }
.chatbot .generate-btn svg { width:18px !important; height:18px !important; }
.chatbot .image-preview-container { width:100% !important; margin:4px 0 0 !important; display:none !important; position:relative !important; left:auto !important; bottom:auto !important; border:none !important; background:transparent !important; padding:0 !important; box-shadow:none !important; animation:none !important; flex-shrink:0 !important; }
.chatbot .image-preview-container.has-images { display:block !important; }
.chatbot .preview-toolbar, .chatbot .preview-meta, .chatbot .preview-title, .chatbot .preview-subtitle, .chatbot .preview-header-actions, .chatbot .preview-status, .chatbot .preview-clear-btn { display:none !important; }
.chatbot .preview-grid { display:flex !important; align-items:center !important; gap:6px !important; overflow-x:auto !important; padding:0 !important; scrollbar-width:none !important; min-height:36px !important; max-width:100% !important; }
.chatbot .preview-grid::-webkit-scrollbar { display:none !important; }
.chatbot .preview-item { position:relative !important; width:38px !important; min-width:38px !important; height:38px !important; border-radius:10px !important; overflow:hidden !important; border:1px solid #e2e8f0 !important; background:#ffffff !important; box-shadow:none !important; cursor:pointer !important; flex-shrink:0 !important; }
.chatbot .preview-item img { width:100% !important; height:100% !important; object-fit:cover !important; transition:transform 0.25s ease !important; }
.chatbot .preview-item:hover img { transform:scale(1.05) !important; }
.chatbot .preview-item::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15, 23, 42, 0) 68%, rgba(15, 23, 42, 0.14) 100%); pointer-events:none; }
.chatbot .preview-item-index { display:none !important; }
.chatbot .preview-item .remove-btn { display:flex !important; align-items:center !important; justify-content:center !important; position:absolute !important; top:4px !important; right:4px !important; width:16px !important; height:16px !important; border:none !important; border-radius:50% !important; background:rgba(15, 23, 42, 0.62) !important; color:#fff !important; opacity:0 !important; transform:scale(0.92) !important; transition:opacity 0.18s ease, transform 0.18s ease, background 0.18s ease !important; z-index:2 !important; font-size:8px !important; }
.chatbot .preview-item:hover .remove-btn { opacity:1 !important; transform:scale(1) !important; }
.chatbot .preview-item .remove-btn:hover { background:rgba(220, 38, 38, 0.92) !important; }
.chatbot .preview-item.loading::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:22px; height:22px; border:2px solid rgba(255, 255, 255, 0.45); border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite; z-index:2; }
.chatbot .preview-item.loading img { opacity:0.55 !important; }
@media (max-width:768px) {
.chatbot .text-input-wrapper { min-height:133px !important; }
.chatbot .ai-input { min-height:80px !important; padding:5px 0 0 !important; }
.chatbot .upload-widget { width:32px !important; height:32px !important; min-width:32px !important; min-height:32px !important; }
.chatbot .preview-item { width:34px !important; min-width:34px !important; height:34px !important; }
}
.mobile-header { display:none; }
.mobile-header-spacer { width:44px !important; }
.chatbot .ratio-item[data-ratio="1:1"] .ratio-box { aspect-ratio:1/1 !important; }
.chatbot .ratio-item[data-ratio="3:4"] .ratio-box { aspect-ratio:3/4 !important; }
.chatbot .ratio-item[data-ratio="4:3"] .ratio-box { aspect-ratio:4/3 !important; }
.chatbot .ratio-item[data-ratio="4:5"] .ratio-box { aspect-ratio:4/5 !important; width:14px !important; }
.chatbot .ratio-item[data-ratio="5:4"] .ratio-box { aspect-ratio:5/4 !important; width:22px !important; }
.chatbot .ratio-item[data-ratio="16:9"] .ratio-box { aspect-ratio:16/9 !important; }
.chatbot .ratio-item[data-ratio="9:16"] .ratio-box { aspect-ratio:9/16 !important; }
.chatbot .ratio-item[data-ratio="2:3"] .ratio-box { aspect-ratio:2/3 !important; }
.chatbot .ratio-item[data-ratio="3:2"] .ratio-box { aspect-ratio:3/2 !important; }
.chatbot .ratio-item[data-ratio="21:9"] .ratio-box { aspect-ratio:21/9 !important; }
.top-banner-wrapper { display:flex; justify-content:center; width:100%; margin:16px 0 20px 0; z-index:1000; }
body:not(.empty-state-active) .top-banner-wrapper { display:none !important; }
.top-banner { display:inline-flex; align-items:center; background-color:#fffbf2; padding:4px 16px 4px 6px; border-radius:100px; font-size:13px; color:#333; box-shadow:0 2px 8px rgba(0, 0, 0, 0.04); cursor:pointer; transition:transform 0.2s ease, box-shadow 0.2s ease; border:1px solid #ffedd5; }
.top-banner:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0, 0, 0, 0.06); }
.banner-badge { background:#f97316; color:#fff; padding:3px 10px; border-radius:100px; font-size:12px; font-weight:600; margin-right:8px; letter-spacing:0.5px; }
.banner-text { font-weight:500; display:flex; align-items:center; gap:6px; color:#3f3f46; }
/* image_agent.html style block 3 */
:root { --app-max-width:clamp(1040px, 78vw, 1680px); --chat-max-width:clamp(920px, 62vw, 1320px); --chat-shell-scale:1; --chat-visible-max-width:var(--chat-max-width); --surface-radius:18px; --sidebar-expanded-width:var(--sidebar-width, clamp(232px, 13.5vw, 300px)); --sidebar-collapsed-width:60px; }
html, body { min-height:100%; background:#f8fafc; }
body { font-family:"SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
.main-content { padding:clamp(16px, 2.2vw, 30px) !important; }
.chat-content-area { padding:18px 18px 32px !important; gap:32px !important; }
.chatbot-container, .chat-content-area, .chatbot-cards, .excellent-examples-section { width:100%; box-sizing:border-box; }
@media (min-width: 769px) {
.chat-content-area { left:var(--sidebar-expanded-width) !important; right:auto !important; width:calc(100vw - var(--sidebar-expanded-width)) !important; align-items:center !important; }
body.sidebar-collapsed .chat-content-area { left:var(--sidebar-collapsed-width) !important; width:calc(100vw - var(--sidebar-collapsed-width)) !important; }
.chatbot-container { left:var(--sidebar-expanded-width) !important; right:auto !important; width:calc(100vw - var(--sidebar-expanded-width)) !important; align-items:center !important; }
body.sidebar-collapsed .chatbot-container { left:var(--sidebar-collapsed-width) !important; width:calc(100vw - var(--sidebar-collapsed-width)) !important; }
.chatbot-container.empty-state, body.sidebar-collapsed .chatbot-container.empty-state { left:0 !important; right:auto !important; width:100% !important; }
.disclaimer-text { left:calc(var(--sidebar-expanded-width) + (100vw - var(--sidebar-expanded-width)) / 2) !important; }
body.sidebar-collapsed .disclaimer-text { left:calc(var(--sidebar-collapsed-width) + (100vw - var(--sidebar-collapsed-width)) / 2) !important; }
}
.chatbot { width:min(100%, var(--chat-max-width)) !important; max-width:var(--chat-max-width) !important; border-radius:var(--surface-radius) !important; }
.progress-card, .result-container { width:min(100%, var(--chat-visible-max-width)) !important; max-width:var(--chat-visible-max-width) !important; min-width:0 !important; box-sizing:border-box !important; }
.result-container { border-radius:18px !important; }
.result-container, .result-container * { box-sizing:border-box; }
.output-images-container { width:100%; min-width:0; }
.output-images-container .image-grid { display:grid !important; grid-template-columns:repeat(auto-fit, minmax(clamp(96px, 18vw, 180px), 1fr)) !important; gap:12px !important; width:100%; min-width:0; }
.output-images-container .image-item { min-width:0; border:none !important; box-shadow:none !important; background:transparent !important; }
.output-images-container .image-item img { display:block; }
.chatbot-cards { max-width:var(--app-max-width) !important; margin:20px auto 0 !important; gap:14px !important; }
.excellent-examples-section { max-width:min(100%, 1780px) !important; width:min(98vw, 1780px) !important; margin:72px auto 24px !important; }
@media (min-width: 769px) {
.sidebar { width:var(--sidebar-expanded-width) !important; }
.sidebar.collapsed { width:var(--sidebar-collapsed-width) !important; }
.chatbot-container.empty-state { transform:none !important; margin:clamp(36px, 5vh, 72px) auto 0 !important; padding:0 clamp(20px, 2.2vw, 44px) clamp(80px, 10vh, 160px) !important; overflow:visible !important; }
.chatbot { transform:none !important; width:min(100%, var(--chat-max-width)) !important; max-width:var(--chat-max-width) !important; }
.chatbot-cards { max-width:var(--app-max-width) !important; }
.excellent-examples-section { width:min(100%, var(--app-max-width)) !important; max-width:var(--app-max-width) !important; padding:0 !important; margin:clamp(48px, 6vh, 90px) auto 60px !important; }
.examples-masonry { display:grid !important; grid-template-columns:repeat(auto-fit, minmax(clamp(220px, 16vw, 320px), 1fr)) !important; gap:clamp(14px, 1.2vw, 24px) !important; align-items:stretch !important; }
.masonry-item { aspect-ratio:1 / 1.05 !important; height:auto !important; min-height:0 !important; border-radius:clamp(18px, 1.4vw, 28px) !important; }
.example-card-shell, .example-collage { height:100% !important; }
.example-collage-cell img { object-fit:contain !important; transform:none !important; padding:0 !important; }
.masonry-item:hover .example-collage-cell img { transform:none !important; }
}
.control-bar { gap:12px !important; }
.left-controls { min-width:0; }
.model-option { min-width:0; }
.model-description { white-space:normal !important; line-height:1.45 !important; }
.mobile-unsupported-message { display:none !important; }
@media (min-width: 1440px) {
.chat-content-area { padding-left:24px !important; padding-right:24px !important; }
.chatbot-container.empty-state { margin-top:50px !important; }
}
@media (max-width: 1280px) {
.chat-content-area { gap:26px !important; }
.right-controls { gap:10px !important; }
}
@media (max-width: 1024px) {
.main-content { padding:18px !important; }
.chat-content-area { padding:16px 16px 28px !important; gap:24px !important; }
.chatbot { width:min(100%, 920px) !important; }
.group-count-selector { width:min(100%, calc(var(--chat-max-width) + 40px)) !important; max-width:calc(var(--chat-max-width) + 40px) !important; }
.result-container { width:100% !important; max-width:min(100%, 920px) !important; }
.output-images-container .image-grid { grid-template-columns:repeat(auto-fit, minmax(clamp(90px, 22vw, 160px), 1fr)) !important; }
.left-controls { gap:6px !important; }
.model-btn-trigger, .setting-tag { padding:6px 10px !important; }
}
@media (max-width: 768px) {
html, body { height:auto !important; min-height:100% !important; overflow-y:auto !important; }
body.mobile-popup-active { overflow:hidden !important; }
.content-container { display:block !important; height:auto !important; min-height:100vh !important; overflow:visible !important; }
.sidebar { width:min(84vw, 320px) !important; max-width:320px !important; }
.main-content { width:100% !important; margin-left:0 !important; padding:12px !important; height:auto !important; min-height:100vh !important; overflow:visible !important; }
.chatbot, .disclaimer-text { display:flex !important; }
.mobile-unsupported-message { display:none !important; }
.chat-content-area { position:relative !important; inset:auto !important; left:0 !important; right:0 !important; top:auto !important; bottom:auto !important; padding:10px 0 170px !important; gap:20px !important; display:none; }
body:not(.empty-state-active) .chat-content-area.active { display:flex !important; }
.chatbot-container { left:0 !important; right:0 !important; bottom:0 !important; padding:0 10px max(10px, env(safe-area-inset-bottom)) !important; transform:none !important; pointer-events:auto !important; }
.chatbot-container.empty-state { position:relative !important; padding:12px 0 110px !important; margin:0 !important; transform:none !important; height:auto !important; min-height:auto !important; overflow:visible !important; }
.chatbot { width:100% !important; max-width:100% !important; border-radius:16px !important; padding:14px 14px 12px !important; overflow:visible !important; }
.input-row { margin-bottom:2px !important; }
.ai-input { min-height:44px !important; font-size:16px !important; }
.control-bar { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:10px !important; padding-top:10px !important; }
.left-controls { display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; gap:8px !important; padding:2px 10px 4px !important; margin:0 -2px !important; }
.left-controls::-webkit-scrollbar { display:none !important; }
.left-controls > * { flex-shrink:0 !important; }
.right-controls { position:static !important; justify-content:flex-end !important; gap:10px !important; width:100% !important; padding-top:8px !important; border-top:1px solid #f1f5f9 !important; background:transparent !important; }
.right-controls::before { display:none !important; }
.model-btn-trigger, .setting-tag { flex-shrink:0 !important; padding:6px 10px !important; min-height:32px !important; font-size:12px !important; border-radius:999px !important; background:#f8fafc !important; border:1px solid #eef2f7 !important; }
.watermark-switch-container { flex-shrink:0 !important; border-radius:999px !important; background:#f8fafc !important; border:1px solid #eef2f7 !important; padding:0 10px !important; }
.upload-widget { border-radius:999px !important; width:36px !important; min-width:36px !important; height:32px !important; min-height:32px !important; }
.credits-text { display:inline-flex !important; font-size:12px !important; color:#94a3b8 !important; }
.generate-btn { width:38px !important; height:38px !important; border-radius:12px !important; }
.model-dropdown, .settings-popup { position:fixed !important; left:12px !important; right:12px !important; bottom:calc(88px + env(safe-area-inset-bottom, 0px)) !important; width:auto !important; max-width:none !important; margin:0 !important; z-index:100050 !important; pointer-events:auto !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; }
.model-dropdown.show, .settings-popup.show { display:block !important; opacity:1 !important; visibility:visible !important; }
.result-container { width:100% !important; max-width:100% !important; padding:14px !important; border-radius:16px !important; margin:0 auto !important; }
.output-images-container .image-grid { grid-template-columns:repeat(auto-fit, minmax(min(100%, 132px), 1fr)) !important; gap:10px !important; }
.chatbot-cards { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:12px !important; padding:0 !important; margin-top:16px !important; }
.chatbot-card { min-width:0 !important; width:100% !important; }
.excellent-examples-section { width:100% !important; max-width:100% !important; padding:0 !important; margin-top:28px !important; }
.examples-masonry { column-count:2 !important; column-gap:12px !important; }
.disclaimer-text { position:static !important; transform:none !important; width:100% !important; padding:16px 12px 8px !important; margin:0 auto !important; }
}
@media (max-width: 480px) {
html, body { height:auto !important; }
.sidebar { width:min(88vw, 320px) !important; }
.main-content { padding:10px !important; }
.chatbot { border-radius:14px !important; padding:12px !important; }
.chatbot-cards { grid-template-columns:1fr !important; }
.examples-masonry { column-count:1 !important; }
.model-btn-trigger, .setting-tag { font-size:11px !important; padding:6px 9px !important; }
.control-bar { gap:8px !important; }
.left-controls { gap:6px !important; }
.upload-widget { width:34px !important; min-width:34px !important; }
.credits-text { font-size:11px !important; }
.generate-btn { width:36px !important; height:36px !important; }
}
@media (max-width: 768px) {
.sidebar {
top:0 !important;
bottom:0 !important;
height:100dvh !important;
max-height:100dvh !important;
z-index:13020 !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
}
.sidebar.active { z-index:13020 !important; }
.sidebar-overlay { z-index:13010 !important; }
.mobile-close-btn { z-index:13030 !important; }
.chat-history-list {
min-height:0 !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
}
.model-dropdown,
.settings-popup,
.settings-dropdown,
.workflow-dropdown {
position:fixed !important;
left:12px !important;
right:12px !important;
bottom:12px !important;
top:auto !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
max-height:calc(100dvh - 108px) !important;
margin:0 !important;
border-radius:22px !important;
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
z-index:13050 !important;
}
.model-dropdown.show,
.settings-popup.show,
.settings-dropdown.show,
.workflow-dropdown.show {
display:block !important;
opacity:1 !important;
visibility:visible !important;
}
.model-tabs {
position:sticky !important;
top:0 !important;
z-index:2 !important;
margin:-20px -16px 10px !important;
border-radius:22px 22px 0 0 !important;
}
.model-content { max-width:100% !important; overflow:visible !important; }
.model-option {
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
align-items:center !important;
}
.model-info { min-width:0 !important; }
.model-name,
.model-description {
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.resolution-selector,
.ratio-grid {
width:100% !important;
max-width:100% !important;
}
.resolution-selector {
display:grid !important;
grid-template-columns:repeat(auto-fit, minmax(72px, 1fr)) !important;
}
.ratio-grid { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
.dimensions-input { grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr) !important; }
}
@media (max-width: 768px) {
.chatbot-container.empty-state { padding-top:10px !important; }
.chatbot {
padding:12px !important;
border-radius:16px !important;
overflow:visible !important;
}
.chatbot .input-row {
display:block !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
}
.chatbot .text-input-wrapper,
.chatbot .text-input-wrapper.has-group-counts {
width:100% !important;
min-height:112px !important;
height:auto !important;
padding:12px !important;
border-radius:14px !important;
background:#f8fafc !important;
border:1px solid #eef2f7 !important;
box-sizing:border-box !important;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
overflow:hidden !important;
}
.chatbot .group-count-selector.is-active {
display:block !important;
width:100% !important;
max-width:100% !important;
height:30px !important;
min-height:30px !important;
margin:0 0 8px !important;
overflow-x:auto !important;
overflow-y:hidden !important;
scrollbar-width:none !important;
}
.chatbot .group-count-selector.is-active::-webkit-scrollbar { display:none !important; }
.chatbot .group-count-grid {
display:flex !important;
flex-wrap:nowrap !important;
align-items:center !important;
gap:6px !important;
width:100% !important;
height:28px !important;
min-height:28px !important;
overflow-x:auto !important;
overflow-y:hidden !important;
padding:0 0 2px !important;
scrollbar-width:none !important;
}
.chatbot .group-count-grid::-webkit-scrollbar { display:none !important; }
.chatbot .group-count-chip {
flex:0 0 auto !important;
height:26px !important;
min-height:26px !important;
padding:3px 7px !important;
background:rgba(248, 250, 252, 0.86) !important;
border-color:#e7edf5 !important;
}
.chatbot .group-count-chip-btn {
width:18px !important;
height:18px !important;
border-width:1px !important;
opacity:1 !important;
pointer-events:auto !important;
transform:scale(1) !important;
}
.chatbot .ai-input,
.chatbot .text-input-wrapper.has-group-counts .ai-input {
width:100% !important;
min-height:72px !important;
height:72px !important;
padding:0 !important;
margin:0 !important;
font-size:15px !important;
line-height:1.5 !important;
overflow-y:auto !important;
background:transparent !important;
}
.chatbot .image-preview-container,
.chatbot .image-preview-container.has-images {
width:100% !important;
max-width:100% !important;
margin:8px 0 0 !important;
padding:0 !important;
position:relative !important;
left:auto !important;
bottom:auto !important;
overflow:hidden !important;
box-shadow:none !important;
border:0 !important;
background:transparent !important;
}
.chatbot .image-preview-container.has-images { display:block !important; }
.chatbot .preview-grid {
display:flex !important;
flex-wrap:nowrap !important;
min-height:34px !important;
overflow-x:auto !important;
overflow-y:hidden !important;
scrollbar-width:none !important;
}
.chatbot .preview-grid::-webkit-scrollbar { display:none !important; }
.chatbot .control-bar {
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
gap:8px !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
padding:10px 0 0 !important;
overflow:visible !important;
}
.chatbot .left-controls {
display:flex !important;
flex:0 0 auto !important;
flex-wrap:nowrap !important;
align-items:center !important;
gap:8px !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:0 !important;
padding:0 0 2px !important;
overflow-x:auto !important;
overflow-y:hidden !important;
scrollbar-width:none !important;
}
.chatbot .left-controls::-webkit-scrollbar { display:none !important; }
.chatbot .left-controls > * {
flex:0 0 auto !important;
max-width:none !important;
}
.chatbot .model-btn-trigger,
.chatbot .setting-tag {
height:34px !important;
min-height:34px !important;
white-space:nowrap !important;
}
.chatbot .right-controls {
display:flex !important;
position:static !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
align-items:center !important;
justify-content:flex-end !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
border-top:0 !important;
background:transparent !important;
}
.chatbot .right-controls::before { display:none !important; }
}
/* Consistent image page dashboard width */
:root {
--app-max-width: clamp(1040px, 70vw, 1400px);
--sidebar-expanded-width: var(--sidebar-width, 116px);
}
@media (min-width: 769px) {
.recent-projects-section,
.excellent-examples-section {
width: min(100%, var(--app-max-width)) !important;
max-width: var(--app-max-width) !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.recent-projects-section {
margin: 42px auto 0 !important;
}
.recent-projects-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: clamp(12px, .9vw, 16px) !important;
}
.recent-project-card {
min-height: clamp(168px, 10vw, 186px) !important;
}
.recent-project-thumb {
height: clamp(118px, 7.4vw, 136px) !important;
}
.excellent-examples-section {
margin: clamp(48px, 6vh, 82px) auto 60px !important;
}
.examples-masonry {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: clamp(14px, 1vw, 18px) !important;
align-items: stretch !important;
}
.masonry-item {
aspect-ratio: 1 / 1.08 !important;
}
}
@media (min-width: 769px) and (max-width: 1320px) {
.examples-masonry {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (min-width: 769px) and (max-width: 1040px) {
.recent-projects-grid,
.examples-masonry {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* Page-level sidebar rail override */
:root {
--sidebar-expanded-width: var(--sidebar-width, 116px);
}
@media (min-width: 769px) {
.sidebar .nav-label,
.sidebar .group-title,
.sidebar .sidebar-logo-details,
.sidebar .collapse-btn {
display: none !important;
}
.sidebar .sidebar-header {
display: grid !important;
place-items: center !important;
padding: 28px 0 18px !important;
}
.sidebar .sidebar-logo-container {
display: grid !important;
place-items: center !important;
width: 100% !important;
}
.sidebar .sidebar-logo-img {
width: 34px !important;
height: 34px !important;
border-radius: 999px !important;
}
.sidebar .nav-group {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 9px !important;
padding: 8px 0 12px !important;
margin: 0 !important;
}
.sidebar .nav-item-row {
width: 100% !important;
min-height: auto !important;
margin: 0 !important;
display: flex !important;
justify-content: center !important;
border-radius: 0 !important;
background: transparent !important;
}
.sidebar .nav-item,
.sidebar .nav-item-link {
position: relative !important;
width: 76px !important;
min-width: 76px !important;
min-height: 66px !important;
padding: 8px 6px 7px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
border-radius: 18px !important;
background: transparent !important;
color: #4b5563 !important;
font-size: var(--sidebar-nav-font-size) !important;
font-weight: 650 !important;
line-height: 1.15 !important;
letter-spacing: 0 !important;
text-align: center !important;
box-shadow: none !important;
}
.sidebar .nav-item:hover,
.sidebar .nav-item-row:hover .nav-item-link {
background: #f5f7fb !important;
color: #111827 !important;
}
.sidebar .nav-item.active,
.sidebar .nav-item-link.active,
.sidebar .nav-item-row.active .nav-item-link,
.sidebar .nav-item-active-style {
background: #eaf1ff !important;
color: #1f2937 !important;
font-weight: 800 !important;
}
.sidebar .nav-item svg,
.sidebar .nav-item i {
width: 22px !important;
height: 22px !important;
flex: 0 0 22px !important;
margin: 0 !important;
color: #4b5563 !important;
stroke: currentColor !important;
font-size: 21px !important;
}
.sidebar .nav-item > span:first-of-type,
.sidebar .nav-item-link > span:first-of-type {
display: block !important;
flex: 0 1 auto !important;
width: 100% !important;
max-width: 68px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
line-height: 1.15 !important;
}
.sidebar .nav-badge-new,
.sidebar .nav-coming-badge,
.sidebar .nav-coming-soon-badge {
position: absolute !important;
top: 5px !important;
right: 6px !important;
margin: 0 !important;
padding: 1px 4px !important;
border-radius: 999px !important;
font-size: 8px !important;
line-height: 1.1 !important;
background: #fff7ed !important;
border: 1px solid #fed7aa !important;
color: #ea580c !important;
}
.sidebar .sidebar-footer {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 14px !important;
padding: 16px 0 24px !important;
margin-top: auto !important;
}
.sidebar .upgrade-card {
width: 64px !important;
min-height: 64px !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
border-radius: 22px !important;
background: transparent !important;
box-shadow: none !important;
}
.sidebar .upgrade-card::before,
.sidebar .upgrade-text,
.sidebar .user-details,
.sidebar .user-arrow {
display: none !important;
}
.sidebar .upgrade-icon {
width: 48px !important;
height: 48px !important;
border-radius: 999px !important;
}
.sidebar .user-profile-compact {
width: 54px !important;
height: 54px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
border-radius: 16px !important;
background: transparent !important;
}
.sidebar .user-avatar-small {
width: 40px !important;
height: 40px !important;
border-radius: 12px !important;
}
}
/* Refined sidebar rail polish */
:root {
--sidebar-width: clamp(92px, 5vw, 104px);
--sidebar-expanded-width: var(--sidebar-width, 98px);
--sidebar-nav-font-size: clamp(9.5px, .44vw, 10.5px);
--sidebar-icon-size: clamp(17px, .82vw, 18px);
}
@media (min-width: 769px) {
.sidebar {
width: var(--sidebar-width) !important;
background: #fff !important;
border-right: 1px solid #edf0f5 !important;
}
.sidebar .sidebar-header {
width: 100% !important;
min-height: 58px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 18px 0 12px !important;
box-sizing: border-box !important;
}
.sidebar .sidebar-logo-container {
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
.sidebar .sidebar-logo-img {
width: 28px !important;
height: 28px !important;
margin: 0 auto !important;
display: block !important;
border-radius: 999px !important;
object-fit: cover !important;
box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
}
.sidebar .sidebar-logo-details,
.sidebar .sidebar-logo-text,
.sidebar .sidebar-logo-subtitle,
.sidebar .collapse-btn,
.sidebar .group-title {
display: none !important;
}
.sidebar .nav-group {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 4px !important;
padding: 0 0 8px !important;
margin: 0 !important;
}
.sidebar .nav-label {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 64px !important;
height: 18px !important;
margin: 7px auto 4px !important;
padding: 0 !important;
color: transparent !important;
font-size: 0 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.sidebar .nav-label::before {
content: '' !important;
position: absolute !important;
left: 4px !important;
right: 4px !important;
top: 50% !important;
height: 1px !important;
background: #edf1f6 !important;
transform: translateY(-50%) !important;
}
.sidebar .nav-label::after {
content: '' !important;
position: relative !important;
z-index: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 22px !important;
height: 14px !important;
padding: 0 5px !important;
border-radius: 999px !important;
background: #fff !important;
color: #a1a9b5 !important;
font-size: 8px !important;
font-weight: 750 !important;
line-height: 1 !important;
}
.sidebar .nav-label-top::after {
content: '视频' !important;
}
.sidebar .nav-label-mt::after {
content: '图片' !important;
}
.sidebar .nav-label-mt ~ .nav-label-mt::after {
content: '模型' !important;
}
.sidebar .nav-label-top {
margin-top: 2px !important;
}
.sidebar .nav-item-row {
width: 100% !important;
min-height: auto !important;
margin: 0 !important;
display: flex !important;
justify-content: center !important;
background: transparent !important;
border-radius: 0 !important;
}
.sidebar .nav-item,
.sidebar .nav-item-link {
position: relative !important;
width: 60px !important;
min-width: 60px !important;
min-height: 54px !important;
padding: 6px 4px 5px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
border-radius: 14px !important;
background: transparent !important;
color: #566071 !important;
font-size: var(--sidebar-nav-font-size) !important;
font-weight: 680 !important;
line-height: 1.12 !important;
letter-spacing: 0 !important;
text-align: center !important;
box-shadow: none !important;
}
.sidebar .nav-item:hover,
.sidebar .nav-item-row:hover .nav-item-link {
background: #f6f8fb !important;
color: #111827 !important;
}
.sidebar .nav-item.active,
.sidebar .nav-item-link.active,
.sidebar .nav-item-row.active .nav-item-link,
.sidebar .nav-item-active-style {
background: #eef4ff !important;
color: #1f2937 !important;
font-weight: 820 !important;
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .05) !important;
}
.sidebar .nav-item svg,
.sidebar .nav-item i {
width: 18px !important;
height: 18px !important;
flex: 0 0 18px !important;
margin: 0 !important;
color: currentColor !important;
stroke: currentColor !important;
font-size: 18px !important;
}
.sidebar .nav-item > span:first-of-type,
.sidebar .nav-item-link > span:first-of-type {
display: block !important;
flex: 0 1 auto !important;
width: 100% !important;
max-width: 56px !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
line-height: 1.12 !important;
}
.sidebar .nav-badge-new,
.sidebar .nav-coming-badge,
.sidebar .nav-coming-soon-badge {
position: absolute !important;
top: 2px !important;
right: 1px !important;
min-width: 0 !important;
height: 13px !important;
margin: 0 !important;
padding: 0 4px !important;
border-radius: 999px !important;
font-size: 7.5px !important;
font-weight: 760 !important;
line-height: 12px !important;
background: #fff7ed !important;
border: 1px solid #fed7aa !important;
color: #ea580c !important;
box-shadow: 0 4px 10px rgba(234, 88, 12, .08) !important;
}
.sidebar .chat-history-list {
display: none !important;
}
.sidebar .sidebar-footer {
position: relative !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 9px !important;
padding: 16px 0 18px !important;
margin-top: auto !important;
background: transparent !important;
}
.sidebar .sidebar-footer::before {
content: '' !important;
width: 50px !important;
height: 1px !important;
margin-bottom: 3px !important;
background: #edf1f6 !important;
}
.sidebar .sidebar-footer {
overflow: visible !important;
}
.sidebar .upgrade-card,
.sidebar .user-profile-compact {
position: relative !important;
width: 46px !important;
height: 46px !important;
min-height: 46px !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 15px !important;
box-sizing: border-box !important;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.sidebar .upgrade-card {
border: 1px solid #ffead5 !important;
background: linear-gradient(180deg, #fffaf5 0%, #fff3e8 100%) !important;
box-shadow: 0 10px 20px rgba(249, 115, 22, .10) !important;
}
.sidebar .upgrade-card:hover {
transform: translateY(-1px) !important;
box-shadow: 0 12px 24px rgba(249, 115, 22, .15) !important;
}
.sidebar .upgrade-card::before,
.sidebar .upgrade-text,
.sidebar .user-details,
.sidebar .user-arrow {
display: none !important;
}
.sidebar .upgrade-icon {
width: 32px !important;
height: 32px !important;
border-radius: 999px !important;
font-size: 13px !important;
background: linear-gradient(135deg, #ff7a1a 0%, #f97316 100%) !important;
color: #fff !important;
box-shadow: none !important;
}
.sidebar .user-profile-compact {
border: 1px solid #e8edf5 !important;
background: #f8fafc !important;
}
.sidebar .user-profile-compact:hover {
transform: translateY(-1px) !important;
background: #f1f5f9 !important;
box-shadow: 0 10px 18px rgba(15, 23, 42, .07) !important;
}
.sidebar .user-avatar-small {
width: 30px !important;
height: 30px !important;
border-radius: 10px !important;
background: #111827 !important;
color: #fff !important;
font-size: 10.5px !important;
font-weight: 800 !important;
}
}
/* Sidebar brand and account clarity */
@media (min-width: 769px) {
.sidebar .sidebar-header {
min-height: 62px !important;
padding: 18px 0 10px !important;
}
.sidebar .sidebar-logo-container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 34px !important;
margin: 0 !important;
padding: 0 !important;
}
.sidebar .sidebar-logo-img,
.sidebar .sidebar-logo-details {
display: none !important;
}
.sidebar .sidebar-logo-container::before {
content: '美算AI' !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 50px !important;
height: 30px !important;
border-radius: 12px !important;
border: 1px solid #e7ecf3 !important;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
color: #111827 !important;
font-size: 14px !important;
font-weight: 900 !important;
line-height: 1 !important;
letter-spacing: .04em !important;
box-shadow: 0 8px 18px rgba(15, 23, 42, .06) !important;
}
.sidebar .sidebar-footer {
gap: 8px !important;
padding: 14px 0 18px !important;
}
.sidebar .upgrade-card,
.sidebar .user-profile-compact {
width: 76px !important;
height: 38px !important;
min-height: 38px !important;
display: grid !important;
grid-template-columns: 22px minmax(0, 1fr) !important;
align-items: center !important;
justify-content: center !important;
column-gap: 6px !important;
padding: 0 8px !important;
border-radius: 14px !important;
}
.sidebar .upgrade-card {
border: 1px solid #ffead5 !important;
background: linear-gradient(180deg, #fffaf5 0%, #fff4e8 100%) !important;
box-shadow: 0 8px 16px rgba(249, 115, 22, .08) !important;
}
.sidebar .upgrade-icon {
width: 22px !important;
height: 22px !important;
border-radius: 999px !important;
font-size: 10px !important;
}
.sidebar .upgrade-card::after {
content: '升级会员' !important;
display: block !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: #9a3412 !important;
font-size: 9.5px !important;
font-weight: 820 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
}
.sidebar .user-profile-compact {
border: 1px solid #e7ecf3 !important;
background: #f8fafc !important;
box-shadow: none !important;
}
.sidebar .user-avatar-small {
width: 22px !important;
height: 22px !important;
border-radius: 8px !important;
font-size: 9px !important;
font-weight: 850 !important;
}
.sidebar .user-profile-compact::after {
content: '会员信息' !important;
display: block !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: #334155 !important;
font-size: 9.5px !important;
font-weight: 820 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
}
.sidebar .upgrade-text,
.sidebar .user-details,
.sidebar .user-arrow {
display: none !important;
}
}
/* Sidebar wider membership detail polish */
:root {
--sidebar-width: clamp(110px, 6vw, 126px);
--sidebar-expanded-width: var(--sidebar-width, 118px);
}
@media (min-width: 769px) {
.sidebar {
width: var(--sidebar-width) !important;
}
.sidebar .sidebar-logo-container::before {
width: 58px !important;
height: 32px !important;
border-radius: 13px !important;
font-size: 14.5px !important;
letter-spacing: .06em !important;
}
.sidebar .nav-label {
width: 74px !important;
}
.sidebar .nav-item,
.sidebar .nav-item-link {
width: 70px !important;
min-width: 70px !important;
min-height: 56px !important;
}
.sidebar .nav-item > span:first-of-type,
.sidebar .nav-item-link > span:first-of-type {
max-width: 66px !important;
}
.sidebar .sidebar-footer {
gap: 8px !important;
padding: 14px 0 18px !important;
}
.sidebar .sidebar-footer::before {
width: 72px !important;
}
.sidebar .upgrade-card,
.sidebar .user-profile-compact {
width: 94px !important;
height: 54px !important;
min-height: 54px !important;
padding: 7px 8px !important;
display: grid !important;
grid-template-columns: 26px minmax(0, 1fr) !important;
column-gap: 7px !important;
align-items: center !important;
justify-content: start !important;
border-radius: 16px !important;
}
.sidebar .upgrade-card::after,
.sidebar .user-profile-compact::after {
display: none !important;
content: none !important;
}
.sidebar .upgrade-icon {
width: 26px !important;
height: 26px !important;
border-radius: 999px !important;
font-size: 11px !important;
grid-column: 1 !important;
grid-row: 1 !important;
}
.sidebar .upgrade-text {
display: flex !important;
min-width: 0 !important;
flex-direction: column !important;
justify-content: center !important;
overflow: hidden !important;
grid-column: 2 !important;
grid-row: 1 !important;
}
.sidebar .upgrade-title {
display: block !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: #9a3412 !important;
font-size: 10px !important;
font-weight: 850 !important;
line-height: 1.15 !important;
}
.sidebar .upgrade-badge {
display: none !important;
}
.sidebar .upgrade-desc {
display: block !important;
margin-top: 3px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: #c05621 !important;
font-size: 8.5px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.sidebar .user-avatar-small {
width: 26px !important;
height: 26px !important;
border-radius: 9px !important;
font-size: 9px !important;
grid-column: 1 !important;
grid-row: 1 !important;
}
.sidebar .user-details {
display: flex !important;
min-width: 0 !important;
flex-direction: column !important;
justify-content: center !important;
overflow: hidden !important;
grid-column: 2 !important;
grid-row: 1 !important;
}
.sidebar .user-name-row {
display: block !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: #111827 !important;
font-size: 10px !important;
font-weight: 850 !important;
line-height: 1.15 !important;
}
.sidebar .user-meta-row {
display: block !important;
margin-top: 3px !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: #64748b !important;
font-size: 8.5px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.sidebar .user-arrow {
display: none !important;
}
}
/* Sidebar final membership and login clarity */
:root {
--sidebar-width: clamp(126px, 7.2vw, 146px);
--sidebar-expanded-width: var(--sidebar-width, 136px);
}
@media (min-width: 769px) {
.sidebar {
width: var(--sidebar-width) !important;
}
.sidebar .nav-label {
width: 86px !important;
}
.sidebar .nav-item,
.sidebar .nav-item-link {
width: 78px !important;
min-width: 78px !important;
}
.sidebar .nav-item > span:first-of-type,
.sidebar .nav-item-link > span:first-of-type {
max-width: 72px !important;
}
.sidebar .sidebar-footer::before {
width: 90px !important;
}
.sidebar .upgrade-card,
.sidebar .user-profile-compact {
width: 112px !important;
height: 54px !important;
min-height: 54px !important;
grid-template-columns: 26px minmax(0, 1fr) !important;
column-gap: 7px !important;
}
.sidebar .upgrade-title {
display: flex !important;
align-items: center !important;
gap: 4px !important;
overflow: visible !important;
color: #9a3412 !important;
font-size: 10px !important;
font-weight: 850 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.sidebar .upgrade-badge {
display: inline-flex !important;
position: static !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
height: 13px !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 4px !important;
border-radius: 999px !important;
border: 1px solid #fed7aa !important;
background: #fff7ed !important;
color: #ea580c !important;
font-size: 7.5px !important;
font-weight: 760 !important;
line-height: 12px !important;
letter-spacing: 0 !important;
box-shadow: 0 4px 10px rgba(234, 88, 12, .08) !important;
}
.sidebar .upgrade-desc {
display: none !important;
}
.sidebar .user-name:empty::before {
content: "未登录" !important;
}
.sidebar .user-profile-compact.not-logged-in .user-details,
.sidebar .user-profile-compact:has(.user-name:empty) .user-details {
justify-content: center !important;
}
.sidebar .user-profile-compact.not-logged-in .user-meta-row,
.sidebar .user-profile-compact:has(.user-name:empty) .user-meta-row {
display: none !important;
}
}
/* Sidebar final requested typography polish */
@media (min-width: 769px) {
.sidebar .sidebar-logo-container::before {
content: '美算AI' !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
background: linear-gradient(135deg, #020617 0%, #2563eb 100%) !important;
box-shadow: none !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size: 18px !important;
font-weight: 900 !important;
line-height: 1 !important;
letter-spacing: .08em !important;
}
.sidebar .nav-label {
font-weight: 760 !important;
color: #64748b !important;
}
.sidebar .nav-item,
.sidebar .nav-item-link,
.sidebar .nav-item > span:first-of-type,
.sidebar .nav-item-link > span:first-of-type {
color: #1f2937 !important;
font-weight: 720 !important;
}
.sidebar .nav-item.active,
.sidebar .nav-item-link.active,
.sidebar .nav-item.active > span:first-of-type,
.sidebar .nav-item-link.active > span:first-of-type {
color: #0f172a !important;
font-weight: 820 !important;
}
.sidebar .user-profile-compact.not-logged-in .user-meta-row,
.sidebar .user-profile-compact.not-logged-in .user-role,
.sidebar .user-profile-compact.not-logged-in .user-points {
display: none !important;
}
}
/* Sidebar final depth and badge placement */
@media (min-width: 769px) {
.sidebar {
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 54%, #f8fbff 100%) !important;
border-right: 1px solid rgba(203, 213, 225, .72) !important;
box-shadow: 12px 0 34px rgba(15, 23, 42, .06), inset -1px 0 0 rgba(255, 255, 255, .88) !important;
}
.sidebar::after {
content: '' !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 1px !important;
background: linear-gradient(180deg, rgba(226, 232, 240, .18), rgba(148, 163, 184, .72), rgba(226, 232, 240, .18)) !important;
pointer-events: none !important;
}
.sidebar .nav-item[href="seedance_2_0"],
.sidebar a.nav-item-link[href="seedance_2_0"],
.sidebar a.nav-item-link[href="seedance_2_0"].active {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: #1f2937 !important;
}
.sidebar a.nav-item-link[href="seedance_2_0"] svg,
.sidebar a.nav-item-link[href="seedance_2_0"] i,
.sidebar a.nav-item-link[href="seedance_2_0"] span:first-of-type {
color: #1f2937 !important;
stroke: currentColor !important;
font-weight: 720 !important;
}
.sidebar .sidebar-footer {
overflow: visible !important;
}
.sidebar .upgrade-card,
.sidebar .user-profile-compact {
position: relative !important;
overflow: visible !important;
border: 1px solid rgba(226, 232, 240, .92) !important;
background: rgba(255, 255, 255, .92) !important;
box-shadow: 0 12px 22px rgba(15, 23, 42, .07), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}
.sidebar .upgrade-card {
border-color: rgba(254, 215, 170, .92) !important;
background: linear-gradient(180deg, #fffaf5 0%, #fff4ea 100%) !important;
}
.sidebar .upgrade-text {
overflow: visible !important;
}
.sidebar .upgrade-title {
padding-right: 20px !important;
}
.sidebar .upgrade-badge {
position: absolute !important;
top: -6px !important;
right: 6px !important;
height: 15px !important;
min-width: 25px !important;
padding: 0 5px !important;
font-size: 8px !important;
line-height: 14px !important;
z-index: 3 !important;
box-shadow: 0 5px 12px rgba(234, 88, 12, .14) !important;
}
}
/* Sidebar final softening pass */
@media (min-width: 769px) {
.sidebar {
background: #ffffff !important;
border-right: 1px solid rgba(226, 232, 240, .72) !important;
box-shadow: 5px 0 16px rgba(15, 23, 42, .025) !important;
}
.sidebar::after {
background: rgba(226, 232, 240, .45) !important;
}
.sidebar .sidebar-logo-container::before {
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: #111827 !important;
color: #111827 !important;
font-size: 17px !important;
font-weight: 900 !important;
letter-spacing: .06em !important;
}
.sidebar .upgrade-card,
.sidebar .user-profile-compact {
border-color: rgba(226, 232, 240, .66) !important;
background: #ffffff !important;
box-shadow: 0 5px 14px rgba(15, 23, 42, .035) !important;
}
.sidebar .upgrade-card {
border-color: rgba(253, 186, 116, .52) !important;
background: #fffaf5 !important;
}
.sidebar .upgrade-badge {
top: -10px !important;
right: 5px !important;
height: 15px !important;
min-width: 25px !important;
border-color: rgba(253, 186, 116, .65) !important;
background: #fff7ed !important;
color: #ea580c !important;
box-shadow: 0 3px 8px rgba(234, 88, 12, .10) !important;
}
}
/* Sidebar final readability and savings badge */
@media (min-width: 769px) {
.sidebar .nav-item,
.sidebar .nav-item-link {
font-size: clamp(10.5px, .54vw, 12px) !important;
font-weight: 780 !important;
color: #111827 !important;
}
.sidebar .nav-item > span:first-of-type,
.sidebar .nav-item-link > span:first-of-type {
max-width: 76px !important;
color: #111827 !important;
font-size: clamp(10.5px, .54vw, 12px) !important;
font-weight: 780 !important;
line-height: 1.14 !important;
letter-spacing: 0 !important;
-webkit-font-smoothing: antialiased !important;
}
.sidebar .nav-item svg,
.sidebar .nav-item-link svg,
.sidebar .nav-icon-standard,
.sidebar .nav-icon-active {
width: clamp(18px, .95vw, 20px) !important;
height: clamp(18px, .95vw, 20px) !important;
stroke-width: 2.45 !important;
color: #111827 !important;
stroke: currentColor !important;
}
.sidebar .nav-item.active,
.sidebar .nav-item-link.active,
.sidebar .nav-item.active > span:first-of-type,
.sidebar .nav-item-link.active > span:first-of-type {
font-weight: 860 !important;
color: #020617 !important;
}
.sidebar .nav-item.active svg,
.sidebar .nav-item-link.active svg {
stroke-width: 2.65 !important;
color: #020617 !important;
}
.sidebar .upgrade-title {
padding-right: 0 !important;
transform: translateY(5px) !important;
}
.sidebar .upgrade-badge {
top: 5px !important;
right: 7px !important;
min-width: 39px !important;
height: 16px !important;
padding: 0 5px !important;
border-radius: 999px !important;
font-size: 8px !important;
font-weight: 800 !important;
line-height: 15px !important;
white-space: nowrap !important;
}
}
/* Sidebar final savings badge position lock */
@media (min-width: 769px) {
.sidebar .upgrade-badge {
top: -33px !important;
right: -15px !important;
}
}