[x-cloak]:not([style*="display"]) { display: none !important; }   body { --douban-green: var(--zen-primary, #41ac52); 
--douban-dark: var(--zen-primary, #37a);
--douban-accent-gold: var(--zen-primary, #c4a35a); --douban-text: var(--zen-text, #333);
--douban-text-secondary: var(--zen-text-light, #444);
--douban-text-muted: var(--zen-text-muted, #999);
--douban-text-light: var(--zen-text-muted, #bbb);
--douban-text-heading: var(--zen-text-heading, #222); --douban-bg: var(--zen-bg-alt, #fafafa);
--douban-card-bg: var(--zen-bg, #fff);
--douban-bg-hover: var(--zen-bg-hover, #f9f9f9); --douban-border: var(--zen-border, #e8e8e8);
--douban-border-light: var(--zen-border-light, #f0f0f0);
--douban-border-dark: var(--zen-border-dark, #e6e6e6); --douban-shadow: 0 1px 3px var(--zen-shadow, rgba(0,0,0,0.08));
--douban-shadow-hover: 0 2px 8px var(--zen-shadow-hover, rgba(0,0,0,0.12)); --douban-gray: var(--zen-text-muted, #666);
--douban-light-gray: var(--zen-border, #e0e0e0);
--douban-id-bg: var(--zen-text-muted, var(--douban-gray));
--douban-id-text: #fff;
--douban-category-bg: rgba(var(--zen-primary-rgb, 51, 119, 170), 0.1);
--douban-category-text: var(--zen-primary, var(--douban-dark));
--douban-user-color: var(--zen-text, var(--douban-dark));
--douban-meta-bg: var(--zen-bg-alt, #f5f5f5);
--douban-tab-active-bg: var(--zen-primary, var(--douban-dark));
--douban-tab-active-text: #fff;
--douban-tab-ask-bg: var(--zen-primary, var(--douban-green));
--douban-input-bg: var(--zen-bg-alt, var(--douban-bg));
--douban-input-text: inherit;
--douban-input-focus-border: var(--zen-primary, var(--douban-dark));
--douban-input-focus-shadow: 0 0 0 2px rgba(var(--zen-primary-rgb, 51, 119, 170), 0.15);
--douban-action-hover-bg: rgba(var(--zen-primary-rgb, 51, 119, 170), 0.08);
--douban-reply-border: var(--zen-border-light, #eee);
--douban-form-title-color: var(--zen-primary, var(--douban-dark));
--douban-stats-accent: var(--zen-primary, var(--douban-green));
--douban-ask-shadow: 0 2px 8px rgba(var(--zen-primary-rgb, 51, 119, 170), 0.3);
--douban-modal-overlay: rgba(0, 0, 0, 0.5);
--douban-modal-title: var(--zen-text-heading, #333);
--douban-modal-close: var(--zen-text-muted, #999);
--douban-modal-close-hover-bg: rgba(0,0,0,0.08);
--douban-modal-close-hover: var(--zen-text-light, #666);
--douban-report-bg: var(--zen-bg, #fff);
--douban-avatar-selected-bg: var(--zen-bg-alt, #f5f5f5);
--douban-avatar-input-bg: var(--zen-bg, #fff);
--douban-avatar-refresh-bg: var(--zen-bg, #fff);
--douban-avatar-options-bg: var(--zen-bg-alt, #fafafa);
--douban-avatar-emoji-option-bg: var(--zen-bg, #fff);
--douban-avatar-scrollbar: var(--zen-border, #ccc);
--douban-markdown-code-bg: var(--zen-bg-alt, var(--douban-bg));
--douban-markdown-blockquote-bg: var(--zen-bg-alt, var(--douban-bg));
--douban-content-collapsed-gradient: linear-gradient(transparent, var(--zen-bg, var(--douban-card-bg)));
--douban-item-deleted-stripe: var(--zen-bg-alt, #f5f5f5);
--douban-item-hidden-stripe: var(--zen-border, #e8e8e8);
--douban-deleted-notice-bg: #fff3cd;
--douban-deleted-notice-border: #ffc107;
--douban-hidden-notice-bg: #e7f3ff;
--douban-hidden-notice-border: #0d6efd;
--douban-filter-bg: linear-gradient(135deg, var(--zen-bg-alt, #f8f6f0) 0%, var(--zen-bg-hover, #f5f3ed) 100%);
--douban-filter-border: var(--zen-border, #e8e4d9);
--douban-filter-text: var(--zen-text-light, #5a5a5a);
--douban-filter-link: var(--zen-primary, #7a9e7e);
--douban-filter-clear-bg: var(--zen-bg, #fff);
--douban-filter-clear-border: var(--zen-border-light, #d4cfc3);
--douban-filter-clear-hover-border: var(--zen-primary, #7a9e7e);
--douban-posted-notice-bg: var(--zen-bg-alt, #fff8e6);
--douban-posted-notice-border: var(--zen-border, #f0e6c8);
--douban-posted-notice-text: var(--zen-text-light, #8a7a5a);
--douban-toast-bg: rgba(0, 0, 0, 0.8);
--douban-toast-text: #fff;
--douban-btn-gray-bg: var(--zen-text-muted, #999);
--douban-error-text: #e74c3c;
--douban-success-text: #27ae60;
--douban-hint-text: var(--zen-text-muted, #999);
--douban-voice-btn-bg: var(--zen-bg-alt, #f5f5f5);
--douban-voice-btn-border: var(--zen-border, var(--douban-border));
--douban-voice-btn-text: var(--zen-text-light, #666);
--douban-voice-preview-bg: var(--zen-bg-alt, #f0f0f0);
--douban-audio-player-bg: var(--zen-bg-alt, #f8f8f8);
--douban-audio-progress-bg: var(--zen-border, #ddd);
--douban-audio-duration: var(--zen-text-muted, #999);
--douban-audio-play-btn: var(--zen-primary, #5d8a66);
--douban-audio-play-btn-hover: var(--zen-primary-light, #6aaa7a);
--douban-audio-progress-bar: var(--zen-primary, #5d8a66);
--douban-floor-tag-bg: var(--zen-bg-alt, #f0f0f0);
--douban-floor-tag-text: var(--zen-text-muted, var(--douban-gray));
--douban-admin-tag-color: var(--zen-primary, var(--douban-dark));
--douban-reply-author-color: var(--zen-text, var(--douban-dark));
--douban-quote-bg: var(--zen-bg, var(--douban-card-bg));
--douban-quote-border: var(--zen-primary, var(--douban-green));
--douban-quote-text: var(--zen-text-muted, var(--douban-gray));
--douban-btn-more-hover-bg: rgba(var(--zen-primary-rgb, 51, 119, 170), 0.05);
--douban-edit-label: var(--zen-text-light, #666);
--douban-input-label: var(--zen-text-light, #666);
--douban-category-tag-bg: rgba(var(--zen-primary-rgb, 51, 119, 170), 0.1);
--douban-category-tag-text: var(--zen-primary, var(--douban-dark));
--douban-confirm-danger-hover-bg: rgba(231, 76, 60, 0.1);
--douban-label-color: var(--zen-text-light, #666);
--douban-warning-text: #e67e22;
--douban-danger-text: #c0392b;
--douban-filter-text-secondary: var(--zen-text-light, #4a4540);
--douban-filter-text-muted: var(--zen-text-muted, #9a9590);
--douban-filter-link-color: var(--zen-primary, #7a9e7e);
--douban-filter-border-secondary: var(--zen-border, #d5d0c8);
--douban-filter-text-tertiary: var(--zen-text-light, #5a5a5a);
--douban-success-notice-color: var(--zen-primary, #5a8a5a);
--douban-success-notice-border: var(--zen-border, #c8e0c8);
--douban-markdown-text: var(--zen-text-light, #444);
--douban-danger-notice-color: #c62828;
--douban-danger-notice-border: #ffcdd2;
--douban-success-badge-color: #4caf50;
--douban-warm-bg: var(--zen-bg-alt, #faf8f5);
--douban-warm-bg-hover: var(--zen-bg-hover, #f5f3f0);
--douban-warm-border: var(--zen-border, #e8e4df);
--douban-warm-border-light: var(--zen-border-light, #e0dcd5);
--douban-warm-border-dashed: var(--zen-border-dark, #d0ccc5);
--douban-green-btn: var(--zen-primary, #7a9e7e);
--douban-green-btn-hover: var(--zen-primary-light, #6a8e6e);
--douban-gold-link: var(--zen-primary, #d4a84b);
--douban-note-border: var(--zen-primary, #c8d4c8);
--douban-success-bg: var(--zen-bg-alt, #f0f7f0);
--douban-recording-bg: #fff0f0;
--douban-error-bg: #fff5f5;
--douban-voice-preview-bg: var(--zen-bg-alt, #e8f5e9);
--douban-skeleton-from: var(--zen-bg-alt, #f0f0f0);
--douban-skeleton-via: var(--zen-border, #e0e0e0);
--douban-drawer-handle: var(--zen-border, #ddd);
--douban-action-btn-bg: var(--zen-bg-alt, #f8f8f8);
--douban-action-btn-hover-bg: var(--zen-bg-hover, #f0f0f0);
--douban-active-btn-bg: #fff0f0;
--douban-hover-overlay: rgba(0, 0, 0, 0.05);
--douban-green-hover-overlay: rgba(var(--zen-primary-rgb, 122, 158, 126), 0.1);
--douban-danger-hover-overlay: rgba(231, 76, 60, 0.1);
--douban-modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
--douban-drawer-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
--douban-close-bg: var(--zen-bg-alt, #f5f5f5);
--douban-close-hover-bg: var(--zen-bg-hover, #eee);
--douban-avatar-bg: var(--zen-bg-alt, #f5f3f0);
--douban-drawer-link-hover: var(--zen-primary, #7a9e7e);
--douban-btn-more-bg: var(--zen-bg-alt, #f5f5f5);
--douban-btn-more-border: var(--zen-border, #e0e0e0);
--douban-btn-more-hover-bg: var(--zen-bg-hover, #eee);
--douban-comment-border: var(--zen-border, #e8e4df);
--douban-comment-bg: var(--zen-bg, #fff);
--douban-replies-border: var(--zen-border-light, #f0f0f0);
--douban-replies-left-border: var(--zen-primary, #7a9e7e);
--douban-discuss-bg: var(--zen-bg-alt, #f5f3ef);
--douban-discuss-border: var(--zen-border, #e0dcd5);
--douban-discuss-hover-bg: var(--zen-bg-hover, #ebe8e3);
--douban-backdrop: rgba(0, 0, 0, 0.5);
--douban-backdrop-dark: rgba(0, 0, 0, 0.7);
} body.dark-mode {
--douban-text: var(--zen-text, #bbbbbb);
--douban-text-secondary: var(--zen-text-light, #bbb);
--douban-text-muted: var(--zen-text-muted, #888);
--douban-text-light: var(--zen-text-muted, #ddd);
--douban-gray: var(--zen-text-muted, #999);
--douban-light-gray: var(--zen-border, #333);
--douban-bg: var(--zen-bg-alt, #252525);
--douban-card-bg: var(--zen-bg, #1e1e1e);
--douban-border: var(--zen-border, #333);
--douban-shadow: 0 1px 3px var(--zen-shadow, rgba(0,0,0,0.3));
--douban-shadow-hover: 0 2px 8px var(--zen-shadow-hover, rgba(0,0,0,0.4));
--douban-id-bg: var(--zen-text-muted, #555);
--douban-id-text: #fff;
--douban-category-bg: rgba(var(--zen-primary-rgb, 197, 160, 89), 0.15);
--douban-category-text: var(--zen-primary, #c5a059);
--douban-user-color: var(--zen-primary, #8bc34a);
--douban-meta-bg: var(--zen-bg-alt, #2a2a2a);
--douban-tab-active-bg: var(--zen-primary, #4a7a9a);
--douban-tab-active-text: #fff;
--douban-tab-ask-bg: var(--zen-primary, #2a7d4f);
--douban-input-bg: var(--zen-bg-alt, #252525);
--douban-input-text: var(--zen-text, #ccc);
--douban-input-focus-border: var(--zen-primary, #4a90d9);
--douban-input-focus-shadow: 0 0 0 2px rgba(var(--zen-primary-rgb, 74, 144, 217), 0.2);
--douban-action-hover-bg: rgba(var(--zen-primary-rgb, 255, 255, 255), 0.08);
--douban-reply-border: var(--zen-border-light, #333);
--douban-form-title-color: var(--zen-primary, #c5a059);
--douban-stats-accent: var(--zen-primary, #c5a059);
--douban-ask-shadow: 0 2px 8px rgba(var(--zen-primary-rgb, 74, 122, 154), 0.3);
--douban-modal-overlay: rgba(0, 0, 0, 0.7);
--douban-modal-title: var(--zen-text-heading, #ddd);
--douban-modal-close: var(--zen-text-muted, #777);
--douban-modal-close-hover-bg: rgba(var(--zen-primary-rgb, 255, 255, 255), 0.1);
--douban-modal-close-hover: var(--zen-text-light, #aaa);
--douban-report-bg: var(--zen-bg-alt, #252525);
--douban-avatar-selected-bg: var(--zen-border, #333);
--douban-avatar-input-bg: var(--zen-border, #333);
--douban-avatar-refresh-bg: var(--zen-border, #333);
--douban-avatar-options-bg: var(--zen-bg-alt, #2a2a2a);
--douban-avatar-emoji-option-bg: var(--zen-border, #333);
--douban-avatar-scrollbar: var(--zen-text-muted, #555);
--douban-markdown-code-bg: var(--zen-border, #333);
--douban-markdown-blockquote-bg: rgba(var(--zen-primary-rgb, 255, 255, 255), 0.03);
--douban-content-collapsed-gradient: linear-gradient(transparent, var(--zen-bg, #1e1e1e));
--douban-item-deleted-stripe: var(--zen-bg-alt, #2a2a2a);
--douban-item-hidden-stripe: var(--zen-bg-alt, #2a2a2a);
--douban-deleted-notice-bg: #3d3d00;
--douban-deleted-notice-border: #666600;
--douban-hidden-notice-bg: #1a2a3a;
--douban-hidden-notice-border: #0d6efd;
--douban-filter-bg: linear-gradient(135deg, var(--zen-bg-alt, #2a2a2a) 0%, var(--zen-bg-hover, #252525) 100%);
--douban-filter-border: var(--zen-border, #3a3a3a);
--douban-filter-text: var(--zen-text-light, #aaa);
--douban-filter-link: var(--zen-primary, #8bc34a);
--douban-filter-clear-bg: var(--zen-border, #333);
--douban-filter-clear-border: var(--zen-border-dark, #444);
--douban-filter-clear-hover-border: var(--zen-primary, #c5a059);
--douban-posted-notice-bg: var(--zen-bg-alt, #2a2820);
--douban-posted-notice-border: var(--zen-border, #3a3528);
--douban-posted-notice-text: var(--zen-text-light, #a09070);
--douban-toast-bg: rgba(255, 255, 255, 0.9);
--douban-toast-text: #333;
--douban-btn-gray-bg: var(--zen-text-muted, #666);
--douban-error-text: #ff6b6b;
--douban-success-text: #51cf66;
--douban-hint-text: var(--zen-text-muted, #888);
--douban-voice-btn-bg: var(--zen-border, #333);
--douban-voice-btn-border: var(--zen-border-dark, #444);
--douban-voice-btn-text: var(--zen-text-light, #aaa);
--douban-voice-preview-bg: var(--zen-border, #333);
--douban-audio-player-bg: var(--zen-bg-alt, #2a2a2a);
--douban-audio-progress-bg: var(--zen-border-dark, #444);
--douban-audio-duration: var(--zen-text-muted, #888);
--douban-floor-tag-bg: var(--zen-primary, #c5a059);
--douban-floor-tag-text: var(--zen-bg-card, #1a1a1a);
--douban-admin-tag-color: var(--zen-primary, #c5a059);
--douban-reply-author-color: var(--zen-primary, #c5a059);
--douban-quote-bg: var(--zen-bg, #1e1e1e);
--douban-quote-border: var(--zen-primary, #c5a059);
--douban-quote-text: var(--zen-text-muted, #888);
--douban-btn-more-hover-bg: rgba(var(--zen-primary-rgb, 255, 255, 255), 0.05);
--douban-edit-label: var(--zen-text-light, #aaa);
--douban-input-label: var(--zen-text-light, #aaa);
--douban-category-tag-bg: rgba(var(--zen-primary-rgb, 197, 160, 89), 0.15);
--douban-category-tag-text: var(--zen-primary, #c5a059);
--douban-confirm-danger-hover-bg: rgba(231, 76, 60, 0.1);
--douban-label-color: var(--zen-text-light, #aaa);
--douban-warning-text: #e67e22;
--douban-danger-text: #ff6b6b;
--douban-accent-gold: var(--zen-primary, #c5a059);
--douban-filter-text-secondary: var(--zen-text-light, #9a9590);
--douban-filter-text-muted: var(--zen-text-light, #9a9590);
--douban-filter-link-color: var(--zen-primary, #8bc34a);
--douban-filter-border-secondary: var(--zen-border-dark, #444);
--douban-filter-text-tertiary: var(--zen-text-light, #aaa);
--douban-success-notice-color: var(--zen-primary, #8bc34a);
--douban-success-notice-border: var(--zen-border, #2a3a2a);
--douban-markdown-text: var(--zen-text, #ccc);
--douban-danger-notice-color: #ff6b6b;
--douban-danger-notice-border: #3a2020;
--douban-success-badge-color: #66bb6a;
--douban-warm-bg: var(--zen-bg-alt, #252525);
--douban-warm-bg-hover: var(--zen-bg-hover, #2a2a2a);
--douban-warm-border: var(--zen-border, #333);
--douban-warm-border-light: var(--zen-border-dark, #444);
--douban-warm-border-dashed: var(--zen-border-dark, #444);
--douban-green-btn: var(--zen-primary, #5d8a66);
--douban-green-btn-hover: var(--zen-primary-light, #6aaa7a);
--douban-gold-link: var(--zen-primary, #5d8a66);
--douban-note-border: var(--zen-primary, #5d8a66);
--douban-success-bg: var(--zen-bg-alt, #2a3a2a);
--douban-recording-bg: #3a2020;
--douban-error-bg: #3a2020;
--douban-voice-preview-bg: var(--zen-bg-alt, #2a3a2a);
--douban-skeleton-from: var(--zen-bg-alt, #2a2a2a);
--douban-skeleton-via: var(--zen-border, #333);
--douban-drawer-handle: var(--zen-text-muted, #555);
--douban-action-btn-bg: var(--zen-border, #333);
--douban-action-btn-hover-bg: var(--zen-border-dark, #3a3a3a);
--douban-active-btn-bg: #3a2020;
--douban-hover-overlay: rgba(var(--zen-primary-rgb, 255, 255, 255), 0.05);
--douban-green-hover-overlay: rgba(var(--zen-primary-rgb, 138, 195, 74), 0.1);
--douban-danger-hover-overlay: rgba(231, 76, 60, 0.1);
--douban-modal-shadow: 0 10px 40px var(--zen-shadow, rgba(0, 0, 0, 0.4));
--douban-drawer-shadow: 0 -8px 32px var(--zen-shadow-hover, rgba(0, 0, 0, 0.5));
--douban-close-bg: var(--zen-border, #333);
--douban-close-hover-bg: var(--zen-border-dark, #444);
--douban-avatar-bg: var(--zen-border, #333);
--douban-drawer-link-hover: var(--zen-primary-light, #6aaa7a);
--douban-btn-more-bg: var(--zen-bg-alt, #252525);
--douban-btn-more-border: var(--zen-border-dark, #444);
--douban-btn-more-hover-bg: var(--zen-border, #333);
--douban-comment-border: var(--zen-border, #333);
--douban-comment-bg: var(--zen-bg-alt, #252525);
--douban-replies-border: var(--zen-border, #333);
--douban-replies-left-border: var(--zen-primary-light, #6aaa7a);
--douban-discuss-bg: var(--zen-bg-alt, #2a2a2a);
--douban-discuss-border: var(--zen-border-dark, #444);
--douban-discuss-hover-bg: var(--zen-bg-hover, #333);
--douban-audio-play-btn: var(--zen-primary, #5d8a66);
--douban-audio-play-btn-hover: var(--zen-primary-light, #6aaa7a);
--douban-audio-progress-bar: var(--zen-primary, #5d8a66);
--douban-backdrop: rgba(0, 0, 0, 0.7);
--douban-backdrop-dark: rgba(0, 0, 0, 0.7);
} .zql-v2 { 
width: 100%; 
margin: 0; 
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; 
line-height: 1.6; 
background: transparent;
color: var(--douban-text);
}
.zql-v2 *, .zql-drawer-overlay * { box-sizing: border-box; } .zql-v2 .zql-text-center { text-align: center; }
.zql-v2 .zql-flex-center { display: flex; align-items: center; justify-content: center; }
.zql-v2 .zql-text-error { color: var(--douban-error-text); }
.zql-v2 .zql-text-sm { font-size: 12px; }
.zql-v2 .zql-ml-2 { margin-left: 8px; }
.zql-v2 .zql-mr-2 { margin-right: 8px; }
.zql-v2 .zql-flex { display: flex; }
.zql-v2 .zql-justify-between { justify-content: space-between; }
.zql-v2 .zql-items-center { align-items: center; } .zql-filter-notice {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: var(--douban-filter-bg);
border: 1px solid var(--douban-filter-border);
border-radius: 8px;
margin-bottom: 12px;
font-size: 14px;
color: var(--douban-filter-text);
}
.zql-filter-notice a {
color: var(--douban-filter-link);
text-decoration: none;
}
.zql-filter-notice a:hover {
text-decoration: underline;
}
.zql-filter-clear {
padding: 4px 12px;
background: var(--douban-filter-clear-bg);
border: 1px solid var(--douban-filter-clear-border);
border-radius: 4px;
color: var(--douban-text-muted) !important;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.zql-filter-clear:hover {
background: var(--douban-filter-bg);
border-color: var(--douban-filter-clear-hover-border);
color: var(--douban-filter-clear-hover-border) !important;
text-decoration: none;
}
.zql-posted-notice {
padding: 10px 16px;
background: var(--douban-posted-notice-bg);
border: 1px solid var(--douban-posted-notice-border);
border-radius: 6px;
margin-bottom: 12px;
font-size: 13px;
color: var(--douban-posted-notice-text);
} .zql-v2 .douban-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
} .zql-v2 .douban-stats { 
display: flex;
gap: 24px;
font-size: 13px;
color: var(--douban-gray);
}
.zql-v2 .douban-stats strong { color: var(--douban-stats-accent); font-weight: 600; } .zql-v2 .douban-ask-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
background: var(--douban-tab-active-bg);
color: var(--douban-tab-active-text);
border: none;
border-radius: 24px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
box-shadow: var(--douban-ask-shadow);
}
.zql-v2 .douban-ask-btn:hover {
background: #2874a6;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(51, 119, 170, 0.4);
}
.zql-v2 .douban-ask-icon {
font-size: 16px;
} .zql-v2 .douban-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--douban-modal-overlay);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}
.zql-v2 .douban-modal-content {
background: var(--douban-card-bg);
border-radius: 12px;
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
} .zql-v2 .douban-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
border-bottom: 1px solid var(--douban-border);
}
.zql-v2 .douban-modal-title {
font-size: 15px;
font-weight: 600;
color: var(--douban-modal-title);
}
.zql-v2 .douban-modal-close {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--douban-modal-close);
font-size: 16px;
cursor: pointer;
border-radius: 50%;
transition: all 0.2s;
}
.zql-v2 .douban-modal-close:hover {
background: var(--douban-modal-close-hover-bg);
color: var(--douban-modal-close-hover);
} .zql-v2 .douban-modal form {
padding: 14px;
} .zql-v2 .douban-report-link {
background: none;
border: none;
color: var(--douban-text-muted);
font-size: 11px;
cursor: pointer;
padding: 0 4px;
margin-left: 8px;
}
.zql-v2 .douban-report-link:hover {
color: var(--douban-text-secondary);
text-decoration: underline;
} .zql-v2 .douban-share-link {
background: none;
border: none;
color: var(--douban-text-muted);
font-size: 11px;
cursor: pointer;
padding: 0 4px;
margin-left: 4px;
}
.zql-v2 .douban-share-link:hover {
color: var(--douban-text-secondary);
text-decoration: underline;
} .zen-toast {
position: fixed;
bottom: 80px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--douban-toast-bg);
color: var(--douban-toast-text);
padding: 10px 20px;
border-radius: 20px;
font-size: 14px;
z-index: 10000;
opacity: 0;
transition: all 0.3s ease;
pointer-events: none;
}
.zen-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
} .zql-v2 .douban-report-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
}
.zql-v2 .douban-report-content {
background: var(--douban-report-bg);
border-radius: 8px;
width: 90%;
max-width: 400px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.zql-v2 .douban-report-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--douban-border);
font-size: 14px;
font-weight: 500;
}
.zql-v2 .douban-report-body {
padding: 16px;
}
.zql-v2 .douban-report-info {
font-size: 12px;
color: var(--douban-gray);
margin: 0 0 10px 0;
}
.zql-v2 .douban-report-body textarea {
min-height: 80px;
}
.zql-v2 .douban-report-footer {
padding: 12px 16px;
border-top: 1px solid var(--douban-border);
text-align: right;
} .zql-v2 .douban-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--douban-id-text);
font-size: 14px;
font-weight: 500;
flex-shrink: 0;
}
.zql-v2 .douban-avatar-emoji {
font-size: 20px;
background: transparent;
}
.zql-v2 .douban-meta-left {
display: flex;
align-items: center;
gap: 10px;
}
.zql-v2 .douban-meta-info {
flex: 1;
} .zql-v2 .douban-guest-section {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 6px;
}
.zql-v2 .douban-avatar-picker {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 6px;
margin-bottom: 8px;
}
.zql-v2 .douban-avatar-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.zql-v2 .douban-avatar-label {
font-size: 13px;
color: var(--douban-label-color);
flex-shrink: 0;
}
.zql-v2 .douban-avatar-selected {
width: 32px;
height: 32px;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
background: var(--douban-avatar-selected-bg);
border-radius: 6px;
border: 1px solid var(--douban-border);
flex-shrink: 0;
}
.zql-v2 .douban-avatar-input {
width: 32px;
padding: 6px 4px;
border: 1px solid var(--douban-border);
border-radius: 6px;
font-size: 18px;
text-align: center;
background: var(--douban-avatar-input-bg);
-webkit-appearance: none;
appearance: none;
flex-shrink: 0;
}
.zql-v2 .douban-avatar-input:focus {
outline: none;
border-color: var(--douban-primary);
}
.zql-v2 .douban-avatar-refresh {
width: 32px;
height: 32px;
border: 1px solid var(--douban-border);
border-radius: 6px;
background: var(--douban-avatar-refresh-bg);
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
padding: 0;
flex-shrink: 0;
}
.zql-v2 .douban-avatar-refresh:hover {
background: #f5f5f5;
border-color: var(--douban-primary);
}
.zql-v2 .douban-avatar-refresh:active {
transform: rotate(180deg);
}
.zql-v2 .douban-avatar-preview {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
font-weight: 500;
flex-shrink: 0;
}
.zql-v2 .douban-avatar-emoji-preview {
font-size: 24px;
background: transparent;
}
.zql-v2 .douban-avatar-options {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 4px;
background: var(--douban-avatar-options-bg);
border-radius: 8px;
max-height: 76px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
flex: 1;
}
.zql-v2 .douban-avatar-options::-webkit-scrollbar {
width: 6px;
}
.zql-v2 .douban-avatar-options::-webkit-scrollbar-track {
background: transparent;
}
.zql-v2 .douban-avatar-options::-webkit-scrollbar-thumb {
background: var(--douban-avatar-scrollbar);
border-radius: 3px;
}
.zql-v2 .douban-avatar-option {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
padding: 0;
transition: transform 0.15s, border-color 0.15s;
}
.zql-v2 .douban-avatar-emoji-option {
width: 28px;
height: 28px;
font-size: 18px;
background: var(--douban-avatar-emoji-option-bg);
border: 2px solid transparent;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.zql-v2 .douban-avatar-option:hover {
transform: scale(1.15);
}
.zql-v2 .douban-avatar-option.active {
border-color: #fff;
box-shadow: 0 0 0 2px var(--douban-primary);
}
.zql-v2 .douban-avatar-emoji-option.active {
border-color: var(--douban-green);
background: rgba(65, 172, 82, 0.1);
transform: scale(1.1);
} .zql-v2 .douban-markdown-hint {
font-size: 11px;
color: var(--douban-gray);
} .zql-v2 .douban-markdown h1,
.zql-v2 .douban-markdown h2,
.zql-v2 .douban-markdown h3 {
margin: 12px 0 6px 0;
font-weight: 600;
line-height: 1.4;
}
.zql-v2 .douban-markdown h1 { font-size: 18px; }
.zql-v2 .douban-markdown h2 { font-size: 16px; }
.zql-v2 .douban-markdown h3 { font-size: 15px; }
.zql-v2 .douban-markdown p {
margin: 6px 0;
line-height: 1.6;
}
.zql-v2 .douban-markdown strong {
font-weight: 600;
}
.zql-v2 .douban-markdown em {
font-style: italic;
}
.zql-v2 .douban-markdown del {
text-decoration: line-through;
opacity: 0.7;
}
.zql-v2 .douban-markdown code {
background: var(--douban-markdown-code-bg);
padding: 2px 5px;
border-radius: 3px;
font-size: 13px;
font-family: 'Consolas', 'Monaco', monospace;
}
.zql-v2 .douban-markdown pre {
background: var(--douban-markdown-code-bg);
padding: 10px;
border-radius: 4px;
overflow-x: auto;
margin: 8px 0;
}
.zql-v2 .douban-markdown pre code {
background: none;
padding: 0;
}
.zql-v2 .douban-markdown a {
color: var(--douban-primary);
text-decoration: none;
}
.zql-v2 .douban-markdown a:hover {
text-decoration: underline;
}
.zql-v2 .douban-markdown img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin: 8px 0;
}
.zql-v2 .douban-markdown ul,
.zql-v2 .douban-markdown ol {
margin: 8px 0;
padding-left: 20px;
}
.zql-v2 .douban-markdown li {
margin: 4px 0;
line-height: 1.5;
}
.zql-v2 .douban-markdown blockquote {
border-left: 3px solid var(--douban-primary);
margin: 8px 0;
padding: 6px 0 6px 12px;
color: var(--douban-gray);
background: var(--douban-markdown-blockquote-bg);
border-radius: 0 4px 4px 0;
}
.zql-v2 .douban-markdown hr {
border: none;
border-top: 1px solid var(--douban-border);
margin: 12px 0;
}
.zql-drawer-overlay .douban-markdown h1,
.zql-drawer-overlay .douban-markdown h2,
.zql-drawer-overlay .douban-markdown h3 {
margin: 12px 0 6px 0;
font-weight: 600;
line-height: 1.4;
}
.zql-drawer-overlay .douban-markdown h1 { font-size: 18px; }
.zql-drawer-overlay .douban-markdown h2 { font-size: 16px; }
.zql-drawer-overlay .douban-markdown h3 { font-size: 15px; }
.zql-drawer-overlay .douban-markdown p {
margin: 6px 0;
line-height: 1.6;
}
.zql-drawer-overlay .douban-markdown strong {
font-weight: 600;
}
.zql-drawer-overlay .douban-markdown em {
font-style: italic;
}
.zql-drawer-overlay .douban-markdown del {
text-decoration: line-through;
opacity: 0.7;
}
.zql-drawer-overlay .douban-markdown code {
background: var(--douban-markdown-code-bg);
padding: 2px 5px;
border-radius: 3px;
font-size: 13px;
font-family: 'Consolas', 'Monaco', monospace;
}
.zql-drawer-overlay .douban-markdown pre {
background: var(--douban-markdown-code-bg);
padding: 10px;
border-radius: 4px;
overflow-x: auto;
margin: 8px 0;
}
.zql-drawer-overlay .douban-markdown pre code {
background: none;
padding: 0;
}
.zql-drawer-overlay .douban-markdown a {
color: var(--douban-filter-link-color);
text-decoration: none;
}
.zql-drawer-overlay .douban-markdown a:hover {
text-decoration: underline;
}
.zql-drawer-overlay .douban-markdown img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin: 8px 0;
}
.zql-drawer-overlay .douban-markdown ul,
.zql-drawer-overlay .douban-markdown ol {
margin: 8px 0;
padding-left: 20px;
}
.zql-drawer-overlay .douban-markdown li {
margin: 4px 0;
line-height: 1.5;
}
.zql-drawer-overlay .douban-markdown blockquote {
border-left: 3px solid var(--douban-filter-link-color);
margin: 8px 0;
padding: 6px 0 6px 12px;
color: var(--douban-text-muted);
background: var(--douban-markdown-blockquote-bg);
border-radius: 0 4px 4px 0;
}
.zql-drawer-overlay .douban-markdown hr {
border: none;
border-top: 1px solid var(--douban-border);
margin: 12px 0;
} .fade-enter { animation: fadeIn 0.2s ease-out; }
.fade-leave { animation: fadeOut 0.2s ease-in; }
.modal-enter { animation: slideIn 0.3s ease-out; }
.modal-leave { animation: slideOut 0.2s ease-in; }
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(-20px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes slideOut {
from { opacity: 1; transform: translateY(0) scale(1); }
to { opacity: 0; transform: translateY(-20px) scale(0.95); }
} .zql-v2 .douban-card { 
background: var(--douban-card-bg); 
border: 1px solid var(--douban-border); 
padding: 10px; 
margin-bottom: 10px; 
border-radius: 6px;
} .zql-v2 .douban-nav { 
display: flex; 
justify-content: center; 
align-items: center; 
gap: 12px;
margin-bottom: 10px; 
}
.zql-v2 .douban-tabs { display: flex; gap: 8px; }
.zql-v2 .douban-tab { 
padding: 8px 16px;
font-size: 14px; 
cursor: pointer; 
color: var(--douban-gray);
background: transparent;
border: 1px solid var(--douban-border);
border-radius: 20px;
transition: all 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.zql-v2 .douban-tab:hover { 
color: var(--douban-dark); 
border-color: var(--douban-dark);
background: rgba(51, 119, 170, 0.05);
}
.zql-v2 .douban-tab.active { 
color: #fff;
background: var(--douban-dark); 
border-color: var(--douban-dark);
font-weight: 500;
}
.zql-v2 .douban-tab-ask {
background: var(--douban-green);
color: #fff;
border-color: var(--douban-green);
font-weight: 500;
}
.zql-v2 .douban-tab-ask:hover {
background: #3a9448;
border-color: var(--douban-green);
} .zql-v2 .douban-search { 
display: flex; 
gap: 8px; 
align-items: center; 
position: relative;
}
.zql-v2 .douban-search-toggle {
display: none;
}
.zql-v2 .douban-search-inner { 
display: flex; 
gap: 8px; 
align-items: center; 
}
.zql-v2 .douban-search .zql-search-input { 
width: 200px;
padding: 8px 12px; 
border: 1px solid var(--douban-border); 
border-radius: 4px; 
font-size: 13px;
background: var(--douban-bg);
transition: border-color 0.2s, box-shadow 0.2s;
}
.zql-v2 .douban-search .zql-search-input:focus {
outline: none;
border-color: var(--douban-dark);
box-shadow: 0 0 0 2px rgba(51, 119, 170, 0.15);
}
.zql-v2 .douban-search .douban-search-btn { 
padding: 8px 16px; 
background: var(--douban-green); 
color: #fff; 
border: none; 
border-radius: 4px; 
font-size: 13px; 
cursor: pointer;
transition: background 0.2s;
}
.zql-v2 .douban-search .douban-search-btn:hover { background: #3a9448; } .zql-v2 .douban-form-box { 
background: var(--douban-card-bg); 
border: 1px solid var(--douban-border); 
padding: 12px; 
margin-bottom: 12px;
border-radius: 6px;
}
.zql-v2 .douban-form-title { 
font-size: 15px; 
color: var(--douban-form-title-color); 
margin-bottom: 10px; 
font-weight: 600;
padding-bottom: 8px;
border-bottom: 1px solid var(--douban-border);
}
.zql-v2 .douban-input-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.zql-v2 .douban-input-label {
font-size: 13px;
color: var(--douban-input-label);
flex-shrink: 0;
min-width: 40px;
}
.zql-v2 .douban-field-label {
font-size: 13px;
color: var(--douban-text-secondary);
font-weight: 500;
flex-shrink: 0;
}
.zql-v2 .douban-reply-field {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 8px;
}
.zql-v2 .douban-reply-field .douban-field-label {
font-size: 12px;
min-width: 35px;
padding-top: 8px;
}
.zql-v2 .douban-input, .zql-v2 .douban-select { 
flex: 1; 
padding: 6px 10px; 
border: 1px solid var(--douban-border); 
border-radius: 4px; 
font-size: 13px;
line-height: 1.4;
background: var(--douban-input-bg);
color: var(--douban-input-text);
transition: border-color 0.2s, box-shadow 0.2s;
min-height: 32px;
}
.zql-v2 .douban-input:focus, .zql-v2 .douban-select:focus {
outline: none;
border-color: var(--douban-input-focus-border);
box-shadow: var(--douban-input-focus-shadow);
}
.zql-v2 .douban-textarea { 
width: 100%; 
height: 100px; 
padding: 8px 10px; 
border: 1px solid var(--douban-border); 
border-radius: 4px; 
resize: vertical; 
font-size: 13px;
line-height: 1.5;
background: var(--douban-input-bg);
color: var(--douban-input-text);
transition: border-color 0.2s, box-shadow 0.2s;
}
.zql-v2 .douban-textarea:focus {
outline: none;
border-color: var(--douban-input-focus-border);
box-shadow: var(--douban-input-focus-shadow);
}
.zql-v2 .douban-counter { 
font-size: 12px; 
color: var(--douban-gray); 
text-align: right; 
margin-top: 8px;
}
.zql-v2 .douban-form-footer { 
display: flex; 
justify-content: space-between; 
align-items: center; 
margin-top: 16px;
}
.zql-v2 .douban-hint { color: var(--douban-gray); font-size: 12px; }
.zql-v2 .douban-load-more { 
text-align: center; 
margin-top: 16px; 
}
.zql-v2 .douban-btn-more { 
background: transparent; 
color: var(--douban-gray); 
border: 1px solid var(--douban-border);
padding: 8px 24px; 
border-radius: 20px; 
font-size: 14px; 
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.zql-v2 .douban-btn-more:hover { 
color: var(--douban-dark); 
border-color: var(--douban-dark);
background: rgba(51, 119, 170, 0.05);
}
.zql-v2 .douban-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 16px;
padding: 12px 0;
}
.zql-v2 .douban-page-btn {
background: var(--douban-btn-more-bg, #f5f5f5);
color: var(--douban-text, #333);
border: 1px solid var(--douban-btn-more-border, #e0e0e0);
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
min-width: 70px;
}
.zql-v2 .douban-page-btn:hover:not(:disabled) {
background: var(--douban-btn-more-hover-bg, #eee);
border-color: var(--douban-primary, #3377aa);
color: var(--douban-primary, #3377aa);
}
.zql-v2 .douban-page-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.zql-v2 .douban-page-info {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: var(--douban-text-muted, #666);
}
.zql-v2 .douban-page-input {
width: 50px;
padding: 6px 8px;
border: 1px solid var(--douban-border, #e0e0e0);
border-radius: 4px;
font-size: 14px;
text-align: center;
background: var(--douban-input-bg, #fff);
color: var(--douban-text, #333);
transition: border-color 0.2s, box-shadow 0.2s;
}
.zql-v2 .douban-page-input:focus {
outline: none;
border-color: var(--douban-primary, #3377aa);
box-shadow: 0 0 0 2px rgba(51, 119, 170, 0.1);
}
.zql-v2 .douban-page-input::-webkit-inner-spin-button,
.zql-v2 .douban-page-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.zql-v2 .douban-page-input[type=number] {
-moz-appearance: textfield;
} .zql-v2 .douban-scroll-sentinel {
padding: 16px;
text-align: center;
}
.zql-v2 .douban-loading-more {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--douban-text-muted, #666);
font-size: 14px;
}
.zql-v2 .douban-loading-spinner {
width: 16px;
height: 16px;
border: 2px solid var(--douban-border, #e0e0e0);
border-top-color: var(--douban-primary, #3377aa);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.zql-v2 .douban-no-more {
color: var(--douban-text-muted, #999);
font-size: 13px;
padding: 8px 0;
}
.zql-v2 .douban-btn-primary { 
background: var(--douban-green); 
color: #fff; 
border: none; 
padding: 10px 24px; 
border-radius: 4px; 
font-size: 14px; 
cursor: pointer;
transition: background 0.2s, transform 0.1s;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.zql-v2 .douban-btn-primary:hover { background: #3a9448; }
.zql-v2 .douban-btn-primary:active { transform: scale(0.98); }
.zql-v2 .douban-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .zql-v2 .douban-item { 
background: var(--douban-card-bg);
border: 1px solid var(--douban-border);
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 16px;
transition: box-shadow 0.2s, transform 0.2s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
clear: both;
overflow: hidden;
}
.zql-v2 .douban-item:hover {
box-shadow: var(--douban-shadow-hover);
transform: translateY(-1px);
}
.zql-v2 .douban-item-deleted {
opacity: 0.7;
background: repeating-linear-gradient(
45deg,
var(--douban-card-bg),
var(--douban-card-bg) 10px,
var(--douban-item-deleted-stripe) 10px,
var(--douban-item-deleted-stripe) 20px
);
}
.zql-v2 .douban-deleted-notice {
background: var(--douban-deleted-notice-bg);
border: 1px solid var(--douban-deleted-notice-border);
border-radius: 4px;
padding: 6px 10px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 10px;
}
.zql-v2 .douban-deleted-tag {
background: #dc3545;
color: #fff;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
}
.zql-v2 .douban-item-hidden {
opacity: 0.7;
background: repeating-linear-gradient(
45deg,
var(--douban-card-bg),
var(--douban-card-bg) 10px,
var(--douban-item-hidden-stripe) 10px,
var(--douban-item-hidden-stripe) 20px
);
}
.zql-v2 .douban-hidden-notice {
background: var(--douban-hidden-notice-bg);
border: 1px solid var(--douban-hidden-notice-border);
border-radius: 4px;
padding: 6px 10px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 10px;
}
.zql-v2 .douban-hidden-tag {
background: #6c757d;
color: #fff;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
}
.zql-v2 .douban-item-meta { 
display: flex; 
justify-content: space-between; 
align-items: center;
font-size: 12px; 
color: var(--douban-gray); 
margin-bottom: 8px;
padding: 8px;
background: var(--douban-meta-bg);
border-radius: 4px;
margin: -12px -14px 8px -14px;
}
.zql-v2 .douban-user-tag { 
color: var(--douban-user-color);
font-size: 12px;
}
.zql-v2 .douban-id-tag { 
background: var(--douban-id-bg); 
color: var(--douban-id-text); 
padding: 2px 8px; 
border-radius: 3px; 
font-size: 11px; 
margin-right: 8px;
}
.zql-v2 .douban-text { 
font-size: 14px; 
color: var(--douban-text); 
line-height: 1.8;
word-break: break-word;
}
.zql-v2 .douban-title-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
margin-left: 0;
}
.zql-v2 .douban-source-icon {
font-size: 14px;
flex-shrink: 0;
}
.zql-v2 .douban-source-icon.douban-source-independent {
color: var(--douban-accent-gold);
}
.zql-v2 .douban-source-icon.douban-source-deleted {
color: var(--douban-text-muted);
}
.zql-v2 .douban-title-link {
font-weight: 600;
font-size: 16px;
color: var(--douban-text);
text-decoration: none;
flex: 1;
}
.zql-v2 .douban-title-link:hover {
color: var(--douban-filter-link-color);
text-decoration: underline;
}
.zql-v2 .douban-title-text {
font-weight: 600;
font-size: 16px;
color: var(--douban-text);
flex: 1;
}
.zql-v2 .douban-source-deleted-text {
font-size: 12px;
color: var(--douban-text-muted);
margin-left: 4px;
}
.zql-v2 .douban-content {
color: var(--douban-text-secondary);
font-size: 14px;
}
.zql-v2 .douban-content p {
margin: 0 0 6px 0;
}
.zql-v2 .douban-content p:last-child {
margin-bottom: 0;
}
.zql-v2 .douban-content-collapsed {
max-height: 200px;
overflow: hidden;
position: relative;
}
.zql-v2 .douban-content-collapsed::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: var(--douban-content-collapsed-gradient);
}
.zql-v2 .douban-expand-btn {
display: block;
width: 100%;
padding: 8px 0;
margin-top: 4px;
background: none;
border: none;
border-radius: 0;
box-shadow: none;
color: var(--douban-dark);
font-size: 13px;
cursor: pointer;
text-align: center;
transition: all 0.2s ease;
outline: none;
}
.zql-v2 .douban-expand-btn:hover {
color: var(--douban-green);
}
.zql-v2 .douban-expand-btn:focus {
outline: none;
box-shadow: none;
}
.zql-v2 .douban-expand-btn span {
position: relative;
display: inline-block;
transition: transform 0.2s ease;
}
.zql-v2 .douban-expand-btn:hover span {
transform: translateY(-1px);
}
.zql-v2 .douban-expand-btn:hover span::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 1px;
background: var(--douban-green);
} .zql-v2 .douban-actions-bar { 
display: flex; 
justify-content: space-between; 
align-items: center;
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid var(--douban-border);
}
.zql-v2 .douban-actions-left { display: flex; gap: 10px; }
.zql-v2 .douban-actions-right { display: flex; gap: 8px; } .zql-v2 .douban-action-btn { 
display: inline-flex; 
align-items: center;
gap: 3px;
font-size: 12px; 
color: var(--douban-gray); 
cursor: pointer; 
background: none; 
border: none; 
padding: 2px 6px;
border-radius: 4px;
transition: all 0.2s;
}
.zql-v2 .douban-action-btn:hover { 
color: var(--douban-dark); 
background: rgba(51, 119, 170, 0.08);
}
.zql-v2 .douban-action-btn.active { color: var(--douban-green); }
.zql-v2 .douban-action-btn.active .douban-icon {
animation: douban-heartbeat 0.4s ease-in-out;
}
@keyframes douban-heartbeat {
0% { transform: scale(1); }
25% { transform: scale(1.3); }
50% { transform: scale(0.95); }
75% { transform: scale(1.15); }
100% { transform: scale(1); }
}
.zql-v2 .douban-action-btn .douban-icon { font-size: 12px; }
.zql-v2 .douban-action-btn .douban-count { font-size: 11px; } .zql-v2 .douban-replies-container { 
margin-top: 6px; 
padding: 6px 8px 6px 4px;
margin-left: 1px;
background: transparent;
border-radius: 6px;
border-left: 1px solid var(--douban-green);
clear: both;
overflow: hidden;
} .zql-v2 .douban-reply-note { 
padding: 4px 6px; 
margin-bottom: 2px;
margin-left: 0;
background: transparent;
border-radius: 4px;
border-left: none;
border-bottom: 1px solid var(--douban-reply-border);
font-size: 13px;
transition: background 0.15s;
}
.zql-v2 .douban-reply-note:hover {
background: var(--douban-action-hover-bg);
}
.zql-v2 .douban-reply-note:last-child {
margin-bottom: 0;
}
.zql-v2 .douban-reply-quote {
margin-left: 1px;
padding-left: 4px;
border-left: 1px solid var(--douban-quote-border, rgba(51, 119, 170, 0.3));
background: var(--douban-quote-bg, rgba(51, 119, 170, 0.03));
}
.zql-v2 .douban-reply-hidden { 
opacity: 0.6;
}
.zql-v2 .douban-reply-guest-deleted { 
opacity: 0.5;
background: rgba(231, 76, 60, 0.05);
}
.zql-v2 .douban-highlight {
animation: highlight-fade 2s ease-out;
}
@keyframes highlight-fade {
0% { background: rgba(51, 119, 170, 0.3); }
100% { background: transparent; }
}
.zql-v2 .douban-guest-deleted-tag {
color: var(--douban-error-text);
font-size: 12px;
}
.zql-v2 .douban-btn-restore {
color: var(--douban-success-text) !important;
}
.zql-v2 .douban-btn-restore:hover {
background: rgba(39, 174, 96, 0.1);
}
.zql-v2 .douban-btn-guest-delete {
color: var(--douban-error-text) !important;
}
.zql-v2 .douban-btn-guest-delete:hover {
background: rgba(231, 76, 60, 0.1);
}
.zql-v2 .douban-reply-header { 
display: flex; 
align-items: center; 
gap: 8px;
margin-bottom: 4px;
font-size: 12px;
}
.zql-v2 .douban-reply-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.zql-v2 .douban-avatar-small {
width: 24px;
height: 24px;
font-size: 12px;
}
.zql-v2 .douban-avatar-small.douban-avatar-emoji {
font-size: 16px;
}
.zql-v2 .douban-floor-tag { 
color: var(--douban-floor-tag-text); 
font-size: 11px;
padding: 1px 4px;
border-radius: 3px;
background: var(--douban-floor-tag-bg);
}
.zql-v2 .douban-hidden-tag { 
color: var(--douban-warning-text); 
font-size: 12px;
}
.zql-v2 .douban-admin-tag { 
color: var(--douban-admin-tag-color); 
font-size: 12px;
}
.zql-v2 .douban-user-role-tag { 
color: var(--douban-gray); 
font-size: 12px;
}
.zql-v2 .douban-reply-author { 
color: var(--douban-reply-author-color); 
font-size: 12px;
}
.zql-v2 .douban-reply-time { 
color: var(--douban-gray); 
font-size: 12px;
} .zql-v2 .douban-quote { 
background: var(--douban-quote-bg);
padding: 8px 12px; 
margin-bottom: 10px; 
border-left: 3px solid var(--douban-quote-border);
font-size: 12px; 
color: var(--douban-quote-text);
}
.zql-v2 .douban-quote-icon { margin-right: 6px; }
.zql-v2 .douban-reply-content { 
font-size: 13px; 
line-height: 1.6; 
color: var(--douban-text);
margin-bottom: 6px;
} .zql-v2 .douban-reply-actions { 
display: flex; 
gap: 8px; 
align-items: center;
margin-top: 2px;
}
.zql-v2 .douban-reply-action { 
font-size: 12px; 
color: var(--douban-gray); 
cursor: pointer; 
background: none; 
border: none; 
padding: 2px 6px;
border-radius: 3px;
display: inline-flex;
align-items: center;
gap: 3px;
transition: all 0.2s;
}
.zql-v2 .douban-reply-action:hover { 
color: var(--douban-dark); 
background: rgba(51, 119, 170, 0.08);
}
.zql-v2 .douban-reply-action.active { color: var(--douban-green); }
.zql-v2 .douban-admin-small { 
font-size: 11px; 
padding: 2px 6px;
} .zql-v2 .douban-admin-actions { 
display: flex; 
gap: 8px; 
margin-left: auto;
}
.zql-v2 .douban-admin-btn { 
font-size: 12px; 
color: var(--douban-gray); 
cursor: pointer; 
background: none; 
border: 1px solid var(--douban-border); 
padding: 4px 10px; 
border-radius: 3px;
transition: all 0.2s;
}
.zql-v2 .douban-admin-btn:hover { 
color: var(--douban-dark); 
border-color: var(--douban-dark);
} .zql-v2 .douban-btn-small { 
background: var(--douban-green); 
color: #fff; 
border: none; 
padding: 6px 14px; 
border-radius: 4px; 
font-size: 12px; 
cursor: pointer;
transition: background 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.zql-v2 .douban-btn-small:hover { background: #3a9448; }
.zql-v2 .douban-btn-small:disabled { opacity: 0.5; cursor: not-allowed; } .zql-v2 .douban-reply-form-container { margin-top: 10px; }
.zql-v2 .douban-reply-form { 
padding: 14px; 
background: var(--douban-card-bg); 
border: 1px solid var(--douban-border); 
border-radius: 4px;
} .zql-v2 .douban-pagination { 
display: flex; 
gap: 10px; 
justify-content: center; 
margin-top: 20px;
}
.zql-v2 .douban-pagination .douban-tab { 
min-width: 30px; 
text-align: center;
padding: 8px 16px;
border: 1px solid var(--douban-border);
border-radius: 4px;
background: var(--douban-card-bg);
}
.zql-v2 .douban-pagination .douban-tab.active { 
background: var(--douban-dark);
color: #fff;
border-color: var(--douban-dark);
} .zql-v2 .douban-empty { 
text-align: center; 
padding: 60px 20px; 
color: var(--douban-gray);
font-size: 14px;
background: var(--douban-card-bg);
border: 1px solid var(--douban-border);
border-radius: 6px;
}
.zql-v2 .douban-empty-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.6;
}
.zql-v2 .douban-empty-title {
font-size: 16px;
font-weight: 600;
color: var(--douban-text);
margin-bottom: 8px;
}
.zql-v2 .douban-empty-desc {
font-size: 13px;
color: var(--douban-text-muted);
} .zql-v2 .douban-loading { 
text-align: center; 
padding: 40px; 
color: var(--douban-gray);
}  .zql-v2 .douban-search-btn .search-btn-full { display: inline; }
.zql-v2 .douban-search-btn .search-btn-short { display: none; }
@media (max-width: 959px) {
.zql-v2 .douban-actions-bar { flex-direction: column; gap: 8px; align-items: flex-start; }
.zql-v2 .douban-actions-left, .zql-v2 .douban-actions-right { width: 100%; justify-content: flex-start; }
.zql-v2 .douban-admin-actions { margin-left: 0; }
} @media (max-width: 640px) {
.zql-v2 .douban-search .zql-search-input { width: 150px; }
} @media (max-width: 560px) {
.zql-v2 .douban-search .zql-search-input { width: 100px; }
} @media (max-width: 480px) {
.zql-v2 .douban-search .zql-search-input { width: 70px; }
.zql-v2 .douban-search-btn .search-btn-full { display: none; }
.zql-v2 .douban-search-btn .search-btn-short { display: inline; }
} @media (max-width: 420px) {
.zql-v2 .douban-nav { flex-direction: column; gap: 8px; }
.zql-v2 .douban-tabs { flex-wrap: wrap; width: 100%; justify-content: center; }
.zql-v2 .douban-search-inner { flex-wrap: wrap; width: 100%; justify-content: center; }
.zql-v2 .douban-search .zql-search-input { width: 200px; }
.zql-v2 .douban-search-btn .search-btn-full { display: inline; }
.zql-v2 .douban-search-btn .search-btn-short { display: none; }
.zql-v2 .douban-card { padding: 8px; }
.zql-v2 .douban-form-box { padding: 10px; }
.zql-v2 .douban-stats { flex-wrap: wrap; gap: 8px; }
} .zql-v2 .douban-mt-10 { margin-top: 10px; }
.zql-v2 .douban-mt-8 { margin-top: 8px; }
.zql-v2 .douban-error-text { color: var(--douban-error-text); }
.zql-v2 .douban-success-text { color: var(--douban-success-text); }
.zql-v2 .douban-hint-text { color: var(--douban-hint-text); }
.zql-v2 .douban-form-inline { 
margin-top: 8px; 
margin-bottom: 8px;
}
.zql-v2 .douban-quote-preview { 
margin-bottom: 6px; 
padding: 6px 8px; 
background: var(--douban-card-bg); 
border-left: 2px solid var(--douban-green); 
font-size: 12px; 
color: var(--douban-gray);
display: flex;
justify-content: space-between;
align-items: center;
}
.zql-v2 .douban-quote-remove {
background: none;
border: none;
color: var(--douban-gray);
cursor: pointer;
padding: 2px 6px;
font-size: 12px;
}
.zql-v2 .douban-quote-remove:hover {
color: var(--douban-error-text);
}
.zql-v2 .douban-quote-block {
margin-bottom: 6px;
padding: 4px 8px;
background: var(--douban-quote-bg, #f9f9f9);
border-left: 3px solid var(--douban-green);
font-size: 12px;
}
.zql-v2 .douban-quote-link {
color: var(--douban-gray);
text-decoration: none;
}
.zql-v2 .douban-quote-link:hover {
color: var(--douban-dark);
text-decoration: underline;
}
.zql-v2 .douban-input-inline { 
width: 100%; 
padding: 6px 8px; 
border: 1px solid var(--douban-border); 
border-radius: 4px; 
margin-bottom: 6px; 
font-size: 13px; 
box-sizing: border-box;
background: var(--douban-bg);
}
.zql-v2 .douban-reply-field .douban-input-inline {
flex: 1;
margin-bottom: 0;
}
.zql-v2 .douban-textarea-inline { 
width: 100%; 
height: 50px; 
padding: 6px 8px; 
border: 1px solid var(--douban-border); 
border-radius: 4px; 
resize: none; 
font-size: 13px; 
box-sizing: border-box;
background: var(--douban-bg);
margin-bottom: 6px;
}
.zql-v2 .douban-reply-field .douban-textarea-inline {
flex: 1;
margin-bottom: 0;
}
.zql-v2 .douban-textarea-lg { 
height: 80px; 
padding: 10px; 
font-size: 14px;
}
.zql-v2 .douban-flex-between { 
display: flex; 
justify-content: space-between; 
align-items: center;
}
.zql-v2 .douban-flex-gap { 
display: flex; 
gap: 8px; 
align-items: center;
}
.zql-v2 .douban-btn-gray { background: var(--douban-btn-gray-bg); }
.zql-v2 .douban-edit-form { 
padding: 12px; 
background: var(--douban-card-bg); 
border-radius: 4px;
border: 1px solid var(--douban-border);
margin-bottom: 12px;
}
.zql-v2 .douban-post-edit-form {
padding: 12px;
background: var(--douban-card-bg);
border-radius: 4px;
border: 1px solid var(--douban-border);
margin-bottom: 12px;
}
.zql-v2 .douban-edit-field {
margin-bottom: 12px;
}
.zql-v2 .douban-edit-label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--douban-label-color);
margin-bottom: 4px;
}
.zql-v2 .douban-edit-actions {
display: flex;
gap: 8px;
align-items: center;
} .zql-v2 .douban-category-tag {
background: var(--douban-category-tag-bg);
color: var(--douban-category-tag-text);
padding: 2px 10px;
border-radius: 12px;
font-size: 11px;
margin-left: 8px;
} .zql-v2 .douban-comments {
min-height: 100px;
} .zql-v2 .zql-loading {
opacity: 0;
transition: opacity 200ms ease-in;
}
.zql-v2 .zql-loading.active {
opacity: 1;
} .zql-v2 .douban-btn-primary:disabled,
.zql-v2 .douban-btn-small:disabled {
opacity: 0.6;
cursor: not-allowed;
} .zql-v2 [x-collapse] {
transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
overflow: hidden;
} .zql-v2 .douban-confirm-group {
display: inline-flex;
gap: 8px;
align-items: center;
}
.zql-v2 .douban-confirm-group .douban-reply-action:first-child {
color: var(--douban-error-text);
}
.zql-v2 .douban-confirm-group .douban-reply-action:first-child:hover {
color: var(--douban-danger-text);
background: rgba(231, 76, 60, 0.1);
} .zql-v2 .douban-voice-section {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 8px;
}
.zql-v2 .douban-voice-label {
font-size: 13px;
color: var(--douban-label-color);
flex-shrink: 0;
} .zql-v2 .douban-voice-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: #f5f5f5;
border: 1px solid var(--douban-border);
border-radius: 20px;
cursor: pointer;
font-size: 13px;
color: var(--douban-label-color);
transition: all 0.2s;
}
.zql-v2 .douban-voice-btn:hover {
background: #e8e8e8;
border-color: var(--douban-text-muted);
}
.zql-v2 .douban-voice-btn.recording {
background: #ffebee;
border-color: var(--douban-error-text);
color: var(--douban-error-text);
animation: voice-pulse 1s infinite;
}
@keyframes voice-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); }
50% { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); }
}
.zql-v2 .douban-voice-btn .voice-icon {
font-size: 16px;
}
.zql-v2 .douban-voice-timer {
font-family: monospace;
font-size: 12px;
color: var(--douban-text-muted);
}
.zql-v2 .douban-voice-btn.recording .douban-voice-timer {
color: var(--douban-error-text);
} .zql-v2 .douban-audio-player {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: var(--douban-audio-player-bg, #f8f8f8);
border-radius: 16px;
margin: 6px 0;
max-width: 280px;
}
.zql-v2 .douban-audio-player .audio-play-btn {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--douban-green);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex-shrink: 0;
transition: all 0.2s;
}
.zql-v2 .douban-audio-player .audio-play-btn:hover {
background: #3a9448;
transform: scale(1.05);
}
.zql-v2 .douban-audio-player .audio-play-btn.playing {
background: #e74c3c;
}
.zql-v2 .douban-audio-player .audio-info {
flex: 1;
min-width: 0;
}
.zql-v2 .douban-audio-player .audio-duration {
font-size: 12px;
color: var(--douban-text-muted);
}
.zql-v2 .douban-audio-player .audio-progress {
width: 100%;
height: 4px;
background: var(--douban-audio-progress-bg, #ddd);
border-radius: 2px;
margin-top: 4px;
cursor: pointer;
overflow: hidden;
}
.zql-v2 .douban-audio-player .audio-progress-bar {
height: 100%;
background: var(--douban-green);
border-radius: 2px;
width: 0%;
transition: width 0.1s;
}
.zql-v2 .douban-audio-player .audio-wave {
display: flex;
align-items: center;
gap: 2px;
height: 20px;
}
.zql-v2 .douban-audio-player .audio-wave span {
width: 3px;
background: var(--douban-green);
border-radius: 2px;
animation: wave 0.5s ease-in-out infinite;
}
.zql-v2 .douban-audio-player .audio-wave span:nth-child(1) { height: 8px; animation-delay: 0s; }
.zql-v2 .douban-audio-player .audio-wave span:nth-child(2) { height: 14px; animation-delay: 0.1s; }
.zql-v2 .douban-audio-player .audio-wave span:nth-child(3) { height: 10px; animation-delay: 0.2s; }
.zql-v2 .douban-audio-player .audio-wave span:nth-child(4) { height: 16px; animation-delay: 0.3s; }
.zql-v2 .douban-audio-player .audio-wave span:nth-child(5) { height: 8px; animation-delay: 0.4s; }
@keyframes wave {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(0.5); }
} .zql-v2 .douban-voice-hint {
font-size: 11px;
color: var(--douban-text-muted);
margin-top: 4px;
}
.zql-v2 .douban-voice-preview {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 8px 12px;
background: var(--douban-voice-preview-bg, #f0f0f0);
border-radius: 8px;
}
.zql-v2 .douban-voice-preview .voice-preview-info {
flex: 1;
font-size: 12px;
color: var(--douban-label-color);
}
.zql-v2 .douban-voice-preview .voice-preview-delete {
background: none;
border: none;
color: var(--douban-text-muted);
cursor: pointer;
padding: 4px;
font-size: 14px;
}
.zql-v2 .douban-voice-preview .voice-preview-delete:hover {
color: var(--douban-error-text);
} .zql-article-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.zql-modal-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--douban-backdrop);
backdrop-filter: blur(2px);
}
.zql-modal-card {
position: relative;
width: 100%;
max-width: 520px;
max-height: 80vh;
background: var(--douban-card-bg);
border-radius: 12px;
box-shadow: var(--douban-modal-shadow);
display: flex;
flex-direction: column;
overflow: hidden;
}
.zql-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid var(--douban-warm-border);
background: var(--douban-warm-bg);
}
.zql-modal-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 600;
color: var(--douban-filter-text-secondary);
}
.zql-modal-icon {
font-size: 20px;
}
.zql-modal-close {
width: 32px;
height: 32px;
border: none;
background: none;
font-size: 18px;
color: var(--douban-filter-text-muted);
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.zql-modal-close:hover {
background: var(--douban-hover-overlay);
color: var(--douban-filter-text-secondary);
}
.zql-modal-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
}
.zql-article-title {
font-size: 14px;
color: var(--douban-filter-link-color);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px dashed var(--douban-warm-border);
line-height: 1.5;
}
.zql-quick-form {
margin-bottom: 16px;
}
.zql-guest-inputs {
margin-bottom: 10px;
}
.zql-input-small {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--douban-warm-border);
border-radius: 6px;
font-size: 13px;
background: var(--douban-warm-bg);
color: var(--douban-filter-text-secondary);
transition: border-color 0.2s;
}
.zql-input-small:focus {
outline: none;
border-color: var(--douban-filter-link-color);
}
.zql-textarea {
width: 100%;
min-height: 80px;
padding: 12px;
border: 1px solid var(--douban-warm-border);
border-radius: 8px;
font-size: 14px;
resize: vertical;
background: var(--douban-warm-bg);
color: var(--douban-filter-text-secondary);
line-height: 1.6;
transition: border-color 0.2s;
}
.zql-textarea:focus {
outline: none;
border-color: var(--douban-filter-link-color);
}
.zql-voice-section {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
flex-wrap: wrap;
}
.zql-voice-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: var(--douban-close-bg);
border: 1px solid var(--douban-warm-border);
border-radius: 20px;
cursor: pointer;
font-size: 13px;
color: var(--douban-label-color);
transition: all 0.2s;
}
.zql-voice-btn:hover {
background: var(--douban-border);
}
.zql-voice-btn.recording {
background: var(--douban-recording-bg);
border-color: var(--douban-error-text);
color: var(--douban-error-text);
animation: voice-pulse 1s infinite;
}
.zql-voice-hint {
font-size: 11px;
color: var(--douban-filter-text-muted);
}
.zql-voice-preview {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--douban-voice-preview-bg);
border-radius: 16px;
font-size: 12px;
color: var(--douban-label-color);
}
.zql-voice-delete {
background: none;
border: none;
color: var(--douban-text-muted);
cursor: pointer;
padding: 2px;
font-size: 12px;
}
.zql-voice-delete:hover {
color: var(--douban-error-text);
}
.zql-form-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
}
.zql-markdown-hint {
font-size: 11px;
color: var(--douban-filter-text-muted);
}
.zql-btn-primary {
background: var(--douban-green-btn);
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: background 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.zql-btn-primary:hover {
background: var(--douban-green-btn-hover);
}
.zql-loading {
display: none;
text-align: center;
padding: 20px;
color: var(--douban-filter-text-muted);
font-size: 13px;
}
.zql-loading.active {
display: block;
}
.zql-toggle-form {
padding: 12px 16px;
background: var(--douban-warm-bg);
border-radius: 8px;
cursor: pointer;
color: var(--douban-filter-link-color);
font-size: 14px;
margin-bottom: 16px;
transition: background 0.2s;
}
.zql-toggle-form:hover {
background: var(--douban-warm-bg-hover);
}
.zql-comments-section {
border-top: 1px solid var(--douban-warm-border);
padding-top: 16px;
}
.zql-comments-header {
margin-bottom: 12px;
}
.zql-comments-count {
font-size: 13px;
color: var(--douban-filter-text-muted);
}
.zql-comments-count strong {
color: var(--douban-filter-link-color);
font-weight: 600;
}
.zql-article-empty {
text-align: center;
padding: 40px;
color: var(--douban-filter-text-muted);
font-size: 14px;
}
.zql-empty-state {
text-align: center;
padding: 32px 20px;
}
.zql-empty-icon {
font-size: 48px;
margin-bottom: 16px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.zql-empty-title {
font-size: 16px;
font-weight: 600;
color: var(--douban-text);
margin-bottom: 8px;
}
.zql-empty-desc {
font-size: 14px;
color: var(--douban-text-muted);
margin-bottom: 20px;
}
.zql-empty-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: var(--douban-green-btn);
color: #fff;
border: none;
border-radius: 24px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
margin-bottom: 12px;
}
.zql-empty-btn:hover {
background: var(--douban-green-btn-hover);
box-shadow: 0 4px 12px rgba(122, 158, 126, 0.3);
}
.zql-empty-link {
display: block;
color: var(--douban-filter-link-color);
font-size: 14px;
text-decoration: none;
margin-bottom: 24px;
}
.zql-empty-link:hover {
text-decoration: underline;
}
.zql-recommend-section {
margin-top: 24px;
padding-top: 24px;
border-top: 1px dashed var(--douban-warm-border);
text-align: left;
}
.zql-recommend-title {
font-size: 14px;
font-weight: 600;
color: var(--douban-label-color);
margin-bottom: 12px;
}
.zql-recommend-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.zql-recommend-item {
display: block;
padding: 12px;
background: var(--douban-warm-bg);
border-radius: 8px;
text-decoration: none;
transition: all 0.2s;
}
.zql-recommend-item:hover {
background: var(--douban-warm-bg-hover);
transform: translateX(4px);
}
.zql-recommend-content {
font-size: 14px;
color: var(--douban-text);
line-height: 1.5;
margin-bottom: 6px;
}
.zql-recommend-meta {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--douban-text-muted);
}
.zql-recommend-source {
max-width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zql-load-more {
text-align: center;
padding: 16px;
}
.zql-btn-more {
background: transparent;
color: var(--douban-filter-link-color);
border: 1px solid var(--douban-green-btn);
padding: 8px 24px;
border-radius: 20px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.zql-btn-more:hover {
background: var(--douban-green-btn);
color: #fff;
}
.zql-btn-more:disabled {
opacity: 0.5;
cursor: not-allowed;
} .zql-article-comment {
padding: 12px 0;
border-bottom: 1px solid var(--douban-comment-border);
}
.zql-article-comment:last-child {
border-bottom: none;
}
.zql-comment-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.zql-comment-left {
display: flex;
align-items: center;
gap: 10px;
}
.zql-avatar {
width: 32px;
height: 32px;
background: var(--douban-close-bg);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.zql-comment-info {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.zql-user-tag {
font-size: 13px;
font-weight: 600;
color: var(--douban-user-color);
}
.zql-time {
font-size: 12px;
color: var(--douban-filter-text-muted);
}
.zql-admin-tag {
color: var(--douban-accent-gold);
font-size: 11px;
}
.zql-comment-actions {
display: flex;
gap: 8px;
}
.zql-action-link {
background: none;
border: none;
color: var(--douban-filter-text-muted);
font-size: 12px;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.zql-action-link:hover {
color: var(--douban-filter-text-secondary);
background: var(--douban-hover-overlay);
}
.zql-action-link.zql-danger {
color: var(--douban-error-text);
}
.zql-action-link.zql-danger:hover {
background: var(--douban-danger-hover-overlay);
}
.zql-comment-content {
font-size: 14px;
line-height: 1.7;
color: var(--douban-filter-text-secondary);
margin-bottom: 8px;
}
.zql-comment-footer {
display: flex;
gap: 16px;
}
.zql-action-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: none;
border: none;
color: var(--douban-filter-text-muted);
font-size: 12px;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.2s;
}
.zql-action-btn:hover {
color: var(--douban-filter-link-color);
background: var(--douban-green-hover-overlay);
}
.zql-action-btn.active {
color: var(--douban-error-text);
}
.zql-replies-container {
margin-top: 10px;
padding-left: 16px;
border-left: 2px solid var(--douban-replies-left-border);
}
.zql-input-inline {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--douban-warm-border-light);
border-radius: 6px;
font-size: 13px;
background: var(--douban-warm-bg);
color: var(--douban-filter-text-secondary);
margin-bottom: 8px;
}
.zql-input-inline:focus {
outline: none;
border-color: var(--douban-filter-link-color);
}
.zql-textarea-inline {
width: 100%;
min-height: 60px;
padding: 8px 10px;
border: 1px solid var(--douban-warm-border-light);
border-radius: 6px;
font-size: 13px;
resize: vertical;
background: var(--douban-warm-bg);
color: var(--douban-filter-text-secondary);
margin-bottom: 8px;
}
.zql-textarea-inline:focus {
outline: none;
border-color: var(--douban-filter-link-color);
}
.zql-reply-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.zql-btn-small {
background: var(--douban-green-btn);
color: #fff;
border: none;
padding: 6px 14px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
transition: background 0.2s;
}
.zql-btn-small:hover {
background: var(--douban-green-btn-hover);
}
.zql-hint {
color: var(--douban-filter-text-muted);
font-size: 13px;
padding: 8px 0;
} .single-post .comments-area .comment-list > li:not(.pingback):not(.trackback) { display: none !important; }
.single-post .comments-area .comment-list > li.pingback,
.single-post .comments-area .comment-list > li.trackback { display: list-item !important; }
.single-post #respond { display: none !important; }
.single-post .comment-respond { display: none !important; }
.single-post .akismet_comment_form_privacy_notice { display: none !important; }
.single-post .comments-title { display: none !important; }
.single-post .comments-area { margin-top: 0 !important; padding-top: 0 !important; } .single-post .comments-link {
display: inline-flex !important;
align-items: center;
gap: 4px;
cursor: pointer;
min-height: 44px;
min-width: 44px;
padding: 8px 12px;
border-radius: 6px;
transition: background 0.2s ease;
}
.single-post .comments-link:hover {
background: rgba(0, 0, 0, 0.05);
}
.single-post .comments-link a {
pointer-events: none;
color: inherit;
text-decoration: none;
} .zql-article-footer {
margin-top: 32px;
padding-top: 20px;
border-top: 1px solid var(--douban-warm-border);
}
.zql-comment-bar {
display: flex;
align-items: center;
justify-content: center;
padding: 16px 20px;
background: transparent;
border: none;
position: relative;
}
.zql-person-sitting {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -15px;
cursor: pointer;
transition: transform 0.3s ease;
z-index: 2;
}
.zql-person-sitting::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
background: radial-gradient(circle, rgba(255, 215, 100, 0.7) 0%, rgba(255, 200, 80, 0.4) 40%, transparent 70%);
border-radius: 50%;
animation: aura-glow 2s ease-in-out infinite;
pointer-events: none;
}
.zql-person-sitting::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border: 2px solid rgba(255, 200, 100, 0.5);
border-radius: 50%;
animation: halo-expand 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes aura-glow {
0%, 100% { 
opacity: 0.6; 
transform: translate(-50%, -50%) scale(1);
}
50% { 
opacity: 1; 
transform: translate(-50%, -50%) scale(1.15);
}
}
@keyframes halo-expand {
0%, 100% { 
opacity: 0.4; 
transform: translate(-50%, -50%) scale(1);
}
50% { 
opacity: 0.7; 
transform: translate(-50%, -50%) scale(1.1);
}
}
.zql-person-sitting:hover {
transform: translateX(-50%) translateY(-4px);
}
.zql-person-icon {
font-size: 32px;
animation: meditate 4s ease-in-out infinite;
display: block;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
@keyframes meditate {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-3px) rotate(-1deg); }
75% { transform: translateY(-3px) rotate(1deg); }
}
.zql-discuss-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 320px;
padding: 16px 24px;
min-height: 48px;
background: var(--douban-discuss-bg);
color: var(--douban-filter-text-tertiary);
border: 1px solid var(--douban-discuss-border);
border-radius: 8px;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.zql-discuss-btn:hover {
background: var(--douban-discuss-hover-bg);
border-color: var(--douban-filter-border-secondary);
color: var(--douban-filter-text-secondary);
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.zql-discuss-icon {
font-size: 16px;
}
.zql-discuss-text {
font-weight: 500;
}
.zql-discuss-arrow {
font-size: 16px;
transition: transform 0.2s;
}
.zql-discuss-btn:hover .zql-discuss-arrow {
transform: translateX(3px);
} .zql-drawer-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10001;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; 
line-height: 1.6;
color: var(--douban-text);
}
.zql-drawer-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--douban-backdrop);
backdrop-filter: blur(2px);
}
.zql-drawer-container {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 640px;
height: 75vh;
background: var(--douban-card-bg);
border-radius: 16px 16px 0 0;
box-shadow: var(--douban-drawer-shadow);
display: flex;
flex-direction: column;
overflow: hidden;
}
.zql-drawer-handle {
width: 36px;
height: 4px;
background: var(--douban-drawer-handle);
border-radius: 2px;
margin: 8px auto;
flex-shrink: 0;
}
.zql-drawer-header {
display: flex;
flex-direction: column;
padding: 16px 20px;
border-bottom: 1px solid var(--douban-warm-border);
flex-shrink: 0;
gap: 12px;
}
.zql-drawer-title-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.zql-drawer-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 600;
color: var(--douban-text);
}
.zql-drawer-header .zql-article-title {
font-size: 13px;
color: var(--douban-filter-link-color);
padding: 0;
margin: 0;
border: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zql-drawer-actions {
display: flex;
align-items: center;
gap: 12px;
}
.zql-drawer-count {
font-weight: 400;
color: var(--douban-text-muted);
}
.zql-drawer-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--douban-close-bg);
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
color: var(--douban-label-color);
transition: all 0.2s;
}
.zql-drawer-close:hover {
background: var(--douban-close-hover-bg);
color: var(--douban-text);
}
.zql-drawer-link {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
background: var(--douban-gold-link);
border-radius: 16px;
font-size: 13px;
color: #fff;
text-decoration: none;
transition: all 0.2s;
white-space: nowrap;
}
.zql-drawer-link:hover {
background: var(--douban-drawer-link-hover);
color: #fff;
}
.zql-drawer-body {
flex: 1;
overflow-y: auto;
padding: 16px;
} .zql-quick-post {
margin-bottom: 16px;
}
.zql-posted-notice {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: var(--douban-success-bg);
border: 1px solid var(--douban-success-notice-border);
border-radius: 12px;
color: var(--douban-success-notice-color);
font-size: 14px;
margin-bottom: 12px;
}
.zql-quick-trigger {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: var(--douban-warm-bg);
border: 1px dashed var(--douban-warm-border-dashed);
border-radius: 12px;
cursor: pointer;
color: var(--douban-text-muted);
font-size: 14px;
transition: all 0.2s;
}
.zql-quick-trigger:hover {
background: var(--douban-warm-bg-hover);
border-color: var(--douban-filter-link-color);
color: var(--douban-label-color);
}
.zql-quick-form {
background: var(--douban-warm-bg);
border: 1px solid var(--douban-warm-border);
border-radius: 12px;
padding: 16px;
}
.zql-guest-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.zql-field-label {
font-size: 13px;
color: var(--douban-text-secondary);
font-weight: 500;
flex-shrink: 0;
min-width: 40px;
}
.zql-content-row {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 12px;
}
.zql-content-row .zql-field-label {
padding-top: 8px;
}
.zql-reply-field {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 8px;
}
.zql-reply-field .zql-field-label {
font-size: 12px;
min-width: 35px;
padding-top: 8px;
}
.zql-input-small {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--douban-warm-border-light);
border-radius: 8px;
font-size: 14px;
background: var(--douban-card-bg);
flex: 1;
}
.zql-textarea {
width: 100%;
padding: 12px;
border: 1px solid var(--douban-warm-border-light);
border-radius: 8px;
font-size: 14px;
resize: vertical;
min-height: 80px;
background: var(--douban-card-bg);
}
.zql-content-row .zql-textarea,
.zql-reply-field .zql-textarea {
flex: 1;
}
.zql-char-count {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
font-size: 12px;
color: var(--douban-text-muted);
}
.zql-char-count .zql-markdown-hint {
color: var(--douban-text-muted);
}
.zql-form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 12px;
}
.zql-form-btns {
display: flex;
gap: 8px;
}
.zql-btn-ghost {
padding: 8px 16px;
background: transparent;
border: 1px solid var(--douban-warm-border-dashed);
border-radius: 8px;
cursor: pointer;
font-size: 14px;
color: var(--douban-label-color);
transition: all 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.zql-btn-ghost:hover {
background: var(--douban-close-bg);
}
.zql-btn-primary {
padding: 8px 20px;
background: var(--douban-green-btn);
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
color: #fff;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.zql-btn-primary:hover {
background: var(--douban-green-btn-hover);
} .zql-comments-list {
min-height: 100px;
}
.zql-loading-center {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 40px;
color: var(--douban-text-muted);
}
.zql-initial-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 60px 40px;
color: var(--douban-text-muted);
}
.zql-spinner {
width: 20px;
height: 20px;
border: 2px solid var(--douban-light-gray);
border-top-color: var(--douban-filter-link-color);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.zql-load-more {
text-align: center;
padding: 16px;
}
.zql-btn-more {
padding: 10px 24px;
background: var(--douban-btn-more-bg);
border: 1px solid var(--douban-btn-more-border);
border-radius: 8px;
cursor: pointer;
font-size: 14px;
color: var(--douban-label-color);
transition: all 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.zql-btn-more:hover:not(:disabled) {
background: var(--douban-btn-more-hover-bg);
}
.zql-btn-more:disabled {
opacity: 0.6;
cursor: not-allowed;
} .zql-article-comment {
padding: 16px;
background: var(--douban-comment-bg);
border: 1px solid var(--douban-comment-border);
border-radius: 12px;
margin-bottom: 12px;
}
.zql-comment-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.zql-comment-left {
display: flex;
align-items: center;
gap: 10px;
}
.zql-avatar {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--douban-avatar-bg);
border-radius: 50%;
font-size: 18px;
}
.zql-comment-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.zql-user-tag {
font-size: 14px;
font-weight: 500;
color: var(--douban-text);
}
.zql-time {
font-size: 12px;
color: var(--douban-text-muted);
}
.zql-comment-content {
font-size: 14px;
line-height: 1.7;
color: var(--douban-text-secondary);
margin-bottom: 12px;
}
.zql-comment-footer {
display: flex;
gap: 12px;
}
.zql-action-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
background: var(--douban-action-btn-bg);
border: none;
border-radius: 16px;
cursor: pointer;
font-size: 13px;
color: var(--douban-label-color);
transition: all 0.2s;
}
.zql-action-btn:hover {
background: var(--douban-action-btn-hover-bg);
}
.zql-action-btn.active {
background: var(--douban-active-btn-bg);
color: var(--douban-error-text);
}
.zql-error {
padding: 12px 16px;
background: var(--douban-error-bg);
border: 1px solid var(--douban-danger-notice-border);
border-radius: 8px;
color: var(--douban-danger-notice-color);
font-size: 14px;
margin-bottom: 12px;
}
.zql-replies-container {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--douban-replies-border);
}
.zql-input-inline {
padding: 8px 12px;
border: 1px solid var(--douban-warm-border-light);
border-radius: 6px;
font-size: 13px;
margin-bottom: 8px;
width: 100%;
max-width: 150px;
background: var(--douban-card-bg);
}
.zql-textarea-inline {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--douban-warm-border-light);
border-radius: 6px;
font-size: 13px;
resize: vertical;
min-height: 60px;
background: var(--douban-card-bg);
}
.zql-reply-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
}
.zql-btn-small {
padding: 6px 14px;
background: var(--douban-green-btn);
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
color: #fff;
transition: all 0.2s;
}
.zql-btn-small:hover {
background: var(--douban-green-btn-hover);
}
.zql-hint {
padding: 12px;
text-align: center;
color: var(--douban-text-muted);
font-size: 13px;
}
.zql-loading {
padding: 8px 12px;
color: var(--douban-text-muted);
font-size: 13px;
}
.zql-action-link {
background: none;
border: none;
color: var(--douban-text-muted);
cursor: pointer;
font-size: 12px;
padding: 2px 6px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.zql-action-link:hover {
color: var(--douban-label-color);
}
.zql-action-link.zql-danger {
color: var(--douban-error-text);
}
.zql-action-link.zql-danger:hover {
color: var(--douban-danger-text);
}
.zql-comment-actions {
display: flex;
gap: 4px;
}
.zql-admin-tag {
font-size: 11px;
background: var(--douban-green-btn);
color: #fff;
padding: 1px 4px;
border-radius: 3px;
margin-left: 4px;
} .zql-voice-row {
margin-top: 12px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.zql-voice-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: var(--douban-avatar-bg);
border: 1px solid var(--douban-warm-border-light);
border-radius: 20px;
cursor: pointer;
font-size: 13px;
color: var(--douban-label-color);
transition: all 0.2s;
user-select: none;
}
.zql-voice-btn:hover {
background: var(--douban-close-hover-bg);
}
.zql-voice-btn.recording {
background: var(--douban-recording-bg);
border-color: var(--douban-error-text);
color: var(--douban-error-text);
animation: pulse 1s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.zql-voice-hint {
font-size: 12px;
color: var(--douban-text-muted);
}
.zql-voice-preview {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--douban-voice-preview-bg);
border-radius: 16px;
font-size: 13px;
color: var(--douban-success-badge-color);
}
.zql-voice-delete {
background: none;
border: none;
color: var(--douban-text-muted);
cursor: pointer;
font-size: 14px;
padding: 0 4px;
}
.zql-voice-delete:hover {
color: var(--douban-error-text);
} @media (max-width: 768px) {
.zql-drawer-container {
width: 100%;
max-width: 100%;
height: 80vh;
border-radius: 12px 12px 0 0;
}
.zql-drawer-header {
padding: 12px 16px;
}
.zql-drawer-body {
padding: 12px;
}
.zql-article-comment {
padding: 12px;
}
.zql-drawer-link span:last-child {
display: none;
}
}
.zql-drawer-container .douban-reply-action {
font-size: 12px;
color: var(--douban-text-muted);
cursor: pointer;
background: none;
border: none;
padding: 2px 6px;
border-radius: 3px;
display: inline-flex;
align-items: center;
gap: 3px;
transition: all 0.2s;
}
.zql-drawer-container .douban-reply-action:hover {
color: var(--douban-label-color);
background: var(--douban-hover-overlay);
}
.zql-drawer-container .douban-reply-actions {
display: flex;
gap: 8px;
align-items: center;
margin-top: 4px;
}
.zql-drawer-container .zql-replies-container {
margin-top: 10px;
padding-top: 10px;
padding-left: 10px;
border-left: 1px solid var(--douban-replies-left-border);
margin-left: 2px;
}
.zql-drawer-container .zql-article-comment {
padding: 12px;
margin-bottom: 12px;
background: var(--douban-comment-bg);
border: 1px solid var(--douban-comment-border);
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.zql-drawer-container .douban-reply-note {
padding: 8px 10px;
margin-bottom: 6px;
margin-left: 1px;
background: var(--douban-close-bg);
border-radius: 6px;
border-left: 2px solid var(--douban-note-border);
font-size: 13px;
} .zql-v2 .douban-btn-danger {
color: var(--douban-error-text) !important;
background: rgba(231, 76, 60, 0.08);
border: 1px solid rgba(231, 76, 60, 0.3);
}
.zql-v2 .douban-btn-danger:hover {
color: #fff !important;
background: #e74c3c !important;
border-color: var(--douban-error-text) !important;
} .zql-v2 .douban-btn-loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.zql-v2 .douban-btn-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: btn-spin 0.8s linear infinite;
}
@keyframes btn-spin {
to { transform: rotate(360deg); }
}
.zql-drawer-container .douban-audio-player {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--douban-close-bg);
border-radius: 16px;
margin: 6px 0;
max-width: 280px;
}
.zql-drawer-container .douban-audio-player .audio-play-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--douban-audio-play-btn);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex-shrink: 0;
transition: all 0.2s;
}
.zql-drawer-container .douban-audio-player .audio-play-btn:hover {
background: var(--douban-audio-play-btn-hover);
transform: scale(1.05);
}
.zql-drawer-container .douban-audio-player .audio-play-btn.playing {
background: #e74c3c;
}
.zql-drawer-container .douban-audio-player .audio-info {
flex: 1;
min-width: 0;
}
.zql-drawer-container .douban-audio-player .audio-duration {
font-size: 11px;
color: var(--douban-text-muted);
}
.zql-drawer-container .douban-audio-player .audio-progress {
width: 100%;
height: 3px;
background: var(--douban-drawer-handle);
border-radius: 2px;
margin-top: 3px;
cursor: pointer;
overflow: hidden;
}
.zql-drawer-container .douban-audio-player .audio-progress-bar {
height: 100%;
background: var(--douban-audio-progress-bar);
border-radius: 2px;
width: 0%;
transition: width 0.1s;
}
.zql-drawer-container .douban-audio-player .audio-wave {
display: flex;
align-items: center;
gap: 2px;
height: 16px;
}
.zql-drawer-container .douban-audio-player .audio-wave span {
width: 2px;
background: var(--douban-audio-progress-bar);
border-radius: 1px;
animation: wave 0.5s ease-in-out infinite;
}
.zql-drawer-container .zql-input-inline {
font-family: inherit;
}
.zql-drawer-container .zql-textarea-inline {
font-family: inherit;
}
.zql-drawer-container .zql-action-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: none;
border: none;
color: var(--douban-filter-text-muted);
font-size: 12px;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.2s;
}
.zql-drawer-container .zql-action-btn:hover {
color: var(--douban-filter-link-color);
background: var(--douban-green-hover-overlay);
}
.zql-drawer-container .zql-action-btn.active {
color: var(--douban-error-text);
}
.zql-drawer-container .zql-comment-footer {
display: flex;
gap: 12px;
align-items: center;
margin-top: 8px;
}
.zql-drawer-container .douban-btn-small {
background: var(--douban-green-btn);
color: #fff;
border: none;
padding: 6px 14px;
border-radius: 4px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.zql-drawer-container .douban-btn-small:hover {
background: var(--douban-green-btn-hover);
}
.zql-drawer-container .douban-btn-small:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.zql-drawer-overlay .douban-reply-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
font-size: 12px;
}
.zql-drawer-overlay .douban-reply-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.zql-drawer-overlay .douban-avatar-small {
width: 24px;
height: 24px;
font-size: 12px;
}
.zql-drawer-overlay .douban-avatar-small.douban-avatar-emoji {
font-size: 16px;
}
.zql-drawer-overlay .douban-floor-tag {
color: var(--douban-floor-tag-text);
font-size: 11px;
padding: 1px 4px;
border-radius: 3px;
background: var(--douban-floor-tag-bg);
}
.zql-drawer-overlay .douban-hidden-tag {
color: var(--douban-warning-text);
font-size: 12px;
}
.zql-drawer-overlay .douban-admin-tag {
color: var(--douban-admin-tag-color);
font-size: 12px;
}
.zql-drawer-overlay .douban-reply-author {
color: var(--douban-reply-author-color);
font-size: 12px;
}
.zql-drawer-overlay .douban-reply-time {
color: var(--douban-text-muted);
font-size: 12px;
}
.zql-drawer-overlay .douban-reply-content {
font-size: 13px;
line-height: 1.6;
color: var(--douban-text);
margin-bottom: 6px;
}
.zql-drawer-overlay .douban-reply-hidden {
opacity: 0.6;
}
.zql-drawer-overlay .douban-reply-guest-deleted {
opacity: 0.5;
background: rgba(231, 76, 60, 0.05);
}
.zql-drawer-overlay .douban-reply-quote {
margin-left: 1px;
padding-left: 4px;
border-left: 1px solid rgba(51, 119, 170, 0.3);
background: rgba(51, 119, 170, 0.03);
}
.zql-drawer-overlay .douban-guest-deleted-tag {
color: var(--douban-error-text);
font-size: 12px;
}
.zql-drawer-overlay .douban-btn-restore {
color: var(--douban-success-text) !important;
}
.zql-drawer-overlay .douban-btn-restore:hover {
background: rgba(39, 174, 96, 0.1);
}
.zql-drawer-overlay .douban-btn-guest-delete {
color: var(--douban-error-text) !important;
}
.zql-drawer-overlay .douban-btn-guest-delete:hover {
background: rgba(231, 76, 60, 0.1);
}
.zql-drawer-overlay .douban-btn-danger {
color: var(--douban-error-text) !important;
background: rgba(231, 76, 60, 0.08);
border: 1px solid rgba(231, 76, 60, 0.3);
}
.zql-drawer-overlay .douban-btn-danger:hover {
color: #fff !important;
background: #e74c3c !important;
border-color: var(--douban-error-text) !important;
}
.zql-drawer-overlay .douban-quote-block {
margin-bottom: 6px;
padding: 4px 8px;
background: var(--douban-quote-bg, #f9f9f9);
border-left: 3px solid var(--douban-green-btn);
font-size: 12px;
}
.zql-drawer-overlay .douban-quote-link {
color: var(--douban-text-muted);
text-decoration: none;
}
.zql-drawer-overlay .douban-quote-link:hover {
color: var(--douban-text);
text-decoration: underline;
}
.zql-drawer-overlay .douban-share-link {
color: var(--douban-text-muted);
}
.zql-drawer-overlay .douban-share-link:hover {
color: var(--douban-filter-link-color);
}
.zql-drawer-overlay .douban-report-link {
color: var(--douban-text-muted);
}
.zql-drawer-overlay .douban-report-link:hover {
color: var(--douban-error-text);
}
.zql-drawer-overlay .douban-report-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10002;
}
.zql-drawer-overlay .douban-report-content {
background: var(--douban-card-bg);
border-radius: 8px;
width: 90%;
max-width: 400px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.zql-drawer-overlay .douban-report-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--douban-border);
font-weight: 600;
}
.zql-drawer-overlay .douban-report-body {
padding: 16px;
}
.zql-drawer-overlay .douban-report-info {
font-size: 12px;
color: var(--douban-text-muted);
margin-bottom: 8px;
}
.zql-drawer-overlay .douban-report-body textarea {
width: 100%;
height: 80px;
padding: 8px;
border: 1px solid var(--douban-border);
border-radius: 4px;
resize: none;
font-size: 13px;
}
.zql-drawer-overlay .douban-report-footer {
padding: 12px 16px;
text-align: right;
}
.zql-drawer-overlay .douban-edit-form {
padding: 12px;
background: var(--douban-card-bg);
border-radius: 4px;
border: 1px solid var(--douban-border);
margin-bottom: 12px;
}
.zql-drawer-overlay .douban-textarea-inline {
width: 100%;
height: 50px;
padding: 6px 8px;
border: 1px solid var(--douban-border);
border-radius: 4px;
resize: none;
font-size: 13px;
box-sizing: border-box;
background: var(--douban-card-bg);
margin-bottom: 6px;
}
.zql-drawer-overlay .zql-reply-field .douban-textarea-inline {
flex: 1;
margin-bottom: 0;
}
}
.zql-drawer-overlay .douban-textarea-lg {
height: 80px;
padding: 10px;
font-size: 14px;
}
.zql-drawer-overlay .douban-flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.zql-drawer-overlay .douban-confirm-group {
display: inline-flex;
gap: 8px;
align-items: center;
}
.zql-drawer-overlay .douban-confirm-group .douban-reply-action:first-child {
color: var(--douban-error-text);
}
.zql-drawer-overlay .douban-confirm-group .douban-reply-action:first-child:hover {
color: var(--douban-danger-text);
background: rgba(231, 76, 60, 0.1);
}
.zql-drawer-overlay .douban-modal-close {
background: none;
border: none;
font-size: 16px;
cursor: pointer;
color: var(--douban-text-muted);
padding: 4px 8px;
}
.zql-drawer-overlay .douban-modal-close:hover {
color: var(--douban-text);
} .douban-source-tag {
font-size: 12px;
color: var(--douban-filter-text-muted);
margin-bottom: 8px;
padding: 4px 0;
}
.douban-source-tag a {
color: var(--douban-filter-link-color);
text-decoration: none;
}
.douban-source-tag a:hover {
text-decoration: underline;
}
.douban-source-independent {
color: var(--douban-accent-gold);
}
.douban-source-deleted {
color: var(--douban-text-muted);
font-style: italic;
} @media (max-width: 640px) {
.zql-article-modal {
padding: 0;
}
.zql-modal-card {
max-width: 100%;
max-height: 100vh;
height: 100vh;
border-radius: 0;
}
.zql-modal-header {
padding: 12px 16px;
}
.zql-modal-body {
padding: 12px 16px;
}
.zql-comment-bar {
flex-direction: column;
gap: 16px;
padding: 28px 16px 16px;
}
.zql-person-sitting {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -15px;
}
.zql-person-sitting::before {
width: 40px;
height: 40px;
}
.zql-person-sitting::after {
width: 48px;
height: 48px;
}
.zql-person-sitting:hover {
transform: translateX(-50%) translateY(-3px);
}
.zql-person-icon {
font-size: 28px;
}
.zql-discuss-btn {
width: 100%;
max-width: 100%;
justify-content: center;
padding: 12px 20px;
}
} .zql-skeleton {
padding: 16px;
background: var(--douban-card-bg, #fff);
border-radius: 8px;
margin-bottom: 12px;
}
.zql-skeleton-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(90deg, var(--douban-skeleton-from) 25%, var(--douban-skeleton-via) 50%, var(--douban-skeleton-from) 75%);
background-size: 200% 100%;
animation: zql-skeleton-shimmer 1.5s infinite;
}
.zql-skeleton-content {
flex: 1;
margin-left: 12px;
}
.zql-skeleton-line {
height: 14px;
border-radius: 4px;
background: linear-gradient(90deg, var(--douban-skeleton-from) 25%, var(--douban-skeleton-via) 50%, var(--douban-skeleton-from) 75%);
background-size: 200% 100%;
animation: zql-skeleton-shimmer 1.5s infinite;
margin-bottom: 8px;
}
.zql-skeleton-line:last-child {
margin-bottom: 0;
}
.zql-skeleton-line.short {
width: 60%;
}
.zql-skeleton-line.medium {
width: 80%;
}
.zql-skeleton-title {
height: 16px;
width: 40%;
margin-bottom: 12px;
}
.zql-skeleton-meta {
display: flex;
gap: 16px;
margin-top: 12px;
}
.zql-skeleton-meta-item {
height: 12px;
width: 60px;
border-radius: 4px;
background: linear-gradient(90deg, var(--douban-skeleton-from) 25%, var(--douban-skeleton-via) 50%, var(--douban-skeleton-from) 75%);
background-size: 200% 100%;
animation: zql-skeleton-shimmer 1.5s infinite;
}
.zql-skeleton-actions {
display: flex;
gap: 8px;
margin-top: 12px;
}
.zql-skeleton-btn {
height: 28px;
width: 60px;
border-radius: 4px;
background: linear-gradient(90deg, var(--douban-skeleton-from) 25%, var(--douban-skeleton-via) 50%, var(--douban-skeleton-from) 75%);
background-size: 200% 100%;
animation: zql-skeleton-shimmer 1.5s infinite;
}
@keyframes zql-skeleton-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.zql-skeleton-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.zql-skeleton-item {
display: flex;
align-items: flex-start;
} .zql-v2 .douban-more-wrapper {
position: relative;
display: inline-block;
margin-left: 8px;
}
.zql-v2 .douban-more-btn {
background: none;
border: none;
color: var(--douban-text-muted);
font-size: 14px;
font-weight: 700;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
letter-spacing: 1px;
transition: all 0.2s;
}
.zql-v2 .douban-more-btn:hover {
color: var(--douban-text-secondary);
background: var(--douban-action-hover-bg);
}
.zql-v2 .douban-more-menu {
position: absolute;
right: 0;
top: 100%;
background: var(--douban-card-bg);
border: 1px solid var(--douban-border);
border-radius: 8px;
box-shadow: var(--douban-shadow-hover);
z-index: 100;
min-width: 100px;
padding: 4px 0;
overflow: hidden;
}
.zql-v2 .douban-more-menu button {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 8px 14px;
font-size: 13px;
color: var(--douban-text-secondary);
cursor: pointer;
transition: background 0.15s;
}
.zql-v2 .douban-more-menu button:hover {
background: var(--douban-action-hover-bg);
} .zql-v2 .douban-empty-cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 16px;
padding: 10px 24px;
background: var(--douban-dark);
color: #fff;
border: none;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.zql-v2 .douban-empty-cta:hover {
opacity: 0.9;
box-shadow: 0 4px 12px rgba(51, 119, 170, 0.3);
transform: translateY(-1px);
} .zql-v2 .douban-quick-post {
margin-top: 12px;
border-top: 1px solid var(--douban-border);
padding-top: 12px;
}
.zql-v2 .douban-quick-collapsed {
display: flex;
align-items: center;
padding: 10px 14px;
background: var(--douban-bg);
border: 1px solid var(--douban-border);
border-radius: 20px;
cursor: pointer;
transition: all 0.2s;
}
.zql-v2 .douban-quick-collapsed:hover {
border-color: var(--douban-dark);
background: var(--douban-card-bg);
}
.zql-v2 .douban-quick-placeholder {
color: var(--douban-text-muted);
font-size: 13px;
}
.zql-v2 .douban-quick-expanded {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.zql-v2 .douban-quick-name {
width: 80px;
padding: 8px 10px;
border: 1px solid var(--douban-border);
border-radius: 16px;
font-size: 13px;
background: var(--douban-input-bg);
color: var(--douban-input-text);
outline: none;
transition: border-color 0.2s;
}
.zql-v2 .douban-quick-name:focus {
border-color: var(--douban-input-focus-border);
}
.zql-v2 .douban-quick-input {
flex: 1;
min-width: 120px;
padding: 8px 14px;
border: 1px solid var(--douban-border);
border-radius: 16px;
font-size: 13px;
background: var(--douban-input-bg);
color: var(--douban-input-text);
outline: none;
transition: border-color 0.2s;
}
.zql-v2 .douban-quick-input:focus {
border-color: var(--douban-input-focus-border);
}
.zql-v2 .douban-quick-send {
padding: 8px 16px;
background: var(--douban-dark);
color: #fff;
border: none;
border-radius: 16px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.zql-v2 .douban-quick-send:hover:not(:disabled) {
opacity: 0.9;
}
.zql-v2 .douban-quick-send:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.zql-v2 .douban-quick-cancel {
padding: 8px 12px;
background: none;
border: 1px solid var(--douban-border);
border-radius: 16px;
font-size: 13px;
color: var(--douban-text-muted);
cursor: pointer;
transition: all 0.2s;
}
.zql-v2 .douban-quick-cancel:hover {
color: var(--douban-text-secondary);
border-color: var(--douban-text-muted);
} .zql-v2 .douban-fab {
display: none;
position: fixed;
bottom: 54px;
left: 15px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--douban-dark);
color: #fff;
border: none;
font-size: 14px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(51, 119, 170, 0.3);
z-index: 998;
opacity: 0.85;
transition: all 0.2s;
align-items: center;
justify-content: center;
}
.zql-v2 .douban-fab:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(51, 119, 170, 0.4);
}   @media (max-width: 768px) {
.zql-v2 .douban-fab {
display: flex;
}
.zql-v2 .douban-quick-post {
display: none;
}
.zql-v2 #comments-container {
padding-bottom: 72px;
}
}
@media (max-width: 480px) {
.zql-v2 .douban-more-menu {
right: -8px;
}
.zql-v2 .douban-quick-expanded {
flex-direction: column;
align-items: stretch;
}
.zql-v2 .douban-quick-name {
width: 100%;
}
.zql-v2 .douban-quick-input {
min-width: auto;
}
.zql-v2 .douban-fab {
bottom: 54px;
left: 15px;
width: 32px;
height: 32px;
font-size: 14px;
}
}