/* GameBox 前台样式(朴素版) */
:root{
  --bg:#f2f3f5;
  --card:#fff;
  --line:#e3e5e8;
  --txt:#333;
  --muted:#888;
  --faint:#aaa;
  --blue:#2a7fd4;
  --red:#d9534f;
  --green:#28a745;
  --gold:#c8a05a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.7 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue)}
button,input,textarea,select{font:inherit}
button{color:inherit;cursor:pointer}
img{max-width:100%}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.msg{background:#f0f8ff;border:1px solid #b6d8f2;border-radius:4px;padding:8px 12px;color:#235f8f}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ===== Header ===== */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.header-in{display:flex;align-items:center;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{width:36px;height:36px;border-radius:6px;background:var(--blue);color:#fff;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center}
.brand-name{font-size:17px;font-weight:700;line-height:1.15}
.brand-name small{display:block;font-size:9px;color:var(--faint);font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin-top:3px}
.mainnav{display:flex;gap:2px;align-items:center;flex:1;min-width:0;flex-wrap:nowrap}
.mainnav a{padding:8px 8px;font-size:13px;color:#555;white-space:nowrap}
.mainnav a:hover,.mainnav a.active{color:var(--blue)}
.drop{position:relative}
.drop-menu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.1);min-width:150px;padding:5px;z-index:200}
.drop:hover .drop-menu,.drop.open .drop-menu{display:block}
.drop-menu a{display:block;padding:7px 12px;border-radius:4px}
.drop-menu a:hover{background:#f5f6f8}
/* 下拉里命中的分类(不在顶栏一级, 没有下划线) → 用底色+蓝字标出来 */
.drop-menu a.active{background:#f5f6f8;color:var(--blue);font-weight:600}
sup{font-size:9px;font-style:normal;margin-left:3px}
.sup-new{color:var(--red)}
.header-right{display:flex;align-items:center;gap:8px;flex:none}
.icon-btn{background:none;border:1px solid transparent;border-radius:4px;font-size:16px;padding:5px 8px}
.icon-btn:hover{background:#f5f6f8;border-color:var(--line)}
.btn-login{background:#fff;border:1px solid var(--line);border-radius:4px;padding:6px 14px;font-size:13px}
.btn-login:hover{border-color:var(--blue);color:var(--blue)}
.btn-reg{background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:4px;padding:7px 14px;font-size:13px}
.btn-reg:hover{background:#2168ad;color:#fff}
.btn-vip{background:#f0c14b;border:1px solid #d9a92e;border-radius:4px;padding:7px 12px;font-size:12px;font-weight:700;color:#5a4410}
.btn-vip:hover{background:#e6b433;color:#4a3809}
.avatar{width:32px;height:32px;border-radius:50%;background:#8a8f96;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.avatar.big{width:46px;height:46px;font-size:20px;flex:none}
.uname{font-weight:600;font-size:13px}
.ulevel{font-size:10px;border-radius:3px;padding:2px 6px;white-space:nowrap}
.lv0{background:#eee;color:#666}
.lv1{background:#fdf3d8;color:#a5782a}
.lv2{background:#e2ecf7;color:#3572b0}
.header-search{display:none;border-top:1px solid var(--line);background:#fff}
.header-search.open{display:block}
.header-search>form{max-width:1200px;width:100%;margin:0 auto;padding:8px 20px;display:flex;gap:8px}
.header-search input{flex:1;min-width:0;border:1px solid var(--line);border-radius:4px;padding:8px 12px;outline:none;font-size:14px}
.header-search input:focus{border-color:var(--blue)}
.header-search button{background:var(--blue);color:#fff;border:0;border-radius:4px;padding:8px 20px}
.nav-toggle{display:none;background:#fff;border:1px solid var(--line);border-radius:4px;padding:5px 10px;font-size:16px}

/* ===== Hero ===== */
.hero{background:#fff;border-bottom:1px solid var(--line);padding:40px 0;text-align:center}
.hero-kicker{font-size:12px;color:var(--muted);letter-spacing:.1em}
.hero h1{margin:8px 0 20px;font-size:30px;font-weight:700;line-height:1.3}
.hero-search{display:flex;max-width:620px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:4px;padding:4px}
.hero-search input{flex:1;min-width:0;border:0;outline:none;padding:10px 14px;font-size:14px;background:transparent}
.hero-search button{border:0;border-radius:4px;background:var(--blue);color:#fff;padding:9px 22px;font-size:13px}
.hero-search button:hover{background:#2168ad}
.hero-hot{margin-top:14px;font-size:12px;color:var(--muted)}
.hero-hot a{color:var(--blue);margin:0 5px}
.notice{margin:12px auto;background:#fffbe6;border:1px solid #f0e0a0;color:#8a6d17;border-radius:4px;padding:8px 14px;font-size:12px}
.feat5{display:grid;grid-template-columns:repeat(5,1fr);margin:16px auto;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff}
.feat5 a{border-right:1px solid var(--line);padding:14px 10px;text-align:center;display:block}
.feat5 a:last-child{border-right:0}
.feat5 a:hover{background:#f7f8fa;color:var(--blue)}
.feat5 i{font-style:normal;font-size:20px}
.feat5 b{display:block;font-size:13px}
.feat5 b em{font-style:normal;color:var(--red);border:1px solid var(--red);border-radius:50%;width:16px;height:16px;display:inline-block;font-size:10px;line-height:14px;margin-left:4px}
.feat5 small{color:var(--muted);font-size:11px}

/* ===== 布局与侧栏 ===== */
.layout{display:flex;gap:20px;align-items:flex-start;margin-top:20px}
.maincol{flex:1;min-width:0}
.sidebar{width:280px;flex:none}
.widget{background:#fff;border:1px solid var(--line);border-radius:4px;padding:14px;margin-bottom:14px}
.w-title{font-weight:700;font-size:13px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.user-widget .uw-top{display:flex;gap:10px;align-items:center}
.uw-hi{text-align:center;font-size:15px;font-weight:700;margin:6px 0 12px}
.uw-btns{display:flex;gap:8px;margin-top:12px}
.uw-btns>*{flex:1;text-align:center}
.btn-red{background:var(--red);color:#fff;border:1px solid var(--red);border-radius:4px;padding:8px 12px;font-size:13px;display:inline-block;text-align:center}
.btn-red:hover{background:#c9302c;border-color:#c9302c;color:#fff}
.btn-line{border:1px solid var(--line);border-radius:4px;padding:7px 12px;font-size:13px;background:#fff;display:inline-block;text-align:center;color:var(--txt)}
.btn-line:hover{border-color:var(--blue);color:var(--blue)}
.mini-post{display:flex;gap:10px;margin-bottom:10px;align-items:center}
.mini-thumb{width:80px;height:50px;flex:none;border-radius:3px;background:#eef0f2;color:#999;display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden}
.mini-thumb img{width:100%;height:100%;object-fit:cover}
.mini-info b{display:block;font-size:12px;line-height:1.4}
.mini-info small{font-size:10px;color:var(--muted)}
.tagbox a{display:inline-block;background:#f2f3f5;border:1px solid var(--line);border-radius:3px;padding:2px 8px;margin:0 5px 6px 0;font-size:11px;color:#666}
.tagbox a:hover{border-color:var(--blue);color:var(--blue)}
.arch{list-style:none;margin:0;padding:0;font-size:12px}
.arch li{padding:4px 0;border-bottom:1px solid var(--line)}

/* ===== 分类页签与列表 ===== */
.tabs{display:flex;gap:4px;flex-wrap:nowrap;overflow:hidden;border-bottom:1px solid var(--line);padding:4px 0;margin:0 0 14px;scroll-behavior:smooth}
.tabs a{flex:none;padding:6px 12px;border-radius:3px;font-size:12px;color:#555}
.tabs-wrap{position:relative}
.tab-arrow{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:#fff;color:#333;font-size:16px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.tab-arrow.show{display:block}
.tab-arrow.left{left:-8px}
.tab-arrow.right{right:-8px}
.tabs a:hover{color:var(--blue)}
.tabs a.on{background:var(--blue);color:#fff}
.post{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:12px;margin-bottom:10px}
.post:hover{border-color:#c9ccd1;background:#fcfcfd}
.thumb{width:210px;flex:none;border-radius:3px;overflow:hidden;background:#eef0f2;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:38px;color:#b6bbc1}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post-body{flex:1;min-width:0;align-self:center}
.post-title{font-size:17px;line-height:1.45;margin:0 0 7px;font-weight:600}
.post-title a:hover{color:var(--blue)}
.flag-top{background:var(--red);color:#fff;font-size:9px;border-radius:2px;padding:2px 6px;margin-left:8px;vertical-align:3px}
.flag-vip{background:#fdf3d8;border:1px solid #e8d08a;color:#a5782a;font-size:9px;border-radius:2px;padding:2px 6px;margin-left:8px;white-space:nowrap;vertical-align:3px}
.flag-vip.dia{color:#3572b0;border-color:#b6d0ea;background:#e8f0f9}
.excerpt{color:#777;font-size:12px;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-meta{display:flex;gap:12px;align-items:center;font-size:11px;color:var(--muted);flex-wrap:wrap}
.catlink{color:#888}
.catlink:hover{color:var(--blue)}
.pager{display:flex;gap:8px;justify-content:center;align-items:center;margin:20px 0}
.pager a{background:#fff;border:1px solid var(--line);border-radius:4px;padding:6px 14px;font-size:12px}
.pager a:hover{border-color:var(--blue);color:var(--blue)}
.pager .cur{background:var(--blue);color:#fff;border-radius:4px;padding:6px 12px}
.crumb{font-size:11px;color:var(--muted);margin:10px 0 14px}
.crumb a{color:#888}
.crumb a:hover{color:var(--blue)}

/* ===== 文章详情 ===== */
.article{background:#fff;border:1px solid var(--line);border-radius:4px;padding:24px;margin-bottom:14px}
.atitle{font-size:26px;line-height:1.4;margin:0 0 14px;font-weight:700}
.author-row{display:flex;gap:10px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.author-info{flex:1}
.follow-btn{margin-left:auto}
.coverimg{display:block;width:100%;max-height:440px;object-fit:cover;border-radius:3px;margin:8px 0 18px}
.detail-head{margin-bottom:12px}
.detail-title{font-size:24px;font-weight:700;line-height:1.4}
.entry{font-size:15px;line-height:1.9;overflow-wrap:anywhere}
.entry p{margin:0 0 1.1em}
.entry img{height:auto;border-radius:3px}
.paybox{border:1px solid #e8d08a;background:#fffdf5;border-radius:4px;padding:20px;text-align:center;margin:20px 0}
.paybox.ok{border-color:#b7e0c0;background:#f3fbf5;text-align:left}
.paybox h3{color:#a5782a;margin:4px 0 10px}
.paybox.ok h3{color:var(--green)}
.btn-gold{background:#f0c14b;border:1px solid #d9a92e;border-radius:4px;padding:9px 24px;font-weight:700;color:#5a4410;font-size:13px;display:inline-block}
.btn-gold:hover{background:#e6b433;color:#4a3809}
.copyright{background:#f7f8f9;border:1px solid var(--line);border-radius:3px;padding:12px 14px;font-size:11px;color:#777;margin:16px 0}
.copyright b{color:#444}
.theend{text-align:center;color:var(--faint);font-size:10px;letter-spacing:.2em;margin:14px 0}
.tagrow a{margin-right:8px;color:var(--blue);font-size:12px}
.likerow{display:flex;gap:10px;margin:14px 0}
.like-btn,.fav-btn{border:1px solid var(--line);background:#fff;border-radius:4px;padding:7px 16px;font-size:12px}
.like-btn:hover,.fav-btn:hover{border-color:var(--blue);color:var(--blue)}
.like-btn.liked{background:#e8f0f9;border-color:var(--blue);color:var(--blue)}
.fav-btn.faved{background:#fdf3d8;border-color:var(--gold);color:#a5782a}
.author-card{display:flex;gap:12px;align-items:center;background:#f7f8f9;border:1px solid var(--line);border-radius:4px;padding:14px;margin:14px 0}
.author-card>div{flex:1}
.pn{display:flex;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:12px 14px;font-size:12px;margin-bottom:14px}
.pn a{color:var(--blue)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rel-grid a{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;display:block;font-size:12px}
.rel-grid a:hover{border-color:var(--blue);color:var(--blue)}
.rel-thumb{display:block;height:96px;background:#eef0f2;color:#b6bbc1;font-size:26px;text-align:center;line-height:96px;overflow:hidden}
.rel-thumb img{width:100%;height:100%;object-fit:cover}
.rel-grid b{display:block;padding:8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== 会员、表单与账户 ===== */
.plan{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:15px 17px;margin:10px 0}
.plan:hover{border-color:#c9ccd1}
.plan.hot{border-color:#e8d08a;background:#fffdf5}
.plan-name{font-size:16px;font-weight:700}
.plan-price{color:var(--red);font-weight:700;font-size:18px}
.formbox{background:#fff;border:1px solid var(--line);border-radius:5px;padding:26px;max-width:460px;margin:24px auto}
.formbox label{display:block;margin:11px 0 4px;font-size:13px}
.formbox input,.formbox select{width:100%;border:1px solid var(--line);border-radius:4px;padding:9px 11px;outline:none;font-size:13px}
.formbox input:focus,.formbox select:focus{border-color:var(--blue)}
.formbox button{width:100%;margin-top:16px}
.formbox .hint{font-size:11px;color:var(--muted)}
.errorlist{color:var(--red);font-size:12px;list-style:none;padding:0}
.kv{background:#fff;border:1px solid var(--line);border-radius:4px;padding:9px 12px;margin:6px 0;font-size:13px}

/* ===== 页脚与浮动控件 ===== */
.site-footer{background:#fff;color:#777;border-top:1px solid var(--line);margin-top:34px;padding:24px 0;font-size:11px}
.foot-stats{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;margin-bottom:16px}
.foot-stats b{display:block;color:#333;font-size:17px}
.foot-stats span{color:var(--muted)}
.foot-links{text-align:center;margin-bottom:8px}
.foot-links a{color:#777;margin:0 9px}
.foot-links a:hover{color:var(--blue)}
.foot-copy{text-align:center;color:var(--faint)}
.floatbar{position:fixed;right:16px;bottom:50px;display:flex;flex-direction:column;gap:6px;z-index:90}
.floatbar>*{width:46px;min-height:46px;background:#fff;border:1px solid var(--line);border-radius:4px;font-size:16px;color:#555;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 0;text-decoration:none}
.floatbar span{font-size:9px}
.floatbar>*:hover{border-color:var(--blue);color:var(--blue)}
#backTop{display:none}

/* ===== 弹窗 ===== */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;align-items:center;justify-content:center;padding:16px}
.overlay.open{display:flex}
.modal{background:#fff;border-radius:5px;width:400px;max-width:100%;padding:22px;position:relative;box-shadow:0 8px 30px rgba(0,0,0,.2)}
.modal-x{position:absolute;right:10px;top:6px;border:0;background:none;font-size:22px;color:var(--muted)}
.modal-x:hover{color:#333}
.modal-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:16px}
.modal-tabs button{flex:1;background:none;border:0;padding:10px;font-size:13px;color:var(--muted)}
.modal-tabs button.on{color:var(--blue);border-bottom:2px solid var(--blue);margin-bottom:-1px;font-weight:700}
.modal input{width:100%;border:1px solid var(--line);border-radius:4px;padding:10px;margin-bottom:10px;font-size:13px;outline:none}
.modal input:focus{border-color:var(--blue)}
.modal .btn-red{width:100%}
.modal-vip{width:660px}
.vip-cols{display:flex;gap:14px}
.vip-card{flex:1;border:1px solid #e8d08a;border-radius:4px;padding:18px;text-align:center;background:#fffdf5}
.vip-card.dia{border-color:#b6d0ea;background:#f3f7fb}
.vip-head{font-size:16px;font-weight:700;margin-bottom:9px}
.vip-card ul{list-style:none;padding:0;margin:0 0 10px;font-size:12px;color:#666}
.vip-price{color:var(--red);font-weight:700;font-size:18px;margin-bottom:10px}
.vip-card .btn-gold{width:100%}

/* ===== 用户 / 会员中心 ===== */
.uc{display:flex;gap:20px;align-items:flex-start;margin-top:20px}
.uc-side{width:220px;flex:none;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.uc-user{display:flex;gap:10px;align-items:center;padding:16px 14px;border-bottom:1px solid var(--line)}
.uc-user-info{min-width:0}
.uc-user-info b{display:block;font-size:14px}
.uc-user-info .muted{font-size:11px;margin-top:3px}
.uc-user-info .ulevel{display:inline-block;margin-top:4px}
.uc-nav{display:flex;flex-direction:column;padding:6px}
.uc-nav a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-radius:4px;font-size:13px;color:#555;cursor:pointer}
.uc-nav a:hover{background:#f5f6f8;color:var(--blue)}
.uc-nav a.on{background:var(--blue);color:#fff;font-weight:700}
.uc-nav-n{background:rgba(255,255,255,.28);font-size:10px;font-weight:600;border-radius:10px;padding:0 7px;line-height:16px}
.uc-nav a:not(.on) .uc-nav-n{background:#eceef0;color:#777}
.uc-main{flex:1;min-width:0}

/* 面板: 默认隐藏, 仅显示 .on 的那个(点击左侧切换) */
.uc-panel{display:none}
.uc-panel.on{display:block}

.uc-status{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-left:4px solid #ccc;border-radius:4px;padding:20px;margin-bottom:14px}
.uc-status.active{border-left-color:var(--green)}
.uc-status.inactive{border-left-color:#d9a92e;background:#fffdf5}
.uc-status-label{font-size:12px;color:var(--muted)}
.uc-status-name{font-size:22px;font-weight:700;margin:2px 0 6px}
.uc-status-sub{font-size:12px;color:#666}
.uc-status-r{display:flex;align-items:center;gap:22px;flex:none}
.uc-stat{text-align:center}
.uc-stat b{display:block;font-size:20px}
.uc-stat span{font-size:11px;color:var(--muted)}

.uc-card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:16px;margin-bottom:14px}
.uc-card-h{font-size:14px;font-weight:700;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.uc-card-h .muted{font-weight:400;font-size:11px;margin-left:8px}

.uc-redeem{display:flex;gap:8px}
.uc-redeem input{flex:1;min-width:0;border:1px solid var(--line);border-radius:4px;padding:10px 12px;outline:none;font-size:14px}
.uc-redeem input:focus{border-color:var(--blue)}
.uc-redeem button{padding:10px 24px;flex:none}
.uc-redeem-tip{font-size:11px;margin-top:8px}

.uc-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.uc-plan{border:1px solid #e8d08a;background:#fffdf5;border-radius:4px;padding:16px;text-align:center}
.uc-plan.dia{border-color:#b6d0ea;background:#f3f7fb}
.uc-plan-name{font-size:15px;font-weight:700}
.uc-plan-price{font-size:22px;font-weight:700;color:var(--red);margin:6px 0 2px}
.uc-plan-days{font-size:12px;color:var(--muted)}
.uc-plan ul{list-style:none;padding:0;margin:10px 0 12px;font-size:12px;color:#666;line-height:1.7;text-align:left}
.uc-plan .btn-gold{display:block;width:100%}

.uc-table{width:100%;border-collapse:collapse;font-size:13px}
.uc-table th,.uc-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
.uc-table th{background:#f7f8f9;font-weight:600;color:#666;white-space:nowrap}
.uc-table tr:last-child td{border-bottom:0}
.uc-table tr:hover td{background:#fafbfc}
.uc-table .mono{font-family:Consolas,monospace;font-size:12px}
.uc-empty{text-align:center;color:var(--faint);padding:18px 0}

/* 我的收藏面板: 封面网格 */
.uc-fav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.uc-fav-item{border:1px solid var(--line);border-radius:4px;overflow:hidden;display:block;background:#fff}
.uc-fav-item:hover{border-color:var(--blue);color:var(--blue)}
.uc-fav-item-thumb{aspect-ratio:16/10;background:#eef0f2;color:#b6bbc1;font-size:28px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.uc-fav-item-thumb img{width:100%;height:100%;object-fit:cover}
.uc-fav-item-info{display:block;padding:8px 10px}
.uc-fav-item-info b{display:block;font-size:12.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc-fav-item-info small{font-size:10px;color:var(--muted)}
.uc-favs-empty{grid-column:1/-1;font-size:12px;color:var(--faint);padding:20px 6px;text-align:center}

/* ==========================================================================
   动效层(克制版)
   原则: 不改配色/版式/字号, 只加「过渡 + 入场 + 微交互」。
   - 入场动画一律用独立的 translate 属性, 不用 transform,
     这样不会覆盖 hover 的 transform:translateY(...) (animation 优先级高于普通声明)
   - 全部包在 prefers-reduced-motion:no-preference 里, 系统开了「减少动态效果」就自动关掉
   ========================================================================== */
@keyframes gbFadeUp{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes gbFadeIn{from{opacity:0}to{opacity:1}}
@keyframes gbSlideDown{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@keyframes gbDropIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes gbModalIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes gbPop{0%{transform:scale(1)}42%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes gbImgIn{from{opacity:0}to{opacity:1}}

/* 回顶部按钮: 由 JS 切 .show(display 切换必须放在 media query 外面,
   否则系统开启「减少动态效果」时按钮会永远不显示) */
#backTop.show{display:flex}

@media(prefers-reduced-motion:no-preference){
  /* ---- 1. 通用过渡: 颜色/边框/阴影/位移 ---- */
  .mainnav a,.drop-menu a,.tabs a,.catlink,.crumb a,.foot-links a,.hero-hot a,
  .btn-login,.btn-reg,.btn-vip,.btn-gold,.btn-red,.btn-line,.icon-btn,.nav-toggle,
  .pager a,.like-btn,.fav-btn,.follow-btn,.modal-tabs button,.modal-x,
  .uc-nav a,.floatbar>*,.plan,.uc-plan,.vip-card,.kv,.post,.rel-grid a,
  .uc-fav-item,.thumb img,.feat5 a,.feat5 i,.tagbox a{
    transition:color .18s ease,background-color .18s ease,border-color .18s ease,
               box-shadow .2s ease,transform .2s ease,opacity .18s ease;
  }

  /* ---- 2. 顶栏: 链接下划线滑出 + 下拉菜单落下 ---- */
  .mainnav>a,.mainnav>.drop>a{position:relative}
  .mainnav>a::after,.mainnav>.drop>a::after{
    content:"";position:absolute;left:8px;right:8px;bottom:1px;height:2px;
    background:var(--blue);transform:scaleX(0);transform-origin:left center;
    transition:transform .22s ease;pointer-events:none;
  }
  .mainnav>a:hover::after,.mainnav>a.active::after,
  .mainnav>.drop>a:hover::after,.mainnav>.drop>a.active::after{transform:scaleX(1)}
  .drop:hover .drop-menu,.drop.open .drop-menu{animation:gbDropIn .16s ease-out both}
  .header-search.open{animation:gbSlideDown .18s ease-out both}
  .site-header{transition:box-shadow .22s ease}
  .icon-btn:hover{transform:translateY(-1px)}

  /* ---- 3. 按钮: 悬停抬起 + 按下回弹 ---- */
  .btn-reg:hover,.btn-login:hover,.btn-vip:hover,.btn-gold:hover,.btn-red:hover,
  .btn-line:hover,.nav-toggle:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.08)}
  .btn-reg:active,.btn-login:active,.btn-vip:active,.btn-gold:active,.btn-red:active,
  .btn-line:active,.icon-btn:active,.nav-toggle:active,.pager a:active{transform:translateY(0) scale(.97)}

  /* ---- 4. 首页 hero 与五宫格入场 ---- */
  .hero-kicker{animation:gbFadeUp .36s ease-out both}
  .hero h1{animation:gbFadeUp .42s ease-out .04s both}
  .hero-search{animation:gbFadeUp .42s ease-out .1s both}
  .hero-hot{animation:gbFadeUp .42s ease-out .16s both}
  .hero-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(42,127,212,.12)}
  .feat5 a{animation:gbFadeUp .36s ease-out both}
  .feat5 a:nth-child(1){animation-delay:.06s}
  .feat5 a:nth-child(2){animation-delay:.1s}
  .feat5 a:nth-child(3){animation-delay:.14s}
  .feat5 a:nth-child(4){animation-delay:.18s}
  .feat5 a:nth-child(5){animation-delay:.22s}
  .feat5 a:hover{transform:translateY(-2px);box-shadow:0 3px 10px rgba(0,0,0,.06)}
  .feat5 a:hover i{transform:scale(1.16)}

  /* ---- 5. 列表卡片: 入场错峰 + 悬停抬起 + 封面微放大 ---- */
  .maincol>.post{animation:gbFadeUp .34s ease-out both}
  .maincol>.post:nth-child(1){animation-delay:.04s}
  .maincol>.post:nth-child(2){animation-delay:.08s}
  .maincol>.post:nth-child(3){animation-delay:.12s}
  .maincol>.post:nth-child(4){animation-delay:.16s}
  .maincol>.post:nth-child(5){animation-delay:.2s}
  .maincol>.post:nth-child(6){animation-delay:.24s}
  .maincol>.post:nth-child(7){animation-delay:.28s}
  .maincol>.post:nth-child(8){animation-delay:.32s}
  .maincol>.post:nth-child(n+9){animation-delay:.34s}
  .post{position:relative}
  .post:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.07)}
  .post:hover .thumb img{transform:scale(1.05)}
  .thumb img{animation:gbImgIn .3s ease-out both}
  .post-title a{transition:color .18s ease}
  .flag-vip{transition:transform .18s ease}
  .post:hover .flag-vip{transform:translateY(-1px)}

  /* ---- 6. 分类页签 ---- */
  .tabs a:hover{background:#f5f6f8}
  .tabs a.on{transition:background-color .2s ease,color .2s ease}

  /* ---- 7. 详情页 ---- */
  .article{animation:gbFadeUp .38s ease-out both}
  .crumb{animation:gbFadeIn .3s ease-out both}
  .coverimg{animation:gbImgIn .45s ease-out both}
  .paybox{animation:gbFadeUp .38s ease-out .06s both}
  .rel-grid a:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.07)}
  .rel-grid a:hover .rel-thumb img{transform:scale(1.05)}
  .rel-thumb img{transition:transform .35s ease}
  .like-btn.liked{animation:gbPop .34s ease-out}
  .fav-btn.faved{animation:gbPop .34s ease-out}
  .follow-btn:active{transform:scale(.96)}

  /* ---- 8. 会员 / 用户中心 ---- */
  .plan:hover,.uc-plan:hover,.vip-card:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.07)}
  .uc-panel.on{animation:gbFadeUp .26s ease-out both}
  .uc-fav-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.07)}
  .uc-fav-item:hover img{transform:scale(1.05)}
  .uc-fav-item-thumb img{transition:transform .35s ease}
  .uc-table tbody tr{transition:background-color .16s ease}
  .uc-nav a:active{transform:scale(.98)}
  .uc-redeem:focus-within{box-shadow:0 0 0 3px rgba(42,127,212,.1);border-radius:4px}

  /* ---- 9. 侧栏 ---- */
  .sidebar .widget{animation:gbFadeUp .34s ease-out both}
  .sidebar .widget:nth-child(2){animation-delay:.08s}
  .sidebar .widget:nth-child(3){animation-delay:.14s}
  .sidebar .widget:nth-child(n+4){animation-delay:.2s}
  .mini-post{transition:transform .18s ease}
  .mini-post:hover{transform:translateX(3px)}
  .mini-post:hover b{color:var(--blue)}
  .mini-thumb img{transition:transform .3s ease}
  .mini-post:hover .mini-thumb img{transform:scale(1.06)}

  /* ---- 10. 提示条 / 页脚 / 浮动按钮 ---- */
  .msg{animation:gbSlideDown .28s ease-out both}
  .notice{animation:gbFadeIn .4s ease-out both}
  .foot-stats b{transition:color .18s ease}
  .floatbar>*:hover{transform:translateY(-2px);box-shadow:0 3px 10px rgba(0,0,0,.08)}
  #backTop.show{animation:gbFadeIn .22s ease-out both}
  #backTop:hover{transform:translateY(-3px)}

  /* ---- 11. 弹窗: 遮罩淡入 + 卡片上浮 ---- */
  .overlay.open{animation:gbFadeIn .18s ease-out both}
  .overlay.open .modal{animation:gbModalIn .24s cubic-bezier(.2,.8,.3,1) both}
  .modal-x:hover{transform:rotate(90deg)}
  .modal-x{transition:color .18s ease,transform .22s ease}
  .modal-tabs button.on{animation:gbFadeIn .2s ease-out both}

  /* ---- 12. 图片统一淡入(避免加载时生硬跳出) ---- */
  .mini-thumb img,.uc-fav-item-thumb img,.thumb img{animation:gbImgIn .3s ease-out both}
}

@media(max-width:1100px){
  /* 汉堡面板里的下划线会显得杂乱, 窄屏关掉 */
  .mainnav>a::after{display:none}
  /* 但没有下划线也得能看出「当前在哪个分类」→ 改用浅底 */
  .mainnav>a.active,.mainnav>.drop>a.active{background:#f5f6f8;border-radius:4px}
  .maincol>.post:hover{transform:none}
  .feat5 a:hover,.plan:hover,.uc-plan:hover,.vip-card:hover{transform:none}
}

@media(max-width:800px){
  .uc{flex-direction:column;gap:12px}
  .uc-side{width:100%}
  .uc-nav{flex-direction:row;flex-wrap:wrap}
  .uc-nav a{padding:7px 10px}
  .uc-status{flex-direction:column;align-items:flex-start}
  .uc-status-r{gap:16px;width:100%;justify-content:space-between}
  .uc-plans{grid-template-columns:1fr}
  .uc-fav-grid{grid-template-columns:repeat(2,1fr)}
  .uc-table{display:block;overflow-x:auto;white-space:nowrap}
}

/* ===== 响应式(抄原站: 桌面短导航+下拉, 窄屏汉堡面板) ===== */
@media(max-width:1250px){
  .mainnav a{padding:8px 6px;font-size:12px}
  .header-in{gap:10px}
}
@media(max-width:1100px){
  .header-in{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .nav-toggle{display:inline-block}
  .mainnav{display:none}
  /* 汉堡展开: 整行下拉面板, 排在顶栏之后 */
  .mainnav.open{display:flex;flex-wrap:wrap;flex:1 0 100%;order:9;
    gap:2px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
  .mainnav.open a{padding:9px 10px;font-size:13px}
  .mainnav.open .drop{width:100%}
  .drop-menu{position:static;box-shadow:none}
  .header-right{margin-left:auto}
}
@media(max-width:1000px){
  .header-in{gap:12px}
  .sidebar{width:250px}
  .thumb{width:180px}
}
@media(max-width:900px){
  .layout{flex-direction:column;gap:12px}
  /* 单列时给 maincol 一个确定宽度: 否则列向 flex + align-items:flex-start 会按
     min-content 撑宽(分类页签是 nowrap 的), 手机上前台会横向溢出被裁掉 */
  .maincol{width:100%}
  .tabs-wrap{min-width:0}
  .sidebar{display:none}
  .tabs-wrap{margin:0 -4px;padding:0 4px}
  .feat5{grid-template-columns:repeat(3,1fr)}
  .feat5 a:nth-child(3){border-right:0}
  .feat5 a:nth-child(n+4){border-top:1px solid var(--line)}
  .rel-grid{grid-template-columns:repeat(2,1fr)}
  .vip-cols{flex-direction:column}
  .pn{flex-direction:column;gap:8px}
  .foot-stats{grid-template-columns:repeat(2,1fr);gap:12px}
  .floatbar{right:8px;bottom:18px}
  .floatbar>*{width:42px;min-height:42px}
}
@media(max-width:600px){
  body{font-size:14px}
  .container{padding-left:14px;padding-right:14px}
  .hero{padding:30px 0 26px}
  .hero h1{font-size:24px}
  .hero-search input{padding:8px 10px;font-size:12px}
  .hero-search button{padding:8px 14px;font-size:12px}
  .feat5{grid-template-columns:repeat(2,1fr)}
  .feat5 a{padding:11px 8px;border-top:1px solid var(--line)}
  .feat5 a:nth-child(odd){border-right:1px solid var(--line)}
  .feat5 a:nth-child(even){border-right:0}
  .feat5 a:first-child,.feat5 a:nth-child(2){border-top:0}
  .feat5 a:last-child{grid-column:1/-1;border-right:0}
  .thumb{width:110px;aspect-ratio:1/1;align-self:center}
  .post{padding:9px;gap:10px}
  .post-title{font-size:15px}
  .rel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .rel-thumb{height:80px;line-height:80px}
  .modal{padding:18px}
  .modal-vip{width:100%}
  .floatbar{right:5px}
  .floatbar>*{width:38px;min-height:38px}
}