/* 全局重置 & 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

:root {
    --primary-color: #1677ff;
    --primary-light: #e8f4f8;
    --primary-dark: #0958d9;
    --gray-100: #f0f2f5;
    --gray-200: #f5f5f5;
    --gray-300: #fafafa;
    --gray-400: #d9d9d9;
    --gray-500: #999;
    --gray-600: #666;
    --gray-700: #333;
    --highlight-color: #fff7e6;
    --highlight-border: #ffc53d;
    --highlight-text: #fa8c16;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-primary: 0 2px 8px rgba(22, 119, 255, 0.3);
    --radius-sm: 4px;
    --radius-md: 8px;
    --transition-base: all 0.2s ease;
}

body {
    background-color: var(--gray-100);
    padding: 20px;
    min-height: 100vh;
}
.header-top{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: 40px;
}
.header-top-button{
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    user-select: none;
    background-color: var(--gray-300);
    color: #343a40;
}
.header-top-button:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: var(--primary-light);
}
.header-top-right{
    display: flex;
    flex-direction: row;
    gap:10px;
    user-select: none;
    cursor: pointer;
}
.header-top-left{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    user-select: none;
    cursor: pointer;
}
.header-top-left span{
    font-size: 24px;
    user-select: none;
    cursor: pointer;
}

/* 书签容器（整体）- 优化间距和阴影 */
.bookmark-container {
    width: 100%;
    max-width: 1200px; /* 放宽最大宽度，提升大屏体验 */
    margin: 0 auto;
    background-color: #fff;
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

/* 顶部操作栏：核心修改 - 搜索居中、一级分类另起一行 */
.top-actions {
    display: grid;
    /* 调整网格布局：搜索占一行居中，按钮组+分类栏各占一行 */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

/* 搜索容器居中 */
.search-container {
    width: 100%;
    max-width: 600px; /* 限制搜索框最大宽度，提升美观度 */
    margin: 0 auto; /* 水平居中 */
    position: relative;
    margin-bottom: 20px;
    user-select: none;
}

.search-input {
    width: 100%;
    padding: 10px 15px 10px 40px; /* 增加内边距，提升点击区域 */
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: var(--gray-300) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 12px center;
    transition: var(--transition-base);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
    background-color: #fff;
}

.search-input::placeholder {
    color: var(--gray-500);
}
.search-input-close{
    width:30px;
    height:30px;
    border-radius: 7px;
    background-color: var(--gray-300);
    position: absolute;
    right:10px;
    top:6px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    user-select: none;
}
.search-input-close:hover{
    background-color: var(--gray-400);
}

/* 核心新增：按钮组右对齐 */
.core-add-btns {
    justify-self: flex-end; /* 按钮组靠右显示 */
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* 一级分类标签栏 - 核心优化：自动换行展示（移除滚动条） */
.level1-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap; /* 关键：自动换行 */
    padding-bottom: 8px; /* 保留底部间距 */
    width: 100%; /* 占满整行 */
    user-select: none;
    position:relative;
    /* 移除所有滚动相关样式 */
}

/* 一级分类按钮 - 优化尺寸和交互 */
.level1-tab {
    padding: 9px 60px 9px 20px; /* 增加点击区域 */
    border: none;
    border-radius: var(--radius-sm);
    background-color: var(--gray-200);
    color: var(--gray-700);
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition-base);
    white-space: nowrap; /* 防止文字换行 */
    /* 移除 flex-shrink:0（换行场景不需要） */
    position: relative;
}

.level1-tab.active {
    background-color: var(--primary-color);
    color: #fff;
}

.level1-tab:hover:not(.active) {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

/* 一级分类更多下拉菜单样式（保留，兼容原有逻辑） */
.level1-dropdown {
    min-width: 120px;
}

/* 新增分类按钮（次要操作）- 优化视觉 */
.add-category-btn {
    padding: 9px 18px;
    border: 1px dashed var(--gray-400);
    border-radius: var(--radius-sm);
    background-color: var(--gray-300);
    color: var(--gray-600);
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition-base);
    white-space: nowrap;
    user-select: none;
}

.add-category-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: var(--primary-light);
}

/* 二级分类容器 - 优化间距和视觉层级 */
.level2-container {
    margin-bottom: 20px; /* 增加间距，提升层次感 */
    padding-left: 15px;
    background-color: var(--gray-300); /* 轻微背景色，区分不同二级分类 */
    padding: 12px 15px; /* 增加内边距 */
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; /* 圆角优化 */
}

/* 二级分类标题栏 - 优化布局 */
.level2-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    position:relative
}

/* 二级分类标题 - 优化交互和视觉 */
.level2-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 15px; /* 加大字体，提升层级 */
    color: var(--primary-color);
    cursor: pointer;
    font-weight: 600;
    flex: none;
    padding-right:80px;
    position: relative;
}

/* 二级分类展开/收起图标 - 优化视觉 */
.level2-icon {
    font-size: 14px;
    transition: transform 0.2s ease;
    color: var(--primary-color);
}

.level2-icon.expanded {
    transform: rotate(90deg);
}

/* 书签列表容器 - 优化间距和换行 */
.bookmark-list {
    display: none;
    flex-wrap: wrap;
    gap: 10px; /* 优化书签间距 */
    padding: 0px;
    margin-bottom: 4px;
}

.bookmark-list.expanded {
    display: flex;
}

/* 书签项样式 - 优化尺寸和交互 */
.bookmark-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px; /* 增加内边距，提升点击体验 */
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--gray-700);
    font-size: 14px;
    transition: var(--transition-base);
    background-color: #fff;
    border: 1px solid transparent; /* 防止hover时抖动 */
    min-width: 180px; /* 统一书签宽度，提升整齐度 */
    justify-content: flex-start;
    position: relative;
}

.bookmark-item:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
    transform: translateY(-1px);
    border-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
}

/* 书签匹配搜索关键词高亮 */
.bookmark-item.highlight {
    background-color: var(--highlight-color);
    border: 1px solid var(--highlight-border);
}

.bookmark-item .highlight-text {
    color: var(--highlight-text);
    font-weight: 600;
}

/* 书签图标 - 优化尺寸和视觉 */
.bookmark-icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background-color: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0; /* 防止图标变形 */
}

/* 新增按钮通用样式 - 优化尺寸 */
.add-btn {
    padding: 8px 15px;
    border: 1px dashed var(--gray-400);
    border-radius: var(--radius-sm);
    background-color: var(--gray-300);
    color: var(--gray-600);
    cursor: pointer;
    font-size: 13px;
    transition: var(--transition-base);
    height: fit-content;
}

.add-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: var(--primary-light);
}

/* 二级分类内新增书签按钮 - 优化位置 */
.add-bookmark-level2 {
    margin: 0;
}

/* 书签列表底部新增书签按钮 - 优化位置 */
.add-bookmark-in-list {
    margin: 8px 0 0 0; /* 移除左侧间距，对齐列表 */
    width: fit-content;
}

/* 新增二级分类按钮 - 优化位置和间距 */
.add-level2 {
    margin: 15px 0 25px 0; /* 移除左侧间距，统一上下间距 */
    width: fit-content;
}

/* 隐藏非激活的一级分类内容 */
.level1-content {
    display: none;
}

.level1-content.active {
    display: block;
}

/* 搜索无结果提示 - 优化视觉和间距 */
.no-result {
    display: none;
    text-align: center;
    padding: 60px 20px; /* 增加内边距，提升视觉重心 */
    color: var(--gray-500);
    font-size: 15px;
    background-color: var(--gray-300);
    border-radius: var(--radius-md);
    margin: 20px 0;
}

.no-result.show {
    display: block;
}

/* 弹窗样式 - 优化视觉和交互 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
    padding: 20px; /* 防止弹窗超出屏幕 */
}

.modal-content {
    background-color: #fff;
    padding: 28px;
    border-radius: 8px; /* 替换CSS变量为固定值 */
    width: 100%;
    max-width: 450px; /* 加大弹窗宽度，提升输入体验 */
    box-shadow: var(--shadow-md);
    animation: modalFadeIn 0.2s ease; /* 新增弹窗动画 */
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-title {
    font-size: 18px;
    margin-bottom: 24px;
    color: var(--gray-700);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-200); /* 增加分割线，提升层级 */
}

.modal-title::before {
    content: "";
    width: 4px;
    height: 20px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 18px; /* 增加表单间距 */
}

.modal-input {
    padding: 12px 15px; /* 增加输入框内边距 */
    border: 1px solid var(--gray-400);
    border-radius: 4px; /* 替换CSS变量为固定值 */
    font-size: 14px;
    transition: border 0.2s ease;
    width: 100%;
}

.modal-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
}

.modal-btns {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: flex-end;
}

.modal-btn {
    padding: 10px 20px; /* 增加按钮尺寸 */
    border: none;
    border-radius: 4px; /* 替换CSS变量为固定值 */
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition-base);
    white-space: nowrap;
}

.confirm-btn {
    background-color: var(--primary-color);
    color: #fff;
}

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

.cancel-btn {
    background-color: var(--gray-200);
    color: var(--gray-600);
}

.cancel-btn:hover {
    background-color: var(--gray-400);
}

/* 删除按钮样式 */
.delete-btn {
    background: none;
    border: none;
    color: #ff6b6b;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: 8px;
    opacity: 0;
    transition: all 0.2s ease;
    position: absolute;
    right: 8px;
}


.delete-btn:hover {
    background-color: #ffebee;
    transform: scale(1.1);
}
.delete-btn1 {
    background: none;
    border: none;
    color: #ff6b6b;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    display: inline-block;
    line-height: 24px;
    border-radius: 50%;
    margin-left: 8px;
    opacity: 0;
    transition: all 0.2s ease;
    position: absolute;
    right: 8px;
    top:8px;
}
.delete-btn1:hover {
    background-color: #ffebee;
    transform: scale(1.1);
}

/* 在书签项悬停时显示删除按钮 */
.bookmark-item:hover .delete-btn {
    opacity: 1;
}

/* 二级分类删除按钮样式 */
.delete-level1 {
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.level1-tab:hover .delete-level1 {
    opacity: 1;
}
/* 二级分类删除按钮样式 */
.delete-level2 {
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.level2-header:hover .delete-level2 {
    opacity: 1;
}

/* 右键菜单提示 */
/**
.level1-tab:not(:first-child)::after {
    content: "右键删除";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    white-space: nowrap;
}
*/

.level1-tab:not(:first-child):hover::after {
    opacity: 1;
}

/* 响应式适配 - 适配新布局 */
/* 平板设备（768px - 1024px） */
@media (max-width: 1024px) {
    .search-container {
        max-width: 500px;
    }
}

/* 手机设备（≤768px） */
@media (max-width: 768px) {
    body {
        padding: 10px; /* 减少页面边距 */
    }

    .bookmark-container {
        padding: 16px; /* 减少容器内边距 */
    }

    .search-container {
        max-width: 100%; /* 手机端搜索框占满宽度 */
    }

    .core-add-btns {
        justify-self: flex-start; /* 手机端按钮组左对齐 */
    }

    .add-bookmark-main {
        flex: 1;
        justify-content: center;
    }

    .level2-header {
        flex-direction: row;
        align-items:space-between;
        gap: 8px;
        position: relative;
    }

    .bookmark-item {
        min-width: 100%; /* 书签项占满宽度，提升手机体验 */
    }

    .modal-content {
        padding: 20px; /* 减少弹窗内边距 */
    }
    
    /* 在移动端调整删除按钮位置 */
    .delete-btn {
        position: static;
        margin-left: auto;
    }
}

/* 小屏手机（≤480px） */
@media (max-width: 480px) {
    .level1-tab {
       /* 缩小一级分类按钮 */
        font-size: 13px;
    }

    .add-bookmark-main,
    .add-category-btn {
        padding: 8px 12px;
        font-size: 13px;
    }

    .modal-btn {
        padding: 8px 15px;
        font-size: 13px;
    }
}
.qrcode-btn:hover {
    background-color: #66b1ff;
}

/* 二维码容器 - 默认隐藏 */
.qrcode-box {
    position: absolute;
    transform: translateX(-50%);
    margin-top: 10px;
    padding: 10px;
    background-color: white;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    display: none; /* 默认隐藏 */
    z-index: 999; /* 确保显示在最上层 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#qrurl{
    margin-top:-10px;
    font-size:12px;
     /* 1. 固定宽度（触发换行的前提，可根据需求调整，也可用max-width） */
     width: 150px;
     /* 2. 允许长单词/长文本换行 */
     overflow-wrap: break-word; /* 现代浏览器推荐，等价于word-wrap: break-word */
     /* 3. 可选：可视化容器，方便查看效果 */
     display: block; /* 让a标签独占一行，支持宽度设置 */
     padding: 8px;
}

/* 三角箭头样式 */
.qrcode-box::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent white transparent;
}

/* 生成的二维码容器样式 */
#qrcode {
    width: 150px;
    height: 150px;
}
/* 添加登录窗*/
.verification-container {
    display: flex;
    gap: 10px;
}

.verification-code {
    flex: 1;
}

.send-code-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.send-code-btn:hover {
    background-color: #45a049;
}

.send-code-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
/*登录窗结束*/
/* 备案信息样式（合并为一行，适配移动端） */
        .footer-record {
            width: 100%;
            margin-top: 50px;
            padding: 20px 0;
            text-align: center;
            font-size: 12px;
            color: #999;
            border-top: 1px solid #eee;
        }
        .footer-record a {
            color: #999;
            text-decoration: none;
        }
        .footer-record a:hover {
            color: #666;
            text-decoration: underline;
        }
        /* 备案项同行展示，添加间距 */
        .record-items {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px; /* 两个备案信息之间的间距 */
            margin-bottom: 5px;
            flex-wrap: wrap; /* 移动端屏幕较小时自动换行，避免挤压 */
        }
        .copyright {
            margin-top: 5px;
        }