:root{
  --bg:#f2f3f5;
  --card:#fff;
  --line:#e8eaee;
  --txt:#252b35;
  --sub:#667185;
  --muted:#98a2b3;
  --blue:#3a87ea;
  --wrap:1420px;
  --left:248px;
  --right:192px;
  --shell-shift:-34px;
  --shell-pr:62px;
  --shell-pl:4px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--txt);
  font:14px/1.6 Arial,Helvetica,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;border:0}
ul,ol,h1,h2,h3,h4,p{margin:0;padding:0}
ul,ol{list-style:none}
button,input{font:inherit}

.dj-shell,.acg-shell{
  width:min(var(--wrap),calc(100% - 150px));
  margin:0 auto;
  position:relative;
  left:var(--shell-shift);
  padding-left:var(--shell-pl);
  padding-right:var(--shell-pr)
}
.site-main{padding-bottom:24px}
.mobile-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:220;display:none}
.mobile-mask.is-active{display:block}

.site-header{position:sticky;top:0;z-index:180;background:#fff;border-bottom:1px solid var(--line)}
.site-header__inner{height:72px;display:flex;align-items:center;gap:22px}
.site-logo img{width:155px;height:auto}
.site-nav{flex:1;min-width:0}
.site-nav__list{display:flex;align-items:center;gap:4px}
.site-nav__list>li{position:relative}
.site-nav__list>li>a{display:block;height:38px;line-height:38px;padding:0 12px;border-radius:8px;color:#3a4352;font-size:15px}
.site-nav__list>li>a:hover,.site-nav__list>li.is-active>a{color:#111}
.site-subnav{display:none;position:absolute;left:0;top:calc(100% + 5px);min-width:140px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px}
.site-subnav a{display:block;padding:6px 8px;border-radius:6px;font-size:13px;color:#4f5a69}
.site-nav__list>li:hover .site-subnav{display:block}
.site-tools{display:flex;align-items:center;gap:16px}
.tool-ico{
  width:30px;height:30px;display:block;border-radius:50%;opacity:.85
}
.tool-search{background:url("../image/ic_search.png") center/22px 22px no-repeat}
.tool-calendar,.tool-user{position:relative;border:1.5px solid #10141d}
.tool-calendar:before{content:"";position:absolute;left:7px;right:7px;top:12px;height:1.5px;background:#10141d}
.tool-calendar:after{content:"";position:absolute;left:8px;top:6px;width:3px;height:3px;background:#10141d;box-shadow:11px 0 0 #10141d}
.tool-user:before{content:"";position:absolute;left:50%;top:7px;width:9px;height:9px;margin-left:-4.5px;border:1.5px solid #10141d;border-radius:50%}
.tool-user:after{content:"";position:absolute;left:50%;bottom:5px;width:15px;height:7px;margin-left:-7.5px;border:1.5px solid #10141d;border-top:0;border-radius:0 0 8px 8px}

.m-header{display:none}

.layout{
  margin-top:14px;
  display:grid;
  grid-template-columns:var(--left) minmax(0,1fr) var(--right);
  gap:12px;
  align-items:start
}
.layout-inner{margin-top:16px}
.leftbar,.maincol,.rightbar{min-width:0}

.leftbar__inner{position:sticky;top:94px}
.left-card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.left-card+.left-card{margin-top:14px}
.left-usernav{padding:14px}
.btn{
  display:block;height:48px;line-height:48px;text-align:center;border-radius:999px;margin-top:10px;color:#fff;font-size:16px
}
.btn-blue{background:#3e91e8}
.btn-dark{background:#1f2126}
.left-tip{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:12px 12px}
.left-tip h4{font-size:15px}
.left-tip p{margin-top:6px;color:#7c8593;font-size:13px}

.left-forums{padding:12px}
.left-forums h3{font-size:18px;margin-bottom:8px}
.left-forums li a{display:flex;align-items:center;height:38px;padding:0 10px;border-radius:10px;color:#4c5768;font-size:14px}
.left-forums li a i{width:20px;height:20px;border-radius:50%;margin-right:8px;background:#d2d8e1}
.left-forums li:nth-child(1) a i{background:url("../image/forum_1.png") center/20px 20px no-repeat}
.left-forums li:nth-child(2) a i{background:url("../image/forum_2.png") center/20px 20px no-repeat}
.left-forums li:nth-child(3) a i{background:url("../image/forum_3.png") center/20px 20px no-repeat}
.left-forums li:nth-child(4) a i{background:url("../image/forum_4.png") center/20px 20px no-repeat}
.left-forums li:nth-child(5) a i{background:url("../image/forum_5.png") center/20px 20px no-repeat}
.left-forums li:nth-child(6) a i{background:url("../image/forum_6.png") center/20px 20px no-repeat}
.left-forums li:nth-child(7) a i{background:url("../image/forum_7.png") center/20px 20px no-repeat}
.left-forums li:nth-child(8) a i{background:url("../image/forum_8.png") center/20px 20px no-repeat}
.left-forums li:nth-child(9) a i{background:url("../image/forum_9.png") center/20px 20px no-repeat}
.left-forums li:nth-child(10) a i{background:url("../image/forum_10.png") center/20px 20px no-repeat}
.left-forums li a:hover{background:#f3f5f8}

.top-banner{height:112px;border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--line)}
.top-banner__item{position:absolute;inset:0;opacity:0;transition:opacity .3s ease}
.top-banner__item.is-active{opacity:1}
.top-banner__item img{width:100%;height:100%;object-fit:cover}
.top-banner__dots{position:absolute;right:12px;bottom:10px;display:flex;gap:6px}
.top-banner__dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.5)}
.top-banner__dots button.is-active{background:#fff}

.home-tabs{
  margin-top:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px 12px;
  display:flex;
  gap:10px
}
.home-tabs a{height:36px;line-height:36px;padding:0 12px;border-radius:999px;color:#485366;font-size:14px}
.home-tabs a.is-active{background:#f3f5f8;color:#111}

.feed-list{margin-top:10px;display:grid;gap:10px}
.feed-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px}
.feed-card__author{display:flex;align-items:center;gap:8px;color:#6f7a8a;font-size:13px}
.feed-card__author img{width:30px;height:30px;border-radius:50%}
.feed-card h3{margin-top:4px;font-size:16px;line-height:1.32;font-weight:600}
.feed-card p{margin-top:3px;color:#6f7888;font-size:12px;line-height:1.42;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feed-card__gallery{margin-top:6px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:700px}
.feed-card__gallery.g1{grid-template-columns:1fr;max-width:320px}
.feed-card__gallery.g2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:468px}
.feed-card__gallery a{display:block;height:94px;border-radius:8px;overflow:hidden}
.feed-card__gallery.g1 a{height:176px}
.feed-card__gallery.g2 a{height:112px}
.feed-card__gallery img{width:100%;height:100%;object-fit:cover}
.feed-card__meta{margin-top:6px;display:flex;justify-content:space-between;gap:10px;color:#8a94a4;font-size:12px}
.feed-card__meta div{display:flex;align-items:center;gap:10px}
.ico-like,.ico-star,.ico-cmt,.ico-eye,.ico-share,.ico-box{
  display:inline-block;vertical-align:-4px;width:18px;height:18px;border:1.5px solid #7f8897;border-radius:50%
}
.ico-star{transform:rotate(45deg);border-radius:5px}
.ico-cmt,.ico-eye{border-radius:12px}
.ico-share{border-radius:5px;border-top:0;border-left:0;transform:rotate(-45deg)}
.ico-box{border-radius:4px}

.forum-hero{
  background:linear-gradient(90deg,#241212,#1f2f39);
  border-radius:12px;
  padding:12px;
  color:#fff;
  display:flex;
  align-items:center;
  gap:16px
}
.forum-hero img{width:76px;height:76px;border-radius:50%;object-fit:cover}
.forum-hero__meta h1{font-size:20px}
.forum-hero__meta p{margin-top:6px;font-size:14px;color:#cfd8e6}
.forum-hero__meta div{margin-top:8px;display:flex;gap:20px;font-size:14px}
.forum-filter{
  margin-top:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:10px;
  display:flex;gap:8px;flex-wrap:wrap
}
.forum-filter a{height:34px;line-height:34px;padding:0 12px;border-radius:8px;border:1px solid #dce2eb;color:#5f6a7b;font-size:14px}
.forum-filter a.is-active{background:#3d8be8;color:#fff;border-color:#3d8be8}

.thread-rows{margin-top:10px;border:1px solid var(--line);background:#fff;border-radius:12px;overflow:hidden}
.thread-row{display:grid;grid-template-columns:38px minmax(0,1fr) 108px;gap:9px;padding:10px 12px;border-bottom:1px solid var(--line)}
.thread-row:last-child{border-bottom:0}
.thread-row__avatar img{width:38px;height:38px;border-radius:50%}
.thread-row__main h3{font-size:14px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread-row__main p{margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;color:#8c95a3;font-size:13px}
.thread-row__stat{display:flex;flex-direction:column;justify-content:center;gap:6px;color:#7d8898;font-size:13px}
.thread-row__stat span{display:flex;justify-content:flex-end;gap:4px}

.search-head{border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px 12px}
.search-head h1{font-size:20px}
.search-head p{margin-top:3px;color:#8b96a7;font-size:12px}

.thread-layout{
  margin-top:16px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 192px;
  gap:10px
}
.thread-actions{position:sticky;top:100px}
.thread-actions a{
  width:36px;height:36px;border-radius:50%;display:block;margin-bottom:8px;background:#fff;border:1px solid var(--line);
  text-align:center;line-height:36px;color:#606b7d;position:relative
}
.thread-actions a span{position:absolute;right:-8px;top:-6px;min-width:16px;height:16px;line-height:16px;border-radius:8px;background:#d4dae3;color:#4d586a;font-size:11px;padding:0 4px}
.thread-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.thread-card h1{font-size:27px;line-height:1.34}
.thread-meta{margin-top:7px;display:flex;gap:10px;flex-wrap:wrap;color:#8d97a6;font-size:12px}
.entry-content{margin-top:10px;font-size:15px;line-height:1.82;color:#2f3745}
.entry-content img{max-width:100%;height:auto;border-radius:8px;margin:10px 0}
.thread-tags{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.thread-tags a{padding:6px 10px;border-radius:999px;background:#f3f6fa;color:#5e6a7c;font-size:12px}
.comment-box{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.comment-box h2{height:44px;line-height:44px;padding:0 12px;border-bottom:1px solid var(--line);font-size:15px}
.comment-box>div{padding:14px}
.thread-card__head{padding-bottom:10px;border-bottom:1px solid var(--line)}
.thread-card__meta{margin-top:6px;display:flex;gap:10px;color:#8d97a6;font-size:12px}
.thread-card__body{padding-top:12px}

.inner-head{border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px}
.inner-head h1{font-size:24px}
.inner-head p{margin-top:4px;color:#8b96a7;font-size:12px}
.post-list{display:grid;gap:10px}
.post-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.post-main h3{font-size:16px}
.post-main p{margin-top:4px;color:#6f7888}
.post-meta{margin-top:6px;color:#8a94a4}
.tag-board{border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px}
.tag-board__list{display:flex;gap:8px;flex-wrap:wrap}
.tag-board__list a{padding:6px 10px;border-radius:999px;background:#f3f6fa;color:#5e6a7c;font-size:12px}

.rightbar,.thread-side{display:grid;gap:9px}
.rightbar{max-width:192px}
.thread-side{max-width:192px}
.right-card{background:#fff;border:1px solid var(--line);border-radius:12px;max-width:310px}
.card-hd{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;border-bottom:1px solid var(--line)}
.card-hd h3{font-size:14px}
.card-hd a{color:#8a94a4;font-size:12px}
.card-title{height:42px;line-height:42px;padding:0 9px;font-size:14px;border-bottom:1px solid var(--line)}
.profile-card{padding:9px}
.profile-card__top{display:flex;gap:10px;align-items:center}
.profile-card__top img{width:40px;height:40px;border-radius:50%}
.profile-card__top h3{font-size:14px}
.profile-card__top p{margin-top:2px;color:#8e98a7;font-size:12px}
.profile-card__btn{display:block;height:33px;line-height:33px;margin-top:7px;text-align:center;border:1px solid var(--line);border-radius:6px;color:#4a5567;font-size:12px}
.rank-list{padding:5px 8px}
.rank-list li{display:flex;align-items:center;gap:6px;height:34px}
.rank-list em{width:18px;color:#ff6a57;font-style:normal;text-align:center;font-size:16px}
.rank-list a{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#3f4a5b;font-size:13px}
.quick-grid{padding:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.quick-grid a{display:block;text-align:center;padding:8px 3px;border-radius:8px;background:#f6f8fb;color:#4f5a6b;font-size:12px;line-height:1.3}
.hot-article,.dot-list{padding:6px 8px}
.hot-article li,.dot-list li{height:31px;line-height:31px}
.hot-article a,.dot-list a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#4c5668;font-size:13px}

.pager{padding:14px;text-align:center;color:#8f99a8}
.pager a,.pager span{display:inline-block;min-width:32px;height:32px;line-height:32px;padding:0 10px;margin:0 3px;border:1px solid #dfe5ef;border-radius:6px;background:#fff;color:#5e6878;font-size:12px}
.pager .active,.pager a:hover{background:#3d8be8;color:#fff;border-color:#3d8be8}
.site-footer{margin-top:20px;border-top:1px solid var(--line);background:#fff}
.site-footer__inner{height:56px;display:flex;align-items:center;justify-content:space-between;color:#919aa9;font-size:12px}
.backtop{position:fixed;right:14px;bottom:20px;width:40px;height:40px;border-radius:50%;background:#666;opacity:0;pointer-events:none}
.backtop.is-visible{opacity:1;pointer-events:auto}

@media (max-width:1280px){
  .dj-shell,.acg-shell{
    width:min(var(--wrap),calc(100% - 56px));
    left:-10px;
    padding-left:0;
    padding-right:22px
  }
  .layout{grid-template-columns:198px minmax(0,1fr) 178px;gap:9px}
  .thread-layout{grid-template-columns:44px minmax(0,1fr) 178px;gap:8px}
  .rightbar,.thread-side{max-width:178px}
}
@media (max-width:980px){
  .site-header{display:none}
  .m-header{display:block;position:sticky;top:0;z-index:260;background:#fff;border-bottom:1px solid var(--line)}
  .m-header__inner{height:56px;padding:0 12px;display:flex;align-items:center;justify-content:space-between}
  .m-header__btn{width:36px;height:36px;border:0;background:#fff;position:relative;border-radius:8px}
  .m-header__menu span{display:block;height:2px;background:#444;margin:5px 7px}
  .m-header__search:before{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;background:url("../image/ic_search.png") center/14px 14px no-repeat}
  .m-header__logo img{height:28px}

  .dj-shell,.acg-shell{left:0;padding-left:0;padding-right:0}
  .layout,.layout-inner{display:block;margin-top:12px}
  .leftbar{
    position:fixed;left:0;top:0;width:272px;height:100vh;overflow:auto;z-index:280;background:var(--bg);
    transform:translateX(-100%);transition:transform .25s ease;padding:12px;pointer-events:none
  }
  .leftbar.is-open{transform:translateX(0);pointer-events:auto}
  .leftbar__inner{position:static}
  .rightbar,.thread-side{display:none}
  .thread-layout{display:block;margin-top:12px}
  .thread-actions{display:none}
  .thread-card{padding:14px}
  .thread-card h1{font-size:26px}
  .entry-content{font-size:16px}
  .thread-meta,.feed-card__meta,.thread-row__main p,.search-head p,.forum-hero__meta p,.forum-hero__meta div,.left-tip p,.quick-grid a,.rank-list a,.hot-article a,.dot-list a{font-size:12px}
  .feed-card h3,.thread-row__main h3{font-size:15px}
  .search-head h1,.forum-hero__meta h1{font-size:18px}
  .card-title,.card-hd h3,.profile-card__top h3,.left-forums h3{font-size:15px}
  .thread-row{grid-template-columns:42px minmax(0,1fr) 88px}
  .feed-card__gallery{max-width:none}
}

@media (min-width:1200px){
  :root{--right:190px}
  .layout{grid-template-columns:var(--left) minmax(0,1fr) var(--right)}
  .thread-layout{grid-template-columns:48px minmax(0,1fr) var(--right)}
  .rightbar{max-width:310px}
  .thread-side{max-width:310px}
  .profile-card{padding:9px;max-width:310px}
}