:root {
    --primary: #007bff;
    --success: #28a745;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #17a2b8;
    --light: #f8f9fa;
    --dark: #343a40;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background-color: #eef2f7; color: var(--dark); line-height: 1.6; padding: 10px; transition: background-color 0.3s, color 0.3s; }
body[data-theme="dark"] { background-color: #1e2a38; color: #e9ecef; }
.container { max-width: 1280px; margin: 0 auto; background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 20px; position: relative; transition: background 0.3s; }
body[data-theme="dark"] .container { background: #2c3e50; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
h1 { font-size: 1.8rem; font-weight: 600; color: var(--primary); margin-bottom: 15px; text-align: center; }
.top-controls { position: absolute; top: 10px; right: 10px; }
.tabs { display: flex; border-bottom: 2px solid var(--primary); margin-bottom: 15px; }
.tab-button { flex: 1; padding: 10px; text-align: center; background: var(--light); border: none; cursor: pointer; transition: all 0.3s; font-weight: 500; font-size: 0.9rem; }
body[data-theme="dark"] .tab-button { background: #3b4a5a; color: #e9ecef; }
.tab-button:hover { background: #e9ecef; }
.tab-button.active { background: var(--primary); color: white; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.section { margin-bottom: 25px; padding: 20px; background: var(--light); border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); transition: box-shadow 0.3s; }
.section:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
body[data-theme="dark"] .section { background: #34495e; }
.section-title { font-size: 1.3rem; font-weight: 600; color: var(--dark); margin-bottom: 10px; border-bottom: 2px solid var(--primary); padding-bottom: 5px; }
.status { padding: 8px; margin: 8px 0; border-radius: 6px; display: none; font-weight: 500; font-size: 0.9rem; }
.success { background: var(--success); color: white; }
.error { background: var(--danger); color: white; }
.input-group { margin-bottom: 15px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.input-group label { font-weight: 500; color: var(--dark); font-size: 0.9rem; min-width: 120px; }
.input-group input, .input-group textarea, .input-group select { padding: 8px; border: 1px solid #ced4da; border-radius: 6px; font-size: 0.9rem; transition: border-color 0.3s; }
.input-group input[type="number"] { width: 100px; }
.input-group input:focus, .input-group textarea:focus, .input-group select:focus { border-color: var(--primary); outline: none; }
.input-group textarea { width: 100%; height: 120px; resize: vertical; font-family: 'Courier New', monospace; }
button { padding: 8px 15px; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 0.9rem; transition: all 0.3s; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
button:disabled { background: #6c757d; cursor: not-allowed; }
button:hover:not(:disabled) { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
button:active:not(:disabled) { transform: scale(0.98); }
button.primary { background: linear-gradient(135deg, #007bff, #0056b3); color: white; }
button.primary:hover:not(:disabled) { background: linear-gradient(135deg, #0056b3, #003d82); }
button.danger { background: linear-gradient(135deg, #dc3545, #c82333); color: white; }
button.danger:hover:not(:disabled) { background: linear-gradient(135deg, #c82333, #a71d2a); }
.sync-status { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 10px; background: #f1f3f5; border-radius: 6px; gap: 10px; }
body[data-theme="dark"] .sync-status { background: #3b4a5a; }
.sync-info div { margin-bottom: 5px; font-size: 0.9rem; }
.sync-controls { display: flex; gap: 8px; }
.sync-interval { display: flex; align-items: center; gap: 5px; }
.sync-interval input { width: 60px; padding: 5px; }
.sync-running { color: var(--success); font-weight: bold; }
.sync-running::before { content: ''; display: inline-block; width: 10px; height: 10px; border: 2px solid var(--success); border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 5px; }
.sync-waiting { color: #6c757d; }
.log-entry { display: flex; padding: 5px 0; border-bottom: 1px solid #dee2e6; align-items: flex-start; }
body[data-theme="dark"] .log-entry { border-bottom: 1px solid #4a5e74; }
.log-timestamp { color: #6c757d; width: 170px; flex-shrink: 0; white-space: nowrap; margin-right: 10px; }
.log-type { padding: 2px 6px; border-radius: 4px; margin-right: 8px; min-width: 50px; text-align: center; flex-shrink: 0; }
.log-message { word-break: break-all; }
.log-type-info { background: var(--info); color: white; }
.log-type-warning { background: var(--warning); color: var(--dark); }
.log-type-error { background: var(--danger); color: white; }
.log-type-success { background: var(--success); color: white; }
.checkbox-group { display: flex; align-items: center; margin-bottom: 8px; font-size: 0.9rem; gap: 10px; }
.checkbox-group input[type="checkbox"] { margin-right: 6px; }
.file-count { color: #6c757d; margin-left: 8px; font-size: 1rem; }
.file-count-ahead { color: var(--danger); }
.file-count-behind { color: var(--warning); }
.file-count-equal { color: var(--success); }
.update-notice { color: var(--warning); margin-left: 8px; font-size: 0.9rem; font-weight: bold; }
.log-controls select { padding: 5px; border-radius: 6px; margin-left: 5px; }
.pagination button { padding: 6px 12px; font-size: 0.9rem; }
.pagination span, .pagination label, .pagination select { padding: 6px 12px; font-size: 0.9rem; color: var(--dark); }
body[data-theme="dark"] .pagination span, body[data-theme="dark"] .pagination label, body[data-theme="dark"] .pagination select { color: #e9ecef; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
    body { padding: 5px; }
    .container { padding: 10px; }
    h1 { font-size: 1.5rem; }
    .tabs { flex-direction: column; }
    .tab-button { padding: 8px; font-size: 0.8rem; }
    .section { padding: 10px; margin-bottom: 20px; }
    .section-title { font-size: 1.1rem; }
    .sync-status { flex-direction: column; align-items: flex-start; }
    .sync-controls { flex-direction: column; gap: 5px; width: 100%; }
    .sync-interval { flex-direction: column; align-items: flex-start; }
    button { padding: 6px 10px; font-size: 0.8rem; }
    .sync-interval input { width: 50px; }
    .log-container { max-height: 200px;min-height: 100px;max-height: 60vh; }
    .log-timestamp { width: 140px; font-size: 0.7rem; margin-right: 8px; }
    .log-type { min-width: 40px; font-size: 0.7rem; }
    .checkbox-group { font-size: 0.8rem; flex-wrap: wrap; gap: 5px; }
    .file-count { font-size: 0.9rem; }
    .update-notice { font-size: 0.8rem; }
    .top-controls { top: 5px; right: 5px; }
    .input-group { flex-direction: column; align-items: flex-start; }
    .input-group label { min-width: auto; }
    .input-group input, .input-group select { width: 100%; }
    .pagination { flex-wrap: wrap; gap: 5px; }
    .pagination select { width: 100px; }
    .telegram-footer { padding: 15px;  font-size: 0.9rem;  min-height: 50px;}
    .telegram-icon {  width: 14px; height: 14px; }
    .recycle-bin-status {flex-direction: column; align-items: flex-start;}/*回收站区域的样式*/
    .resource-monitor { flex-direction: column; align-items: stretch;}
    .resource-item { min-width: 100%; margin-bottom: 10px;}
}
/*回收站区域的样式*/
.recycle-bin-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #f1f3f5;
    border-radius: 6px;
    gap: 10px;
}
body[data-theme="dark"] .recycle-bin-status {
    background: #3b4a5a;
}
.recycle-bin-status div {
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.path-count-message {
    color: var(--info);
    font-size: 0.9rem;
    margin-bottom: 10px;
    text-align: center;
}
body[data-theme="dark"] .path-count-message {
    color: #4dabf7;
}
/* 页脚样式 */
.telegram-footer {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    font-size: 1rem;
    min-height: 60px; /* 确保垂直居中有空间 */
    width: 100%; /* 占满宽度 */
}

/* Telegram 链接样式 */
.telegram-link {
    color: #0088cc; /* Telegram 品牌色 */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
    display: inline-flex; /* 使图标和文字对齐 */
    align-items: center; /* 垂直居中对齐 */
}

.telegram-link:hover {
    color: #00aced; /* 悬停时变亮 */
}

/* Telegram 图标样式 */
.telegram-icon {
    width: 16px; /* 图标大小 */
    height: 16px;
    margin-right: 5px; /* 图标与文字间距 */
    vertical-align: middle; /* 确保与文字对齐 */
}

/* 适配亮色主题 */
body[data-theme=""] .telegram-footer {
    background: #f8f9fa; /* 与亮色主题协调 */
    color: #333;
}

/* 适配暗色主题 */
body[data-theme="dark"] .telegram-footer {
    background: #1a1a1a; /* 暗色背景 */
    color: #e9ecef;
}
body[data-theme="dark"] .telegram-link {
    color: #4dabf7; /* 暗色主题下的链接颜色 */
}
body[data-theme="dark"] .telegram-link:hover {
    color: #74c0fc;
}

/* 资源监控区域 */
.resource-monitor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: linear-gradient(135deg, #f1f3f5, #e9ecef);
    border-radius: 8px;
    gap: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.3s;
}

body[data-theme="dark"] .resource-monitor {
    background: linear-gradient(135deg, #3b4a5a, #2c3e50);
}

.resource-item {
    flex: 1;
    min-width: 150px;
    font-size: 0.9rem;
    padding: 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}

body[data-theme="dark"] .resource-item {
    background: rgba(0, 0, 0, 0.3);
    color: #e9ecef;
}

.resource-item:hover {
    transform: translateY(-2px);
}

.resource-item strong {
    color: var(--primary);
    margin-right: 5px;
}

.resource-monitor button {
    background: linear-gradient(135deg, #28a745, #218838);
    color: white;
}

.resource-monitor button:hover:not(:disabled) {
    background: linear-gradient(135deg, #218838, #1e7e34);
}

/* 日志显示框 */
.log-container {
    max-height: none; /* 移除固定 max-height */
    height: 300px; /* 默认高度 */
    min-height: 150px; /* 最小高度 */
    max-height: 80vh; /* 最大高度，限制为视口高度的 80% */
    overflow-y: auto;
    background: #fafafa;
    border-radius: 6px;
    padding: 10px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 1.8;
    letter-spacing: 0.5px;
    position: relative; /* 为拖动柄定位 */
    resize: vertical; /* 仅允许垂直拉伸 */
    border: 1px solid #dee2e6;
    transition: border-color 0.3s;
}

body[data-theme="dark"] .log-container {
    background: #2c3e50;
    border-color: #4a5e74;
}

/* 拖动柄 */
.log-resize-handle {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(180deg, #dee2e6, #ced4da);
    cursor: ns-resize;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

body[data-theme="dark"] .log-resize-handle {
    background: linear-gradient(180deg, #4a5e74, #3b4a5a);
}

.log-resize-handle:hover {
    background: linear-gradient(180deg, #ced4da, #adb5bd);
}

body[data-theme="dark"] .log-resize-handle:hover {
    background: linear-gradient(180deg, #3b4a5a, #2c3e50);
}

/* 拖动时的视觉反馈 */
.log-container.dragging {
    border-color: var(--primary);
}