@charset "utf-8";
/* ============================================================
   青墨设计系统  v2.0
   ─ 自研，不依赖任何第三方模板、图标库或字体文件
   ─ 命名规范：x- 前缀，BEM 风格（x-block / x-block-el / x-block--mod）
   ─ 图标：全部走 header.htm 内联 SVG sprite（<svg class="x-i"><use href="#x-xxx"></use></svg>）
   ============================================================ */

/* ------------------------------------------------------------
   1. 设计令牌
   ------------------------------------------------------------ */
:root{
	/* 品牌主色：深青 */
	--x-brand:      #12796B;
	--x-brand-600:  #0F6A5E;
	--x-brand-700:  #0B554B;
	--x-brand-100:  #D6ECE8;
	--x-brand-50:   #EDF7F5;

	/* 强调色：琥珀橙（价格 / 主 CTA） */
	--x-accent:     #E8873A;
	--x-accent-600: #D2762A;
	--x-accent-50:  #FDF3E9;

	/* 语义色 */
	--x-free:       #17A06A;
	--x-free-50:    #E9F8F1;
	--x-vip:        #C08828;
	--x-vip-50:     #FBF3E2;
	--x-danger:     #D9534F;

	/* 文字 */
	--x-ink:        #16202B;
	--x-ink-2:      #46536B;
	--x-ink-3:      #6B7789;
	--x-muted:      #93A0B3;

	/* 线与面 */
	--x-line:       #E7EBF1;
	--x-line-2:     #F2F5F9;
	--x-bg:         #F4F7FA;
	--x-surface:    #FFFFFF;
	--x-dark:       #14212E;

	/* 形状 */
	--x-radius:     14px;
	--x-radius-sm:  10px;
	--x-radius-xs:  6px;
	--x-pill:       999px;

	/* 阴影 */
	--x-shadow-1:   0 1px 2px rgba(22,32,43,.04), 0 8px 22px -14px rgba(22,32,43,.20);
	--x-shadow-2:   0 2px 6px rgba(22,32,43,.06), 0 22px 44px -22px rgba(22,32,43,.30);
	--x-shadow-in:  inset 0 1px 0 rgba(255,255,255,.06);

	/* 尺寸 */
	--x-inner:      1200px;
	--x-navbar-h:   64px;
	--x-gap:        20px;

	/* 动效 */
	--x-ease:       cubic-bezier(.25,.8,.35,1);
}

/* ------------------------------------------------------------
   2. 基础重置（作用域限定在 .x-page，避免污染 Discuz 原生组件）
   ------------------------------------------------------------ */
.x-page{ background:var(--x-bg); color:var(--x-ink); font-size:14px; line-height:1.65;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
	-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.x-page h1,.x-page h2,.x-page h3,.x-page h4,.x-page p,.x-page ul,.x-page ol,.x-page dl,.x-page dd,.x-page figure{ margin:0; padding:0; }
.x-page ul,.x-page ol{ list-style:none; }
.x-page img{ border:0; max-width:100%; vertical-align:middle; }
.x-page a{ color:inherit; text-decoration:none; transition:color .18s var(--x-ease); }
.x-page a:hover{ color:var(--x-brand); }

/* 只给自有组件开 border-box，不用通配符，防止压坏 Discuz 原生布局 */
.x-hero,.x-hero *,.x-stats,.x-stats *,.x-notice,.x-notice *,.x-quick,.x-quick *,
.x-grid,.x-grid *,.x-entry,.x-entry *,.x-tabs,.x-tabs *,.x-panel,.x-panel *,
.x-btn,.x-input,.x-search-panel,.x-search-panel *,.x-header,.x-header *,
.x-footer,.x-footer *,.x-auth,.x-auth *,.x-modal,.x-modal *,.x-arts,.x-arts *,
.x-vip,.x-vip *,.x-post,.x-post *,.x-crumb,.x-crumb *,.x-bar,.x-bar *{
	box-sizing:border-box;
}

/* ------------------------------------------------------------
   3. 布局容器
   ------------------------------------------------------------ */
.x-inner{ width:var(--x-inner); max-width:100%; margin:0 auto; padding:0 16px; }
.x-inner--narrow{ width:980px; }
.x-main{ padding:0 0 40px; }

.x-section{ margin:0 0 34px; }
.x-section--xl{ margin-bottom:44px; }
.x-section-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.x-section-hd h2{ font-size:21px; font-weight:700; letter-spacing:.4px; color:var(--x-ink);
	display:flex; align-items:center; gap:9px; }
.x-section-hd h2::before{ content:""; width:4px; height:18px; border-radius:var(--x-pill);
	background:linear-gradient(180deg,var(--x-brand),#2FB59F); flex:0 0 auto; }
.x-section-hd .more{ font-size:13px; color:var(--x-muted); white-space:nowrap; }
.x-section-hd .more:hover{ color:var(--x-brand); }
.x-section-hd--center{ flex-direction:column; align-items:center; text-align:center; gap:8px; }
.x-section-hd--center h2{ justify-content:center; }
.x-section-hd--center p{ font-size:13px; color:var(--x-muted); max-width:640px; }

/* 两栏：主内容 + 侧栏 */
.x-cols{ display:flex; gap:var(--x-gap); align-items:flex-start; }
.x-cols-main{ flex:1 1 auto; min-width:0; }
.x-cols-side{ width:300px; flex:0 0 300px; }

/* ------------------------------------------------------------
   4. 顶部导航
   ------------------------------------------------------------ */
.x-header{ position:relative; z-index:60; background:var(--x-surface); border-bottom:1px solid var(--x-line); }
.x-header.is-float{ position:absolute; left:0; right:0; top:0; background:transparent; border:0; }
.x-header.is-sticky{ position:sticky; top:0; backdrop-filter:saturate(160%) blur(10px); background:rgba(255,255,255,.9); }

.x-topbar{ background:var(--x-dark); color:#C6D2DE; font-size:12.5px; line-height:34px; }
.x-topbar .x-inner{ display:flex; align-items:center; justify-content:space-between; }
.x-topbar a{ color:#C6D2DE; }
.x-topbar a:hover{ color:#fff; }
.x-topbar-left span{ display:inline-flex; align-items:center; gap:6px; }
.x-topbar-right{ display:flex; align-items:center; gap:16px; }

.x-navbar{ height:var(--x-navbar-h); }
.x-navbar .x-inner{ height:100%; display:flex; align-items:center; gap:18px; }
.x-logo{ flex:0 0 auto; display:flex; align-items:center; }
.x-logo img{ height:38px; width:auto; display:block; }

.x-nav{ display:flex; align-items:center; gap:2px; flex:1 1 auto; min-width:0; flex-wrap:nowrap; }
.x-nav > li{ position:relative; flex:0 0 auto; white-space:nowrap; }
.x-nav > li > a{ display:flex; align-items:center; gap:5px; height:var(--x-navbar-h); padding:0 14px;
	font-size:15px; color:var(--x-ink-2); position:relative; }
.x-nav > li > a:hover{ color:var(--x-brand); }
/* Discuz 导航自带英文副标题 span，统一隐藏 */
.x-nav > li > a span{ display:none !important; }
.x-nav > li.on > a{ color:var(--x-brand); font-weight:600; }
.x-nav > li.on > a::after{ content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px;
	border-radius:var(--x-pill) var(--x-pill) 0 0; background:var(--x-brand); }
.x-header.is-float .x-topbar{ background:transparent; }
.x-header.is-float .x-nav > li > a{ color:rgba(255,255,255,.88); }
.x-header.is-float .x-nav > li > a:hover,
.x-header.is-float .x-nav > li.on > a{ color:#fff; }
.x-header.is-float .x-nav > li.on > a::after{ background:#fff; }
.x-header.is-float .x-logo img{ filter:brightness(0) invert(1); }
.x-header.is-float .x-topbar a{ color:rgba(255,255,255,.75); }

.x-subnav{ position:absolute; left:0; top:100%; min-width:190px; padding:8px; background:var(--x-surface);
	border:1px solid var(--x-line); border-radius:var(--x-radius-sm); box-shadow:var(--x-shadow-2);
	opacity:0; visibility:hidden; transform:translateY(6px); transition:all .18s var(--x-ease); }
.x-nav > li:hover > .x-subnav{ opacity:1; visibility:visible; transform:translateY(0); }
.x-subnav li > a{ display:block; padding:8px 12px; border-radius:var(--x-radius-xs); font-size:13.5px; color:var(--x-ink-2); }
.x-subnav li > a:hover{ background:var(--x-brand-50); color:var(--x-brand); }
.x-subnav-in{ margin:2px 0 6px 10px; padding-left:10px; border-left:1px solid var(--x-line); }
.x-subnav-in li > a{ font-size:13px; color:var(--x-ink-3); }

.x-nav-quick{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.x-nav-search{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
	border-radius:var(--x-pill); color:var(--x-ink-2); }
.x-nav-search:hover{ background:var(--x-brand-50); color:var(--x-brand); }
.x-nav-user img{ width:34px; height:34px; border-radius:var(--x-pill); display:block; }

/* ------------------------------------------------------------
   5. 英雄区（渐变网格，非图片；不用 fixed 背景，避免移动端卡顿）
   ------------------------------------------------------------ */
.x-hero{ position:relative; overflow:hidden; padding:124px 0 58px;
	background:linear-gradient(135deg,#0B3B36 0%,#12796B 42%,#1D5F7A 72%,#20355C 100%); }
.x-hero-bg{ position:absolute; inset:0; pointer-events:none; }
.x-hero-bg::before{ content:""; position:absolute; inset:0;
	background-image:radial-gradient(circle at 18% 22%,rgba(47,181,159,.42),transparent 46%),
		radial-gradient(circle at 82% 16%,rgba(232,135,58,.30),transparent 44%),
		radial-gradient(circle at 62% 88%,rgba(84,132,224,.30),transparent 50%); }
.x-hero-bg::after{ content:""; position:absolute; inset:0; opacity:.35;
	background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
		linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
	background-size:44px 44px; mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 82%);
	-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 82%); }
.x-hero-inner{ position:relative; z-index:2; text-align:center; }
.x-hero-title{ font-size:34px; font-weight:800; color:#fff; letter-spacing:1px; }
.x-hero-desc{ margin-top:10px; font-size:14.5px; color:rgba(255,255,255,.78); letter-spacing:.4px; }
.x-hero-form{ width:660px; max-width:100%; margin:26px auto 0; text-align:left; }

.x-hero-box{ display:flex; align-items:center; gap:8px; height:54px; padding:6px 6px 6px 18px;
	background:#fff; border-radius:var(--x-pill); box-shadow:0 18px 40px -18px rgba(3,24,22,.62); }
.x-hero-box input[type=text]{ flex:1 1 auto; min-width:0; height:100%; border:0; outline:0;
	font-size:15px; color:var(--x-ink); background:transparent; }
.x-hero-box input[type=text]::placeholder{ color:var(--x-muted); }
.x-hero-box .x-hero-type{ flex:0 0 auto; font-size:13.5px; color:var(--x-ink-3); padding-right:12px;
	border-right:1px solid var(--x-line); }
.x-hero-box button{ flex:0 0 auto; height:42px; padding:0 28px; border:0; border-radius:var(--x-pill);
	font-size:15px; font-weight:600; color:#fff; cursor:pointer;
	background:linear-gradient(135deg,var(--x-brand),#1E9E8A); transition:filter .18s var(--x-ease); }
.x-hero-box button:hover{ filter:brightness(1.08); }

.x-taglist{ margin-top:14px; text-align:center; font-size:13px; color:rgba(255,255,255,.62); }
.x-taglist span{ margin-right:8px; }
.x-taglist a{ display:inline-block; margin:3px 4px; padding:3px 12px; border-radius:var(--x-pill);
	font-size:12.5px; color:rgba(255,255,255,.86); background:rgba(255,255,255,.12); }
.x-taglist a:hover{ background:#fff; color:var(--x-brand-700); }

/* ------------------------------------------------------------
   6. 数据统计条
   ------------------------------------------------------------ */
.x-stats{ position:relative; margin-top:-34px; z-index:5; }
.x-stats-inner{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; overflow:hidden;
	background:var(--x-line); border-radius:var(--x-radius); box-shadow:var(--x-shadow-2); }
.x-stat{ background:var(--x-surface); padding:22px 12px; text-align:center; transition:background .18s var(--x-ease); }
.x-stat:hover{ background:var(--x-brand-50); }
.x-stat-ico{ display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center;
	margin-bottom:8px; border-radius:var(--x-radius-sm); color:var(--x-brand); background:var(--x-brand-50); }
.x-stat-num{ font-size:26px; font-weight:800; line-height:1.1; letter-spacing:-.5px;
	background:linear-gradient(135deg,var(--x-brand),#2FB59F); -webkit-background-clip:text;
	background-clip:text; -webkit-text-fill-color:transparent; }
.x-stat-label{ margin-top:4px; font-size:12.5px; color:var(--x-muted); letter-spacing:.5px; }

/* ------------------------------------------------------------
   7. 公告条
   ------------------------------------------------------------ */
.x-notice{ margin:24px 0 30px; }
.x-notice-inner{ display:flex; align-items:center; gap:14px; padding:0 16px; height:52px;
	background:var(--x-surface); border:1px solid var(--x-line); border-radius:var(--x-radius); box-shadow:var(--x-shadow-1); }
.x-notice-hd{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:5px 14px;
	border-radius:var(--x-pill); font-size:12.5px; font-weight:600; color:#fff;
	background:linear-gradient(135deg,var(--x-brand),#1E9E8A); }
.x-notice-body{ flex:1 1 auto; min-width:0; overflow:hidden; }
.x-notice-list li{ display:none; align-items:center; gap:12px; font-size:13.5px; color:var(--x-ink-2); }
.x-notice-list li.is-on{ display:flex; }
.x-notice-list li a{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.x-notice-list .x-time{ flex:0 0 auto; font-size:12.5px; color:var(--x-muted); }
.x-notice-nav{ flex:0 0 auto; display:flex; gap:6px; }
.x-notice-nav .swiper-btn{ display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center;
	border-radius:var(--x-pill); color:var(--x-ink-3); background:var(--x-line-2); cursor:pointer; }
.x-notice-nav .swiper-btn:hover{ background:var(--x-brand); color:#fff; }

/* ------------------------------------------------------------
   8. 快捷导航（版块分组卡）
   ------------------------------------------------------------ */
.x-quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
.x-qcard{ display:flex; flex-direction:column; padding:16px 18px 18px; background:var(--x-surface);
	border-radius:var(--x-radius); border:1px solid var(--x-line-2);
	box-shadow:var(--x-shadow-1);
	transition:transform .2s var(--x-ease),box-shadow .2s var(--x-ease),border-color .2s var(--x-ease); }
.x-qcard:hover{ transform:translateY(-3px); box-shadow:var(--x-shadow-2); border-color:var(--x-brand-100); }
.x-qcard-hd{ display:flex; align-items:center; gap:9px; padding-bottom:11px; margin-bottom:12px;
	border-bottom:1px solid var(--x-line-2); }
.x-qcard-ico{ display:inline-flex; align-items:center; justify-content:center; flex:none;
	width:26px; height:26px; border-radius:8px; background:var(--x-brand-50); color:var(--x-brand); }
.x-qcard-ico .x-i{ width:15px; height:15px; }
.x-qcard-name{ font-size:15px; font-weight:700; color:var(--x-ink); }
.x-qcard-name:hover{ color:var(--x-brand); }
.x-qcard-num{ margin-left:auto; flex:none; font-style:normal; font-size:11.5px; font-weight:700;
	line-height:1.6; color:var(--x-brand); background:var(--x-brand-50);
	padding:1px 9px; border-radius:var(--x-pill); }
.x-qcard-tags{ display:flex; flex-wrap:wrap; gap:7px; }
.x-qtag{ display:inline-block; max-width:100%; padding:4px 11px; border-radius:var(--x-pill);
	font-size:12.5px; line-height:1.5; color:var(--x-ink-2); background:var(--x-line-2);
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	transition:color .16s var(--x-ease),background .16s var(--x-ease),box-shadow .16s var(--x-ease); }
.x-qtag:hover{ color:#fff; background:linear-gradient(135deg,var(--x-brand),#1E9E8A);
	box-shadow:0 6px 14px -8px rgba(18,121,107,.9); }
.x-qtag.is-sub{ background:var(--x-surface); border:1px solid var(--x-line);
	color:var(--x-ink-3); font-size:12px; }
.x-qtag.is-sub:hover{ border-color:transparent; color:#fff;
	background:linear-gradient(135deg,var(--x-brand),#1E9E8A); }
.x-quick-empty{ grid-column:1/-1; padding:26px; text-align:center; color:var(--x-muted);
	background:var(--x-surface); border-radius:var(--x-radius); box-shadow:var(--x-shadow-1); }

/* ------------------------------------------------------------
   9.  tabs
   ------------------------------------------------------------ */
.x-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.x-tabs--center{ justify-content:center; }
.x-tab{ padding:7px 18px; border-radius:var(--x-pill); font-size:13.5px; color:var(--x-ink-2);
	background:var(--x-surface); border:1px solid var(--x-line); cursor:pointer;
	transition:all .18s var(--x-ease); }
.x-tab:hover{ color:var(--x-brand); border-color:var(--x-brand-100); }
.x-tab.on{ color:#fff; border-color:transparent; font-weight:600;
	background:linear-gradient(135deg,var(--x-brand),#1E9E8A); box-shadow:0 8px 18px -10px rgba(18,121,107,.9); }

/* ------------------------------------------------------------
   10. 网格与资源卡
   ------------------------------------------------------------ */
.x-grid{ display:grid; gap:18px; }
.x-grid--2{ grid-template-columns:repeat(2,1fr); }
.x-grid--3{ grid-template-columns:repeat(3,1fr); }
.x-grid--4{ grid-template-columns:repeat(4,1fr); }
.x-grid--5{ grid-template-columns:repeat(5,1fr); }
.x-grid--6{ grid-template-columns:repeat(6,1fr); }
.x-col{ min-width:0; }

/* 图片比例盒 */
.x-ratio{ position:relative; display:block; width:100%; overflow:hidden; background:var(--x-line-2); }
.x-ratio::before{ content:""; display:block; }
.x-ratio--3x2::before{ padding-top:66.66%; }
.x-ratio--3x4::before{ padding-top:133.33%; }
.x-ratio--4x3::before{ padding-top:75%; }
.x-ratio--21x9::before{ padding-top:42.85%; }
.x-ratio--1x1::before{ padding-top:100%; }
.x-ratio > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
	transition:transform .5s var(--x-ease); }

/* 卡片主体 */
.x-entry{ position:relative; background:var(--x-surface); border-radius:var(--x-radius);
	overflow:hidden; box-shadow:var(--x-shadow-1); transition:transform .2s var(--x-ease),box-shadow .2s var(--x-ease); }
.x-entry:hover{ transform:translateY(-4px); box-shadow:var(--x-shadow-2); }
.x-entry:hover .x-ratio > img{ transform:scale(1.05); }
.x-entry-media{ position:relative; display:block; overflow:hidden; }
.x-entry-media .x-ratio{ border-radius:0; }
.x-entry-badge{ position:absolute; left:10px; top:10px; z-index:3; padding:3px 10px; border-radius:var(--x-pill);
	font-size:12px; font-weight:600; color:#fff; backdrop-filter:blur(4px); }
.x-entry-badge--pay{ background:rgba(232,135,58,.94); }
.x-entry-badge--free{ background:rgba(23,160,106,.92); }
.x-entry-badge--vip{ background:linear-gradient(135deg,#D9A63C,#B57A1E); }
.x-entry-badge--hot{ background:rgba(217,83,79,.92); }

.x-entry-body{ padding:12px 14px 14px; }
.x-entry-cat{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--x-muted); }
.x-entry-cat::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--x-brand); }
.x-entry-title{ margin:6px 0 0; font-size:14.5px; font-weight:600; line-height:1.45; color:var(--x-ink); }
.x-entry-title a{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.x-entry-desc{ margin-top:6px; font-size:12.5px; line-height:1.6; color:var(--x-muted);
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.x-entry-meta{ display:flex; align-items:center; gap:14px; margin-top:9px; font-size:12px; color:var(--x-muted); }
.x-entry-meta span{ display:inline-flex; align-items:center; gap:4px; }
.x-entry-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px;
	margin-top:11px; padding-top:10px; border-top:1px solid var(--x-line-2); font-size:12px; color:var(--x-muted); }
.x-entry-price{ font-size:13.5px; font-weight:700; color:var(--x-accent); }
.x-entry-price.is-free{ color:var(--x-free); }

/* 卡片角标行 */
.x-entry-tags{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-bottom:7px; }
.x-entry-tags:empty{ display:none; }

/* 遮罩标题形态（用于长者图 / 图片流） */
.x-entry--mask{ position:relative; }
.x-entry--mask .x-entry-body{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:52px 14px 14px;
	background:linear-gradient(180deg,rgba(8,16,24,0) 0%,rgba(8,16,24,.42) 34%,rgba(8,16,24,.86) 68%,rgba(8,16,24,.96) 100%); }
.x-entry--mask .x-entry-title,
.x-entry--mask .x-entry-title a{ color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.5); }
.x-entry--mask .x-entry-cat{ color:rgba(255,255,255,.86); }
.x-entry--mask .x-entry-cat::before{ display:none; }
.x-entry--mask .x-entry-meta{ color:rgba(255,255,255,.82); }
.x-entry--mask .x-entry-meta .x-i{ color:rgba(255,255,255,.6); }

/* 横向小卡（列表形态） */
.x-entry--row{ display:flex; gap:14px; padding:12px; align-items:stretch; }
.x-entry--row .x-entry-media{ flex:0 0 168px; width:168px; }
.x-entry--row .x-entry-media .x-ratio{ border-radius:var(--x-radius-sm); }
.x-entry--row .x-entry-body{ flex:1 1 auto; min-width:0; padding:0; display:flex; flex-direction:column; }

/* ------------------------------------------------------------
   11. 文章区（CMS）
   ------------------------------------------------------------ */
.x-arts{ display:grid; gap:18px; }
.x-arts--2{ grid-template-columns:repeat(2,1fr); }
.x-arts--3{ grid-template-columns:repeat(3,1fr); }
.x-arts--4{ grid-template-columns:repeat(4,1fr); }

.x-art{ display:flex; gap:14px; padding:14px; background:var(--x-surface);
	border-radius:var(--x-radius); box-shadow:var(--x-shadow-1);
	transition:transform .2s var(--x-ease),box-shadow .2s var(--x-ease); }
.x-art:hover{ transform:translateY(-3px); box-shadow:var(--x-shadow-2); }
.x-art--stack{ flex-direction:column; gap:0; padding:0; overflow:hidden; }
.x-art--stack .x-art-media{ border-radius:0; }
.x-art--stack .x-art-bd{ padding:13px 15px 15px; }
.x-art-media{ flex:0 0 150px; width:150px; border-radius:var(--x-radius-sm); overflow:hidden; }
.x-art-media .x-ratio{ border-radius:inherit; }
.x-art-bd{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.x-art-title{ font-size:15px; font-weight:600; line-height:1.45; color:var(--x-ink);
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.x-art-desc{ margin-top:6px; font-size:12.5px; line-height:1.65; color:var(--x-muted);
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.x-art-meta{ margin-top:auto; padding-top:9px; display:flex; align-items:center; gap:13px;
	font-size:12px; color:var(--x-muted); }

/* 纯标题列表 */
.x-arts--plain{ grid-template-columns:repeat(2,1fr); gap:0 28px; }
.x-art--plain{ padding:11px 0; background:transparent; box-shadow:none; border-bottom:1px dashed var(--x-line);
	border-radius:0; gap:12px; align-items:center; }
.x-art--plain:hover{ transform:none; box-shadow:none; color:var(--x-brand); }
.x-art--plain .x-art-idx{ flex:0 0 22px; width:22px; height:22px; display:inline-flex; align-items:center;
	justify-content:center; border-radius:var(--x-radius-xs); font-size:12px; font-weight:700;
	color:var(--x-ink-3); background:var(--x-line-2); }
.x-art--plain.is-top .x-art-idx{ color:#fff; background:linear-gradient(135deg,var(--x-brand),#1E9E8A); }
.x-art--plain .x-art-title{ -webkit-line-clamp:1; font-size:14px; font-weight:400; flex:1 1 auto; }
.x-art--plain .x-art-meta{ margin:0; padding:0; flex:0 0 auto; font-size:12px; }

/* ------------------------------------------------------------
   12. 面板 / 侧栏
   ------------------------------------------------------------ */
.x-panel{ background:var(--x-surface); border-radius:var(--x-radius); box-shadow:var(--x-shadow-1);
	overflow:hidden; margin-bottom:var(--x-gap); }
.x-panel-hd{ display:flex; align-items:center; justify-content:space-between; gap:10px;
	padding:14px 16px; border-bottom:1px solid var(--x-line-2); }
.x-panel-hd h3{ font-size:15px; font-weight:700; color:var(--x-ink); display:flex; align-items:center; gap:8px; }
.x-panel-hd h3 .x-i{ color:var(--x-brand); }
.x-panel-hd .more{ font-size:12.5px; color:var(--x-muted); }
.x-panel-bd{ padding:14px 16px; }

/* 作者卡 */
.x-author{ text-align:center; padding:20px 16px 18px; }
.x-author-av{ width:64px; height:64px; margin:0 auto; border-radius:var(--x-pill); overflow:hidden;
	box-shadow:0 8px 20px -10px rgba(18,121,107,.7); }
.x-author-av img{ width:100%; height:100%; display:block; }
.x-author-name{ margin-top:10px; font-size:15px; font-weight:700; color:var(--x-ink); }
.x-author-lv{ display:inline-flex; align-items:center; gap:5px; margin-top:6px; padding:2px 10px;
	border-radius:var(--x-pill); font-size:12px; color:var(--x-vip); background:var(--x-vip-50); }
.x-author-nums{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:16px; }
.x-author-nums li{ border-right:1px solid var(--x-line-2); }
.x-author-nums li:last-child{ border-right:0; }
.x-author-nums b{ display:block; font-size:17px; font-weight:800; color:var(--x-ink); }
.x-author-nums span{ font-size:12px; color:var(--x-muted); }

/* 排行榜 */
.x-rank li{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed var(--x-line); }
.x-rank li:last-child{ border-bottom:0; }
.x-rank-no{ flex:0 0 20px; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center;
	border-radius:var(--x-radius-xs); font-size:12px; font-weight:700; color:var(--x-ink-3); background:var(--x-line-2); }
.x-rank li:nth-child(-n+3) .x-rank-no{ color:#fff; background:linear-gradient(135deg,var(--x-accent),#C96A1E); }
.x-rank-tt{ flex:1 1 auto; min-width:0; font-size:13.5px; color:var(--x-ink-2);
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.x-rank-val{ flex:0 0 auto; font-size:12.5px; color:var(--x-muted); }

/* 图文小列表（本周热门） */
.x-mini li{ display:flex; gap:10px; padding:9px 0; border-bottom:1px dashed var(--x-line); }
.x-mini li:last-child{ border-bottom:0; }
.x-mini-media{ flex:0 0 62px; width:62px; border-radius:var(--x-radius-xs); overflow:hidden; }
.x-mini-bd{ flex:1 1 auto; min-width:0; }
.x-mini-tt{ font-size:13.5px; line-height:1.45; color:var(--x-ink-2);
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.x-mini-meta{ margin-top:5px; font-size:12px; color:var(--x-muted); }

/* 标签云 */
.x-tagcloud{ display:flex; flex-wrap:wrap; gap:8px; }
.x-tagcloud a{ padding:5px 13px; border-radius:var(--x-pill); font-size:12.5px; color:var(--x-ink-2);
	background:var(--x-line-2); transition:all .18s var(--x-ease); }
.x-tagcloud a:hover{ color:#fff; background:var(--x-brand); }

/* ------------------------------------------------------------
   13. VIP 会员面板
   ------------------------------------------------------------ */
.x-vip{ position:relative; overflow:hidden; border-radius:var(--x-radius); color:#F6E6C4;
	background:linear-gradient(135deg,#1D2836 0%,#28313F 48%,#3A2E1C 100%); box-shadow:var(--x-shadow-2); }
.x-vip::after{ content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
	border-radius:50%; background:radial-gradient(circle,rgba(217,166,60,.34),transparent 68%); }
.x-vip-inner{ position:relative; z-index:2; padding:28px 30px; display:flex; align-items:center;
	justify-content:space-between; gap:28px; flex-wrap:wrap; }
.x-vip-tt{ font-size:22px; font-weight:800; color:#F3D89A; letter-spacing:.6px;
	display:flex; align-items:center; gap:9px; }
.x-vip-desc{ margin-top:8px; font-size:13px; color:rgba(246,230,196,.66); }
.x-vip-feats{ display:flex; gap:22px; flex-wrap:wrap; margin-top:0; }
.x-vip-feat{ display:flex; align-items:center; gap:8px; font-size:13.5px; }
.x-vip-feat .x-i{ color:#D9A63C; }
.x-vip-prices{ display:flex; gap:14px; }
.x-vip-price{ min-width:126px; padding:14px 18px; text-align:center; border-radius:var(--x-radius-sm);
	background:rgba(255,255,255,.07); border:1px solid rgba(217,166,60,.32); }
.x-vip-price b{ display:block; font-size:24px; font-weight:800; color:#F3D89A; }
.x-vip-price b i{ font-style:normal; font-size:14px; margin-right:2px; }
.x-vip-price span{ font-size:12.5px; color:rgba(246,230,196,.62); }
.x-vip-price.is-hot{ border-color:#D9A63C; background:rgba(217,166,60,.16); }

/* ------------------------------------------------------------
   14. 页脚
   ------------------------------------------------------------ */
.x-footer{ margin-top:40px; background:var(--x-dark); color:#93A4B6; font-size:13px; }
.x-footer-cta{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
	padding:30px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.x-footer-cta h3{ font-size:19px; font-weight:700; color:#fff; }
.x-footer-cta p{ margin-top:6px; font-size:13px; color:#93A4B6; }
.x-footer-cols{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:28px; padding:34px 0; }
.x-footer-col h4{ font-size:14px; font-weight:700; color:#fff; margin-bottom:12px; }
.x-footer-col a{ display:block; padding:4px 0; color:#93A4B6; }
.x-footer-col a:hover{ color:#fff; }
.x-footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.x-footer-brand img{ height:34px; }
.x-footer-brand b{ font-size:16px; color:#fff; }
.x-footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
	padding:16px 0 26px; border-top:1px solid rgba(255,255,255,.08); font-size:12.5px; color:#6F8095; }
.x-footer-bottom a{ color:#93A4B6; }
.x-footer-cta-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.x-footer-cta-btns .x-btn--ghost{ background:transparent; color:#C6D2DE; border-color:rgba(255,255,255,.22); }
.x-footer-cta-btns .x-btn--ghost:hover{ color:#fff; border-color:#fff; }
.x-footer-col p{ font-size:12.5px; line-height:1.85; color:#7E8FA3; }

/* ------------------------------------------------------------
   15. 按钮与表单
   ------------------------------------------------------------ */
.x-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
	height:40px; padding:0 20px; border:1px solid transparent; border-radius:var(--x-pill);
	font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap;
	transition:all .18s var(--x-ease); }
.x-btn--primary{ color:#fff; background:linear-gradient(135deg,var(--x-brand),#1E9E8A);
	box-shadow:0 8px 18px -10px rgba(18,121,107,.9); }
.x-btn--primary:hover{ color:#fff; filter:brightness(1.08); }
.x-btn--accent{ color:#fff; background:linear-gradient(135deg,var(--x-accent),#D2762A); }
.x-btn--ghost{ color:var(--x-ink-2); background:var(--x-surface); border-color:var(--x-line); }
.x-btn--ghost:hover{ color:var(--x-brand); border-color:var(--x-brand); }
.x-btn--sm{ height:34px; padding:0 16px; font-size:13px; }
.x-btn--lg{ height:46px; padding:0 30px; font-size:15px; }
.x-btn--block{ display:flex; width:100%; }
.x-btn[disabled]{ opacity:.55; cursor:not-allowed; }

.x-field{ margin-bottom:16px; }
.x-field-label{ display:block; margin-bottom:7px; font-size:13.5px; font-weight:600; color:var(--x-ink-2); }
.x-input{ display:block; width:100%; height:44px; padding:0 14px; font-size:14px; color:var(--x-ink);
	background:var(--x-surface); border:1px solid var(--x-line); border-radius:var(--x-radius-sm);
	outline:0; transition:border-color .18s var(--x-ease),box-shadow .18s var(--x-ease); }
.x-input:focus{ border-color:var(--x-brand); box-shadow:0 0 0 3px var(--x-brand-50); }
textarea.x-input{ height:auto; min-height:110px; padding:12px 14px; line-height:1.7; resize:vertical; }
.x-field-tip{ margin-top:6px; font-size:12.5px; color:var(--x-muted); }

/* ------------------------------------------------------------
   16. 登录 / 注册
   ------------------------------------------------------------ */
.x-auth{ display:flex; justify-content:center; padding:44px 16px 60px; }
.x-auth-panel{ width:1000px; max-width:100%; display:grid; grid-template-columns:1.05fr .95fr;
	background:var(--x-surface); border-radius:18px; overflow:hidden; box-shadow:var(--x-shadow-2); }
.x-auth-hero{ position:relative; overflow:hidden; padding:52px 42px; color:#fff;
	background:linear-gradient(150deg,#0B3B36,#12796B 46%,#20355C); }
.x-auth-hero::after{ content:""; position:absolute; left:-50px; bottom:-70px; width:210px; height:210px;
	border-radius:50%; background:radial-gradient(circle,rgba(47,181,159,.36),transparent 68%); }
.x-auth-hero h2{ position:relative; z-index:2; font-size:25px; font-weight:800; letter-spacing:.6px; }
.x-auth-hero p{ position:relative; z-index:2; margin-top:10px; font-size:13.5px; color:rgba(255,255,255,.78); line-height:1.8; }
.x-auth-feats{ position:relative; z-index:2; margin-top:26px; }
.x-auth-feats li{ display:flex; align-items:center; gap:9px; padding:7px 0; font-size:13.5px; color:rgba(255,255,255,.9); }
.x-auth-form{ padding:44px 40px; }
.x-auth-form h3{ font-size:20px; font-weight:700; margin-bottom:6px; }
.x-auth-form > p{ font-size:13px; color:var(--x-muted); margin-bottom:22px; }
.x-auth-foot{ margin-top:18px; font-size:13px; color:var(--x-muted); text-align:center; }
/* 覆盖 Discuz 官方 .pn 的固定高度，否则按钮文字被裁 */
.x-auth-form .pn{ height:auto !important; min-height:44px; overflow:visible !important; }

/* ------------------------------------------------------------
   17. 搜索弹层
   ------------------------------------------------------------ */
.x-modal{ position:fixed; inset:0; z-index:9990; display:flex; align-items:flex-start; justify-content:center;
	padding:120px 16px 40px; background:rgba(12,22,32,.62); backdrop-filter:blur(3px); }
.x-modal-box{ position:relative; width:640px; max-width:100%; padding:26px 26px 22px;
	background:var(--x-surface); border-radius:18px; box-shadow:var(--x-shadow-2); }
.x-modal-close{ position:absolute; right:14px; top:10px; font-size:26px; line-height:1; color:var(--x-muted); }
.x-modal-close:hover{ color:var(--x-ink); }
.x-search-panel{ width:660px; }
.x-search-box{ display:flex; gap:8px; }
.x-search-box input[type=text]{ flex:1 1 auto; height:48px; padding:0 18px; font-size:15px;
	border:1px solid var(--x-line); border-radius:var(--x-pill); outline:0; }
.x-search-box input[type=text]:focus{ border-color:var(--x-brand); box-shadow:0 0 0 3px var(--x-brand-50); }
.x-search-box button{ flex:0 0 auto; height:48px; padding:0 30px; border:0; border-radius:var(--x-pill);
	font-size:15px; font-weight:600; color:#fff; cursor:pointer;
	background:linear-gradient(135deg,var(--x-brand),#1E9E8A); }
.x-search-tabs{ display:flex; gap:4px; margin-bottom:16px; }
.x-search-tabs li{ display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:var(--x-pill);
	font-size:13.5px; color:var(--x-ink-2); background:var(--x-line-2); cursor:pointer; }
.x-search-tabs li.on{ color:#fff; background:var(--x-brand); }

/* ------------------------------------------------------------
   18. 帖子页
   ------------------------------------------------------------ */
.x-crumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 0;
	font-size:13px; color:var(--x-muted); }
.x-crumb a{ color:var(--x-muted); }
.x-crumb a:hover{ color:var(--x-brand); }
.x-crumb .sep{ color:#C9D2DE; }

.x-post{ background:var(--x-surface); border-radius:var(--x-radius); box-shadow:var(--x-shadow-1);
	overflow:hidden; margin-bottom:var(--x-gap); }
.x-post-hd{ padding:20px 24px 0; }
.x-post-title{ font-size:23px; font-weight:700; line-height:1.45; color:var(--x-ink); }
.x-post-bar{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:12px 24px 0;
	font-size:12.5px; color:var(--x-muted); }
.x-post-bar span{ display:inline-flex; align-items:center; gap:5px; }
.x-post-content{ padding:22px 24px 26px; font-size:15px; line-height:1.9; color:var(--x-ink-2); word-break:break-word; }
.x-post-content img{ max-width:100%; height:auto; border-radius:var(--x-radius-sm); }
.x-post-content p{ margin:0 0 14px; }
.x-post-content a{ color:var(--x-brand); }
.x-post-content blockquote{ margin:14px 0; padding:12px 16px; border-left:3px solid var(--x-brand);
	background:var(--x-brand-50); border-radius:0 var(--x-radius-xs) var(--x-radius-xs) 0; color:var(--x-ink-2); }
.x-post-content table{ width:100%; border-collapse:collapse; margin:14px 0; }
.x-post-content td,.x-post-content th{ border:1px solid var(--x-line); padding:9px 12px; }
.x-post-content pre{ margin:14px 0; padding:14px; overflow:auto; border-radius:var(--x-radius-sm);
	background:#F7F9FC; border:1px solid var(--x-line); font-size:13px; }
.x-post-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:0 24px 20px; }

.x-post-author{ display:flex; align-items:center; gap:12px; padding:16px 24px; background:var(--x-line-2);
	border-top:1px solid var(--x-line); }
.x-post-author img{ width:44px; height:44px; border-radius:var(--x-pill); }
.x-post-author b{ display:block; font-size:14px; color:var(--x-ink); }
.x-post-author span{ font-size:12.5px; color:var(--x-muted); }

/* 付费 / 资源框 */
.x-pay{ margin:18px 0; padding:22px 24px; border-radius:var(--x-radius);
	background:linear-gradient(135deg,var(--x-accent-50),#FFF9F3); border:1px dashed rgba(232,135,58,.5); }
.x-pay-hd{ display:flex; align-items:center; gap:9px; font-size:16px; font-weight:700; color:var(--x-accent-600); }
.x-pay-price{ margin:12px 0 4px; font-size:32px; font-weight:800; color:var(--x-accent); letter-spacing:-1px; }
.x-pay-price i{ font-style:normal; font-size:18px; margin-right:3px; }
.x-pay-tip{ font-size:12.5px; color:#A98156; }
.x-pay-actions{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }

.x-netdisk{ display:grid; gap:10px; margin:18px 0; }
.x-netdisk-item{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:var(--x-radius-sm);
	background:var(--x-surface); border:1px solid var(--x-line); transition:all .18s var(--x-ease); }
.x-netdisk-item:hover{ border-color:var(--x-brand); box-shadow:var(--x-shadow-1); }
.x-netdisk-ico{ flex:0 0 38px; width:38px; height:38px; display:inline-flex; align-items:center;
	justify-content:center; border-radius:var(--x-radius-sm); color:#fff; background:var(--x-brand); }
.x-netdisk-bd{ flex:1 1 auto; min-width:0; }
.x-netdisk-bd b{ display:block; font-size:14px; color:var(--x-ink); }
.x-netdisk-bd span{ font-size:12.5px; color:var(--x-muted); }

/* 图集 */
.x-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0; }
.x-gallery a{ border-radius:var(--x-radius-sm); overflow:hidden; }

/* 引用 / 楼层 */
.x-reply{ display:flex; gap:14px; padding:16px 24px; border-top:1px solid var(--x-line); }
.x-reply-av{ flex:0 0 40px; width:40px; }
.x-reply-av img{ width:40px; height:40px; border-radius:var(--x-pill); }
.x-reply-bd{ flex:1 1 auto; min-width:0; }
.x-reply-hd{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--x-muted); }
.x-reply-hd b{ color:var(--x-ink-2); }

/* ------------------------------------------------------------
   19. 版块列表页
   ------------------------------------------------------------ */
.x-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px;
	background:var(--x-surface); border-radius:var(--x-radius); box-shadow:var(--x-shadow-1); margin-bottom:18px; }
.x-bar-label{ flex:0 0 auto; font-size:13px; color:var(--x-muted); display:inline-flex; align-items:center; gap:5px; }
.x-bar-links{ display:flex; flex-wrap:wrap; gap:6px; flex:1 1 auto; min-width:0; }
.x-bar-links a{ padding:5px 14px; border-radius:var(--x-pill); font-size:13px; color:var(--x-ink-2); }
.x-bar-links a:hover{ color:var(--x-brand); background:var(--x-brand-50); }
.x-bar-links a.on{ color:#fff; background:var(--x-brand); }
.x-bar-links a.on:hover{ color:#fff; }

.x-forum-group{ background:var(--x-surface); border-radius:var(--x-radius); box-shadow:var(--x-shadow-1);
	overflow:hidden; margin-bottom:var(--x-gap); }
.x-forum-group-hd{ display:flex; align-items:center; gap:10px; padding:15px 18px;
	border-bottom:1px solid var(--x-line-2); font-size:16px; font-weight:700; color:var(--x-ink); }
.x-forum-group-hd .x-i{ color:var(--x-brand); }
.x-forum-item{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--x-line-2); }
.x-forum-item:last-child{ border-bottom:0; }
.x-forum-ico{ flex:0 0 46px; width:46px; height:46px; border-radius:var(--x-radius-sm); overflow:hidden;
	display:flex; align-items:center; justify-content:center; background:var(--x-brand-50); color:var(--x-brand); }
.x-forum-ico img{ width:100%; height:100%; object-fit:cover; }
.x-forum-bd{ flex:1 1 auto; min-width:0; }
.x-forum-bd b{ display:block; font-size:15px; font-weight:600; color:var(--x-ink); }
.x-forum-bd b a:hover{ color:var(--x-brand); }
.x-forum-bd p{ margin-top:4px; font-size:12.5px; color:var(--x-muted);
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.x-forum-stat{ flex:0 0 auto; text-align:right; font-size:12.5px; color:var(--x-muted); }
.x-forum-stat b{ display:block; font-size:16px; font-weight:700; color:var(--x-brand); }

/* 版块页头 */
.x-page-head{ position:relative; overflow:hidden; padding:34px 0 30px; color:#fff;
	background:linear-gradient(120deg,#0B3B36,#12796B 52%,#1D5F7A); }
.x-page-head::after{ content:""; position:absolute; inset:0; opacity:.3;
	background-image:radial-gradient(circle at 82% 24%,rgba(47,181,159,.5),transparent 46%); }
.x-page-head .x-inner{ position:relative; z-index:2; }
.x-page-head h1{ font-size:26px; font-weight:800; letter-spacing:.6px; }
.x-page-head p{ margin-top:8px; font-size:13.5px; color:rgba(255,255,255,.76); }
.x-page-head-flex{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
	position:relative; z-index:2; }
.x-page-head--stack{ padding-bottom:74px; }
.x-page-head-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.x-page-head .x-btn--ghost{ color:#fff; border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.10); }
.x-page-head .x-btn--ghost:hover{ color:var(--x-brand); background:#fff; border-color:#fff; }
.x-page-head .x-btn--primary{ background:#fff; color:var(--x-brand-700); }
.x-page-head .x-btn--primary:hover{ background:var(--x-brand-50); }
.x-page-head .x-crumb{ padding:0 0 14px; color:rgba(255,255,255,.62); }
.x-page-head .x-crumb a{ color:rgba(255,255,255,.78); }
.x-page-head .x-crumb a:hover{ color:#fff; }
.x-page-body{ padding:26px 0 40px; }

/* ------------------------------------------------------------
   20. 分页 / 空态 / 工具类
   ------------------------------------------------------------ */
.x-pager{ display:flex; align-items:center; justify-content:center; gap:7px; padding:26px 0 8px; flex-wrap:wrap; }
.x-pager a,.x-pager strong{ display:inline-flex; align-items:center; justify-content:center;
	min-width:36px; height:36px; padding:0 12px; border-radius:var(--x-radius-sm);
	font-size:13.5px; color:var(--x-ink-2); background:var(--x-surface);
	border:1px solid var(--x-line); transition:all .18s var(--x-ease); }
.x-pager a:hover{ color:var(--x-brand); border-color:var(--x-brand); }
.x-pager strong{ color:#fff; background:var(--x-brand); border-color:var(--x-brand); }

.x-empty{ grid-column:1/-1; padding:56px 20px; text-align:center; font-size:13.5px; color:var(--x-muted);
	background:var(--x-surface); border-radius:var(--x-radius); box-shadow:var(--x-shadow-1); }
.x-empty .x-i{ display:block; margin:0 auto 12px; color:#C9D6E0; }

.x-line-1,.x-line-2{ overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; }
.x-line-1{ -webkit-line-clamp:1; }
.x-line-2{ -webkit-line-clamp:2; }
.x-ell{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 图标 */
.x-i{ width:1em; height:1em; display:inline-block; vertical-align:-.14em; flex:0 0 auto; }
.x-i-s{ width:.82em; height:.82em; }
.x-i-l{ width:1.5em; height:1.5em; }

/* Discuz 原生组件轻改造，保证不脱节 */
.x-page .pg{ margin:24px 0; }
.x-page .pg a,.x-page .pg strong{ border-radius:var(--x-radius-sm); }
.x-page .bm{ border-radius:var(--x-radius); border-color:var(--x-line); background:var(--x-surface); }

/* ------------------------------------------------------------
   22. 版块列表页（自有卡片式布局）
   ------------------------------------------------------------ */
.x-forum-group-hd h3{ font-size:16px; font-weight:700; color:var(--x-ink); display:flex; align-items:center; gap:9px; }
.x-forum-group-hd h3::before{ content:""; width:4px; height:16px; border-radius:2px;
	background:linear-gradient(180deg,var(--x-brand),var(--x-accent)); }
.x-forum-group-hd .x-num{ padding:1px 9px; border-radius:var(--x-pill); font-size:11.5px; font-weight:600;
	background:var(--x-brand-50); color:var(--x-brand); letter-spacing:.3px; }
.x-forum-group-hd .x-inner-right{ margin-left:auto; }

.x-forum-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:18px; }
.x-forum-grid--3{ grid-template-columns:repeat(3,1fr); }
.x-forum-card{ position:relative; display:flex; gap:14px; padding:16px; border:1px solid var(--x-line);
	border-radius:var(--x-radius-sm); background:var(--x-surface); transition:all .2s var(--x-ease); }
.x-forum-card:hover{ border-color:var(--x-brand); box-shadow:var(--x-shadow-1); transform:translateY(-2px); }
.x-forum-card .x-forum-ico{ flex:0 0 50px; width:50px; height:50px; border-radius:var(--x-radius-sm);
	background:linear-gradient(140deg,var(--x-brand-50),#DCEFEA); color:var(--x-brand); }
.x-forum-card .x-forum-ico img{ width:100%; height:100%; object-fit:cover; }
.x-forum-card-bd{ flex:1 1 auto; min-width:0; }
.x-forum-card-bd b{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600;
	color:var(--x-ink); overflow:hidden; }
.x-forum-card-bd b a{ color:inherit; }
.x-forum-card-bd b a:hover{ color:var(--x-brand); }
.x-forum-card-bd p{ margin-top:6px; font-size:12.5px; line-height:1.6; color:var(--x-muted);
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.x-forum-card-foot{ display:flex; align-items:center; gap:13px; margin-top:11px; font-size:12px; color:var(--x-muted); }
.x-forum-card-foot b{ color:var(--x-brand); font-weight:700; font-size:13px; }
.x-forum-card-foot span{ display:inline-flex; align-items:center; gap:4px; }
.x-forum-card-foot .x-i{ color:#BCC7D5; }
.x-forum-card-today{ padding:1px 8px; border-radius:var(--x-pill); font-size:11px; font-weight:600;
	background:var(--x-accent-50); color:var(--x-accent-600); flex:0 0 auto; }

/* 版块列表右侧「今日」小角标 + 图标字号 */
.x-forum-ico .x-i{ width:24px; height:24px; }

/* ------------------------------------------------------------
   23. 版块页（forumdisplay）线程列表
   ------------------------------------------------------------ */
.x-sortbar{ margin-bottom:16px; }
.x-sortbar .x-bar-links a.on{ box-shadow:0 6px 14px -8px rgba(18,121,107,.9); }
.x-sortbar .x-bar-label .x-i{ color:var(--x-brand); }

.x-threads{ background:var(--x-surface); border-radius:var(--x-radius); box-shadow:var(--x-shadow-1); overflow:hidden; }
.x-thread{ display:flex; gap:14px; align-items:flex-start; padding:16px 18px;
	border-bottom:1px solid var(--x-line-2); transition:background .16s var(--x-ease); }
.x-thread:last-child{ border-bottom:0; }
.x-thread:hover{ background:var(--x-brand-50); }
.x-thread-ico{ flex:0 0 44px; width:44px; height:44px; border-radius:var(--x-radius-sm); overflow:hidden;
	background:var(--x-brand-50); color:var(--x-brand); display:flex; align-items:center; justify-content:center; }
.x-thread-ico img{ width:100%; height:100%; object-fit:cover; }
.x-thread-ico .x-i{ width:20px; height:20px; }
.x-thread-bd{ flex:1 1 auto; min-width:0; }
.x-thread-title{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
	font-size:15px; font-weight:600; color:var(--x-ink); line-height:1.5; }
.x-thread-title a{ color:inherit; }
.x-thread-title a:hover{ color:var(--x-brand); }
.x-thread-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:8px;
	font-size:12.5px; color:var(--x-muted); }
.x-thread-meta span{ display:inline-flex; align-items:center; gap:4px; }
.x-thread-meta .x-i{ color:#BCC7D5; }
.x-thread-stat{ flex:0 0 auto; min-width:92px; text-align:right; font-size:12px; color:var(--x-muted); line-height:1.7; }
.x-thread-stat b{ display:block; font-size:15px; font-weight:700; color:var(--x-brand); }

/* 小标签（精华/置顶/热帖） */
.x-chip{ display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:var(--x-radius-xs);
	font-size:11px; font-weight:600; line-height:1.7; flex:0 0 auto; }
.x-chip--top{ background:var(--x-danger); color:#fff; }
.x-chip--hot{ background:var(--x-accent); color:#fff; }
.x-chip--digest{ background:var(--x-brand); color:#fff; }
.x-chip--lock{ background:var(--x-line); color:var(--x-muted); }
.x-chip--img{ background:var(--x-accent-50); color:var(--x-accent-600); }

/* ------------------------------------------------------------
   24. 空态与加载
   ------------------------------------------------------------ */
.x-loading{ padding:40px 0; text-align:center; font-size:13px; color:var(--x-muted); }

/* ------------------------------------------------------------
   25. 帖子页（viewthread）
   ------------------------------------------------------------ */
/* 资源信息条 */
.x-res-info{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:16px 24px 0;
	background:var(--x-line-2); border-radius:var(--x-radius-sm); overflow:hidden; }
.x-res-info li{ background:var(--x-surface); padding:12px 14px; }
.x-res-info li span{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--x-muted); }
.x-res-info li b{ display:block; margin-top:4px; font-size:14.5px; font-weight:700; color:var(--x-ink); }
.x-res-info li b.is-accent{ color:var(--x-accent); }

/* 视频资源 */
.x-video{ margin:18px 0; border-radius:var(--x-radius); overflow:hidden; background:#0B1219; }
.x-video iframe,.x-video video{ display:block; width:100%; aspect-ratio:16/9; border:0; }

/* 帖子内小节 */
.x-block{ padding:0 24px 18px; }
.x-preview{ border-radius:var(--x-radius); overflow:hidden; background:var(--x-line-2); }
.x-preview img{ display:block; width:100%; max-height:460px; object-fit:cover; }
.x-preview figcaption{ padding:10px 14px; font-size:12.5px; color:var(--x-muted); background:var(--x-surface);
	border-top:1px solid var(--x-line-2); }
.x-subhd{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
	margin-bottom:13px; padding-bottom:11px; border-bottom:1px solid var(--x-line-2); }
.x-subhd h3{ font-size:15px; font-weight:700; color:var(--x-ink); display:flex; align-items:center; gap:8px; }
.x-subhd h3 .x-i{ color:var(--x-brand); }
.x-subhd .more{ font-size:12.5px; color:var(--x-muted); }
.x-subhd .more b{ color:var(--x-accent); letter-spacing:1px; }

/* 楼层正文 */
.x-reply-txt{ margin-top:8px; font-size:14.5px; line-height:1.85; color:var(--x-ink-2); word-break:break-word; }.x-reply-txt img{ max-width:100%; height:auto; border-radius:var(--x-radius-sm); }
.x-reply-txt blockquote{ margin:12px 0; padding:10px 14px; border-left:3px solid var(--x-line);
	background:var(--x-line-2); border-radius:0 var(--x-radius-xs) var(--x-radius-xs) 0; color:var(--x-ink-3); font-size:13.5px; }
.x-reply-txt a{ color:var(--x-brand); }
.x-reply-foot{ display:flex; align-items:center; gap:14px; margin-top:10px; font-size:12.5px; color:var(--x-muted); }
.x-reply-foot a{ color:var(--x-muted); }
.x-reply-foot a:hover{ color:var(--x-brand); }
.x-floor{ flex:0 0 auto; padding:1px 9px; border-radius:var(--x-pill); font-size:11.5px; font-weight:600;
	background:var(--x-brand-50); color:var(--x-brand); }
.x-floor--op{ background:linear-gradient(135deg,var(--x-accent),#C96A1E); color:#fff; }

/* 上下篇 */
.x-thread-nav{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:var(--x-gap); }
.x-thread-nav a{ display:block; padding:14px 18px; background:var(--x-surface); border-radius:var(--x-radius);
	box-shadow:var(--x-shadow-1); font-size:13.5px; color:var(--x-ink-2); transition:all .18s var(--x-ease); }
.x-thread-nav a:hover{ color:var(--x-brand); box-shadow:var(--x-shadow-2); transform:translateY(-2px); }
.x-thread-nav a span{ display:block; font-size:12px; color:var(--x-muted); margin-bottom:5px; }
.x-thread-nav a.is-empty{ background:transparent; box-shadow:none; }

/* 回复框 */
.x-editor{ padding:0 24px 20px; }
.x-editor textarea{ display:block; width:100%; min-height:120px; padding:13px 15px; font-size:14.5px;
	line-height:1.75; color:var(--x-ink); background:var(--x-bg); border:1px solid var(--x-line);
	border-radius:var(--x-radius-sm); resize:vertical; transition:border-color .18s var(--x-ease); }
.x-editor textarea:focus{ outline:0; border-color:var(--x-brand); background:var(--x-surface); }
.x-editor-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap; }

/* ------------------------------------------------------------
   21. 响应式
   ------------------------------------------------------------ */
@media (max-width:1280px){
	.x-nav > li > a{ padding:0 10px; font-size:14px; }
	.x-inner{ padding:0 14px; }
}
@media (max-width:1180px){
	.x-nav > li > a{ padding:0 8px; font-size:13.5px; }
	.x-navbar .x-inner{ gap:12px; }
}
@media (max-width:1080px){
	.x-cols{ flex-direction:column; }
	.x-cols-side{ width:100%; flex:1 1 auto; }
	.x-grid--5,.x-grid--6{ grid-template-columns:repeat(4,1fr); }
	.x-stats-inner{ grid-template-columns:repeat(3,1fr); }
	.x-footer-cols{ grid-template-columns:1fr 1fr; }
	.x-quick{ grid-template-columns:repeat(2,1fr); }
	.x-forum-grid--3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
	.x-grid--4,.x-grid--5,.x-grid--6{ grid-template-columns:repeat(3,1fr); }
	.x-arts--3,.x-arts--4{ grid-template-columns:repeat(2,1fr); }
	.x-auth-panel{ grid-template-columns:1fr; }
	.x-auth-hero{ display:none; }
	.x-nav{ display:none; }
	.x-hero{ padding:74px 0 46px; }
	.x-hero-title{ font-size:26px; }
	.x-gallery{ grid-template-columns:repeat(3,1fr); }
	.x-vip-inner{ flex-direction:column; align-items:flex-start; }
	.x-forum-grid,.x-forum-grid--3{ grid-template-columns:1fr; padding:14px; }
	.x-page-head{ padding:26px 0 24px; }
	.x-page-head h1{ font-size:22px; }
	.x-thread-stat{ display:none; }
	.x-res-info{ grid-template-columns:repeat(2,1fr); margin:14px 16px 0; }
	.x-thread-nav{ grid-template-columns:1fr; }
	.x-reply,.x-post-content,.x-post-hd,.x-editor,.x-post-actions,.x-post-bar{ padding-left:16px; padding-right:16px; }
}
@media (max-width:640px){
	.x-grid--2,.x-grid--3,.x-grid--4,.x-grid--5,.x-grid--6{ grid-template-columns:repeat(2,1fr); }
	.x-arts--2,.x-arts--3,.x-arts--4,.x-arts--plain{ grid-template-columns:1fr; }
	.x-quick{ grid-template-columns:1fr; }
	.x-stats-inner{ grid-template-columns:repeat(2,1fr); }
	.x-footer-cols{ grid-template-columns:1fr; }
	.x-entry--row{ flex-direction:column; }
	.x-entry--row .x-entry-media{ flex:1 1 auto; width:100%; }
	.x-gallery{ grid-template-columns:repeat(2,1fr); }
	.x-forum-card{ padding:14px; }
	.x-thread{ padding:14px; gap:11px; }
	.x-thread-ico{ flex:0 0 38px; width:38px; height:38px; }
	.x-bar{ padding:10px 12px; gap:10px; }
}