/* 自定义样式 - 补充 Tailwind CSS */

/* 导航激活状态 */
.nav-btn.active {
    background-color: #EBF5FF;
    color: #1D4ED8;
}

/* Markdown 预览样式 */
.prose h1 { font-size: 1.5rem; font-weight: bold; margin-bottom: 0.5rem; }
.prose h2 { font-size: 1.25rem; font-weight: bold; margin-bottom: 0.5rem; }
.prose h3 { font-size: 1.125rem; font-weight: bold; margin-bottom: 0.5rem; }
.prose p { margin-bottom: 0.5rem; }
.prose ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 0.5rem; }
.prose ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 0.5rem; }
.prose li { margin-bottom: 0.25rem; }
.prose code { background-color: #f3f4f6; padding: 0.125rem 0.25rem; border-radius: 0.25rem; font-size: 0.875rem; }
.prose pre { background-color: #1f2937; color: #f9fafb; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin-bottom: 0.5rem; }
.prose pre code { background-color: transparent; padding: 0; }
.prose blockquote { border-left: 4px solid #d1d5db; padding-left: 1rem; color: #6b7280; margin-bottom: 0.5rem; }
.prose a { color: #2563eb; text-decoration: underline; }
.prose hr { border-top: 1px solid #e5e7eb; margin: 1rem 0; }

/* 公告卡片样式 */
.announcement-card {
    transition: all 0.2s ease;
}
.announcement-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 类型标签颜色 */
.type-notice { background-color: #DBEAFE; color: #1E40AF; }
.type-update { background-color: #D1FAE5; color: #065F46; }
.type-promotion { background-color: #FEF3C7; color: #92400E; }

/* Toast 动画 */
.toast-show {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* 加载动画 */
.loading-spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 模态框动画 */
#announcement-modal.show,
#confirm-dialog.show {
    display: flex !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .announcement-card .flex-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
}