:root{
  /* ===== Neo Dark + Neon Pink ===== */
  --bg:#07060a;
  --bg2:#0b0a10;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --text:#f3f4f6;
  --muted:rgba(243,244,246,.66);
  --muted2:rgba(243,244,246,.44);
  --line:rgba(255,255,255,.10);

  --brand:#ff2bd6;              /* 荧光粉主色 */
  --brand2:#ff68e6;             /* 粉色高光 */
  --danger:#ff3357;

  --shadow: 0 12px 30px rgba(0,0,0,.45);
  --shadow2: 0 8px 22px rgba(0,0,0,.35);

  --radius:18px;
  --radius2:8px;
  --blur: 14px;

  --glow: 0 0 0 1px rgba(255,43,214,.25), 0 0 22px rgba(255,43,214,.22);
  --glow-strong: 0 0 0 1px rgba(255,43,214,.35), 0 0 34px rgba(255,43,214,.35);

  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;
  background:
    radial-gradient(900px 420px at 18% -10%, rgba(255,43,214,.18), transparent 55%),
    radial-gradient(700px 420px at 82% 10%, rgba(255,43,214,.12), transparent 60%),
    radial-gradient(900px 520px at 50% 105%, rgba(255,43,214,.10), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

a{color:inherit;text-decoration:none;}
.app{min-height:100vh;padding-bottom:86px;}

/* ===== Scrollbar (optional) ===== */
::-webkit-scrollbar{height:10px;width:10px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px;}
::-webkit-scrollbar-track{background:transparent;}

/* ===== Topbar ===== */
.topbar{
  position:sticky;top:0;z-index:20;
  padding:12px 12px 10px;
  background:rgba(8,7,12,.78);
  backdrop-filter: blur(var(--blur));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .title {
  font-size: 16px;
  font-weight: 800;
  margin: 0 auto; /* 上下0，左右auto实现水平居中 */
  letter-spacing: .2px;
  display: block; /* 确保是块级元素 */
  width: fit-content; /* 宽度适应内容 */
  /* 或者设置固定宽度：width: 200px; */
}
.container{padding:12px;}

/* ===== Segmented Tabs (首页分类一/二) ===== */
.segment{
  display:flex;gap:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;padding:6px;
  box-shadow: var(--shadow2);
}
.segment a{
  flex:1;text-align:center;
  padding:10px 0;border-radius:999px;
  font-size:14px;color:var(--muted);
  transition: .2s ease;
}
.segment a.active{
  color:#0a0610;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: var(--glow-strong);
  font-weight:900;
}

/* ===== Subtabs (动态分类bar) ===== */
.subtabs{
  display:flex;gap:8px;overflow:auto;
  padding:10px 2px;
}
.subtabs a{
  white-space:nowrap;
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  font-size:13px;
  transition: .2s ease;
}
.subtabs a:hover{border-color:rgba(255,43,214,.28);}
.subtabs a.active{
  border-color:rgba(255,43,214,.55);
  color:var(--brand);
  box-shadow: var(--glow);
  font-weight:800;
}

/* ===== Card ===== */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.card:hover{
  border-color:rgba(255,43,214,.22);
}

/* ===== List Card (分类一、后台列表用) ===== */
.list-card{
  display:flex;gap:12px;
  padding:4px;align-items:center;
  margin-bottom:10px;
}
.list-card .cover{
  width:64px;height:64px;border-radius:8px;
  object-fit:cover;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.list-card .mid{flex:1;min-width:0;}
.list-card .name{
  font-weight:900;font-size:15px;margin:0 0 4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.list-card .meta{
  font-size:12px;color:var(--muted);margin-bottom:4px;
}
.list-card .intro{
  font-size:13px;color:rgba(243,244,246,.78);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-size:13px;font-weight:800;
  transition: .2s ease;
  user-select:none;
}
.btn:hover{
  transform: translateY(-1px);
  border-color:rgba(255,43,214,.25);
}
.btn:active{transform: translateY(0);}
.btn.primary{
  color:#0a0610;
  border-color:rgba(255,43,214,.55);
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: var(--glow-strong);
}
.btn.primary:hover{box-shadow: var(--glow-strong);}
.btn.block{width:100%;}
.btn.danger{
  color:#0a0610;
  border-color:rgba(255,51,87,.65);
  background: linear-gradient(135deg, #ff3357, #ff6b86);
  box-shadow: 0 0 0 1px rgba(255,51,87,.25), 0 0 22px rgba(255,51,87,.22);
}

/* ===== Grid ===== */
.grid2{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}

/* ===== Square Card (分类二、小卡) ===== */
.square-card{padding:10px;position:relative;}
.square-card .img{
  width:100%;
  aspect-ratio:1/1;
  border-radius:16px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
}
.square-card .t{
  margin:8px 0 6px;
  font-weight:900;font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.square-card .b{
  display:flex;justify-content:space-between;gap:8px;
  color:var(--muted);font-size:12px;
}

/* ===== Badge (免费角标) ===== */
.badge{
  position:absolute;left:10px;top:10px;
  padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:900;
  color:#0a0610;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: var(--glow);
}

/* ===== Detail / Markdown ===== */
.detail-wrap{padding:12px 12px 92px;}
.md h1,.md h2,.md h3{margin:14px 0 8px;}
.md p{line-height:1.85;color:rgba(243,244,246,.86);}
.md a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;}
.md .md-code{
  background:rgba(10,10,16,.9);
  color:#e5e7eb;
  border-radius:16px;
  padding:12px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
}

/* ===== Sticky bottom (详情页底部吸附按钮容器) ===== */
.sticky-bottom{
  position:fixed;left:0;right:0;bottom:86px;
  padding:10px 12px;
  background:rgba(8,7,12,.80);
  backdrop-filter: blur(var(--blur));
  border-top:1px solid rgba(255,255,255,.08);
}

/* ===== Tabbar ===== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  height:86px;
  background:rgba(8,7,12,.86);
  backdrop-filter: blur(var(--blur));
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
}
.tabbar .tab{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;
  color:var(--muted);
  font-size:12px;
  transition:.2s ease;
}
.tabbar .tab .ico{font-size:18px;}
.tabbar .tab.active{
  color:var(--brand);
  font-weight:900;
  text-shadow: 0 0 16px rgba(255,43,214,.35);
}

/* ===== Searchbar ===== */
.searchbar{
  display:flex;gap:8px;align-items:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;padding:10px 12px;
  box-shadow: var(--shadow2);
}
.searchbar input{
  flex:1;border:none;outline:none;
  font-size:14px;background:transparent;
  color:var(--text);
}
.searchbar input::placeholder{color:rgba(243,244,246,.35);}

/* ===== Banner ===== */
.banner{
  margin-top:10px;overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
}
.banner img{
  width:100%;display:block;object-fit:cover;max-height:160px;
  filter: saturate(1.1) contrast(1.05);
}

/* ===== Notice (滚动公告) ===== */
.notice{
  margin-top:10px;padding:10px 12px;
  overflow:hidden;position:relative;
  border-radius:18px;
}
.notice .row{display:flex;gap:10px;align-items:center;}
.notice .tag{
  font-weight:1000;
  color:var(--brand);
  text-shadow: 0 0 16px rgba(255,43,214,.35);
}
.notice .marquee{white-space:nowrap;overflow:hidden;flex:1;}
.notice .marquee span{
  display:inline-block;padding-left:100%;
  animation:marquee 14s linear infinite;
  color:rgba(243,244,246,.82);
}
@keyframes marquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(-100%);}
}

/* ===== Video cards ===== */
.video-big{margin-top:10px;padding:10px;}
.video-big .thumb{
  width:100%;
  aspect-ratio:16/9;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  object-fit:cover;
  background:rgba(255,255,255,.06);
  display:block;
  filter:saturate(1.08) contrast(1.05);
}
.video-name{margin:10px 2px 6px;font-weight:1000;font-size:15px;}
.divider{height:1px;background:rgba(255,255,255,.08);margin:10px 0;}

.video-meta-overlay{position:relative;}
.corner{
  position:absolute;bottom:10px;left:12px;
  background:rgba(8,7,12,.72);
  color:rgba(243,244,246,.92);
  border-radius:999px;padding:4px 10px;
  font-size:12px;border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.corner.right{left:auto;right:12px;}
.corner.mid{left:12px;right:12px;text-align:center;bottom:10px;}

.video-small .thumb{aspect-ratio:16/9;}
.video-small .t{margin-top:8px;}

/* ===== Player ===== */
.player-wrap{padding:12px 12px 98px;}
.player-top{display:flex;align-items:center;gap:10px;}
.back{
  padding:8px 10px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}
.player-title{
  font-weight:1000;font-size:16px;
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.video-box{
  margin-top:12px;position:relative;
  border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#000;
  box-shadow: var(--shadow2);
}
.video-box video{width:100%;display:block;max-height:56vh;}
.video-blur video{filter: blur(14px) grayscale(.15) brightness(.75) contrast(1.05);}

.video-mask{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:16px;text-align:center;
  background:rgba(0,0,0,.55);
}
.video-mask .panel{
  width:min(420px, 100%);
  background:rgba(10,10,16,.92);
  color:rgba(243,244,246,.92);
  border-radius:20px;
  padding:14px 14px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}
.video-mask .panel .btn{margin-top:10px;}

.small-muted{
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
  margin-top:10px;
}

/* ===== Inputs / Textarea / Select unify ===== */
input,textarea,select{
  color:var(--text);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:rgba(255,43,214,.55);
  box-shadow: var(--glow);
}

/* ===== Reduce motion support ===== */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}

 /* ===== Icon ===== */
.ico svg{display:block;}
.ico{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:0;
    color: currentColor;
}
.ico.inline{
    vertical-align:middle;
    margin-right:6px;
    transform: translateY(-.5px);
}
    
    /* 点赞区域更稳 */
.meta-like{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

/* ===========================
   Stability Patch (Neo Dark)
   =========================== */

/* 1) 页面底板：隔离透明叠层渲染问题 */
.page{
  position: relative;
  min-height: 100vh;
  isolation: isolate;          /* 关键：隔离合成层 */
}
.page::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg);       /* 用纯底色兜底 */
}

/* 2) 控制 blur：仅在支持时启用，避免部分设备“脏块” */
.topbar,
.tabbar,
.sticky-bottom{
  background: rgba(8,7,12,.92);  /* 更不透明，减少透底干扰 */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))){
  .topbar,
  .tabbar,
  .sticky-bottom{
    background: rgba(8,7,12,.78);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* 3) banner/video 缩略图：避免图片未加载时出现“破图图标/白块” */
.banner,
.video-big .thumb,
.video-small .thumb,
.square-card .img{
  display:block;
  overflow:hidden;
  background: rgba(255,255,255,.06);
}

/* 确保 img 不会产生 inline baseline 的空隙 */
.banner img,
.video-big .thumb,
.video-small .thumb,
.square-card .img{
  display:block;
}

/* 图片载入失败时隐藏，避免残留 */
img[onerror]{
  -webkit-user-drag: none;
}

/* 4) 滚动抖动/闪烁：让关键卡片进入稳定合成层 */
.card,
.banner,
.notice,
.video-meta-overlay{
  transform: translateZ(0);
  will-change: transform;
}

/* 5) 角标/浮层：固定层级，避免被合成层“吞” */
.badge,
.corner{
  z-index: 2;
}

/* 6) marquee 文本：避免某些设备抖动 */
.notice .marquee{
  transform: translateZ(0);
  will-change: transform;
}

/* 7) 兜底：禁用过度滤镜导致的噪点（你之前有 filter:saturate/contrast） */
.banner img,
.video-big .thumb,
.video-small .thumb{
  filter: none !important;
}

/* ===== Fix: video-big 上下细框/露底 ===== */
a.card{display:block;}                 /* 避免 a 默认 inline 导致怪异渲染 */

.video-big{
  padding: 10px;                       /* 保留外层间距 */
}

.video-big .video-meta-overlay{
  position: relative;
}

/* 封面容器：固定比例 + 裁切 + 圆角 + 统一边框 */
.video-big .thumb-box{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transform: translateZ(0);            /* 合成层稳定 */
}

/* 图片满铺：彻底消除 1px 缝隙 */
.video-big .thumb-box .thumb{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* 关键：去掉 img 自身的 border/radius，否则容易出现双边框/露边 */
  border: 0 !important;
  border-radius: 0 !important;
}

/* 角标在容器里定位 */
.video-big .thumb-box .badge,
.video-big .thumb-box .corner{
  position: absolute;
  z-index: 2;
}