/* 全局样式 */
:root{
  --bg: #f8fafc;
  --card: #ffffff;
  --accent: #6c7ae0;
  --muted: #6b7280;
  --shadow: rgba(16,24,40,0.06);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg);
  min-height:100vh;
  padding:18px;
  color:#0f172a;
}

.container{max-width:1100px;margin:0 auto;padding:6px}

/* 头部样式 */
.header{ text-align:center;padding:18px 0 }
.header h1{ font-size:1.6rem;margin-bottom:6px;font-weight:600 }
.header p{ font-size:0.95rem;color:var(--muted);margin:0 }

/* 搜索框样式 */
.search-container{max-width:640px;margin:0 auto 20px}
.search-container input{
  width:100%;padding:10px 14px;border:1px solid #e6edf3;border-radius:12px;font-size:0.95rem;
  outline:none;background:transparent;box-shadow:0 6px 18px var(--shadow);transition:box-shadow .18s ease,border-color .18s ease
}
.search-container input:focus{box-shadow:0 10px 30px rgba(99,102,241,0.08);border-color:var(--accent)}

/* 导航网格样式 */
.nav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;padding:14px 0}

/* 导航卡片样式 */
.nav-card{background:var(--card);border-radius:12px;padding:14px;text-align:center;box-shadow:0 8px 20px var(--shadow);transition:transform .22s ease,box-shadow .22s ease;cursor:pointer;position:relative;overflow:hidden}
.nav-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,24,40,0.08)}
.nav-card::before{content:none}

.nav-logo{width:48px;height:48px;margin:0 auto 12px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:white;background:linear-gradient(135deg,var(--accent),#8b94ff);box-shadow:0 6px 18px rgba(99,102,241,0.08)}

.nav-title{font-size:1rem;font-weight:600;color:#0f172a;margin-bottom:6px}
.nav-url{font-size:0.78rem;color:var(--muted);word-break:break-all;margin-bottom:10px}

/* 编辑按钮样式 */
.edit-btn{background:transparent;color:var(--accent);border:1px solid rgba(108,122,224,0.16);padding:6px 10px;border-radius:10px;font-size:0.85rem;cursor:pointer}
.edit-btn:hover{background:rgba(108,122,224,0.06);transform:translateY(-1px)}

/* 添加按钮样式 */
.add-card{display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px dashed #e6edf3;background:transparent;color:var(--muted);cursor:pointer;transition:transform .18s ease}
.add-card:hover{transform:scale(1.02)}
.add-card .nav-logo{background:transparent;box-shadow:none;font-size:1.6rem;width:auto;height:auto;color:var(--accent)}

/* 编辑模态框样式 */
.modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,0.28);z-index:1000;align-items:center;justify-content:center}
.modal.show{display:flex}
.modal-content{background:var(--card);border-radius:12px;padding:20px;width:92%;max-width:440px;box-shadow:0 20px 40px rgba(16,24,40,0.06);animation:modalSlideIn .22s ease}

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

.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.modal-header h2{color:#0f172a;font-size:1.05rem;margin:0}
.close-btn{background:none;border:none;font-size:1.2rem;cursor:pointer;color:#9aa3b2}
.close-btn:hover{color:#334155}

.form-group label{display:block;margin-bottom:6px;color:var(--muted);font-weight:500}
.form-group input{width:100%;padding:10px 12px;border:1px solid #e6edf3;border-radius:8px;font-size:0.95rem;transition:border-color .18s ease}
.form-group input:focus{border-color:var(--accent);outline:none}

.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}

.btn{padding:10px 16px;border-radius:8px;border:none;font-size:0.95rem;cursor:pointer}
.btn-primary{background:var(--accent);color:white}
.btn-secondary{background:#f3f4f6;color:#0f172a}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,24,40,0.06)}
.delete-btn{background:#ff4757;color:white;margin-right:auto;padding:8px 12px;border-radius:8px}
.delete-btn:hover{background:#ff2e43}

/* 响应式设计 */
@media (max-width:768px){.nav-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.header h1{font-size:1.25rem}.nav-card{padding:12px}.nav-logo{width:44px;height:44px}}
@media (max-width:480px){.nav-grid{grid-template-columns:1fr}body{padding:12px}.header{padding:14px 0}.header h1{font-size:1.1rem}}