/* 备份包界面的布局 */
#backup-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 一行三列 */
    gap: 8px;
}

/* 普通行样式 */
#backup-list li {
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 悬停效果（轻微高亮） */
#backup-list li:hover {
    background-color: #f9fafb;
    border-color: #cbd5e1;
}

/* 选中状态 */
#backup-list li.selected {
    background-color: #e0edff; /* 淡蓝背景 */
    border-color: #2563eb; /* 蓝边框 */
}

/* 文字样式 */
#backup-list li span {
    display: inline;
    margin-right: 8px;
    font-size: 13px;
    color: #333;
}

#backup-list li span.country {
    font-weight: 600;
    color: #1f2937;
}

#backup-list li span.phone {
    color: #2563eb;
}

#backup-list li span.password {
    color: #dc2626;
}

#backup-list li span.date {
    color: #16a34a;
}

#backup-list li span.creator_name {
    color: #7c3aed;
}

#backup-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 一行三列 */
    gap: 8px;
    counter-reset: row; /* 初始化行号计数器 */
}

/* 每行第一个 li：增加行号 */
#backup-list li:nth-child(3n+1) {
    position: relative;
    counter-increment: row; /* 行号+1 */
    padding-left: 50px; /* 给行号留空间 */
}

#backup-list li:nth-child(3n+1)::before {
    content: "行 " counter(row);
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: bold;
    color: #2563eb;
}


/*下方增添筛选框相关样式*/

/* 备份包管理标题 */
#tab-backup h2 {
    margin: 12px 0 20px;
    font: 600 20px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Arial, "PingFang SC", "Microsoft YaHei";
    color: #1f2937;
}

/* 输入框样式 */
#tab-backup input[type="text"],
#tab-backup input[type="date"] {
    display: inline-block;
    margin: 6px 10px 6px 0;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #111827;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

#tab-backup input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
}

/* 筛选按钮 */
#tab-backup #download-backup,
#tab-backup #select-all-backup,
#tab-backup #filter-backup {
    padding: 8px 14px;
    margin: 6px 0;
    border-radius: 6px;
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s, transform .02s;
}

#tab-backup #download-backup:hover,
#tab-backup #select-all-backup:hover,
#tab-backup #filter-backup:hover {
    background: #1d4ed8;
}

#tab-backup #download-backup:active,
#tab-backup #select-all-backup:active,
#tab-backup #filter-backup:active {
    transform: translateY(1px);
}

/* 输入区容器（可选，让输入框一行内换行） */
#tab-backup {
    padding: 16px;
}

#tab-backup input,
#tab-backup button {
    min-width: 180px;
    box-sizing: border-box;
}