* { 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; }
.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; }

/* ===== 查看器 ===== */
#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: 90%; max-height: 80vh; 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: 500px; background: white; border-radius: 12px; overflow: hidden; 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: 70vh; }
.explorer-content { flex: 1; padding: 16px; overflow-y: auto; max-height: 70vh; }
.explorer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.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 { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; border-radius: 8px; margin: 2px 8px; transition: background 0.2s; }
.tree-item:hover { background: #e5e7eb; }
.tree-item.active { background: #dbeafe; color: #2563eb; }
.tree-folder { font-weight: 500; }
.tree-children { margin-left: 24px; padding-left: 4px; border-left: 1px dashed #e5e7eb; }
.tree-toggle { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #6b7280; cursor: pointer; user-select: none; flex-shrink: 0; transition: transform 0.2s; }
.tree-toggle.expanded { transform: rotate(90deg); }
.tree-toggle.collapsed { transform: rotate(0deg); }
.tree-toggle-placeholder { width: 20px; height: 20px; flex-shrink: 0; }
.tree-icon { font-size: 16px; flex-shrink: 0; }
.fixed-folder { background: #fef3c7 !important; color: #92400e !important; }
.fixed-folder:hover { background: #fde68a !important; }

/* ===== 上传树 ===== */
#uploadFolderTree .tree-item { padding: 4px 8px; cursor: pointer; display: flex; align-items: center; gap: 6px; border-radius: 4px; }
#uploadFolderTree .tree-item:hover { background: #e5e7eb; }
#uploadFolderTree .tree-item.active { background: #dbeafe; color: #2563eb; }
#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 { transform: rotate(90deg); }
#uploadFolderTree .tree-toggle.collapsed { 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; }

/* ===== 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; padding: 2px 8px; cursor: pointer; flex: 1; max-width: 40px; text-align: center; }
.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; }

/* ===== 响应式 ===== */
@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; }
    #viewer { padding: 12px; }
    #viewer img, #viewer video { max-width: 100%; max-height: 70vh; }
    .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; }
}