.cs-space-switch { display: flex; gap: 6px; margin-bottom: 14px; }
.cs-space-btn { padding: 8px 16px; border-radius: 20px; border: 1px solid #ddd; background: #fff; cursor: pointer; font-size: 14px; color: #555; }
.cs-space-btn:hover { background: #f5f5f5; }
.cs-space-btn.cs-space-active { background: #2271b1; color: #fff; border-color: #2271b1; font-weight: 600; }

.cs-app { max-width: 1000px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

.cs-nav-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cs-nav-arrow { padding: 6px 10px; font-size: 13px; }
.cs-nav-arrow:disabled { opacity: .35; cursor: default; }
.cs-nav-arrow:disabled:hover { background: #fff; }

.cs-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.cs-breadcrumb { font-size: 14px; color: #555; }
.cs-breadcrumb a { color: #2271b1; text-decoration: none; cursor: pointer; }
.cs-breadcrumb a:hover { text-decoration: underline; }
.cs-breadcrumb .sep { margin: 0 6px; color: #999; }
.cs-item-count { font-size: 13px; color: #888; margin-left: 12px; }

.cs-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cs-export-overwrite-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #555; cursor: pointer; white-space: nowrap; }
.cs-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 6px; border: 1px solid #ddd; background: #fff; cursor: pointer; font-size: 14px; color: #333; }
.cs-btn:hover { background: #f5f5f5; }
.cs-btn-primary { background: #2271b1; color: #fff; border-color: #2271b1; }
.cs-btn-primary:hover { background: #195a8d; }
.cs-btn-export { background: #d9f2d9; color: #1b1b1b; border-color: #a8e0a8; }
.cs-btn-export:hover { background: #c5ebc5; }
.cs-btn-danger { color: #c00; }

.cs-folder-filter { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; width: 220px; }

.cs-dropzone { position: relative; border: 1px solid #e2e2e2; border-radius: 8px; overflow: hidden; background: #fff; }
.cs-dropzone.cs-drag-over .cs-drop-overlay { display: flex; }
.cs-drop-overlay { display: none; position: absolute; inset: 0; background: rgba(34,113,177,.08); border: 2px dashed #2271b1; align-items: center; justify-content: center; font-weight: 600; color: #2271b1; pointer-events: none; }

.cs-table { width: 100%; border-collapse: collapse; }
.cs-table th { text-align: left; font-size: 12px; text-transform: uppercase; color: #888; padding: 10px 16px; border-bottom: 1px solid #eee; }
.cs-table td { padding: 10px 16px; border-bottom: 1px solid #f2f2f2; font-size: 14px; vertical-align: middle; }
.cs-table tr:hover { background: #fafafa; }
.cs-loading, .cs-empty { text-align: center; color: #999; padding: 40px 0 !important; }

.cs-name-cell { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cs-icon { font-size: 18px; width: 22px; text-align: center; }
.cs-icon-folder { display: inline-flex; align-items: center; justify-content: center; }
.cs-folder-svg { color: var(--cs-folder-color, #f0c14b); }
.cs-icon[title] { cursor: help; }
.cs-name-text { word-break: break-all; }
.cs-shared-owner { font-size: 12px; color: #888; font-weight: 400; }

.cs-webdav-banner { background: #e7f3ff; border: 1px solid #a8d0f0; border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; color: #2c5a82; }
.cs-webdav-banner code { background: #fff; padding: 2px 6px; border-radius: 4px; }
.cs-webdav-banner button { margin-left: 10px; }

.cs-folder-row .cs-name-cell { font-weight: 500; }

.cs-row-actions { display: flex; gap: 6px; justify-content: flex-end; opacity: .65; }
.cs-row-actions button { background: none; border: none; cursor: pointer; font-size: 15px; padding: 4px 6px; border-radius: 4px; position: relative; }
.cs-row-actions button:hover { background: #eee; }
.cs-share-badge { position: absolute; top: -2px; right: -2px; background: #2271b1; color: #fff; font-size: 10px; font-weight: 700; border-radius: 50%; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; line-height: 1; }
.cs-share-badge-inherited { background: #8badc7; }
.cs-action-webdav-active { background: #2271b1 !important; border-radius: 50%; }

.cs-upload-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 99999; margin: 0; padding: 10px 16px; font-size: 14px; color: #1b1b1b; background: #fff3cd; border-bottom: 2px solid #f0c34d; box-shadow: 0 2px 6px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; gap: 16px; }
.cs-upload-progress .cs-export-cancel { padding: 4px 12px; font-size: 13px; background: #fff; }
.cs-upload-progress .cs-export-spinner { width: 28px; height: 28px; flex-shrink: 0; }
body.admin-bar .cs-upload-progress { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .cs-upload-progress { top: 46px; }
}

.cs-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.75); align-items: center; justify-content: center; z-index: 2147483000 !important; }
.cs-modal.cs-open { display: flex; }
.cs-modal-inner { background: #fff; border-radius: 8px; padding: 20px; max-width: 90vw; max-height: 90vh; overflow: auto; position: relative; }
.cs-modal-small { width: 360px; }

.cs-modal-preview { padding: 0; width: 90vw; height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.cs-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #2c3e50; color: #fff; flex-shrink: 0; }
.cs-modal-header #cs-preview-title { font-size: 14px; word-break: break-all; }
.cs-modal-close-btn { background: #e74c3c; color: #fff; border: none; border-radius: 4px; padding: 6px 14px; cursor: pointer; font-size: 13px; white-space: nowrap; margin-left: 12px; }
.cs-modal-close-btn:hover { background: #c0392b; }

.cs-modal-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 22px; cursor: pointer; color: #888; }
.cs-modal-body { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; background: #525659; }
.cs-modal-body img { max-width: 100%; max-height: 100%; display: block; }
.cs-modal-body iframe { width: 100%; height: 100%; border: none; }

.cs-btn-log { margin-left: auto; background: #fff7e0; border-color: #f0d77b; }

.cs-modal-body-log { background: #fff; display: block; padding: 0; text-align: left; }
.cs-log-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cs-log-table th { position: sticky; top: 0; background: #f5f5f5; text-align: left; padding: 8px 12px; border-bottom: 1px solid #ddd; }
.cs-log-table td { padding: 6px 12px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.cs-log-table tr:nth-child(even) { background: #fafafa; }
.cs-log-date { white-space: nowrap; color: #666; font-family: monospace; }
.cs-log-op { font-weight: 600; color: #2271b1; white-space: nowrap; }
.cs-log-row-error { background: #fdecea !important; }
.cs-log-row-error .cs-log-op { color: #c0392b; }
.cs-log-row-login { background: #eafaf1 !important; }
.cs-log-row-login .cs-log-op { color: #1e8449; }
.cs-log-path { word-break: break-all; color: #333; }
.cs-log-login { white-space: nowrap; color: #555; }

.cs-log-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 16px; background: #f5f5f5; border-bottom: 1px solid #ddd; flex-shrink: 0; }
.cs-log-filters input, .cs-log-filters select { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; }
.cs-log-filters input[type="text"] { flex: 1; min-width: 160px; }
.cs-log-filter-sep { color: #888; font-size: 13px; }

.cs-preview-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,.45);
	color: #fff;
	border: none;
	font-size: 32px;
	line-height: 1;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
}
.cs-preview-nav:hover { background: rgba(0,0,0,.7); }
.cs-preview-nav.cs-visible { display: flex; }
.cs-preview-prev { left: 14px; }
.cs-preview-next { right: 14px; }

.cs-field-checkbox label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #333; cursor: pointer; }
.cs-field-checkbox input { width: auto; }

.cs-field { margin: 12px 0; }
.cs-field label { display: block; font-size: 13px; margin-bottom: 4px; color: #555; }
.cs-field input, .cs-field select { width: 100%; padding: 7px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }

.cs-share-link-row { display: flex; gap: 6px; margin-top: 10px; align-items: center; }
.cs-share-link-row input { flex: 1; font-size: 12px; padding: 6px; border: 1px solid #ddd; border-radius: 4px; }

.cs-login-notice { padding: 16px; background: #fef7e0; border: 1px solid #f0d77b; border-radius: 6px; }

@media (max-width: 600px) {
	.cs-table th:nth-child(2), .cs-table td:nth-child(2),
	.cs-table th:nth-child(3), .cs-table td:nth-child(3),
	.cs-table th:nth-child(4), .cs-table td:nth-child(4),
	.cs-table th:nth-child(5), .cs-table td:nth-child(5) { display: none; }
}