/* ========== 链接管理、拖拽、详情弹窗、分类结构 ========== */
/* ==================== 链接与二级分类管理专属UI样式 ==================== */
.manage-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: var(--text-sub);
    gap: 10px;
    flex-wrap: wrap;
}
.manage-top-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* 批量操作栏，默认隐藏，通过 .show 切换显示 */
.manage-batch-bar {
    display: none;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    background: var(--card-glass-bg);
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-normal);
}
.manage-batch-bar.show {
    display: flex;
}

.manage-search-box {
    position: relative;
    margin-bottom: 16px;
}
.manage-search-box input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    background: var(--modal-input-bg);
    border: 1px solid var(--border-normal);
    border-radius: 14px;
    color: var(--text-main);
    font-size: 0.92rem;
    outline: none;
}
.manage-search-box input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.manage-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-sub);
    width: 16px;
    height: 16px;
}

.manage-group-item {
    background: rgba(20, 20, 24, 0.4);
    border: 1px solid var(--border-normal);
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.2s;
}
html.light-mode .manage-group-item {
    background: rgba(255, 255, 255, 0.5);
}
.manage-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
}
.manage-title-text,
.manage-subtitle-text {
    cursor: default;
    border-radius: 6px;
    padding: 2px 4px;
    margin: -2px -4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.manage-title-input {
    flex: 1;
    min-width: 80px;
    max-width: 240px;
    width: 12em;
    padding: 4px 8px;
    background: var(--modal-input-bg);
    border: 1px solid var(--primary);
    border-radius: 8px;
    color: var(--text-main);
    font-size: inherit;
    font-weight: 600;
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.manage-group-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    min-width: 0;
    flex: 1;
}
.manage-group-header-right {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.manage-action-icon-btn {
    background: transparent;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.manage-action-icon-btn:hover {
    color: var(--text-main);
    background: var(--sidebar-item-hover);
}
.manage-action-icon-btn.danger:hover {
    color: var(--danger);
    background: var(--danger-glow);
}

/* 二级分类容器与区块 */
.manage-subgroups-container {
    border-top: 1px solid var(--border-normal);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(0, 0, 0, 0.15);
}
.manage-subgroup-box {
    background: var(--card-glass-bg);
    border: 1px solid var(--border-normal);
    border-radius: 12px;
    overflow: hidden;
}
.manage-subgroup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    font-size: 0.88rem;
}
.manage-subgroup-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    min-width: 0;
    flex: 1;
}
.manage-subgroup-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.manage-subgroup-links {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--border-normal);
    background: rgba(0, 0, 0, 0.05);
}

.manage-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--modal-input-bg);
    border: 1px solid var(--border-normal);
    border-radius: 10px;
    padding: 8px 12px;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.manage-link-row:hover {
    border-color: var(--primary);
    background: var(--primary-glow);
}
/* 拖拽排序样式 */
.manage-group-item.dragging,
.manage-subgroup-box.dragging,
.manage-link-row.dragging {
    opacity: 0.45;
    border-style: dashed;
    border-color: var(--primary);
}
.manage-group-item.drag-over,
.manage-subgroup-box.drag-over,
.manage-link-row.drag-over {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-glow);
    background: var(--primary-glow);
}
.manage-group-item,
.manage-subgroup-box,
.manage-link-row {
    cursor: grab;
}
.manage-group-item.dragging,
.manage-subgroup-box.dragging,
.manage-link-row.dragging {
    cursor: grabbing;
}

/* 手机设置列表优先纵向滚动，降低误触拖拽 */
.manage-group-item,
.manage-subgroup-box,
.manage-link-row,
.manage-engine-row {
    touch-action: pan-y;
}
body.is-touch-dragging .manage-group-item,
body.is-touch-dragging .manage-subgroup-box,
body.is-touch-dragging .manage-link-row,
body.is-touch-dragging .manage-engine-row {
    touch-action: none;
}

.manage-link-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.manage-link-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}
.manage-link-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--icon-bg);
    border: 1px solid var(--border-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    overflow: hidden;
    flex-shrink: 0;
}
.manage-link-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.manage-link-title {
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.manage-link-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.manage-sub-btn {
    background: transparent;
    border: 1px solid var(--border-normal);
    color: var(--text-sub);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: all 0.2s;
}
.manage-sub-btn:hover {
    color: var(--text-main);
    border-color: var(--primary);
    background: var(--primary-glow);
}
.manage-sub-btn.danger:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--danger-glow);
}
.manage-add-subgroup-btn {
    width: 100%;
    padding: 8px;
    background: transparent;
    border: 1px dashed var(--border-normal);
    border-radius: 8px;
    color: var(--text-sub);
    font-size: 0.82rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    transition: all 0.2s;
}
.manage-add-subgroup-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-glow);
}

/* 网站详情弹窗美化 */
#siteDetailModal .modal {
    max-width: 480px; padding: 32px; border-radius: 30px;
    background: linear-gradient(145deg, var(--modal-bg), var(--card-glass-bg));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#siteDetailModal .icon-preview-wrap {
    background: var(--input-bg); padding: 16px 18px; border-radius: 18px;
    border: 1px solid var(--border-normal); margin-bottom: 22px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
    display: flex; align-items: center; gap: 14px;
}
#detailIconPreview { width: 54px; height: 54px; border-radius: 15px; font-size: 21px; background: var(--card-glass-bg); box-shadow: 0 6px 18px var(--shadow-color); display: flex; align-items: center; justify-content: center; font-weight: 700; border: 1px solid var(--border-normal); flex-shrink: 0; overflow: hidden; }
#detailIconPreview img { width: 100%; height: 100%; object-fit: cover; }
#detailSiteTitle { font-size: 1.25rem !important; font-weight: 700; letter-spacing: -0.3px; color: var(--text-main); margin-bottom: 5px !important; }
#detailSiteUrl { font-size: 0.88rem !important; color: var(--primary) !important; opacity: 0.9; display: flex; align-items: center; gap: 4px; word-break: break-all; }
#detailSiteDesc {
    background: var(--modal-input-bg) !important; padding: 16px 18px !important; border-radius: 15px !important;
    border: 1px solid var(--border-normal) !important; color: var(--text-main) !important; font-size: 0.96rem !important;
    min-height: 76px !important; line-height: 1.55 !important; box-shadow: inset 0 2px 5px rgba(0,0,0,0.15); word-break: break-all;
}
#siteDetailModal .form-group label { font-size: 0.88rem; font-weight: 600; color: var(--text-sub); margin-bottom: 8px; }
#siteDetailModal .modal-btns { margin-top: 30px; gap: 12px; }
#siteDetailModal .btn { border-radius: 14px; padding: 11px 22px; }
#btnGoToSite {
    background: linear-gradient(135deg, var(--primary), #2563eb);
    box-shadow: 0 6px 20px var(--primary-glow); transition: all 0.3s var(--ease-smooth);
}
#btnGoToSite:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--primary-glow); opacity: 1; }

/* 通用弹窗按钮与样式 */
#confirmModal .modal, #promptModal .modal, #alertModal .modal, #moveModal .modal, #editLinkModal .modal, #editEngineModal .modal {
    background: var(--modal-bg);
    border: 1px solid var(--border-normal);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
    animation: popIn 0.3s var(--ease-smooth) forwards;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.edit-link-modal {
    width: 100%;
    max-width: 480px;
    padding: 28px;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.edit-link-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.edit-link-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}
.edit-link-header p {
    font-size: 0.88rem;
    color: var(--text-sub);
}
.edit-link-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}
.edit-link-footer .btn-cancel {
    border-radius: 12px;
    padding: 10px 20px;
    background: var(--modal-input-bg);
    border: 1px solid var(--border-normal);
    color: var(--text-main);
    cursor: pointer;
}
.edit-link-footer .btn-confirm {
    border-radius: 12px;
    padding: 10px 20px;
    background: #fff;
    border: none;
    color: #09090b;
    cursor: pointer;
    font-weight: 600;
}
html.light-mode .edit-link-footer .btn-confirm {
    background: #0f172a;
    color: #fff;
}
.edit-link-footer .btn-cancel:hover { border-color: var(--primary); color: var(--primary); }
.edit-link-footer .btn-confirm:hover { opacity: 0.9; transform: translateY(-1px); }

#confirmModal .btn-confirm:hover, #promptModal .btn-confirm:hover, #alertModal .btn-confirm:hover {
    opacity: 0.9; transform: translateY(-1px);
}
#confirmModal .btn-cancel:hover, #promptModal .btn-cancel:hover, #moveModal .btn-cancel:hover {
    border-color: var(--primary); color: var(--primary);
}

/* 移动选择弹窗布局：保证列表可完整滚动、底部按钮始终可见 */
#moveModal .move-modal {
    width: 100%;
    max-width: 440px;
    padding: 28px;
    border-radius: 22px;
    max-height: min(80vh, 640px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}
.move-modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text-main);
    flex-shrink: 0;
}
.move-modal-hint {
    font-size: 0.88rem;
    color: var(--text-sub);
    margin: 0 0 14px;
    flex-shrink: 0;
}
.move-target-list {
    flex: 1 1 auto;
    min-height: 0; /* 关键：允许 flex 子项在 max-height 内收缩，从而启用内部滚动 */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
    padding-right: 2px;
}
.move-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}
#moveModal .move-modal-footer .btn-cancel {
    border-radius: 12px;
    padding: 10px 20px;
    background: var(--modal-input-bg);
    border: 1px solid var(--border-normal);
    color: var(--text-main);
    cursor: pointer;
}

/* 移动选择弹窗层级列表 */
.move-group-box {
    border: 1px solid var(--border-normal);
    border-radius: 12px;
    overflow: hidden;
    background: var(--card-glass-bg);
    flex-shrink: 0;
}
.move-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: 0.93rem;
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.03);
}
.move-chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
}
.move-group-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.move-group-count {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-sub);
}
.move-sub-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px 10px;
    border-top: 1px solid var(--border-normal);
    background: rgba(0, 0, 0, 0.12);
}
.move-sub-btn {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: var(--modal-input-bg);
    color: var(--text-main);
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}
.move-sub-btn:hover {
    border-color: var(--primary);
    background: var(--primary-glow);
}
.move-sub-arrow { color: var(--primary); font-size: 0.85rem; }
.move-sub-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.move-sub-count { font-size: 0.78rem; color: var(--text-sub); }
.move-empty, .move-empty-sub {
    padding: 12px;
    text-align: center;
    color: var(--text-sub);
    font-size: 0.85rem;
}
.move-empty-sub { padding: 8px 12px; font-size: 0.82rem; }

/* ===== 搜索引擎管理 / 分类结构管理：可折叠与布局优化 ===== */
.manage-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-sub);
    background: var(--modal-input-bg);
    border: 1px solid var(--border-normal);
}
.engine-manage-toggle .import-bookmarks-desc,
.structure-manage-toggle .import-bookmarks-desc {
    margin: 4px 0 0;
    pointer-events: none;
}
.engine-list-body,
.structure-manage-body {
    padding: 4px 0 8px;
}
.manage-engine-list,
.manage-categories-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* 搜索引擎管理：每个引擎独立卡片 */
.manage-engine-dropdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}
.manage-engine-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--modal-input-bg);
    border: 1px solid var(--border-normal);
    border-radius: 12px;
    cursor: grab;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px var(--shadow-color);
}
.manage-engine-row:hover {
    border-color: var(--primary);
    background: var(--primary-glow);
    box-shadow: 0 4px 14px var(--primary-glow);
}
.manage-engine-row.dragging {
    opacity: 0.45;
    border-style: dashed;
    border-color: var(--primary);
    cursor: grabbing;
    box-shadow: none;
}
.manage-engine-row.drag-over {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-glow);
    background: var(--primary-glow);
}
.manage-engine-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.manage-engine-name {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-main);
}
.manage-engine-url {
    font-size: 0.75rem;
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.manage-engine-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.add-engine-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.add-engine-inputs {
    display: flex;
    gap: 8px;
    width: 100%;
}
.add-engine-inputs .settings-control:first-child {
    flex: 1;
    min-width: 0;
}
.add-engine-inputs .settings-control:last-child {
    flex: 2;
    min-width: 0;
}
.add-engine-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 10px;
}
.add-engine-actions .add-link-action-btn {
    height: 38px;
    padding: 0 16px;
    flex-shrink: 0;
    border-radius: 0.5rem;
}

@media (max-width: 560px) {
    .add-engine-inputs {
        flex-direction: column;
    }
    .manage-engine-row {
        flex-wrap: wrap;
    }
}



/* 设置内 select 统一箭头与高度 + 深色下拉可读性
   注意：必须用 background-* 拆开写，避免被 .webdav-form .settings-control 的
   background 简写覆盖；同时强制单行高度，防止部分 Android / 国产浏览器
   把 appearance:none 的 select 渲染成带勾选标记的多行列表。 */
select.settings-control,
.webdav-form select.settings-control,
.create-sub-action select,
.category-action-row select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--modal-input-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a1a1aa' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px;
    height: 42px;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    color: var(--text-main);
    color-scheme: dark;
    /* 确保不会被当成多选 listbox */
    max-height: 42px;
}
html.light-mode select.settings-control,
html.light-mode .webdav-form select.settings-control,
html.light-mode .create-sub-action select,
html.light-mode .category-action-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    color-scheme: light;
}

/* 下拉选项：尽量跟随主题（Chrome / Edge / Firefox 有效）
   注意：不要对 option 使用 content / ::before 等，部分移动端会把勾选标记
   错误渲染进已关闭的 select 控件里。 */
select.settings-control option,
select.settings-control optgroup,
.webdav-form select.settings-control option,
.webdav-form select.settings-control optgroup {
    background-color: #18181b;
    color: #f4f4f5;
}
html.light-mode select.settings-control option,
html.light-mode select.settings-control optgroup,
html.light-mode .webdav-form select.settings-control option,
html.light-mode .webdav-form select.settings-control optgroup {
    background-color: #ffffff;
    color: #0f172a;
}
select.settings-control option:checked,
select.settings-control option:hover,
.webdav-form select.settings-control option:checked,
.webdav-form select.settings-control option:hover {
    background-color: #2563eb;
    color: #ffffff;
}
html.light-mode select.settings-control option:checked,
html.light-mode select.settings-control option:hover,
html.light-mode .webdav-form select.settings-control option:checked,
html.light-mode .webdav-form select.settings-control option:hover {
    background-color: #2563eb;
    color: #ffffff;
}


/* 链接管理内整合的分类区块间距 */
#tab-manage .create-category-card {
    margin-bottom: 12px;
}
#tab-manage .structure-manage-card {
    margin-bottom: 14px;
}
#tab-manage .manage-top-bar {
    margin-top: 4px;
}