:root {
    --zoom: 1;
}

/* 核心：确保所有元素的 padding 和 border 不会额外增加宽度 */
* {
    box-sizing: border-box;
}

body { 
    margin: 0; 
    padding: 0; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    background-color: #f0f2f5; 
    background-image: url("background.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-attachment: fixed; 
    color: #333; 
}

.wrapper { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    align-items: center; 
    padding-top: 5vh; /* 使用 vh 让顶部留白在移动端更自然 */
    padding-bottom: 20px;
}

.container { 
    width: 95%; /* 移动端占比更大 */
    max-width: 1000px; 
    padding: 30px; 
    background-color: rgba(255, 255, 255, 0.75); 
    border-radius: 16px; 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
}

.header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; /* 允许在小屏幕换行 */
    gap: 15px;
    margin-bottom: 20px; 
}

.nav-actions {
    display: flex;
    gap: 10px;
}

.search-box { 
    margin-bottom: 20px; 
    text-align: center; 
    width: 100%;
}

.search-box input { 
    width: 100%; 
    max-width: 500px; 
    padding: 12px 20px; 
    border-radius: 20px; 
    border: 1px solid #ddd; 
    outline: none; 
    font-size: 16px; /* 必须>=16px，防止 iOS 自动放大页面 */
    background: rgba(255,255,255,0.9); 
    transition: box-shadow 0.3s;
}
.search-box input:focus {
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}

.zoom-control { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap;
    gap: 10px; 
    margin-bottom: 30px; 
    font-size: 14px; 
    color: #555; 
}
.zoom-control input[type=range] { width: 150px; cursor: pointer; }

.text-icon { display: flex; align-items: center; justify-content: center; .text-icon { display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; border-radius: 20%; } color: white; font-weight: bold; border-radius: 20%; }
.link-container { list-style: none; padding: 0; margin: 0; }

.mode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(100px * var(--zoom)), 1fr)); gap: calc(15px * var(--zoom)); }
.mode-grid .link-item a { display: flex; flex-direction: column; align-items: center; padding: calc(15px * var(--zoom)) calc(10px * var(--zoom)); background: #fff; border-radius: 12px; text-decoration: none; color: #333; transition: all 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.mode-grid .link-item a:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.mode-grid .link-img, .mode-grid .text-icon { width: calc(50px * var(--zoom)); height: calc(50px * var(--zoom)); font-size: calc(24px * var(--zoom)); border-radius: calc(12px * var(--zoom)); margin-bottom: calc(10px * var(--zoom)); object-fit: cover; }
.mode-grid .link-title { font-size: calc(14px * var(--zoom)); text-align: center; word-break: break-word; line-height: 1.3;}

.mode-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; }
.mode-list .link-item a { display: flex; align-items: center; padding: 12px 15px; background: #fff; border-radius: 10px; text-decoration: none; color: #333; transition: background 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.mode-list .link-item a:hover { background: #f9f9f9; }
.mode-list .link-img, .mode-list .text-icon { width: 36px; height: 36px; border-radius: 8px; margin-right: 15px; font-size: 18px; flex-shrink: 0;}
.mode-list .link-title { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.mode-text { display: flex; flex-wrap: wrap; gap: 10px; }
.mode-text .link-item a { display: inline-block; padding: 8px 16px; background: rgba(255,255,255,0.8); border: 1px solid #ddd; border-radius: 20px; text-decoration: none; color: #444; font-size: 14px; transition: all 0.2s; }
.mode-text .link-item a:hover { background: #333; color: #fff; border-color: #333; }

/* 表单与按钮 */
form { display: flex; flex-direction: column; gap: 15px; width: 100%;}
input[type="text"], input[type="url"], input[type="password"], textarea, select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; outline: none;}
button, .btn { padding: 10px 15px; background-color: #007bff; color: #fff; border: none; border-radius: 6px; cursor: pointer; text-decoration: none; font-size: 14px; text-align: center; transition: 0.2s; white-space: nowrap; }
button:hover, .btn:hover { background-color: #0056b3; }
.btn-outline { background-color: transparent; border: 1px solid #007bff; color: #007bff; }
.btn-outline:hover { background-color: #007bff; color: #fff; }

/* 后台表格滚动容器 */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-links { width: 100%; min-width: 500px; border-collapse: collapse; margin-top: 15px; }
.table-links th, .table-links td { padding: 10px; border-bottom: 1px solid #ddd; text-align: left; word-break: break-all; }

/* ================= 移动端适配 ================= */
@media (max-width: 768px) {
    .container {
        padding: 15px; /* 减小内边距 */
        border-radius: 12px;
    }
    
    .header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .header h1, .header h2 { margin: 0; }
    
    .mode-list {
        grid-template-columns: 1fr; /* 列表模式在手机上单列显示 */
    }

    /* 将添加书签的表单改为纵向排列 */
    .admin-form-row {
        flex-direction: column !important;
    }
}

/* ================== 设置页面优化 & 模态框 ================== */
.admin-section { background: rgba(255,255,255,0.85); padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.status-section { background: #fdfdfd; border-left: 4px solid #007bff; }
.status-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; background-color: #e2f0d9; color: #2e7d32; font-size: 13px; font-weight: bold; }
.help-text { font-size: 13px; color: #666; margin-top: 0; margin-bottom: 10px; }

/* 响应式表单布局 */
.form-add-link { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.form-add-link > input { flex: 1; min-width: 150px; }
.form-add-link > button { width: auto; white-space: nowrap; }

.radio-group { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 15px;}
.radio-group label { display: flex; align-items: center; gap: 5px; cursor: pointer; }

/* 后台书签卡片列表 */
.admin-links-list { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; }
.admin-link-card { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: #fff; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); gap: 15px; transition: background 0.2s;}
.admin-link-card:hover { background: #fafafa; }

.link-info { display: flex; align-items: center; gap: 15px; overflow: hidden; flex: 1; }
.card-icon { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.card-icon-text { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #eee; font-weight: bold; color: #555; font-size: 18px; flex-shrink: 0; }
.link-text { display: flex; flex-direction: column; overflow: hidden; gap: 4px; }
.link-text strong { font-size: 15px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #333; }
.link-text a { font-size: 13px; color: #007bff; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

/* 操作按钮 */
.link-actions { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.link-actions button { padding: 8px 12px; font-size: 13px; border-radius: 6px; border: none; cursor: pointer; color: white; transition: 0.2s; }
.btn-icon { background: #6c757d; padding: 8px !important; }
.btn-icon:hover { background: #5a6268; }
.btn-edit { background: #28a745; }
.btn-edit:hover { background: #218838; }
.btn-del { background: #dc3545; }
.btn-del:hover { background: #c82333; }

/* 模态框 (Modal) */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 9999; padding: 20px; backdrop-filter: blur(4px); }
.modal-content { background: #fff; padding: 25px; border-radius: 16px; width: 100%; max-width: 450px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.modal-content h3 { margin-top: 0; margin-bottom: 20px; }
.modal-actions { display: flex; gap: 10px; margin-top: 10px; }
.modal-actions button { flex: 1; }

/* 移动端增强适配 */
@media (max-width: 768px) {
    .form-add-link { flex-direction: column; }
    .form-add-link > input, .form-add-link > button { width: 100%; }
    
    .admin-link-card { flex-direction: column; align-items: flex-start; }
    .link-info { width: 100%; }
    .link-actions { width: 100%; justify-content: flex-end; margin-top: 5px; background: #f9f9f9; padding: 10px; border-radius: 8px; }
    .link-actions button { flex: 1; padding: 10px 0; }
    .btn-icon { flex: 0.5 !important; } /* 让上下箭头不占太多空间 */
}

/* 拖拽手柄样式 */
.drag-handle {
    cursor: grab;
    font-size: 20px;
    color: #bbb;
    padding: 0 10px 0 0;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}
.drag-handle:hover {
    color: #007bff;
}
.drag-handle:active {
    cursor: grabbing;
}
/* 拖拽时的元素状态 */
.admin-link-card.dragging {
    opacity: 0.5;
    background: #f0f8ff;
    border: 1px dashed #007bff;
    transform: scale(0.98);
}