.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* === 1.1 默认主题 (深色模式) === */
:root {
    /* 背景相关 */
    --bg-color: #050510;
    --bg-gradient: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 3px),
                   radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 2px),
                   radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 3px);
    
    /* 文字颜色 */
    --text-main: #e0e0e0;
    --text-muted: #a0a0b0;
    --heading-color: #ffffff;
    
    /* 卡片与容器 */
    --card-bg: rgba(30, 30, 40, 0.6);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-shadow: none;
    --navbar-bg: rgba(5, 5, 16, 0.9);
    
    /* 表单元素 */
    --input-bg: rgba(255, 255, 255, 0.1);
    --input-text: white;
    
    /* 导航与链接 */
    --nav-link-color: #e0e0e0;
    --nav-link-hover: #ffffff;
    --sidebar-link-hover: rgba(255, 255, 255, 0.05);
    --sidebar-link-active: rgba(0, 191, 255, 0.1);
}

/* === 1.2 亮色模式覆盖 === */
[data-theme="light"] {
    /* 背景相关 */
    --bg-color: #f0f4f8;
    --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #f0f4f8 100%),
                   radial-gradient(circle at 90% 10%, rgba(255, 215, 0, 0.25) 0%, rgba(255, 255, 255, 0) 40%),
                   radial-gradient(circle at 85% 5%, rgba(255, 165, 0, 0.15) 0%, rgba(255, 255, 255, 0) 30%);
    
    /* 文字颜色 */
    --text-main: #333333;
    --text-muted: #666666;
    --heading-color: #2c3e50;
    
    /* 卡片与容器 */
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: rgba(0, 0, 0, 0.1);
    --card-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
    --navbar-bg: rgba(255, 255, 255, 0.98);
    
    /* 表单元素 */
    --input-bg: rgba(0, 0, 0, 0.05);
    --input-text: #333;
    
    /* 导航与链接 */
    --nav-link-color: #555;
    --nav-link-hover: #007bff;
    --sidebar-link-hover: rgba(0, 0, 0, 0.05);
    --sidebar-link-active: rgba(0, 123, 255, 0.15);
}


/* ============================================
   2. 基础元素样式
   ============================================ */

/* 2.1 Body 样式 */
body {
    background-color: var(--bg-color);
    background-image: var(--bg-gradient);
    background-size: 550px 550px, 350px 350px, 250px 250px;
    background-position: 0 0, 40px 60px, 130px 270px;
    background-attachment: fixed;
    color: var(--text-main);
    transition: background-color 0.5s ease, color 0.3s ease;
    min-height: 100vh;
}

/* 亮色模式下的背景调整 */
[data-theme="light"] body {
    background-size: 100% 100%, 400px 400px, 200px 200px;
    background-position: center, 90% 10%, 90% 10%;
    background-repeat: no-repeat;
}

/* 2.2 标题样式 */
h1, h2, h3, h4, h5 {
    color: var(--heading-color) !important;
}

/* 2.3 文本辅助样式 */
.text-muted {
    color: var(--text-muted) !important;
}


/* ============================================
   3. 组件样式
   ============================================ */

/* 3.1 导航栏 */
.astro-navbar {
    background-color: var(--navbar-bg);
    border-bottom: 1px solid var(--card-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

/* 导航栏链接 */
.astro-navbar .nav-link {
    color: var(--nav-link-color) !important;
    transition: color 0.3s ease;
}

.astro-navbar .nav-link:hover,
.astro-navbar .nav-link:focus {
    color: var(--nav-link-hover) !important;
}

/* 导航栏品牌标识 */
.astro-navbar .navbar-brand,
.astro-navbar .navbar-brand:hover,
.astro-navbar .navbar-brand:focus {
    color: var(--heading-color) !important;
}

/* 3.2 卡片 */
.astro-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* 卡片内的链接和文本 */
.astro-card a.text-white {
    color: var(--heading-color) !important; 
}

.astro-card .text-light {
    color: var(--text-main) !important;
    opacity: 0.9 !important;
}

/* 3.3 侧边栏 */
.astro-sidebar-link {
    color: var(--text-main) !important;
    background-color: transparent;
    border: none;
    transition: all 0.2s ease;
}

.astro-sidebar-link:hover {
    background-color: var(--sidebar-link-hover);
    color: var(--text-main);
}

.astro-sidebar-link.active-astro {
    background-color: var(--sidebar-link-active) !important;
    color: var(--heading-color) !important;
    font-weight: 500;
    border-left: 3px solid var(--heading-color) !important;
}

/* 3.4 搜索框 */
.search-input {
    background: var(--input-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-color: var(--card-border) !important;
    color: var(--input-text) !important;
    transition: all 0.3s ease;
}

.search-input:focus {
    box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.1) !important;
}

[data-theme="light"] .search-input:focus {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15) !important;
}

/* 3.5 分页 */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.page-item .page-link {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--text-main) !important;
    transition: all 0.3s ease;
}

.page-item .page-link:hover {
    background-color: var(--sidebar-link-hover) !important;
    border-color: var(--card-border);
    color: var(--heading-color) !important;
}

.page-item.active .page-link {
    background-color: var(--sidebar-link-active) !important;
    border-color: rgba(0, 191, 255, 0.3);
    color: var(--heading-color);
    font-weight: 500;
}

/* 3.6 按钮 */
.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

[data-theme="light"] .btn-outline-light {
    border-color: rgba(0, 0, 0, 0.2);
    color: #333;
}

[data-theme="light"] .btn-outline-light:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.3);
}

/* 3.7 表格 */
.table {
    color: var(--text-main);
    border-color: var(--card-border);
}

.table th {
    border-color: var(--card-border);
    background-color: var(--card-bg);
}

.table td {
    border-color: var(--card-border);
}

/* 3.8 徽章 */
.badge {
    transition: all 0.3s ease;
}

.bg-dark {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--text-main) !important;
}

.bg-primary {
    background-color: #007bff !important;
    color: white !important;
}


/* ============================================
   4. 主题特定覆盖
   ============================================ */

/* 4.1 亮色模式表格 */
[data-theme="light"] .table {
    color: #333;
}

[data-theme="light"] .table th {
    background-color: rgba(0, 0, 0, 0.02);
}

/* 4.2 亮色模式分页 */
[data-theme="light"] .page-item .page-link {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #333 !important;
}

[data-theme="light"] .page-item .page-link:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #007bff !important;
}

[data-theme="light"] .page-item.active .page-link {
    background-color: rgba(0, 123, 255, 0.15) !important;
    border-color: rgba(0, 123, 255, 0.3) !important;
    color: #007bff !important;
}


/* ============================================
   5. 浏览器特定样式
   ============================================ */

/* 5.1 自定义滚动条 */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--card-bg);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}