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

body {
    font-family: Arial, 'Microsoft YaHei', sans-serif;
    min-height: 100vh;
    background: linear-gradient(135deg, #4BDB42 0%, #DE3AD6 100%);
    color: #333;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.navbar {
    background: rgba(33, 37, 41, 0.7);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin: 0 auto 20px auto;
    border-radius: 15px;
    padding: 10px 15px;
    width: 100%;
    max-width: 1300px;
}

.container.content {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    padding: 25px;
    margin: 0 auto 20px auto;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 100%;
    max-width: 1300px;
}

.table-container {
    overflow-x: auto;
    margin: 0 auto;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.3);
    width: 100%;
}

table {
    margin-bottom: 0;
    background: transparent;
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
}

thead th {
    background: rgba(75, 219, 66, 0.2);
    padding: 12px 8px;
    font-weight: 600;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
    color: #333;
    font-size: 14px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

tbody td {
    padding: 10px 8px;
    vertical-align: middle;
    background: transparent;
    text-align: center;
    color: #333;
    font-size: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.2);
}

.table-hover tbody tr:hover {
    background-color: rgba(222, 58, 214, 0.15);
}

.status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 5px;
}

.status-online {
    background-color: #28a745;
}

.status-offline {
    background-color: #dc3545;
}

.progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.progress {
    height: 20px;
    margin-top: 5px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 80%;
}

.progress-bar {
    font-size: 12px;
    line-height: 20px;
    font-weight: bold;
}

.updated-time {
    background: rgba(255, 255, 255, 0.5);
    padding: 10px 15px;
    border-radius: 20px;
    display: inline-block;
    font-size: 14px;
    margin-top: 15px;
    color: #333;
}

footer {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    padding: 15px;
    margin: 20px auto 0 auto;
    width: 100%;
    max-width: 1300px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: auto;
    min-height: 50px;
}

footer p {
    margin: 0;
    font-size: 12px;
    line-height: 1.2;
    color: #333;
}

/* 国旗图标样式 */
.flag-icon {
    width: 20px;
    height: 15px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    background-size: cover;
    background-position: center;
    border: 1px solid #ddd;
    border-radius: 2px;
}

.flag-us { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/us.svg'); }
.flag-cn { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/cn.svg'); }
.flag-tw { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/tw.svg'); }
.flag-hk { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/hk.svg'); }
.flag-mo { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/mo.svg'); }
.flag-jp { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/jp.svg'); }
.flag-kr { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/kr.svg'); }
.flag-sg { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/sg.svg'); }
.flag-vn { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/vn.svg'); }
.flag-eu { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/eu.svg'); }
.flag-de { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/de.svg'); }
.flag-gb { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/gb.svg'); }
.flag-fr { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/fr.svg'); }
.flag-it { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/it.svg'); }
.flag-es { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/es.svg'); }
.flag-nl { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/nl.svg'); }
.flag-be { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/be.svg'); }
.flag-ch { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/ch.svg'); }
.flag-se { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/se.svg'); }
.flag-no { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/no.svg'); }
.flag-fi { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/fi.svg'); }
.flag-dk { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/dk.svg'); }
.flag-pl { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/pl.svg'); }
.flag-at { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/at.svg'); }
.flag-cz { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/cz.svg'); }
.flag-hu { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/hu.svg'); }
.flag-ru { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/ru.svg'); }
.flag-ua { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/ua.svg'); }
.flag-tr { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/tr.svg'); }
.flag-gr { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/gr.svg'); }
.flag-pt { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/pt.svg'); }
.flag-ro { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/ro.svg'); }
.flag-bg { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/bg.svg'); }
.flag-ca { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/ca.svg'); }
.flag-au { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/au.svg'); }
.flag-nz { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/nz.svg'); }
.flag-in { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/in.svg'); }
.flag-br { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/br.svg'); }
.flag-mx { background-image: url('https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/mx.svg'); }
.flag-unknown { background: #ccc; }

/* 右键保护弹窗 - 修复定位问题 */
#rightClickModal {
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 300px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal-content i {
    font-size: 36px;
    color: #4BDB42;
    margin-bottom: 10px;
}

.modal-content h3 {
    margin-bottom: 10px;
    color: #333;
    font-size: 18px;
}

.modal-content p {
    margin-bottom: 15px;
    color: #666;
    font-size: 14px;
}

.modal-btn {
    background: #4BDB42;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 14px;
}

/* 文件夹说明和文章链接容器 */
.info-articles-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.folder-info {
    flex: 1;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 15px;
    font-size: 14px;
    border-left: 4px solid #4BDB42;
}

.folder-info h5 {
    margin-bottom: 10px;
    color: #2c3e50;
    font-size: 16px;
}

.folder-info ul {
    margin-bottom: 0;
    padding-left: 20px;
}

.folder-info li {
    margin-bottom: 5px;
}

/* 文章链接面板 */
.articles-panel {
    flex: 1;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 15px;
}

.articles-panel h5 {
    margin-bottom: 15px;
    color: #2c3e50;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.article-list {
    list-style: none;
    padding: 0;
    margin-bottom: 15px;
}

.article-list li {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.article-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.article-list a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
    display: block;
    transition: color 0.3s;
}

.article-list a:hover {
    color: #4BDB42;
}

/* 页码样式 */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.page-numbers {
    display: flex;
    gap: 5px;
}

.page-numbers a {
    display: block;
    padding: 5px 10px;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
}

.page-numbers a:hover,
.page-numbers a.active {
    background: rgba(0, 0, 0, 0.1);
}

/* 主题切换按钮样式 */
.theme-switcher {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.theme-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 20px;
    padding: 5px 15px;
    color: white;
    font-size: 14px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    margin: 0 5px;
}

.theme-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.theme-btn.active {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.theme-btn i {
    margin-right: 5px;
}

/* 暗色主题 - 修复文字颜色问题 */
body.dark-theme {
    background: linear-gradient(135deg, #2a6f23 0%, #8a2370 100%);
    color: #f8f9fa !important;
}

body.dark-theme .container.content {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f8f9fa !important;
}

body.dark-theme .table-container {
    background: rgba(0, 0, 0, 0.3);
}

body.dark-theme table {
    background: transparent;
    color: #f8f9fa !important;
}

body.dark-theme thead th {
    background: rgba(75, 219, 66, 0.25);
    color: #f8f9fa !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

body.dark-theme tbody td {
    background: transparent;
    color: #f8f9fa !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-theme .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.2);
}

body.dark-theme .table-hover tbody tr:hover {
    background-color: rgba(222, 58, 214, 0.15);
}

body.dark-theme footer {
    background: rgba(0, 0, 0, 0.4);
    color: #f8f9fa !important;
}

body.dark-theme footer p {
    color: #f8f9fa !important;
}

body.dark-theme .updated-time {
    background: rgba(0, 0, 0, 0.4);
    color: #f8f9fa !important;
}

body.dark-theme .modal-content {
    background: #2c2c2c;
    color: #f8f9fa !important;
}

body.dark-theme .modal-content h3 {
    color: #f8f9fa !important;
}

body.dark-theme .modal-content p {
    color: #ccc !important;
}

body.dark-theme .folder-info {
    background: rgba(0, 0, 0, 0.25);
    color: #f8f9fa !important;
    border-left: 4px solid #DE3AD6;
}

body.dark-theme .folder-info h5 {
    color: #f8f9fa !important;
}

body.dark-theme .articles-panel {
    background: rgba(0, 0, 0, 0.25);
}

body.dark-theme .articles-panel h5 {
    color: #f8f9fa !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

body.dark-theme .article-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-theme .article-list a {
    color: #f8f9fa !important;
}

body.dark-theme .article-list a:hover {
    color: #DE3AD6 !important;
}

body.dark-theme .page-numbers a {
    color: #f8f9fa !important;
}

body.dark-theme .page-numbers a:hover,
body.dark-theme .page-numbers a.active {
    background: rgba(255, 255, 255, 0.1);
}

/* 响应式设计 */
@media (max-width: 992px) {
    .info-articles-container {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    body {
        padding: 15px;
    }
    
    .navbar {
        padding: 8px 12px;
        margin-bottom: 15px;
    }
    
    .container.content {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    thead th {
        font-size: 12px;
    }
    
    tbody td {
        font-size: 12px;
    }
    
    .progress {
        height: 18px;
    }
    
    .progress-bar {
        font-size: 11px;
        line-height: 18px;
    }
    
    /* 移动设备隐藏部分列 */
    .mobile-hidden {
        display: none;
    }
}