/**
 *  *  * page-links.css
 *   *   * 版本：1.0.0
 *    *    * 描述：友情链接页面专用样式
 *     *     * 作者：Eucalyptus
 *      *      * 创建日期：2025-08-30
 *       *       * 修改记录：
 *        *        *   - 2025-08-30：首版，含友链卡片、搜索、弹窗
 *         *         */

/* ========= 1. 页面通用 ========= */
.page-links{
  max-width:960px;
  margin:0 auto;
  padding:40px 20px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

/* ============ 顶部标题（跟随深浅 + 移动端适配） ============ */
/* 友情链接横幅 */
.hero-title{
  padding:3.5rem 1.5rem 2.5rem;
  border-radius:0 0 1.5rem 1.5rem;
  text-align:center;
}
.hero-title h1{
  font-size:2.2rem;
  font-weight:700;
  letter-spacing:.5px;
  position:relative;
}
.hero-title h1::after{
  content:'';
  display:block;
  width:60px;
  height:3px;
  background:#667eea;
  margin:8px auto 0;
  border-radius:2px;
}
.hero-sub{
  font-size:1rem;
  color:#666;
  margin-top:.75rem;
}


/* ========= 玻璃态卡片 3.0 ========= */
.links{
  display:grid;
  grid-template-columns:repeat(3, 1fr); /* 固定 3 列 */
  gap:24px;
}

.link-card{
  position:relative;
  padding:20px;
  background:transparent;                /* 跟随深浅 */
  border:1px solid rgba(var(--color-border,0 0 0),.1);
  border-radius:20px;
  box-shadow:0 8px 32px rgba(0,0,0,.08);  /* 深浅通用阴影 */
  transition:.4s cubic-bezier(.175,.885,.32,1.275);
  overflow:hidden;
}

:root{
  --color-border: 0 0 0;       /* 深色模式 */
}
[data-theme="light"]{
  --color-border: 255 255 255; /* 浅色模式 */
}

.link-card::before{                               /* 光泽渐变 */
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.3));
  pointer-events:none;
}

.link-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 12px 48px rgba(102,126,234,.25);
}

/* 头像 */
.link-card img{
  width:64px;
  height:64px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  object-fit:cover;
}

/* 文字区 */
.link-card .info{
  margin-left:16px;
}
.link-card .name{
  font-size:18px;
  font-weight:700;
  letter-spacing:.5px;
  margin-bottom:6px;
}
.link-card .desc{
  font-size:14px;
  color:#555;
  line-height:1.5;
}

/* 右上角角标（纯 CSS） */
.link-card{
  position: relative;           /* 为伪元素定位 */
}
.link-card::after{
  content: "友链";              /* 角标文字 */
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg,#ea66d4,#ac5196);
  border-radius: 4px;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;         /* 不影响点击 */
}
.link-card:hover::after{
  opacity: 1;
}

/* ===== 分类标题 3.0 ===== */
.link-cat{
  position:relative;
  margin-bottom:40px;
}
.link-cat h2{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 18px;
  font-size:20px;
  margin-bottom: 15px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,#667eea,#764ba2);
  border-radius:20px;
  box-shadow:0 4px 12px rgba(102,126,234,.25);
  letter-spacing:.5px;
}

/* 分类描述 */
.link-cat-desc{
  margin: -8px 0 24px 18px;   /* 负值贴紧标题，左侧与标题文字对齐 */
  font-size: 0.9rem;
  color: #555;
  letter-spacing: .4px;
  line-height: 1.5;
  max-width: 540px;
}

/* ========= 移动端适配 ========= */
@media (max-width: 768px) {
  .links {
    grid-template-columns: 1fr; /* 1 列 */
    gap: 20px;
  }

  .link-card {
    padding: 16px;
  }

  .link-card img {
    width: 48px;
    height: 48px;
  }

  .link-card .name {
    font-size: 16px;
  }

  .link-card .desc {
    font-size: 13px;
  }
}
/* ========= 4. 搜索框 ========= */
.link-search{
  display:flex;
  margin-bottom:40px;
}

.link-search input{
  width:100%;
  max-width:320px;
  padding:12px 40px 12px 16px;
  font-size:15px;
  color:#333;
  background:#fff;
  border:2px solid transparent;
  border-radius:30px;
  box-shadow:0 4px 12px rgba(102,126,234,.15);
  transition:border-color .3s, box-shadow .3s;
  outline:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:20px 20px;
}

/* 悬浮/聚焦高亮 */
.link-search input:focus{
  border-color:#667eea;
  box-shadow:0 0 0 4px rgba(102,126,234,.25);
}

/* placeholder 样式 */
.link-search input::placeholder{
  color:#7f8c8d;
  font-size:14px;
}

/* ========= 5. 按钮 & 弹窗 ========= */
/* 5.1 触发按钮居中容器 */
.btn-center{
  display:flex;
  justify-content:center;
  margin:30px 0;
}

/* 5.2 主按钮样式 */
.btn-hero{
  position:relative;
  padding:12px 32px;
  font-size:16px;
  font-weight:600;
  color:#fff;
  background:linear-gradient(135deg,#667eea 0%, #764ba2 100%);
  border:none;
  border-radius:30px;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(102,126,234,.4);
  transition:all .3s;
  overflow:hidden;
}
.btn-hero:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 10px 30px rgba(102,126,234,.55);
}

/* 5.3 弹窗遮罩 */
.modal-fade{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:.35s;
  z-index:9999;
}
.modal-fade.show{
  opacity:1;
  visibility:visible;
}

/* 5.4 弹窗主体 */
.modal-dialog{
  width:92%;
  max-width:420px;
  background:#fff;
  border-radius:16px;
  padding:32px 36px 36px;
  position:relative;
  transform:translateY(-30px) scale(.95);
  transition:transform .35s;
}
.modal-fade.show .modal-dialog{
  transform:none;
}

/* 5.5 关闭按钮 */
.modal-close{
  position:absolute;
  top:14px;
  right:18px;
  font-size:26px;
  background:none;
  border:none;
  color:#999;
  cursor:pointer;
}

/* 5.6 表单元素 */
.modal-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.modal-form input,
.modal-form textarea{
  padding:12px 14px;
  border:1px solid #e1e5e9;
  border-radius:8px;
}
.btn-submit{
  margin-top:8px;
  padding:12px;
  color:#fff;
  border:none;
  border-radius:30px;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  cursor:pointer;
}

/* 强制弹窗白天配色（覆盖所有主题样式） */
.modal-dialog,
.modal-form input,
.modal-form textarea{
  background:#fff !important;
  color:#222 !important;
  border:1px solid #e1e5e9 !important;
}
.btn-submit{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;
}

.modal-dialog h3{
  color:#222 !important;
}

/* 移动端补丁，溢出锁死 */
.page-links{
  overflow-x: hidden;   /* 关键：禁止横向滚动 */
}