/* =========================================================
   default.css - 个人爱好收藏 全站统一样式
   主色调：清爽淡蓝 #3b82d6
   适用：首页 index.html + 教育导航子页 /edu-nav/
   ========================================================= */

:root{
  /* 主色 */
  --primary:        #3b82d6;
  --primary-dark:   #2563b0;
  --primary-soft:   #eef5fd;
  --primary-line:   #d6e6f7;

  /* 各栏目点缀色（蓝色系） */
  --edu:      #3b82d6;
  --edu-soft: #eef5fd;
  --tool:     #2f8fb5;
  --tool-soft:#e8f4f9;
  --blog:     #5b8fd4;
  --blog-soft:#edf3fb;
  --soon:     #9aa7b5;
  --soon-soft:#f1f3f6;

  /* 基础色 */
  --bg:        #f5f7fb;
  --card:      #ffffff;
  --text:      #2c3e50;
  --text-sub:  #96a3b3;
  --text-mute: #aab7c5;
  --line:      #e3ecf6;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(16,42,67,.05), 0 10px 24px -18px rgba(16,42,67,.35);
}

/* =========================================================
   基础
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
              "Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

.wrap{ width:min(1080px, 100% - 40px); margin:0 auto; }

a{ color:inherit; text-decoration:none; }
a:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:8px;
}

.skip{ position:absolute; left:-9999px; top:0; }
.skip:focus{
  left:12px; top:12px;
  background:#fff;
  padding:8px 14px;
  border-radius:8px;
  z-index:99;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}

/* =========================================================
   头部（首页 + 子页统一）
   ========================================================= */
.site-header{
  padding:60px 0 28px;
  text-align:center;
  background:linear-gradient(180deg, var(--primary-soft) 0%, transparent 100%);
}

.site-title{
  margin:0;
  display:inline-block;
  font-size:clamp(26px, 4.2vw, 38px);
  font-weight:800;
  letter-spacing:3px;
  line-height:1.25;
  background:linear-gradient(135deg, #2563b0 0%, #3b82d6 45%, #7cb3e8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.site-title .dot{
  -webkit-text-fill-color:var(--primary);
  color:var(--primary);
}

.site-title-divider{
  width:68px;
  height:3px;
  margin:20px auto 14px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--edu), var(--tool), var(--blog));
  opacity:.9;
}

.site-sub{
  margin:0;
  font-size:14px;
  color:var(--text-sub);
  letter-spacing:2px;
}

/* 子页返回链接 */
.page-back{
  margin:14px 0 0;
  font-size:13px;
}
.page-back a{
  color:var(--primary);
  text-decoration:none;
}
.page-back a:hover{
  text-decoration:underline;
}

/* =========================================================
   头部广告位（无文字）
   ========================================================= */
.ad-slot{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:90px;
  margin:18px 0 30px;
  border:1px dashed var(--primary-line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, #ffffff 0%, var(--primary-soft) 100%);
}

/* =========================================================
   首页简介
   ========================================================= */
.intro{
  max-width:660px;
  margin:0 auto 38px;
  text-align:center;
  font-size:15px;
  color:var(--text-sub);
}

/* =========================================================
   首页栏目导航卡片
   ========================================================= */
.nav-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:18px;
  margin:0 0 44px;
  padding:0;
  list-style:none;
}

.card{
  display:block;
  height:100%;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 22px;
  text-decoration:none;
  color:inherit;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  border-color:var(--primary-line);
}
a.card:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

.card::before{
  content:"";
  position:absolute; left:0; top:0;
  width:100%; height:4px;
  background:var(--primary);
}
.card--edu::before{ background:var(--edu); }
.card--tool::before{ background:var(--tool); }
.card--blog::before{ background:var(--blog); }
.card--soon::before{ background:var(--soon); }

.card--edu  .card-icon{ background:var(--edu-soft); color:var(--edu); }
.card--tool .card-icon{ background:var(--tool-soft); color:var(--tool); }
.card--blog .card-icon{ background:var(--blog-soft); color:var(--blog); }
.card--soon .card-icon{ background:var(--soon-soft); color:var(--soon); }

.card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px; height:48px;
  border-radius:12px;
  font-size:24px;
  line-height:1;
  margin-bottom:14px;
}

.card-title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:600;
}
.card-desc{
  margin:0 0 14px;
  font-size:14px;
  color:var(--text-sub);
}
.card-more{
  font-size:13px;
  font-weight:500;
  color:var(--primary);
}

.card--soon{ background:#fbfcfc; border-style:dashed; }
.card--soon .card-title{ color:var(--text-mute); }
.card--soon .card-desc{ color:#b8c2cc; }

.badge{
  position:absolute; top:18px; right:18px;
  font-size:12px;
  color:#7f8b98;
  background:var(--soon-soft);
  padding:2px 9px;
  border-radius:20px;
}

/* =========================================================
   关于本站
   ========================================================= */
.about{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 26px 18px;
  margin-bottom:44px;
}
.about h2{
  margin:0 0 12px;
  font-size:16px;
  color:var(--primary);
}
.about p{ margin:0 0 12px; font-size:14px; color:var(--text-sub); }
.about ul{ margin:0 0 12px; padding-left:20px; font-size:14px; color:var(--text-sub); }
.about li{ margin-bottom:4px; }
.about strong{ color:var(--text); }

/* =========================================================
   页脚（首页 + 子页统一）
   ========================================================= */
.site-footer{
  background:var(--card);
  border-top:1px solid var(--line);
  padding:28px 0 36px;
  text-align:center;
  font-size:13px;
  color:var(--text-sub);
}
.site-footer a{ color:var(--text-sub); text-decoration:none; }
.site-footer a:hover{ color:var(--primary); text-decoration:underline; }

.footer-nav{ margin:0 0 12px; }
.footer-nav a{ margin:0 10px; }
.copyright{ margin:0 0 8px; }
.beian{ margin:0 0 6px; }
.sep{ margin:0 8px; color:#d0d4da; }
.beian-tip{ margin:0; font-size:12px; color:var(--text-mute); }

/* =========================================================
   教育导航子页 /edu-nav/
   ========================================================= */

/* 顶部统计文字 */
.link-stats{
  margin:0 0 18px;
  text-align:center;
  font-size:13px;
  color:var(--text-sub);
}

/* 分组网格 */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(255px, 1fr));
  gap:16px;
  align-items:start;
  margin:0 0 44px;
}

/* 分组卡片 */
.link-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}

.link-card-hd{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  background:linear-gradient(180deg, #f1f7fd, #e8f2fb);
  border-bottom:1px solid var(--primary-line);
}

.link-badge{
  width:26px; height:26px; flex:none;
  display:grid; place-items:center;
  border-radius:8px;
  background:var(--primary);
  color:#fff;
  font-size:13px;
  font-weight:700;
}

.link-group-title{
  font-size:13px;
  font-weight:600;
  color:var(--primary-dark);
  letter-spacing:.5px;
}

.link-count{
  margin-left:auto;
  font-size:12px;
  color:#8faac4;
  font-variant-numeric:tabular-nums;
}

.link-list{
  list-style:none;
  margin:0;
  padding:8px;
}

.link-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:9px 10px;
  border-radius:9px;
  transition:background-color .15s ease, color .15s ease;
}

.link-item .link-no{
  flex:none;
  min-width:30px;
  padding-top:1px;
  font-size:11px;
  letter-spacing:.3px;
  color:var(--text-mute);
  font-variant-numeric:tabular-nums;
  transition:color .15s ease;
}

.link-item .link-name{
  flex:1;
  font-size:14px;
  word-break:break-word;
}

a.link-item:hover{
  background:var(--primary-soft);
  color:var(--primary-dark);
}
a.link-item:hover .link-no{
  color:#6ba3e0;
}
a.link-item:active{
  background:#ddeaf9;
}

.link-item.disabled{
  color:#b3bdc9;
  cursor:default;
}

/* 子页加载 / 错误提示 */
.status{
  grid-column:1 / -1;
  padding:40px 20px;
  text-align:center;
  color:var(--text-sub);
  font-size:14px;
  line-height:2;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(16,42,67,.05);
}
.status b{ color:#e06c6c; font-weight:600; }
.status code{
  background:#eef2f6;
  padding:2px 7px;
  border-radius:5px;
  font-size:13px;
  color:#4a5b6d;
}

/* =========================================================
   响应式
   ========================================================= */
@media (max-width:480px){
  .site-header{ padding:44px 0 22px; }
  .site-title{ letter-spacing:1.5px; }
  .ad-slot{ min-height:70px; margin:14px 0 24px; }

  .nav-grid{ gap:14px; }
  .card{ padding:20px 18px; }
  .card-icon{ width:44px; height:44px; font-size:22px; }
  .about{ padding:20px 18px 14px; }

  .grid{ gap:12px; }
  .link-item{ padding:10px 9px; }
}