:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --background-color: #ffffff;
    --text-color: #333333;
    --border-color: #dee2e6;
    --header-bg: #343a40;
    --header-text: #ffffff;
    --sidebar-bg: #f8f9fa;
    --sidebar-text: #495057;
    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --primary-soft: rgba(0, 123, 255, 0.10);
    --primary-shadow: rgba(0, 123, 255, 0.22);
    --surface-shadow: rgba(15, 23, 42, 0.09);
    --ui-radius: 12px;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: all 0.3s ease;
}

.btn {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: var(--dark-color);
    border-color: var(--dark-color);
}

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}

.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: var(--dark-color);
}

.btn-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
}

.card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    transition: all 0.3s ease;
}

.alert-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.alert-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
}

.alert-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: var(--dark-color);
}

.alert-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
    color: white;
}

.admin-header {
    background: var(--header-bg) !important;
    color: var(--header-text) !important;
    transition: all 0.3s ease;
}

.admin-sidebar {
    background: var(--sidebar-bg) !important;
    transition: all 0.3s ease;
}

.admin-sidebar a {
    color: var(--sidebar-text);
    transition: all 0.3s ease;
}

.admin-sidebar a:hover {
    background-color: var(--light-color);
    color: var(--primary-color);
}

.admin-sidebar a.active {
    background: var(--primary-color) !important;
    color: white !important;
}

.header {
    background-color: var(--header-bg);
    color: var(--header-text);
    transition: all 0.3s ease;
}

.status-bar {
    background-color: var(--light-color);
    color: var(--dark-color);
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.site-footer {
    background-color: var(--dark-color);
    color: var(--light-color);
}

.sidebar {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    transition: all 0.3s ease;
}

.sidebar a {
    color: var(--sidebar-text);
    transition: all 0.3s ease;
}

.sidebar a:hover {
    background-color: var(--light-color);
    color: var(--primary-color);
}

.file-item {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    transition: all 0.3s ease;
}

.file-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

html, body {
    background: var(--background-color) !important;
    color: var(--text-color) !important;
}

.header {
    background: var(--header-bg) !important;
    color: var(--header-text) !important;
}

.status-bar, .content-header, .sidebar-title, .sort-options {
    background: var(--light-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.sidebar-section, .content-area, .file-list-container, .detail-card, .detail-desc {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--card-border) !important;
}

.sidebar-title, .sidebar-content, .stat-row, .file-item, .folder-item, .detail-title, .detail-info, .detail-desc {
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.file-item:hover, .folder-item:hover, .related-list li:hover {
    background: var(--light-color) !important;
}

.folder-item a, .file-item a, .breadcrumb a, .related-list a, .back-link {
    color: var(--text-color) !important;
}

.folder-item a:hover, .file-item a:hover, .breadcrumb a:hover, .related-list a:hover, .back-link:hover {
    color: var(--primary-color) !important;
}

.download-link, .btn-download, .admin-btn {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

.download-link:hover, .btn-download:hover, .admin-btn:hover {
    background: var(--dark-color) !important;
    border-color: var(--dark-color) !important;
}

input, select, textarea {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif !important;
    background: radial-gradient(circle at 92% 0, var(--primary-soft), transparent 34rem), var(--background-color) !important;
}

.header, .admin-header {
    background: linear-gradient(135deg, var(--header-bg), var(--primary-color)) !important;
    box-shadow: 0 8px 24px var(--primary-shadow);
    text-shadow: none !important;
}

.admin-header .logout-btn { background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.28) !important; border-radius: 8px !important; }
.admin-header .logout-btn:hover { background: rgba(255,255,255,.24) !important; }

.header { padding: 22px 28px !important; letter-spacing: .02em; }
.status-bar { padding: 8px 20px !important; box-shadow: 0 1px 0 var(--border-color); }
.main-wrapper { gap: 14px; padding: 14px !important; }
.sidebar { width: 220px; margin-right: 0 !important; }

.sidebar-section, .content-area, .detail-card {
    border-radius: var(--ui-radius) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: 0 8px 24px var(--surface-shadow) !important;
    overflow: hidden;
}
.sidebar-section { margin-bottom: 12px !important; }
.sidebar-title, .content-header {
    background: linear-gradient(135deg, var(--light-color), var(--card-bg)) !important;
    padding: 11px 14px !important;
    color: var(--text-color) !important;
}
.sidebar-title { border-left: 3px solid var(--primary-color) !important; }
.sidebar-content { padding: 13px 14px !important; }
.file-list-container { padding: 12px !important; }

.file-item, .folder-item {
    margin: 3px 0;
    border: 1px solid transparent !important;
    border-radius: 9px;
    transition: transform .18s ease, background .18s ease, border-color .18s ease !important;
}
.file-item:hover, .folder-item:hover {
    background: var(--primary-soft) !important;
    border-color: var(--primary-color) !important;
    transform: translateX(2px);
}
.file-list-mini li { padding: 7px 3px !important; border-color: var(--border-color) !important; }
.file-list-mini a:hover { color: var(--primary-color) !important; text-decoration: none !important; }
.sort-options { padding: 10px 14px !important; }

.btn, .download-link, .btn-download, .admin-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--header-bg)) !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px var(--primary-shadow) !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.btn:hover, .download-link:hover, .btn-download:hover, .admin-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 7px 18px var(--primary-shadow) !important;
}

.admin-container { background: transparent !important; }
.admin-sidebar {
    width: 190px !important;
    padding: 14px 10px !important;
    border-right: 1px solid var(--card-border) !important;
    box-shadow: 5px 0 22px var(--surface-shadow);
}
.admin-menu li { border: 0 !important; }
.admin-menu a {
    margin: 3px 0;
    padding: 11px 13px !important;
    border-radius: 8px;
    font-weight: 500;
}
.admin-menu a:hover { background: var(--primary-soft) !important; color: var(--primary-color) !important; }
.admin-menu a.active {
    background: linear-gradient(135deg, var(--primary-color), var(--header-bg)) !important;
    box-shadow: 0 5px 14px var(--primary-shadow);
}
.admin-main { padding: 20px !important; }

.card, .stat-card, .modal-content {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: 0 8px 24px var(--surface-shadow) !important;
    overflow: hidden;
}
.card-header, .modal-header {
    background: linear-gradient(135deg, var(--light-color), var(--card-bg)) !important;
    color: var(--text-color) !important;
    border-color: var(--card-border) !important;
    padding: 14px 18px !important;
}
.card-header { border-left: 3px solid var(--primary-color) !important; }
.card-body { padding: 18px !important; }
.table th { background: var(--light-color) !important; color: var(--text-color) !important; }
.table td, .table th { border-color: var(--border-color) !important; }
.table tr:hover td { background: var(--primary-soft) !important; }

.form-control {
    border-radius: 8px !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}
.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
}
.form-group label { color: var(--text-color) !important; font-weight: 500; }
.pagination a { border-radius: 8px !important; border-color: var(--border-color) !important; color: var(--text-color) !important; }
.pagination a:hover, .pagination a.active { background: var(--primary-color) !important; color: #fff !important; border-color: var(--primary-color) !important; }

@media (max-width: 768px) {
    .header { padding: 15px 16px !important; }
    .main-wrapper { padding: 7px !important; gap: 8px; }
    .sidebar { width: 100% !important; }
    .admin-container { flex-direction: column; }
    .admin-sidebar { width: 100% !important; box-shadow: 0 4px 16px var(--surface-shadow); }
    .admin-menu { display: flex; overflow-x: auto; gap: 4px; padding-bottom: 3px; }
    .admin-menu li { flex: 0 0 auto; }
    .admin-menu a { white-space: nowrap; }
    .admin-main { padding: 10px !important; }
    .card-body { padding: 13px !important; }
}