* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif; background: #f3f4f6; padding: 24px; }
#dropzone { transition: all 0.3s ease; cursor: pointer; }
.drag-active { border-color: #3b82f6 !important; background-color: #eff6ff !important; }
.hidden { display: none !important; }

/* ===== 图库 ===== */
#gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
/* ⭐ 图库工具栏吸顶 */
#galleryToolbar {position: sticky;top: 0;z-index: 40;background: #f3f4f6;padding: 24px 0 4px 0;margin: -24px 0 8px 0;}
html.dark #galleryToolbar {background: #0f172a;}
.img-item { break-inside: avoid; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); position: relative; border: 3px solid #e879f9; transition: transform 0.2s ease; }
.img-item:hover { transform: translateY(-2px); }
.img-item img, .img-item video { width: 100%; height: 180px; object-fit: cover; cursor: pointer; }
.file-preview { width: 100%; height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; background: #f9fafb; }
.img-check { position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; z-index: 10; cursor: pointer; transform: scale(1.2); background: rgba(255,255,255,0.8); border-radius: 4px; }
.img-item .p-3 { padding: 10px; } 
.img-image-wrapper { position: relative; overflow: hidden; }
.img-badge { position: absolute; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 20px; display: flex; gap: 4px; font-weight: 500; z-index: 5; }
.img-badge-bottom-right { bottom: 8px; right: 8px; }
.img-badge-top-left { top: 8px; left: 8px; }
.img-badge .separator { margin: 0 2px; opacity: 0.7; }

/* ===== 查看器 ===== */
/* 查看器内容容器：flex 居中 */
#viewerContent {display: flex;align-items: center;justify-content: center;width: 100%;flex: 1;}
/* 内部所有元素（img/video/iframe/div）统一居中 */
#viewerContent > * {max-width: 95%;max-height: 70vh;display: block;object-fit: contain;}
#viewer { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 99999; display: none; flex-direction: column; align-items: center; justify-content: center; }
#viewer.active { display: flex; }
#viewer img, #viewer video { max-width: 95%; max-height: 70vh; object-fit: contain; }
.viewer-btns { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.viewer-btns button { padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; font-size: 14px; font-weight: 500; }
.btn-copy { background: #3b82f6; color: white; }
.btn-download { background: #f97316; color: white; }
.btn-move { background: #9333ea; color: white; }
.btn-clone { background: #22c55e; color: white; }
.btn-del { background: #ef4444; color: white; }
.arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 48px; color: white; background: rgba(0,0,0,0.5); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; z-index: 100; }
#prevArrow { left: 20px; }
#nextArrow { right: 20px; }
.close { position: absolute; top: 20px; right: 30px; font-size: 40px; color: white; cursor: pointer; z-index: 100; }
.viewer-info-panel { margin-top: 20px; background: rgba(0, 0, 0, 0.6); border-radius: 12px; padding: 10px 20px; backdrop-filter: blur(4px); }
.viewer-info-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 4px 0; }
.viewer-info-item { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #e5e7eb; background: rgba(255, 255, 255, 0.1); padding: 4px 12px; border-radius: 20px; }

/* ===== 登录 ===== */
#loginWrap { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.login-box { background: white; padding: 30px; border-radius: 16px; width: 90%; max-width: 360px; }
#loadMoreTip { text-align: center; padding: 20px; color: #666; }

/* ===== 搜索 & 操作栏 ===== */
.search-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: nowrap; }
.search-input { flex: 2; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; min-width: 0; }
.search-btn { padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; white-space: nowrap; }
.search-btn-black { background: #1f2937; color: white; }
.search-btn-gray { background: #6b7280; color: white; }
.action-bar { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: nowrap; justify-content: space-between; }
.action-btn { flex: 1; padding: 8px 4px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; text-align: center; white-space: nowrap; }
.action-btn-gray { background: #4b5563; color: white; }
.action-btn-yellow { background: #eab308; color: white; }
.action-btn-purple { background: #9333ea; color: white; }
.action-btn-green { background: #22c55e; color: white; }
.action-btn-red { background: #ef4444; color: white; }
.action-btn-orange { background: #f97316; color: white; }

/* ===== 标签编辑 ===== */
#tagEditModal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 100000; }
#tagEditModal .bg-white { width: 90%; max-width: 320px; border-radius: 16px; padding: 24px; }
#tagEditModal textarea { resize: none; font-family: inherit; }

/* ===== 径向菜单 ===== */
.radial-menu { position: fixed; right: 6px; bottom: 16px; width: 70px; height: 70px; z-index: 100000; user-select: none; -webkit-user-select: none; }
.menu-center { position: absolute; width: 40px; height: 40px; border-radius: 50%; border: none; background: #4f46e5; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 11px rgba(0,0,0,.15); transition: background .3s ease, transform .2s ease; }
.menu-center::before { content: "☰"; font-size: 17px; color: white; }
.radial-menu.open .menu-center { background: #ef4444; }
.radial-menu.open .menu-center::before { content: "✕"; }
.menu-center:active { transform: scale(0.9); }
.radial-item { position: absolute; right: 0; bottom: 0; width: 33px; height: 33px; border-radius: 50%; border: none; background: #111827; color: white; font-size: 15px; cursor: pointer; opacity: 0; transform: translate(0,0) scale(0); transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .2s ease; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.radial-menu.open .radial-item { opacity: 1; pointer-events: auto; }
.radial-item:hover { filter: brightness(1.2); box-shadow: 0 0 18px rgba(255,255,255,.15); }
.radial-item.active { background: #22c55e !important; box-shadow: 0 0 18px rgba(34,197,94,.6); }
.menu-tooltip { position: fixed; display: none; background: rgba(0,0,0,.85); color: white; font-size: 12px; padding: 6px 10px; border-radius: 6px; pointer-events: none; z-index: 100001; }

/* ===== 资源管理器布局 ===== */
.file-explorer { display: flex; gap: 20px; min-height: 700px; background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.explorer-sidebar { width: 280px; background: #f9fafb; border-right: 1px solid #e5e7eb; overflow-y: auto; max-height: 80vh; }
.explorer-content { flex: 1; padding: 0 16px 16px 16px; overflow-y: auto; min-height: 700px; max-height: 80vh; }


.explorer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; position: sticky; top: 0; z-index: 50; background: white; padding: 16px; margin-left: -16px; margin-right: -16px;}
.explorer-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.explorer-action-btn { padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: none; }
.back-btn { background: #6b7280; color: white; }
.explorer-empty { text-align: center; padding: 40px; color: #9ca3af; }

.folder-tree {padding: 8px 0;}
.tree-item {display: block;}
.tree-row {display: flex;align-items: center;gap: 8px;padding: 8px 12px;padding-left: 16px;cursor: pointer;border-radius: 8px;transition: background 0.2s;}
.tree-row:hover {background: #e5e7eb;}
.tree-item.active .tree-row {background: #dbeafe;color: #2563eb;}

/* ===== 子节点容器（核心稳定点）===== */
.tree-children {display: block;width: 100%;margin-left: 18px;padding-left: 12px;border-left: 2px solid #d1d5db;}

/* ===== 图标 ===== */
.tree-icon {flex-shrink: 0;font-size: 16px;}
.tree-folder {font-weight: 500;}

/* ===== toggle ===== */
.tree-toggle,
.tree-toggle-placeholder {width: 24px;height: 24px;flex-shrink: 0;display: inline-flex;align-items: center;justify-content: center;}
.tree-toggle {cursor: pointer;border-radius: 4px;transition: background 0.2s;color: #3b82f6;}
.tree-toggle:hover {background: rgba(59, 130, 246, 0.15);}
.tree-arrow {width: 16px;height: 16px;transition: transform 0.25s ease;}
.tree-toggle.expanded .tree-arrow {transform: rotate(90deg);}

/* ===== 系统文件夹 ===== */
.fixed-folder {background: #fef3c7 !important;color: #92400e !important;}
.fixed-folder:hover {background: #fde68a !important;}
.tree-item.root-folder .tree-row {font-weight: 700;border-bottom: 2px solid #e5e7eb;padding-bottom: 6px;margin-bottom: 2px;}
.tree-item.root-folder .tree-icon {font-size: 18px;}
.tree-item.root-folder.active .tree-row {background: #dbeafe;color: #1e40af;border-bottom-color: #3b82f6;}

/* ===== 上传树 ===== */
#uploadFolderTree .tree-item { padding: 4px 8px; cursor: pointer; display: block !important; align-items: center; gap: 6px; border-radius: 4px; }
#uploadFolderTree .tree-item:hover { background: #e5e7eb; }
#uploadFolderTree .tree-item.active { background: #dbeafe; color: #2563eb; }
#uploadFolderTree .tree-row { display: flex;  align-items: center; gap: 6px; padding: 4px 8px; }
#uploadFolderTree .tree-toggle { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; user-select: none; flex-shrink: 0; transition: transform 0.2s; }
#uploadFolderTree .tree-toggle.expanded .tree-arrow {transform: rotate(90deg);}
#uploadFolderTree .tree-toggle.collapsed .tree-arrow {transform: rotate(0deg);}
#uploadFolderTree .tree-toggle-placeholder { width: 16px; flex-shrink: 0; }
#uploadFolderTree .tree-children { margin-left: 20px; padding-left: 4px; border-left: 1px dashed #e5e7eb; }
#uploadFolderTree .tree-folder { font-size: 13px; }
#uploadFolderTree .tree-icon { flex-shrink: 0; font-size: 14px; }

/* ===================================
   TargetFolderSelector 弹窗
=================================== */

.target-folder-mask {position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:99999;}
.target-folder-dialog {width:360px;max-height:80vh;background:white;border-radius:12px;padding:16px;box-shadow:0 10px 40px rgba(0,0,0,.3);display:flex;flex-direction:column;}
.target-folder-title {font-size:18px;font-weight:bold;margin-bottom:12px;}
.target-folder-tree {flex:1;overflow:auto;max-height:450px;}
.target-folder-footer {margin-top:12px;display:flex;justify-content:space-between;align-items:center;}



.breadcrumb-item {
    cursor:pointer;
    color:#2563eb;
    flex-shrink:0;
    padding:2px 4px;
    border-radius:4px;
    white-space:nowrap;
}

.breadcrumb-item:hover {
    text-decoration:none;
    background:#eff6ff;
}

.breadcrumb-current {
    color:#111827;
    font-weight:600;
    flex-shrink:0;
    white-space:nowrap;
}

.breadcrumb-separator {
    margin:0 6px;
    color:#9ca3af;
    flex-shrink:0;
}


#currentFolderPath {
    display:flex;
    align-items:center;
    gap:4px;

    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;

    min-width:0;

    scrollbar-width:none;
    -ms-overflow-style:none;
}


#currentFolderPath::-webkit-scrollbar {
    display:none;
}


/* ===== Explorer Grid 视图 ===== */
.explorer-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.explorer-grid-item { display: flex; flex-direction: column; align-items: center; padding: 12px; padding-top: 32px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; position: relative; cursor: pointer; transition: all 0.2s; }
.explorer-grid-item:hover { background: #f3f4f6; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.explorer-grid-item.selected { background: #dbeafe; border-color: #3b82f6; }
.explorer-grid-item .explorer-item-checkbox { position: absolute; top: 8px; left: 8px; z-index: 10; width: 18px; height: 18px; cursor: pointer; }
.explorer-grid-item .explorer-icon { font-size: 32px; line-height: 1; }
.explorer-grid-item .explorer-name { font-size: 13px; color: #374151; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; margin-top: 4px; }
.explorer-grid-item .explorer-meta { font-size: 11px; color: #6b7280; margin-top: 4px; }

/* ===== Grid 操作按钮 ===== */
.explorer-grid-actions { display: flex; justify-content: center; gap: 8px; margin-top: 6px; width: 100%; }
.explorer-grid-actions button { font-size: 11px; background: #dbeafe; color: #2563eb; border: none; border-radius: 4px; cursor: pointer; flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0; line-height: 1; }
.explorer-grid-actions button:hover { background: #bfdbfe; }
.explorer-grid-actions .explorer-copy-btn { background: #e5e7eb; color: #374151; }
.explorer-grid-actions .explorer-copy-btn:hover { background: #d1d5db; }
.explorer-grid-actions .explorer-download-btn { background: #fef3c7; color: #92400e; }
.explorer-grid-actions .explorer-download-btn:hover { background: #fde68a; }

/* ===== Explorer List 视图 ===== */
.explorer-list { width: 100%; overflow-x: auto; }
.explorer-list-view { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.explorer-list-view th { background: #f9fafb; font-weight: 600; font-size: 12px; color: #6b7280; text-transform: uppercase; padding: 10px 12px; text-align: left; border-bottom: 2px solid #e5e7eb; position: sticky; top: 0; z-index: 5; }
.explorer-list-view td { padding: 8px 12px; border-bottom: 1px solid #e5e7eb; vertical-align: middle; white-space: nowrap; }
.explorer-list-view tbody tr:hover { background: #f3f4f6; }
.explorer-list-view tbody tr.selected { background: #dbeafe; }
.explorer-list-view .explorer-item-checkbox { width: 18px; height: 18px; cursor: pointer; }
.explorer-list-view .explorer-icon { font-size: 20px; margin-right: 8px; }
.explorer-list-view .explorer-name { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.explorer-list-view .explorer-edit-filename-btn,
.explorer-list-view .explorer-edit-folder-btn { font-size: 11px; background: #dbeafe; color: #2563eb; border: none; border-radius: 4px; padding: 2px 8px; cursor: pointer; }
.explorer-list-view .explorer-edit-filename-btn:hover,
.explorer-list-view .explorer-edit-folder-btn:hover { background: #bfdbfe; }

/* ===== FolderPicker 弹窗样式 ===== */
.folder-picker-mask {position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:999999;}
.folder-picker-dialog {background:white;border-radius:16px;padding:24px;width:90%;max-width:380px;max-height:70vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.folder-picker-title {font-size:18px;font-weight:700;margin-bottom:16px;color:#1f2937;}
.folder-picker-tree {flex:1;overflow-y:auto;margin-bottom:16px;max-height:300px;}
.folder-picker-item {padding:8px 12px;cursor:pointer;border-radius:8px;transition:background 0.2s;font-size:14px;color:#374151;}
.folder-picker-item:hover {background:#f3f4f6;}
.folder-picker-item.active {background:#dbeafe;color:#2563eb;}
.folder-picker-child {padding-left:20px;}
.folder-picker-footer {display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e5e7eb;padding-top:16px;font-size:14px;color:#6b7280;}
.folder-picker-footer button {padding:6px 16px;border-radius:8px;border:none;cursor:pointer;font-size:14px;font-weight:500;}
#folderPickerCancel {background:#f3f4f6;color:#374151;margin-right:8px;}
#folderPickerCancel:hover {background:#e5e7eb;}
#folderPickerConfirm {background:#3b82f6;color:white;}
#folderPickerConfirm:hover {background:#2563eb;}


/* ===== 响应式 ===== */
@media (max-width: 640px) {
    .search-input { font-size: 12px; padding: 8px 8px; }
    .search-btn { padding: 8px 10px; font-size: 12px; }
    .action-btn { font-size: 11px; padding: 6px 2px; }
    #gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .img-item img, .img-item video, .file-preview { height: 140px; }
    #viewerContent > * {max-width: 95%;max-height: 65vh;}
    #viewer { padding: 8px; } 
    #viewer img, #viewer video { max-width: 95%; max-height: 65vh; }
    .viewer-info-panel { margin-top: 8px; padding: 6px 12px; }
    .viewer-info-item { font-size: 10px; padding: 2px 6px; gap: 3px; }
    .viewer-btns { margin-top: 10px; margin-bottom: 5px; gap: 6px; }
    .viewer-btns button { padding: 5px 10px; font-size: 11px; }
    .arrow { width: 40px; height: 40px; font-size: 30px; }
    #prevArrow { left: 5px; }
    #nextArrow { right: 5px; }
    .img-item .p-3 { padding: 8px; }
    .edit-filename-btn, .edit-tags-btn, .retry-tags-btn { padding: 4px 8px !important; font-size: 11px !important; min-width: 28px; }
    .flex.items-center.justify-between.mt-2 { flex-wrap: wrap; gap: 6px; }
    .flex.items-center.justify-between.mt-2 p { font-size: 11px; max-width: calc(100% - 50px); }
    #tagEditModal .bg-white { width: 85%; max-width: 300px; padding: 16px; }
    #tagEditModal textarea { font-size: 16px; }
    #tagEditModal button { padding: 10px; font-size: 14px; }
    .file-explorer { flex-direction: column; }
    .explorer-sidebar { width: 100%; max-height: 200px; border-right: none; border-bottom: 1px solid #e5e7eb; }
    .explorer-content { max-height: 60vh; }
    .explorer-files { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .action-btn { font-size: 12px; padding: 8px 6px; }
    .img-item img, .img-item video, .file-preview { height: 160px; }
}
@media (min-width: 1025px) {
    .img-item img, .img-item video, .file-preview { height: 200px; }
}


/* ============================================================
   Dark Mode / 黑夜模式
   html.dark 为黑夜模式开关
   ============================================================ */


/* ===== 页面整体 ===== */

html.dark body {
    background: #0f172a;
    color: #e2e8f0;
}


/* ===== Tailwind 白色容器 ===== */

html.dark .bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0;
}


/* ===== Tailwind 灰色背景 ===== */

html.dark .bg-gray-50 {
    background-color: #1e293b !important;
}

html.dark .bg-gray-100 {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark .bg-gray-200 {
    background-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark .bg-gray-300 {
    background-color: #64748b !important;
}


/* ===== Tailwind 文字颜色 ===== */

html.dark .text-gray-400 {
    color: #94a3b8 !important;
}

html.dark .text-gray-500 {
    color: #94a3b8 !important;
}

html.dark .text-gray-600 {
    color: #cbd5e1 !important;
}

html.dark .text-gray-700 {
    color: #e2e8f0 !important;
}

html.dark .text-gray-800 {
    color: #f1f5f9 !important;
}

html.dark .text-gray-900 {
    color: #f8fafc !important;
}

html.dark .text-black {
    color: #f8fafc !important;
}


/* ===== Tailwind 边框 ===== */

html.dark .border-gray-100 {
    border-color: #334155 !important;
}

html.dark .border-gray-200 {
    border-color: #334155 !important;
}

html.dark .border-gray-300 {
    border-color: #475569 !important;
}

html.dark .border {
    border-color: #334155;
}


/* ============================================================
   图库
   ============================================================ */

html.dark .img-item {
    background: #1e293b;
    border-color: #e879f9;
}


/* ===== 文件预览 ===== */

html.dark .file-preview {
    background: #334155;
    color: #e2e8f0;
}


/* ============================================================
   上传区域
   ============================================================ */

html.dark #dropzone {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0;
}


/* ===== 拖拽激活 ===== */

html.dark .drag-active {
    border-color: #60a5fa !important;
    background-color: #1e3a8a !important;
}


/* ============================================================
   输入框
   ============================================================ */

html.dark input[type="text"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark textarea,
html.dark select {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}


html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #94a3b8 !important;
}


/* ============================================================
   搜索栏
   ============================================================ */

html.dark .search-input {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}


html.dark .search-btn-gray {
    background: #475569;
}


/* ============================================================
   登录
   ============================================================ */

html.dark #loginWrap {
    background: rgba(0, 0, 0, 0.8);
}


html.dark .login-box {
    background: #1e293b !important;
    color: #e2e8f0;
}


/* ============================================================
   标签编辑弹窗
   ============================================================ */

html.dark #tagEditModal {
    background: rgba(0, 0, 0, 0.7);
}


html.dark #tagEditModal .bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0;
}


/* ============================================================
   TargetFolderSelector 弹窗
   ============================================================ */

html.dark .target-folder-mask {
    background: rgba(0, 0, 0, 0.7);
}


html.dark .target-folder-dialog {
    background: #1e293b !important;
    color: #e2e8f0;
}


html.dark .target-folder-title {
    color: #f1f5f9;
}


/* ============================================================
   FolderPicker 弹窗
   ============================================================ */

html.dark .folder-picker-mask {
    background: rgba(0, 0, 0, 0.7);
}


html.dark .folder-picker-dialog {
    background: #1e293b !important;
    color: #e2e8f0;
}


html.dark .folder-picker-title {
    color: #f1f5f9;
}


html.dark .folder-picker-item {
    color: #e2e8f0;
}


html.dark .folder-picker-item:hover {
    background: #334155;
}


html.dark .folder-picker-item.active {
    background: #1e40af;
    color: #bfdbfe;
}


html.dark .folder-picker-footer {
    border-top-color: #334155;
    color: #94a3b8;
}


html.dark #folderPickerCancel {
    background: #334155;
    color: #e2e8f0;
}


html.dark #folderPickerCancel:hover {
    background: #475569;
}


/* ============================================================
   面包屑
   ============================================================ */

html.dark .breadcrumb-item {
    color: #60a5fa;
}


html.dark .breadcrumb-item:hover {
    background: #1e3a8a;
}


html.dark .breadcrumb-current {
    color: #f1f5f9;
}


html.dark .breadcrumb-separator {
    color: #94a3b8;
}


/* ============================================================
   资源管理器
   ============================================================ */

html.dark .file-explorer {
    background: #1e293b;
}

html.dark .explorer-header {
    background: #1e293b;
}


html.dark .explorer-sidebar {
    background: #0f172a;
    border-right-color: #334155;
}


html.dark .explorer-content {
    background: #1e293b;
}


/* ============================================================
   Explorer 树
   ============================================================ */

html.dark .tree-row:hover {
    background: #334155;
}


html.dark .tree-item.active .tree-row {
    background: #1e40af;
    color: #bfdbfe;
}


html.dark .tree-children {
    border-left-color: #475569;
}


html.dark .tree-arrow {
    color: #60a5fa;
}


html.dark .tree-toggle {
    color: #60a5fa;
}


html.dark .tree-toggle:hover {
    background: rgba(96, 165, 250, 0.15);
}


/* ===== 根目录 ===== */

html.dark .tree-item.root-folder .tree-row {
    border-bottom-color: #334155;
}


html.dark .tree-item.root-folder.active .tree-row {
    background: #1e40af;
    color: #bfdbfe;
    border-bottom-color: #3b82f6;
}


/* ============================================================
   上传文件夹树
   ============================================================ */

html.dark #uploadFolderTree .tree-item:hover {
    background: #334155;
}


html.dark #uploadFolderTree .tree-item.active {
    background: #1e40af;
    color: #bfdbfe;
}


html.dark #uploadFolderTree .tree-children {
    border-left-color: #475569;
}


/* ============================================================
   系统文件夹
   ============================================================ */

html.dark .fixed-folder {
    background: #422006 !important;
    color: #fbbf24 !important;
}


html.dark .fixed-folder:hover {
    background: #713f12 !important;
}


/* ============================================================
   Explorer Grid
   ============================================================ */

html.dark .explorer-grid-item {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}


html.dark .explorer-grid-item:hover {
    background: #475569;
}


html.dark .explorer-grid-item.selected {
    background: #1e40af;
    border-color: #3b82f6;
}


html.dark .explorer-grid-item .explorer-name {
    color: #f1f5f9;
}


html.dark .explorer-grid-item .explorer-meta {
    color: #94a3b8;
}


/* ============================================================
   Explorer Grid 操作按钮
   ============================================================ */

html.dark .explorer-grid-actions button {
    background: #1e3a8a;
    color: #bfdbfe;
}


html.dark .explorer-grid-actions button:hover {
    background: #1e40af;
}


html.dark .explorer-grid-actions .explorer-copy-btn {
    background: #475569;
    color: #e2e8f0;
}


html.dark .explorer-grid-actions .explorer-copy-btn:hover {
    background: #64748b;
}


html.dark .explorer-grid-actions .explorer-download-btn {
    background: #422006;
    color: #fbbf24;
}


html.dark .explorer-grid-actions .explorer-download-btn:hover {
    background: #713f12;
}


/* ============================================================
   Explorer List
   ============================================================ */

html.dark .explorer-list-view th {
    background: #1e293b;
    color: #94a3b8;
    border-bottom-color: #334155;
}


html.dark .explorer-list-view td {
    border-bottom-color: #334155;
}


html.dark .explorer-list-view tbody tr:hover {
    background: #334155;
}


html.dark .explorer-list-view tbody tr.selected {
    background: #1e40af;
}


html.dark .explorer-list-view .explorer-edit-filename-btn,
html.dark .explorer-list-view .explorer-edit-folder-btn {
    background: #1e3a8a;
    color: #bfdbfe;
}


html.dark .explorer-list-view .explorer-edit-filename-btn:hover,
html.dark .explorer-list-view .explorer-edit-folder-btn:hover {
    background: #1e40af;
}


/* ============================================================
   查看器
   ============================================================ */

html.dark .viewer-info-panel {
    background: rgba(15, 23, 42, 0.9);
}


html.dark .viewer-info-item {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.06);
}


/* ============================================================
   主题切换按钮
   ============================================================ */

html.dark #themeToggleBtn {
    background: #334155 !important;
    color: #fbbf24 !important;
}


html.dark #themeToggleBtn:hover {
    background: #475569 !important;
}


/* ============================================================
   径向菜单
   ============================================================ */

html.dark .radial-item {
    background: #334155;
}


html.dark .radial-item:hover {
    filter: brightness(1.2);
}


/* ============================================================
   通用过渡动画
   ============================================================ */

body,
.bg-white,
.bg-gray-50,
.bg-gray-100,
.bg-gray-200,
.bg-gray-300,
input,
textarea,
select,
.login-box,
.file-explorer,
.explorer-sidebar,
.explorer-grid-item,
.target-folder-dialog,
.folder-picker-dialog {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

/* 上传区折叠 —— 完全隐藏 */
#dropzone.collapsed {
    display: none !important;
}

/* 暗色模式下的折叠按钮 */
html.dark #dropzoneToggleBtn {
    background: #334155 !important;
    color: #e2e8f0 !important;
}


/* ============================================
   手机端：标题栏改成 flex 布局，按钮并排显示
   ============================================ */
@media (max-width: 640px) {
    #headerRow {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 0 4px;
    }

    #headerRow h1 {
        font-size: 1.95rem !important;
        text-align: left !important;
        flex: 1;
        min-width: 0;
        margin: 0 0 0 75px; 
    }

    #headerRow #dropzoneToggleBtn,
    #headerRow #themeToggleBtn {
        position: static !important;
        transform: none !important;
        padding: 6px 10px !important;
        font-size: 15px !important;
        border-radius: 8px;
        flex-shrink: 0;
        line-height: 1;
    }
}

/* 超窄手机再小一点 */
@media (max-width: 380px) {
    #headerRow h1 {
        font-size: 1.5rem !important;
    }
    #headerRow #dropzoneToggleBtn,
    #headerRow #themeToggleBtn {
        padding: 5px 8px !important;
        font-size: 14px !important;
    }
}


/* ===== 图库分页器 ===== */
.pagination-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 16px;
    flex-wrap: wrap;
}
.pg-btn {
    min-width: 40px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    color: #374151;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
}
.pg-btn:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: #9ca3af;
}
.pg-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.pg-btn.pg-active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}
.pg-btn.pg-active:hover {
    background: #2563eb;
}
.pg-ellipsis {
    color: #9ca3af;
    padding: 0 4px;
    font-size: 14px;
}
.pg-info {
    font-size: 14px;
    color: #6b7280;
    margin-left: 8px;
}
.pg-jump {
    width: 70px;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    margin-left: 8px;
}

/* 暗色模式 */
html.dark .pg-btn {
    background: #334155;
    color: #e2e8f0;
    border-color: #475569;
}
html.dark .pg-btn:hover:not(:disabled) {
    background: #475569;
}
html.dark .pg-btn.pg-active {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
}
html.dark .pg-ellipsis {
    color: #64748b;
}
html.dark .pg-info {
    color: #94a3b8;
}
html.dark .pg-jump {
    background: #334155;
    color: #f1f5f9;
    border-color: #475569;
}

/* 移动端适配 */
@media (max-width: 640px) {
    .pagination-bar {
        gap: 4px;
        padding: 12px 8px;
    }
    .pg-btn {
        min-width: 36px;
        padding: 6px 8px;
        font-size: 13px;
    }
    .pg-info, .pg-jump {
        font-size: 12px;
    }
    .pg-jump {
        width: 60px;
        padding: 6px 8px;
    }
}