/*
 * 首页样式（home.css）
 * 适用页面：/（index/index.html）
 * 内容：hero 区、搜索框、分类分组、链接卡片、首页快速编辑弹窗、页脚
 * 说明：白色科技风，白色毛玻璃卡片 + 浅灰边框 + 蓝色渐变强调色。
 */
body {
  background-image:
    radial-gradient(ellipse 60% 45% at 85% 0%, rgba(59,130,246,.1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 5% 100%, rgba(124,58,237,.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 20%, rgba(34,211,238,.05) 0%, transparent 70%);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(59,130,246,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 80%);
}

.hero { text-align: center; padding: 72px 0 46px; }
.hero .hero-tag {
  display: inline-block; padding: 5px 16px; border-radius: 20px;
  font-size: 13px; color: #2563eb; border: 1px solid rgba(59,130,246,.35);
  background: rgba(59,130,246,.08); margin-bottom: 22px;
}
.hero h1 {
  margin: 0 0 14px; font-size: 46px; font-weight: 800; letter-spacing: 1px;
  background: linear-gradient(90deg, #3b82f6, #0ea5e9, #8b5cf6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { margin: 0; color: #64748b; font-size: 16px; }
.hero .search-box {
  margin: 30px auto 0; max-width: 620px; display: flex; gap: 0;
  background: #fff;
  border: 1px solid rgba(100,116,139,.18);
  border-radius: 14px; padding: 6px 6px 6px 18px;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
  transition: border-color .2s, box-shadow .2s;
}
.hero .search-box:focus-within {
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}
.hero .search-box input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #1e293b; font-size: 15px; height: 46px;
}
.hero .search-box input::placeholder { color: #94a3b8; }
.hero .search-box .search-btn {
  border: none; cursor: pointer; padding: 0 26px; border-radius: 10px;
  color: #fff; font-size: 15px; font-weight: 600;
  background: linear-gradient(135deg, #3b82f6, #22d3ee);
}
.hero .search-box .search-btn:hover { opacity: .92; }

.main { max-width: 1200px; margin: 0 auto; padding: 0 24px 20px; }

.cate-section { margin: 0 0 34px; }
.cate-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.cate-head .cate-icon {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 11px; font-size: 19px; color: #2563eb;
  background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.22);
}
.cate-head .cate-name { font-size: 20px; font-weight: 700; color: #0f172a; letter-spacing: .5px; }
.cate-head .cate-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(59,130,246,.3), transparent); }
.cate-head .cate-count {
  font-size: 12px; color: #64748b; padding: 3px 12px; border-radius: 12px;
  background: #fff; border: 1px solid rgba(100,116,139,.16);
}

.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.link-card {
  position: relative;
  display: flex; align-items: center; gap: 8px; padding: 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(100,116,139,.14);
  box-shadow: 0 6px 20px rgba(15,23,42,.05);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.link-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 12px 32px rgba(59,130,246,.16);
}
.link-main { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.link-avatar {
  position: relative; overflow: hidden;
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 21px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.link-avatar .link-initial { position: relative; z-index: 1; }
.link-avatar .link-favicon {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 8px; background: #fff;
}
.link-avatar .link-favicon.img-fail { display: none; }
.link-ops { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.op-btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: #94a3b8; cursor: pointer; font-size: 13px;
  background: #f1f5f9; border: 1px solid rgba(100,116,139,.14);
  transition: all .2s;
}
.op-btn:hover { color: #2563eb; border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.08); }
.op-btn.op-del:hover { color: #ef4444; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }
.avatar-0 { background: linear-gradient(135deg,#3b82f6,#22d3ee); }
.avatar-1 { background: linear-gradient(135deg,#22d3ee,#2dd4bf); }
.avatar-2 { background: linear-gradient(135deg,#f59e0b,#f97316); }
.avatar-3 { background: linear-gradient(135deg,#a78bfa,#8b5cf6); }
.avatar-4 { background: linear-gradient(135deg,#f472b6,#ec4899); }
.avatar-5 { background: linear-gradient(135deg,#38bdf8,#3b82f6); }
.link-info { min-width: 0; flex: 1; }
.link-title { font-size: 15px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-desc { font-size: 12px; color: #64748b; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-click { font-size: 12px; color: #94a3b8; margin-top: 5px; }
.link-click .layui-icon { font-size: 12px; margin-right: 2px; }

.empty {
  text-align: center; color: #94a3b8; padding: 90px 0; font-size: 15px;
}
.empty a { color: #2563eb; }

/* 首页快速编辑弹窗 */
.form-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.form-label { width: 84px; text-align: right; color: #64748b; flex-shrink: 0; font-size: 14px; }
.form-field { flex: 1; min-width: 0; }
.form-field .layui-input, .form-field .layui-form-select { width: 100%; }
.form-actions { text-align: center; padding-top: 8px; }
.layui-layer .layui-form { padding: 22px 24px 8px; }
.layui-layer { border-radius: 14px !important; }
.layui-layer-title { color: #1e293b !important; background: #fff !important; border-bottom: 1px solid rgba(100,116,139,.14) !important; }
.layui-layer:not(.layui-layer-msg) { background: #fff !important; box-shadow: 0 20px 60px rgba(15,23,42,.18) !important; }
.layui-layer-content { color: #334155; }
.layui-layer .layui-input {
  background: #f8fafc; border: 1px solid rgba(100,116,139,.2);
  color: #1e293b; border-radius: 8px;
}
.layui-layer .layui-textarea {
  background: #f8fafc; border: 1px solid rgba(100,116,139,.2);
  color: #1e293b; border-radius: 8px;
}
.layui-layer .layui-form-select dl {
  background: #fff; border: 1px solid rgba(100,116,139,.18);
}
.layui-layer .layui-form-select dl dd { color: #334155; }
.layui-layer .layui-form-select dl dd:hover, .layui-layer .layui-form-select dl dd.layui-this { background: rgba(59,130,246,.1); color: #2563eb; }
.layui-layer .layui-form-selected .layui-icon { color: #94a3b8; }
.layui-layer .layui-btn-primary { color: #475569; background: #f1f5f9; border-color: rgba(100,116,139,.2); }

footer {
  text-align: center; color: #94a3b8; font-size: 13px; padding: 30px 0 44px;
}

@media (max-width: 640px) {
  .hero h1 { font-size: 32px; }
  .hero { padding: 46px 0 30px; }
}