@charset "UTF-8";
/* ============================================================
   Xiuno BBS 4.0.4 — 参考 suenen.com 的资源站风格主题
   干净浅底 + Tailwind 蓝 + 药丸分类标签 + 简洁卡片。
   通过 hook 引入；删掉 header.inc.htm 引入行即可还原。
   保留：移动端底部 Tab、凸起发帖键、积分徽标。
   ============================================================ */

:root {
  --xn-primary: #3b82f6;        /* Tailwind Blue-500 主色 */
  --xn-primary-d: #2563eb;
  --xn-primary-lg: rgba(59,130,246,.10);
  --xn-accent: #60a5fa;
  --xn-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --xn-bg: #f8fafc;             /* 参考站浅底 */
  --xn-card: #ffffff;
  --xn-border: #e2e8f0;         /* Tailwind slate-200 */
  --xn-text: #1f2937;
  --xn-text-muted: #64748b;
  --xn-radius: 12px;            /* 参考站圆角(10-14px 区间) */
  --xn-shadow: 0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.03);
  --xn-shadow-hover: 0 6px 18px rgba(15,23,42,.08);
}

body {
  background: var(--xn-bg);
  color: var(--xn-text);
  font-family: "Helvetica Neue", Helvetica, "Microsoft Yahei", "Hiragino Sans GB",
    "WenQuanYi Micro Hei", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--xn-primary); transition: color .15s ease; }
a:hover { color: var(--xn-primary-d); }

/* ---------------------------------- 顶部导航：白底简洁 ------------- */
.navbar.navbar-dark.bg-dark#header {
  background: #fff !important;
  color: var(--xn-text);
  border-bottom: 1px solid var(--xn-border);
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
#header.navbar { padding: .55rem 0; }
#header .navbar-toggler { border-color: rgba(31,41,55,.2); }
#header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(31,41,55,.8)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
#header .nav-link {
  color: var(--xn-text) !important;
  font-weight: 500;
  border-radius: 8px;
  padding: .4rem .8rem;
  margin: 0 2px;
  transition: all .15s ease;
}
#header .nav-link:hover { color: var(--xn-primary) !important; background: var(--xn-primary-lg); }
#header .nav-item.active .nav-link,
#header .nav-link.active {
  color: var(--xn-primary) !important;
  background: var(--xn-primary-lg);
  font-weight: 600;
}
#header .navbar-brand img.logo-2 { border-radius: 6px; }

/* 彩色渐变圆点（点缀） */
#header .nav-item { position: relative; }
#header .nav-item .nav-link::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: 1px;
  background-image: var(--dot, linear-gradient(135deg,#3b82f6,#60a5fa));
  box-shadow: 0 0 0 2px rgba(59,130,246,.14);
}
#header .nav-item:nth-child(3) .nav-link::before { --dot: linear-gradient(135deg,#f59e0b,#fbbf24); }
#header .nav-item:nth-child(4) .nav-link::before { --dot: linear-gradient(135deg,#8b5cf6,#a78bfa); }
#header .nav-item:nth-child(5) .nav-link::before { --dot: linear-gradient(135deg,#10b981,#34d399); }
#header .nav-item:nth-child(6) .nav-link::before { --dot: linear-gradient(135deg,#ec4899,#f472b6); }
#header .nav-item:nth-child(7) .nav-link::before { --dot: linear-gradient(135deg,#3b82f6,#60a5fa); }
#header .nav-item.username .nav-link::before,
#header .nav-item.admin .nav-link::before,
#header .nav-item:last-child .nav-link::before { display: none; }
@media (max-width: 991px) { #header .nav-item .nav-link::before { display: none; } }

/* ---------------------------------- 卡片：简洁白卡 ------------- */
.card {
  background: var(--xn-card);
  border: 1px solid var(--xn-border);
  border-radius: var(--xn-radius);
  box-shadow: var(--xn-shadow);
  margin-bottom: 1.05rem;
  transition: box-shadow .18s ease;
}
.card:hover { box-shadow: var(--xn-shadow-hover); }
.card > .card-header {
  background: #fafbfc;
  border-bottom: 1px solid var(--xn-border);
  border-radius: calc(var(--xn-radius) - 1px) calc(var(--xn-radius) - 1px) 0 0;
  color: var(--xn-text);
  font-weight: 600;
  padding: .8rem 1.1rem;
}
.card-header-tabs .nav-link { border-radius: 6px; font-weight: 500; }
.card-header-tabs .nav-link.active { color: var(--xn-primary); background: var(--xn-primary-lg); border-color: transparent; }

/* ---------------------------------- 主题/帖子条目 ------------- */
.threadlist .thread, li.thread {
  border-bottom: 1px solid #eef2f7;
  padding: .9rem 1rem;
  border-radius: 8px;
  transition: background .15s ease;
}
.threadlist .thread:hover, li.thread:hover { background: #f6fafd; }
.thread .subject a { font-size: 15px; font-weight: 600; color: var(--xn-text); }
.thread .subject a:hover { color: var(--xn-primary); }
.thread .avatar-3, .avatar-3 { border-radius: 50%; box-shadow: var(--xn-shadow); }
.postlist .post { border-bottom: 1px solid #eef2f7; }
.postlist .post:hover { background: #fafbfc; }

/* ---------------------------------- 药丸分类标签 ------------- */
/* 参考站式彩色分类 badge：在帖子 subject 前可加 <span class="xn-tag xn-tag-影视"> */
.xn-tag {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  padding: .32em .62em;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: 2px;
  font-weight: 600;
  white-space: nowrap;
}
.xn-tag-warning { background: #fef3c7; color: #b45309; }      /* 夸克/黄 */
.xn-tag-danger  { background: #fee2e2; color: #b91c1c; }      /* 迅雷·百度/红 */
.xn-tag-secondary{ background: #e2e8f0; color: #475569; }     /* 分类/灰 */
.xn-tag-pink    { background: #fce7f3; color: #be185d; }      /* 新/粉 */
.xn-tag-primary { background: #dbeafe; color: #1d4ed8; }      /* 默认/蓝 */
.xn-tag-green   { background: #d1fae5; color: #047857; }
.xn-tag-purple  { background: #ede9fe; color: #6d28d9; }

/* ---------------------------------- 按钮：胶囊 · 蓝 ------------- */
.btn { border-radius: 999px !important; }
.btn-primary {
  background-image: var(--xn-gradient);
  border: none;
  box-shadow: 0 3px 10px rgba(59,130,246,.28);
  font-weight: 600;
  transition: all .15s ease;
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 5px 16px rgba(59,130,246,.35); }
.btn-outline-primary { color: var(--xn-primary); border-color: rgba(59,130,246,.4); }
.btn-outline-primary:hover { background: var(--xn-primary); border-color: var(--xn-primary); }
.btn-secondary { background: var(--xn-primary-lg); border: none; color: var(--xn-primary); }
.btn-secondary:hover { background: rgba(59,130,246,.16); color: var(--xn-primary-d); }

/* ---------------------------------- 分页 / 面包屑 ------------- */
.pagination .page-link {
  color: var(--xn-primary);
  border-radius: 6px !important;
  margin: 0 2px;
  border: 1px solid var(--xn-border);
}
.pagination .page-item.active .page-link { background-image: var(--xn-gradient); border-color: transparent; color: #fff; }
.breadcrumb {
  background: #fff !important;
  border: 1px solid var(--xn-border);
  border-radius: 10px;
  box-shadow: var(--xn-shadow);
}

/* ---------------------------------- 徽标 / 表单 ------------- */
.badge { border-radius: 6px; font-weight: 500; }
.badge-light { background: var(--xn-primary-lg); color: var(--xn-primary); }
.text-grey { color: var(--xn-text-muted) !important; }
.text-muted { color: var(--xn-text-muted) !important; }
.form-control { border: 1px solid var(--xn-border); border-radius: 10px; background: #fff; }
.form-control:focus { border-color: var(--xn-primary); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
#message { height: 2.5rem; border-radius: 10px; }

/* ---------------------------------- 引用 ------------- */
.blockquote, li.quote {
  background: var(--xn-primary-lg);
  border-left: 3px solid var(--xn-primary);
  border-radius: 8px;
}

/* ---------------------------------- 首页侧栏站点卡 ------------- */
.card-site-info .card-footer {
  background: #fafbfc;
  border-top: 1px solid var(--xn-border);
  border-radius: 0 0 calc(var(--xn-radius) - 1px) calc(var(--xn-radius) - 1px);
}
.card-site-info h5 { font-weight: 700; }
#footer { color: var(--xn-text-muted); }

/* ---------- 移动端底部 Tab 导航（参考 suenen 布局） ---------- */
.xn-bottomnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 55px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 -2px 14px rgba(15,23,42,.06);
  z-index: 1050;
  border-top: 1px solid var(--xn-border);
}
.xn-bottomnav-inner { height: 100%; display: flex; align-items: stretch; max-width: 480px; margin: 0 auto; }
.xn-btm-item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--xn-text-muted);
  text-decoration: none !important;
  transition: color .15s ease;
}
.xn-btm-item i { font-size: 20px; line-height: 1; margin-bottom: 3px; }
.xn-btm-item span { font-size: 11px; }
.xn-btm-item.active, .xn-btm-item:active { color: var(--xn-primary); }
.xn-btm-fab { flex: 0 0 74px; position: relative; display: flex; align-items: center; justify-content: center; }
.xn-btm-post {
  width: 48px; height: 48px; border-radius: 50%;
  background-image: var(--xn-gradient);
  color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 6px 18px rgba(59,130,246,.40);
  margin-top: -18px;
  transition: transform .18s ease;
}
.xn-btm-post:hover { transform: translateY(-2px) scale(1.04); }
@media (min-width: 992px) { .xn-bottomnav { display: none !important; } }
@media (max-width: 991px) {
  body { padding-bottom: 60px; }
  .xn-fab { display: none !important; }
}

/* ---------------------------------- 移动端菜单/列表润色 ------------- */
@media (max-width: 991px) {
  .navbar-collapse {
    background: #fff;
    border: 1px solid var(--xn-border);
    border-radius: 12px;
    margin-top: .6rem;
    padding: .4rem .6rem;
    box-shadow: var(--xn-shadow-hover);
  }
  #nav .nav-link { border-radius: 10px !important; padding: .68rem .9rem !important; margin: 2px 0; }
}
@media (max-width: 576px) {
  .threadlist .thread, li.thread { padding: .72rem .5rem; border-radius: 10px; }
  .thread .subject a { font-size: 14.5px; }
  .card { border-radius: 11px; }
}

/* ---------------------------------- 深色模式 ------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --xn-bg: #0f172a;
    --xn-card: #1e293b;
    --xn-border: rgba(255,255,255,.08);
    --xn-text: #e2e8f0;
    --xn-text-muted: #94a3b8;
    --xn-shadow: 0 1px 3px rgba(0,0,0,.4);
    --xn-shadow-hover: 0 8px 24px rgba(0,0,0,.5);
  }
  body { background-image: radial-gradient(900px 340px at 85% -8%, rgba(59,130,246,.10), transparent 60%); }
  .navbar.navbar-dark.bg-dark#header { background: #111827 !important; border-bottom-color: rgba(255,255,255,.06); }
  #header .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(226,232,240,.85)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
  #header .nav-link { color: var(--xn-text) !important; }
  #header .nav-item .nav-link::before { box-shadow: 0 0 0 2px rgba(59,130,246,.18); }
  #header .nav-item.active .nav-link { background: rgba(59,130,246,.18); }
  .card { background: var(--xn-card); border-color: var(--xn-border); }
  .card > .card-header { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); }
  .card-site-info .card-footer { background: rgba(255,255,255,.03); }
  .threadlist .thread, li.thread { border-color: rgba(255,255,255,.05); }
  .threadlist .thread:hover, li.thread:hover { background: rgba(59,130,246,.08); }
  .breadcrumb { background: var(--xn-card) !important; border-color: var(--xn-border); }
  .form-control { background: #111827; border-color: rgba(255,255,255,.1); color: var(--xn-text); }
  .xn-bottomnav { background: rgba(17,24,39,0.85) !important; border-top-color: rgba(255,255,255,.06); }
  .navbar-collapse { background: #1e293b !important; border-color: rgba(255,255,255,.06); }
}

/* ============================================================
   首页"精华帖子"横向滑动卡片
   ============================================================ */
.digest-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 6px 12px 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.digest-scroll::-webkit-scrollbar { height: 6px; }
.digest-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.digest-card {
  flex: 0 0 250px;
  max-width: 70vw;
  background: #fff;
  border: 1px solid var(--xn-border);
  border-left: 3px solid #f59e0b;
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: var(--xn-shadow);
  transition: box-shadow .18s ease, transform .18s ease;
  cursor: pointer;
}
.digest-card:hover { box-shadow: var(--xn-shadow-hover); transform: translateY(-3px); }
.digest-card-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--xn-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 41px;
}
.digest-card-title a { color: inherit; }
.digest-card-title a:hover { color: var(--xn-primary); }
.digest-tags { margin: 8px 0 10px; min-height: 18px; }
.digest-meta { color: var(--xn-text-muted); }
@media (max-width: 576px) {
  .digest-card { flex-basis: 200px; }
  .digest-card-title { font-size: 13.8px; min-height: 38px; }
}

/* ============================================================
   采集帖正文：网盘按钮 + 内嵌视频播放器
   ============================================================ */
.xn-pan-btn { border-radius: 999px !important; font-weight: 600; padding: .32rem .95rem; display:inline-block; box-shadow: 0 2px 6px rgba(15,23,42,.10); margin:0; }
.xn-pan-btn i { font-style: normal; }
.xn-video { position: relative; width: 100%; margin: 10px 0; border-radius: 12px; overflow: hidden; background: #000; box-shadow: var(--xn-shadow); }
.xn-video video { display:block; width:100%; max-height:420px; background:#000; }

/* 资源区：网盘按钮整齐排版 */
.xn-pans {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--xn-border);
  border-left: 4px solid var(--xn-primary);
  border-radius: 12px;
  background: #fafbfc;
}
.xn-pans-title { font-weight: 700; margin-bottom: 10px; color: var(--xn-text); font-size: 14px; }
.xn-pans-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.xn-pans-grid .xn-pan-btn { margin: 0 !important; }
@media (prefers-color-scheme: dark) {
  .xn-pans { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }
  .xn-pans-title { color: var(--xn-text); }
}


/* ============================================================
   移动端"分类"抽屉（版块/精华/搜索）
   ============================================================ */
.xn-catdrawer { position: fixed; inset: 0; z-index: 1200; visibility: hidden; transition: visibility .25s; }
.xn-catdrawer-mask { position: absolute; inset: 0; background: rgba(15,23,42,.45); opacity: 0; transition: opacity .25s; }
.xn-catdrawer-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--xn-card, #fff);
  border-radius: 20px 20px 0 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,.28,1);
  max-height: 76vh;
  overflow-y: auto;
  box-shadow: 0 -8px 32px rgba(15,23,42,.12);
}
.xn-catdrawer.open { visibility: visible; }
.xn-catdrawer.open .xn-catdrawer-mask { opacity: 1; }
.xn-catdrawer.open .xn-catdrawer-panel { transform: translateY(0); }
.xn-catdrawer-head {
  font-size: 15px; font-weight: 700; color: var(--xn-text, #1f2937);
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; border-bottom: 1px solid var(--xn-border, #e2e8f0); margin-bottom: 12px;
}
.xn-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.xn-cat-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 6px; border-radius: 12px;
  background: rgba(59,130,246,.06);
  color: var(--xn-text, #1f2937); text-decoration: none !important; font-size: 13px; font-weight: 500;
  transition: background .15s;
}
.xn-cat-item:active { background: rgba(59,130,246,.14); color: var(--xn-primary, #3b82f6); }
@media (prefers-color-scheme: dark) {
  .xn-catdrawer-panel { background: #1e293b; }
  .xn-cat-item { background: rgba(59,130,246,.12); color: #e2e8f0; }
}