/* AI自习室 前台统一 UI
 * 目标：二次元冷色 HUD、低亮度、不粉不橙刺眼
 * 设计覆盖范围：public/index.php / category.php / article.php / message.php
 */
:root{
  --f-primary:#1d4ed8;
  --f-primary2:#0284c7;
  --f-accent:#0d9488;

  --f-bg:#f3f6fb;
  --f-card:#ffffff;
  --f-text:#0f172a;
  --f-muted:#64748b;
  --f-border:#e2e8f0;

  --f-radius:16px;
  --f-radius-sm:12px;
}

body{
  background: var(--f-bg) !important;
  color: var(--f-text) !important;
}

/* 顶部品牌/按钮 */
.logo-icon{
  background: linear-gradient(135deg, var(--f-primary), var(--f-primary2)) !important;
}

.msg-btn,
.msg-btn:hover{
  background: linear-gradient(135deg, var(--f-primary), var(--f-accent)) !important;
}

.btn-submit{
  background: linear-gradient(135deg, var(--f-primary), var(--f-accent)) !important;
}

/* Hero（首页/分类页大横幅） */
.hero{
  background: linear-gradient(135deg, #0b1222 0%, #203b63 55%, rgba(29,78,216,0.9) 100%) !important;
}
/* 渐变字：background 简写会重置 background-clip，必须同时写 clip + 透明字，否则会变成色块 */
.hero h1 span{
  display: inline-block !important;
  background: linear-gradient(90deg, #1d4ed8, #0d9488) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.hero input{
  border: 1px solid rgba(226,232,240,0.6) !important;
}

/* Tabs / Chips */
.tab{
  border: 1px solid rgba(226,232,240,0.95) !important;
  background: rgba(255,255,255,0.9) !important;
  color: var(--f-muted) !important;
}
.tab.active{
  background: var(--f-primary) !important;
  border-color: var(--f-primary) !important;
  color: #fff !important;
}

/* 热门序号：去掉橙红刺眼，改为冷色等级 */
.hot-num{
  background: rgba(29,78,216,0.95) !important;
  color: #fff !important;
}
.hot-item:nth-child(1) .hot-num,
.hot-item:nth-child(2) .hot-num,
.hot-item:nth-child(3) .hot-num{
  background: rgba(29,78,216,0.95) !important;
}

.hot-title:hover{
  color: var(--f-primary) !important;
}

/* 卡片（首页/分类列表） */
.article-card,
.sidebar-card,
.widget,
.section,
.card{
  background: var(--f-card) !important;
  border-radius: var(--f-radius) !important;
}

.article-card{
  border: 1px solid rgba(226,232,240,0.95) !important;
}

.card-header{
  background: linear-gradient(90deg, var(--f-primary), var(--f-primary2)) !important;
}

.card-category{
  color: var(--f-primary) !important;
}

.card-title:hover,
.card-title{
  color: inherit !important;
}
.card-title:hover{
  color: var(--f-primary) !important;
}

.card-tag{
  background: rgba(219,234,254,0.8) !important;
  color: #1e40af !important;
}

/* Sidebar 标题与链接 */
.widget-title{
  border-bottom: 2px solid rgba(29,78,216,0.45) !important;
}
.widget a:hover,
.widget a{
  color: inherit !important;
}
.widget a:hover{
  color: var(--f-primary) !important;
}

/* 文章页：标签、正文链接、相关卡 */
.tag{
  background: rgba(219,234,254,0.9) !important;
  color: #1e40af !important;
}
.article-content{
  border: 1px solid rgba(226,232,240,0.95) !important;
}
.article-content a{
  color: var(--f-primary) !important;
}
.related-card{
  border: 1px solid rgba(226,232,240,0.95) !important;
}

/* Message 页：按钮/输入框 */
.form-group input,
.form-group textarea,
.form-group select{
  border: 1px solid rgba(226,232,240,0.95) !important;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
  border-color: rgba(29,78,216,0.8) !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,0.15) !important;
}

.btn-back{
  background: linear-gradient(135deg, var(--f-primary), var(--f-accent)) !important;
}

/* Footer */
footer{
  background: #0f172a !important;
  color: rgba(148,163,184,0.95) !important;
}
footer a{
  color: var(--f-primary) !important;
}

/* ThinkPHP 旧模板类名覆盖（用于 /category/1.html 等） */
.navbar,
.navbar-dark.bg-primary{
  background: linear-gradient(135deg, #0b1222 0%, #1d3c62 60%, rgba(29,78,216,0.95) 100%) !important;
}
.navbar-brand,
.nav-link{
  color: rgba(226,232,240,0.95) !important;
}
.nav-link:hover{
  color: #fff !important;
}
.category-nav{
  background: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(226,232,240,0.95) !important;
}
.category-nav a{
  background: rgba(226,232,240,0.35) !important;
  color: rgba(100,116,139,1) !important;
}
.category-nav a:hover,
.category-nav a.active{
  background: var(--f-primary) !important;
  color: #fff !important;
}
.hot-articles{
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(226,232,240,0.95) !important;
}
.hot-articles h4{
  border-bottom: 2px solid rgba(29,78,216,0.55) !important;
}
.hot-articles a{
  color: inherit !important;
}
.hot-articles a:hover{
  color: var(--f-primary) !important;
}
.ad-box{
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(226,232,240,0.95) !important;
}
.article-card{
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,0.06) !important;
}
.pagination .page-link{
  border: 1px solid rgba(226,232,240,0.95) !important;
  color: var(--f-muted) !important;
  background: rgba(255,255,255,0.8) !important;
}
.pagination .page-item.active .page-link{
  background: var(--f-primary) !important;
  border-color: var(--f-primary) !important;
  color: #fff !important;
}

/* 站点公告（后台可配置） */
.site-announcement{
  background: linear-gradient(90deg, rgba(15,23,42,0.97) 0%, rgba(30,58,95,0.92) 45%, rgba(29,78,216,0.35) 100%) !important;
  color: rgba(241,245,249,0.95) !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(148,163,184,0.22) !important;
}
.site-announcement-inner{
  max-width: 1200px !important;
  margin: 0 auto !important;
}
.site-announcement a{
  color: #fff !important;
  text-decoration: underline !important;
}

/* 文章目录 TOC（桌面：左侧 .article-toc--left + .toc-column；窄屏：正文上方 .article-toc--mobile） */
.article-toc{
  border-radius: var(--f-radius-sm) !important;
}
.article-toc--mobile{
  display: none !important;
}
.article-toc-title{
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
  color: var(--f-text) !important;
}
.article-toc-list{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.article-toc-item{
  margin: 0 !important;
  padding: 5px 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.article-toc-level-3{ padding-left: 12px !important; }
.article-toc-level-4{ padding-left: 22px !important; }
.article-toc-item a{
  color: var(--f-muted) !important;
  text-decoration: none !important;
  display: block !important;
}
.article-toc-item a:hover{
  color: var(--f-primary) !important;
}

@media (max-width: 900px){
  .article-toc--mobile{
    display: block !important;
  }
}