/* =========================================================================
   ArtGamer 动态页（原广播 home.php?mod=follow&do=feed）
   B 站式三栏信息流：左个人卡 + 中发布框/动态流 + 右侧四模块。
   仅在 home && mod=follow && do=feed 时加载（见 header_common.php $artgamer_is_feed）。
   配套模板：home/follow_feed.php（do=feed 分支）、home/follow_feed_li.php
   配套脚本：iscwo/js/artgamer_feed.js（发布框九宫格上传/计数 + 顶部 Tab 过滤）
   作用域统一前缀 .artg-feed，避免污染共用 do=view / following / follower 视图。
   版本号=filemtime，改文件即破缓存。
   ========================================================================= */

/* ---------- 页面底色：与首页/作品列表同款赛博朋克暗色 ---------- */
.artg-feed {
	color: #eef3ff;
	font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.artg-feed a { color: #c7d2f0; text-decoration: none; }
.artg-feed a:hover { color: #fff; }

/* ---------- 三栏骨架（复用旧模板 #ct > .main_l/.main_c/.main_r 类名，旧内联 CSS 已移除） ---------- */
.artg-feed {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 1260px !important;
	max-width: calc(100vw - 80px);
	margin: 22px auto 40px !important;
	box-sizing: border-box;
}
/* 干掉核心 style_10 在 .ct2_a 容器上的 1px #CCC 边框 + vlineb.png 竖线背景（老三栏遗留），#ct 提权压过 .ct2_a .ct3_a */
#ct.artg-feed {
	border: 0 none !important;
	background-image: none !important;
}
.artg-feed .main_l { width: 240px !important; flex: 0 0 240px; margin: 0 !important; position: sticky; top: 76px; display: block !important; background: transparent !important; }
.artg-feed .main_c { width: auto !important; flex: 1 1 auto; min-width: 0; margin: 0 !important; display: block !important; }
.artg-feed .main_r { width: 300px !important; flex: 0 0 300px; margin: 0 !important; position: sticky; top: 76px; display: block !important; }

@media (max-width: 1180px) {
	.artg-feed .main_r { display: none !important; }
	.artg-feed { width: 980px !important; }
}
@media (max-width: 1024px) {
	.artg-feed .main_l { display: none !important; }
	.artg-feed { width: 720px !important; }
}

/* 通用面板外观 */
.artg-panel {
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(12, 20, 38, 0.92), rgba(6, 15, 23, 0.98));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
	overflow: hidden;
}

/* =========================================================================
   左栏 · 个人卡
   ========================================================================= */
.artg-fl-card {
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(14, 23, 43, 0.95), rgba(6, 15, 23, 0.98));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
	overflow: hidden;
	text-align: center;
}
.artg-fl-cover {
	height: 78px;
	background: linear-gradient(120deg, #2a1346 0%, #3a1d63 38%, #14264d 100%);
	position: relative;
}
.artg-fl-cover:after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
	background: linear-gradient(180deg, transparent, rgba(6, 15, 23, 0.6));
}
.artg-fl-avatar {
	display: block; width: 72px; height: 72px; margin: -36px auto 0;
	position: relative; z-index: 2;
}
.artg-fl-avatar img {
	width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
	border: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.artg-fl-name {
	display: block; margin: 10px 12px 0; color: #f5f7ff !important;
	font-size: 17px; font-weight: 700;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.artg-fl-stats {
	display: flex; margin: 16px 0 18px; padding: 0;
}
.artg-fl-stats a {
	flex: 1 1 0; display: block; text-align: center; position: relative;
}
.artg-fl-stats a + a:before {
	content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
	width: 1px; background: rgba(255, 255, 255, 0.07);
}
.artg-fl-stats b {
	display: block; color: #fff; font-size: 18px; font-weight: 700; line-height: 22px;
}
.artg-fl-stats span { display: block; color: rgba(239, 243, 255, 0.5); font-size: 12px; margin-top: 2px; }
.artg-fl-stats a:hover b { color: #ff7bf2; text-shadow: 0 0 10px rgba(255, 66, 255, 0.6); }

/* 左栏快捷入口 */
.artg-fl-links { margin-top: 14px; padding: 6px; box-shadow: none; }
.artg-fl-links a {
	display: flex; align-items: center; justify-content: flex-start; gap: 10px; height: 40px; padding: 0 14px;
	border-radius: 8px; color: rgba(239, 243, 255, 0.78) !important; font-size: 14px;
	transition: background .18s, color .18s;
}
.artg-fl-links a:hover { background: rgba(120, 70, 200, 0.16); color: #fff !important; }
.artg-fl-links a i {
	width: 18px; height: 18px; flex: 0 0 18px; margin: 0 !important;
	background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
	opacity: .9; transition: opacity .18s;
}
.artg-fl-links a:hover i { opacity: 1; }
/* 设计稿左栏菜单图标：作品(图片) / 文章(文档) / 收藏(书签)，浅紫描边 */
.artg-fl-link-work i {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M21 15l-5-5-7 7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.artg-fl-link-article i {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7'%3E%3Cpath d='M6 3h8l4 4v14H6z' stroke-linejoin='round'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.artg-fl-link-fav i {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 17px 17px;
	opacity: .84;
}

/* =========================================================================
   中栏 · 发布框
   ========================================================================= */
.artg-compose {
	border-radius: 10px; padding: 16px 18px 12px;
	margin-bottom: 16px;
	background: linear-gradient(180deg, rgba(16, 26, 48, 0.96), rgba(8, 17, 30, 0.98));
	box-shadow: inset 0 0 0 1px rgba(150, 110, 255, 0.10);
}
.artg-compose #fastpostform { float: none !important; width: 100%; }
.artg-compose #fastpostreturn:empty { display: none; }

/* 隐藏旧版「同步到论坛」标题行/版块选择，保持纯动态体验 */
.artg-compose #flw_post_subject,
.artg-compose #forumlistdev { display: none !important; }
.artg-compose .my_flw_stats { display: none !important; }

/* 文本输入区 */
.artg-compose .tedt,
.artg-compose .area,
.artg-compose #fastposteditor,
.artg-compose #flw_post_extra { border: 0 !important; background: transparent !important; padding: 0 !important; }
/* 杀掉核心遗留的所有横线：
   · common.css `.bbs{border-bottom:1px !important}` —— #flw_header(=.artg-compose) 底边白线
   · module.css `#flw_header .bar{border-top:1px #EFEFEF}` —— 文本框与工具条之间的白线
   · module.css `.tedt{border:1px #9EB4C2}` —— 编辑器外框 */
.artg-compose.bbs { border-bottom: 0 !important; }
.artg-compose #flw_header .bar,
.artg-compose #flw_bar.bar,
.artg-compose .tedt,
.artg-compose .area { border: 0 !important; box-shadow: none !important; background: transparent !important; }
.artg-compose textarea#fastpostmessage {
	display: block; width: 100%; box-sizing: border-box;
	min-height: 78px; max-height: 220px; resize: none;
	/* 核心 common.css `.tedt .pt{padding:0!important}` 会盖掉非 !important 的内边距，
	   导致光标贴左边框，故这里必须 !important。 */
	padding: 14px 16px !important; border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.07) !important;
	background: rgba(0, 0, 0, 0.22) !important;
	/* 输入后的字体颜色与下方动态正文 (.afc-body) 一致 */
	color: #d7def0 !important; font-size: 15px; line-height: 22px;
	outline: none; transition: border-color .18s, box-shadow .18s;
}
/* 聚焦不变紫，只把白色边框提亮一点 */
.artg-compose textarea#fastpostmessage:focus {
	border-color: rgba(255, 255, 255, 0.22) !important;
	box-shadow: none;
}
.artg-compose textarea#fastpostmessage::placeholder { color: rgba(239, 243, 255, 0.34); }

/* =========================================================================
   发布框图片网格（参考作品发帖页上传卡片）
   boan 走「附件(attach)」模式：每张图渲染成 div.progressWrapper > table…，真正的
   预览图藏在 display:none 的 .attach_preview > img（forum.php?mod=image&size=300x300）。
   这里把每个 progressWrapper 重排成方格、隐掉表格文字/文件类型小图标、把预览图铺满、
   删除链接(td.attc a onclick=delAttach)做成右上角 × 角标。上传中态走 .progressBar*。
   ========================================================================= */
.artg-compose #attachlist {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
	margin: 10px 0 0; padding: 0; min-height: 0;
	width: 100%; box-sizing: border-box;
}
/* 模板自带的占位空 span（font-size:0）不占格 */
.artg-compose #attachlist > span:empty { display: none; }

/* 每个上传项 = 一个方格卡片（固定高度，避免内容隐藏后塌缩成小点） */
.artg-compose #attachlist .progressWrapper {
	position: relative; margin: 0 !important; padding: 0 !important; width: 100%;
	height: 110px; border-radius: 8px; overflow: hidden; background: #0b111f;
	/* 不加 inset 描边：图片铺满后那圈浅蓝 1px 在暗图上会显成「白色描边」，尤其四角最明显 */
	box-shadow: none;
}
/* 表格结构整体块级化、铺满方格。
   ⚠ 核心给 <table> 注入了 白底(#fff) + 4px 圆角，比 wrapper 的 8px 圆角小一圈 → 四角露白边
   （console 实测 row1 TABLE background:rgb(255,255,255)）。这里把整套 table 元素背景透明、去圆角。 */
.artg-compose #attachlist .progressWrapper table,
.artg-compose #attachlist .progressWrapper tbody,
.artg-compose #attachlist .progressWrapper tr,
.artg-compose #attachlist .progressWrapper td.attswf {
	display: block !important; width: 100% !important; height: 100%;
	margin: 0 !important; padding: 0 !important; border: 0 !important;
	background: transparent !important; border-radius: 0 !important;
}
/* attswf 下默认全隐（文件名 p / 更新 span / 隐藏 input），只放出预览图。
   ⚠ 放出规则要比 `td.attswf > *` 更具体，否则被它的 !important display:none 压过（之前只剩白点的原因）。 */
.artg-compose #attachlist .progressWrapper td.attswf > * { display: none !important; }
/* ⚠ .attach_preview 本是 display:none 的悬浮预览菜单，我们强制铺成缩略图。它自带核心样式
   `module.css:301 .attach_preview{border:1px solid COMMONBORDER; box-shadow:0 0 5px rgba(96,96,96,.3)}`，
   那圈浅色实线边框=图未加载时的「白框」过渡 + 圆角 wrapper 上四角露出的「白边」。必须一并清掉。 */
.artg-compose #attachlist .progressWrapper td.attswf > .attach_preview {
	display: block !important; position: absolute !important; inset: 0; margin: 0 !important;
	padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important;
}
.artg-compose #attachlist .progressWrapper td.attswf > .attach_preview img {
	width: 100% !important; height: 100% !important; object-fit: cover; display: block; border: 0;
}
/* 删除 × 角标（复用 delAttach） */
.artg-compose #attachlist .progressWrapper td.attc {
	position: absolute; top: 4px; right: 4px; z-index: 3;
	display: block; width: auto !important; height: auto; padding: 0 !important; border: 0 !important;
}
/* 完全照搬作品发帖页媒体删除按钮 .artg-video-del：22px 圆 + flex 居中 + 内联 SVG ×。
   × 是 JS 写进去的 <svg width=12 height=12>（见 artgamer_feed.js），固定尺寸 + flex 居中
   绝对正；stroke=currentColor + color:#fff 出白叉；hover 红。 */
.artg-compose #attachlist .progressWrapper td.attc a {
	display: flex; align-items: center; justify-content: center;
	box-sizing: border-box; width: 22px; height: 22px; padding: 0;
	border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, 0.55); color: #fff !important;
	text-decoration: none; cursor: pointer; overflow: hidden;
	transition: background .15s;
}
.artg-compose #attachlist .progressWrapper td.attc a svg { display: block; }
.artg-compose #attachlist .progressWrapper td.attc a:hover { background: rgba(220, 60, 80, 0.9); }

/* 上传中态（boan FileProgress：.progressContainer/.progressName/.progressBarStatus/.progressBarInProgress）。
   ⚠ 核心给 .progressContainer 及其 .green/.blue/.red 状态类带了浅色边框 + 近白底：
     · module.css:2224 → border:1px dashed #9EB4C2 + 透明底  ＝ 上传排队时先出现的「虚线框」
     · common.css .green/.blue → border:solid 1px 浅色 + 浅色底(#EBFFEB 等) ＝ 上传中/完成时的「白框」
   这些矩形浅框叠在圆角 wrapper 上，四角被圆角裁切就露出白边。
   这里把容器整体抹平为透明、无边框、无外边距，配合 wrapper 暗底 + JS 即时本地预览，
   做到「点完直接显示所选图」，不再经历 虚线框→白框 两段过渡，也消除图片四角白边。 */
.artg-compose #attachlist .progressWrapper .progressContainer,
.artg-compose #attachlist .progressWrapper .progressContainer.green,
.artg-compose #attachlist .progressWrapper .progressContainer.blue,
.artg-compose #attachlist .progressWrapper .progressContainer.red {
	position: absolute !important; inset: 0; width: auto !important;
	margin: 0 !important; padding: 0 !important;
	border: 0 !important; background: transparent !important;
}
/* 文件名 / 状态文字 / 取消链接都隐掉：本地预览已直接铺出真图，不再叠「上传中…」文字与小×（删除走 server 渲染后的 td.attc ×） */
.artg-compose #attachlist .progressWrapper .progressName,
.artg-compose #attachlist .progressWrapper .progressBarStatus,
.artg-compose #attachlist .progressWrapper .progressCancel { display: none !important; }
/* 仅保留底部一条细进度条作为上传指示 */
.artg-compose #attachlist .progressWrapper .progressBarInProgress,
.artg-compose #attachlist .progressWrapper .progressBarComplete {
	position: absolute; left: 0; bottom: 0; height: 3px;
	background: linear-gradient(90deg, #b026d8, #6a3aff) !important;
}

/* 输入区 .tedt 排成弹性列：textarea 独占一行，工具条 + 发布按钮同一行 */
.artg-compose .tedt { display: flex; flex-wrap: wrap; align-items: center; }
.artg-compose .tedt > .area { flex: 0 0 100%; width: 100%; }
.artg-compose .tedt > #flw_bar { flex: 1 1 auto; min-width: 0; }

/* 工具条 */
.artg-compose .bar,
.artg-compose #flw_bar {
	display: flex; align-items: center; justify-content: flex-start; gap: 6px;
	margin: 12px 0 0 !important; padding: 0 !important;
	border: 0 !important; background: transparent !important;
}
/* seditor 把表情/@/上传都塞进单个 .fpd；核心给 flex 子项注入 margin:auto 会把整组
   顶到居中（margin:auto 优先级高于 justify-content），故强制 margin:0 并自身也排成
   左对齐弹性行，保证图标贴左。 */
.artg-compose #flw_bar .fpd {
	display: flex; align-items: center; justify-content: flex-start; gap: 6px;
	margin: 0 !important;
}
/* .upfl 包裹 #attachlist + 上传后端；必须保持块级满宽，否则 inline-flex 收缩成内容宽
   会把里面的 #attachlist 网格 1fr 掐成 ~3px（预览图被压成竖条的真凶）。 */
.artg-compose .upfl.hasfsl,
.artg-compose .upfl { display: block; width: 100%; margin: 0 !important; padding: 0 !important; background: transparent !important; }

/* 工具按钮统一外观（表情 / @；上传按钮单独在 #picker 处理） */
.artg-compose .fpd a {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 34px !important; height: 34px !important;
	margin: 0 !important; border-radius: 8px;
	background-repeat: no-repeat !important; background-position: center !important;
	background-size: 20px 20px !important;
	cursor: pointer; opacity: .72; transition: opacity .18s, background-color .18s;
}
.artg-compose .fpd a:hover { opacity: 1; background-color: rgba(140, 68, 255, 0.18); }

/* 表情图标（白色描边） */
.artg-compose .fpd a.fsml {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='9' cy='10' r='1.2' fill='%23ffffff' stroke='none'/%3E%3Ccircle cx='15' cy='10' r='1.2' fill='%23ffffff' stroke='none'/%3E%3Cpath d='M8.5 14.5c1 1.4 2.2 2 3.5 2s2.5-.6 3.5-2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
/* @ 图标（白色描边） */
.artg-compose .fpd a.fat {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-3.5 7.1' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
/* 上传图标（白色描边）。boan webuploader 会在 #picker 里再注入
   .webuploader-container > .webuploader-pick（外加 input）。若给这几层都铺背景图标，
   会因层层叠放出现「双层图标」——故图标只画在最外层 #picker 一处，内层只做透明撑满
   保留点击热区。同时把 #picker 自带的「附件」文字隐掉。 */
.artg-compose #picker {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M21 16l-5-5-6 6-3-3-4 4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: center !important;
	background-size: 20px 20px !important;
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 34px !important; height: 34px !important; border-radius: 8px;
	cursor: pointer; opacity: .8; transition: opacity .18s, background-color .18s;
	font-size: 0 !important; color: transparent !important; text-indent: -9999px; overflow: hidden;
}
.artg-compose #picker:hover { opacity: 1; background-color: rgba(140, 68, 255, 0.18); }
/* 内层只撑满做点击热区，不再铺第二层图标 */
.artg-compose .webuploader-container,
.artg-compose .webuploader-pick {
	width: 34px !important; height: 34px !important;
	margin: 0 !important; padding: 0 !important;
	background: transparent !important; background-image: none !important;
}
/* #uploader 是 boan 替换占位符后包裹上传按钮的容器，去掉它可能带的块级换行/边距，保持与表情/@同一行 */
.artg-compose #uploader,
.artg-compose #uploader .btns,
.artg-compose #uploader .wu-example { display: inline-flex !important; align-items: center; margin: 0 !important; padding: 0 !important; }
.artg-compose #uploader #thelist { display: none !important; }
/* 图片计数提示（JS 注入） */
.artg-compose .artg-img-count {
	font-size: 12px; color: rgba(239, 243, 255, 0.4); margin-left: 2px;
}
.artg-compose .artg-img-count.is-full { color: #ff7b8a; }

/* 表情面板（seditor 弹层）暗色化 */
.artg-compose .fsl,
.artg-compose .pop_box,
#fastpost_smiliesframe {
	background: #141c30 !important; border: 1px solid rgba(150, 110, 255, 0.22) !important;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important; border-radius: 8px !important;
}

/* 提交按钮（与工具条同处 .tedt 末行，靠右） */
.artg-compose .artg-submit-row { flex: 0 0 auto; margin: 12px 0 0; }
.artg-compose .artg-submit-row > .z { display: none !important; }
.artg-compose .artg-submit-row > .y { float: none; }
.artg-compose .pnpost { margin: 0 !important; padding: 0 !important; }
.artg-compose .pnpost label { display: none !important; }
.artg-compose #fastpostsubmit {
	float: none; display: inline-flex; align-items: center; justify-content: center;
	height: 36px; min-width: 84px; padding: 0 22px; white-space: nowrap;
	border: 0; border-radius: 8px; cursor: pointer;
	background: linear-gradient(120deg, #b026d8 0%, #6a3aff 100%) !important;
	box-shadow: 0 6px 18px rgba(120, 50, 220, 0.4) !important;
	color: #fff; text-indent: 0; transition: filter .18s, transform .12s;
}
.artg-compose #fastpostsubmit:hover { filter: brightness(1.1); }
.artg-compose #fastpostsubmit:active { transform: translateY(1px); }
.artg-compose #fastpostsubmit strong { color: #fff; font-weight: 600; }

/* =========================================================================
   中栏 · 顶部筛选 Tab
   ========================================================================= */
.artg-feed-tabs {
	display: flex; align-items: center; gap: 36px;
	height: 50px; margin-bottom: 12px; padding: 0 6px;
	border-bottom: 1px solid rgba(113, 125, 172, 0.14);
}
.artg-feed-tabs .artg-ftab {
	position: relative; height: 50px; line-height: 50px;
	color: rgba(239, 243, 255, 0.62); font-size: 16px; cursor: pointer;
	transition: color .2s, text-shadow .2s;
}
.artg-feed-tabs .artg-ftab:after {
	content: ""; position: absolute; left: 50%; bottom: -1px;
	width: 60px; height: 3px; border-radius: 999px;
	background: linear-gradient(90deg, #ff2df7, #8e44ff);
	box-shadow: 0 0 8px rgba(255, 66, 255, 0.9), 0 0 22px rgba(139, 55, 255, 0.8);
	transform: translateX(-50%) scaleX(0); transition: transform .2s;
}
.artg-feed-tabs .artg-ftab:hover,
.artg-feed-tabs .artg-ftab.is-active { color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, 0.5), 0 0 16px rgba(198, 55, 255, 0.85); }
.artg-feed-tabs .artg-ftab.is-active:after { transform: translateX(-50%) scaleX(1); }

/* =========================================================================
   中栏 · 动态卡片
   ========================================================================= */
.artg-feed-list { margin: 0; padding: 0; list-style: none; }
.artg-feed-card {
	position: relative; list-style: none;
	margin: 0 0 16px; padding: 20px;
	border-radius: 16px;
	/* 描边/悬停外发光照搬老页面真实计算值：白 .03 描边 + 紫 rgba(111,58,255,.12) 外发光 */
	background: linear-gradient(180deg, rgba(12, 20, 38, 0.92), rgba(6, 15, 23, 0.98));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
	transition: transform .22s, background .22s, box-shadow .22s;
}
.artg-feed-card:hover {
	transform: translateY(-3px);
	background: linear-gradient(180deg, rgba(14, 23, 43, 0.96), rgba(7, 17, 27, 1));
	box-shadow: 0 0 18px rgba(111, 58, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.artg-feed-card.is-hidden { display: none; }

/* 头部：头像 + 昵称 + 时间 */
.afc-head { display: flex; align-items: flex-start; gap: 12px; }
.afc-avatar { flex: 0 0 auto; }
.afc-avatar img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.afc-meta { flex: 1 1 auto; min-width: 0; }
.afc-name { display: inline-block; color: #ffffff !important; font-size: 15px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afc-name:hover { color: #ffffff !important; opacity: .82; }
.afc-sub { display: block; margin-top: 2px; color: rgba(239, 243, 255, 0.4); font-size: 12px; }
.afc-sub .afc-forum { color: rgba(170, 130, 255, 0.85); margin-left: 8px; }
.afc-sub .afc-forum:hover { color: #c7a6ff; }

/* 更多菜单 */
.afc-more { position: relative; flex: 0 0 auto; }
.afc-more-btn {
	width: 30px; height: 30px; border-radius: 7px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	color: rgba(239, 243, 255, 0.5); transition: background .18s, color .18s;
}
.afc-more-btn:hover { background: rgba(140, 68, 255, 0.16); color: #fff; }
.afc-more-btn:before { content: "\22EF"; font-size: 20px; line-height: 1; }
.afc-more-panel {
	display: none; position: absolute; right: 0; top: 34px; z-index: 20;
	min-width: 116px; padding: 6px; border-radius: 9px;
	background: #141c30; border: 1px solid rgba(150, 110, 255, 0.22);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.afc-more:hover .afc-more-panel,
.afc-more-panel.is-open { display: block; }
.afc-more-panel a,
.afc-more-panel input[type="button"] {
	display: block !important; width: 100%; box-sizing: border-box;
	height: 34px; line-height: 34px; padding: 0 12px; border: 0;
	border-radius: 6px; background: transparent; cursor: pointer;
	color: rgba(239, 243, 255, 0.82) !important; font-size: 13px; text-align: left;
}
.afc-more-panel a:hover,
.afc-more-panel input[type="button"]:hover { background: rgba(140, 68, 255, 0.18); color: #fff !important; }

/* 正文（缩进对齐头像下方：42 头像 + 12 间距 = 54） */
.afc-body { margin: 14px 0 4px; padding-left: 54px; color: #d7def0; font-size: 16px; line-height: 1.7; word-break: break-word; }
.afc-body img { max-width: 100%; border-radius: 8px; }
.afc-text { white-space: pre-wrap; }

/* 作品卡（fid56）：标题在上 + 16:9 大封面（竖版） */
.afc-work { margin-top: 2px; }
.afc-work-title { display: block; color: #f5f7ff !important; font-size: 19px; font-weight: 800; line-height: 1.35; margin-bottom: 12px; text-decoration: none; transition: color .18s; }
a.afc-work-title:hover { color: #9bb4ff !important; }
.afc-work-cover {
	position: relative; display: block; border-radius: 14px; overflow: hidden;
	aspect-ratio: 16 / 9; background: #0b111f;
	box-shadow: inset 0 0 0 1px rgba(120, 150, 220, 0.16);
}
.afc-work-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.afc-work-cover:hover img { transform: scale(1.04); }
.afc-work-desc { margin-top: 10px; color: rgba(239, 243, 255, 0.6); font-size: 14px; line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* 视频播放角标 */
.afc-play {
	position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
	transform: translate(-50%, -50%); border-radius: 50%;
	background: rgba(10, 14, 28, 0.55); border: 2px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
}
.afc-play:before {
	content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
	border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff;
}

/* 文章卡（fid!=56）：168×4:3 缩略图 + 摘要 + 阅读全文，左侧强调条 */
.afc-article {
	display: flex; gap: 18px; margin-top: 2px; padding: 16px; border-radius: 14px;
	background: rgba(110, 140, 220, 0.06); box-shadow: inset 0 0 0 1px rgba(120, 150, 220, 0.14);
	border-left: 3px solid #6a8aff;
}
.afc-art-thumb { position: relative; flex: 0 0 168px; width: 168px; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: #0b111f; }
.afc-art-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.afc-art-text { flex: 1 1 auto; min-width: 0; }
.afc-art-title {
	display: block; color: #f5f7ff !important; font-size: 18px; font-weight: 800; line-height: 1.35;
	overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.afc-article:hover .afc-art-title { color: #fff !important; }
.afc-art-desc {
	margin-top: 9px; color: rgba(239, 243, 255, 0.5); font-size: 13.5px; line-height: 1.6;
	overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.afc-read { display: inline-flex; align-items: center; margin-top: 12px; color: #8fb6ff; font-size: 12.5px; font-weight: 600; }

/* 九宫格图集 + 灯箱触发 */
.afc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; align-items: start; }
.afc-gimg {
	position: relative; border-radius: 10px; overflow: hidden; cursor: zoom-in;
	box-shadow: inset 0 0 0 1px rgba(120, 150, 220, 0.12); background: #0b111f;
	transition: box-shadow .18s;
}
/* grid 子项内只有绝对定位的 img（贡献 0 宽），默认 stretch 失效会把格子拖成 0 宽，
   导致下面 padding-top 的百分比（按宽算）也变 0 → 高度塌缩。显式 width:100% 让格子铺满轨道，
   再用占位伪元素的百分比 padding 在所有浏览器稳定生成方块高度。 */
.afc-gallery > .afc-gimg { width: 100%; box-sizing: border-box; }
.afc-gallery > .afc-gimg::before { content: ""; display: block; padding-top: 100%; }
.afc-gimg:hover { box-shadow: inset 0 0 0 1px rgba(140, 180, 255, 0.5); }
/* 单图：放大铺满，不缩成小方格 */
.afc-gallery > .afc-gimg:only-child { grid-column: 1 / -1; max-width: 440px; }
.afc-gallery > .afc-gimg:only-child::before { padding-top: 62.5%; /* 16:10 */ }

/* 作品大封面下的缩略图排（正文含多图/视频时）——含视频封面在内的全部作品封面，数量不足时仍左对齐 */
.afc-thumbrow { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin-top: 8px; }
/* ⚠核心 CSS 给 flex 子项(div)注 margin:auto 会把缩略图顶散开/居中，justify-content 压不住，必须显式清零 */
.afc-thumbrow .afc-thumb { position: relative; flex: 0 0 auto; width: 72px; height: 72px; aspect-ratio: auto; border-radius: 8px; margin: 0 !important; overflow: hidden; background: #0b111f; cursor: pointer; }
.afc-thumbrow .afc-thumb-video { cursor: default; }
.afc-thumbrow .afc-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.afc-gimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.afc-zoom {
	position: absolute; right: 7px; bottom: 7px; width: 24px; height: 24px; border-radius: 7px;
	background: rgba(8, 7, 15, 0.55); backdrop-filter: blur(4px);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-3.5-3.5'/%3E%3Cpath d='M11 8v6M8 11h6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 13px 13px; opacity: .85;
}

/* 转发：评语 + 内嵌原动态引用卡 */
.afc-repost-note { color: #d6d4ea; font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
.afc-quote { padding: 16px; border-radius: 14px; background: rgba(4, 8, 18, 0.5); box-shadow: inset 0 0 0 1px rgba(120, 150, 220, 0.12); }
.afc-quote-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.afc-quote-avt { flex: 0 0 auto; }
.afc-quote-avt img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.afc-quote-name { display: block; color: #6fd0ff !important; font-size: 13.5px; font-weight: 700; }
.afc-quote-name:hover { color: #aee4ff !important; }
.afc-quote-time { display: block; margin-top: 2px; color: rgba(239, 243, 255, 0.4); font-size: 11px; }
.afc-quote-body { color: #d6d4ea; font-size: 14px; line-height: 1.6; margin-bottom: 11px; white-space: pre-wrap; }
/* 引用 · 作品 */
.afc-qwork { display: block; }
.afc-qwork-title { display: block; color: #f5f7ff !important; font-size: 16px; font-weight: 800; line-height: 1.3; margin-bottom: 11px; }
.afc-qwork-cover { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: #0b111f; }
.afc-qwork-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 引用 · 文章 */
.afc-qart { display: flex; gap: 16px; }
.afc-qart-thumb { position: relative; flex: 0 0 150px; width: 150px; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: #0b111f; }
.afc-qart-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.afc-qart-text { flex: 1 1 auto; min-width: 0; }
.afc-qart-title { display: block; color: #f5f7ff !important; font-size: 16px; font-weight: 800; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.afc-qart-desc { margin-top: 8px; color: rgba(239, 243, 255, 0.5); font-size: 13px; line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* 删除/已删提示 */
.afc-deleted { margin-top: 10px; padding: 14px; border-radius: 8px; background: rgba(0,0,0,0.2); color: rgba(239,243,255,0.4); font-size: 13px; text-align: center; }

/* 动作条：转发 / 评论 / 点赞 三等分按钮 */
.afc-actions {
	display: flex; align-items: center; gap: 6px;
	margin-top: 16px; padding-top: 14px;
	border-top: 1px solid rgba(120, 150, 220, 0.12);
}
.afc-act {
	flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
	padding: 8px; border-radius: 10px; color: rgba(239, 243, 255, 0.55) !important; font-size: 13px;
	cursor: pointer; transition: color .18s, opacity .18s;
}
.afc-act > i, .afc-act > span { margin: 0 !important; }
.afc-act span { display: inline-flex; align-items: center; gap: 4px; }
.afc-act > i { flex: 0 0 auto; width: 17px; height: 17px; display: inline-block; background-repeat: no-repeat; background-position: center; background-size: 17px 17px; opacity: .85; }
.afc-act:hover { color: rgba(239, 243, 255, 0.92) !important; background: transparent; }
.afc-act:hover > i { opacity: 1; }
.afc-act-like:hover { color: rgba(239, 243, 255, 0.92) !important; }
/* 点赞按钮：照搬作品/帖子详情页(.awd-act-like)——未赞品牌紫描边图标、已赞紫色实心图标 + 紫色文字 */
.afc-act.is-on { color: #bf6bff !important; }
.afc-act-like.is-on:hover { color: #cf8bff !important; }
.afc-act.is-disabled { cursor: default; opacity: .5; }
.afc-act.is-disabled:hover { background: transparent; color: rgba(239, 243, 255, 0.55) !important; }
.afc-likenum { margin: 0 !important; width: auto; height: auto; background: none; font-style: normal; }
.afc-act-relay > i { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6dd' stroke-width='1.8'%3E%3Cpath d='M4 9l4-4 4 4M8 5v9a4 4 0 0 0 4 4h8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.afc-act-reply > i { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6dd' stroke-width='1.8'%3E%3Cpath d='M21 12a8 8 0 0 1-11.5 7.2L4 21l1.8-5.5A8 8 0 1 1 21 12z' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* 未赞：详情页同款 thumbs-up 描边，灰色（仅点赞后变品牌紫） */
.afc-act-like > i  { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6dd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); }
/* 已赞：详情页同款 thumbs-up 实心(material)，品牌紫填充 */
.afc-act-like.is-on > i { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bf6bff'%3E%3Cpath d='M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z'/%3E%3C/svg%3E"); }

/* =========================================================================
   内联「评论 / 转发」框 —— 暗色换皮
   两个表单都是 ajax 注入进 #replybox_X / #relaybox_X(.flw_replybox)：
     · 评论 = 默认 forum/ajax_quickreply.htm（table 布局）
     · 转发 = home/spacecp_follow.php 的 relay 分支（已改为 div 布局）
   策略：拉平默认 table → 输入框占满整宽 → 控件行（复选+计数+按钮）置底，
   配色对齐顶部发布框（暗底输入 + 品牌紫按钮）。
   ========================================================================= */
.flw_replybox {
	margin: 14px 0 0 !important; padding: 14px !important;
	border-radius: 10px !important;
	background: rgba(0,0,0,0.22) !important;
	border: 1px solid rgba(255,255,255,0.06) !important;
}
/* 默认气泡尖角 */
.flw_replybox .cnr { display: none !important; }

/* 默认 table 布局拉平成块，让输入框占满整宽 */
.flw_replybox table,
.flw_replybox tbody,
.flw_replybox tr,
.flw_replybox td {
	display: block !important; width: auto !important;
	border: 0 !important; padding: 0 !important; margin: 0 !important;
	background: transparent !important; vertical-align: top !important;
}
/* 核心 module.css `.flw_autopt{background:#FFF...}` 是白底真凶（textarea 透明叠在上面发灰），须清零 */
.flw_replybox .flw_autopt { display: block !important; width: 100% !important; background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
.flw_replybox .px { background: rgba(0,0,0,0.28) !important; border: 1px solid rgba(255,255,255,0.07) !important; color: #d7def0 !important; }

/* 输入框：与顶部发布框 #fastpostmessage 同款暗底 */
.flw_replybox textarea,
.flw_replybox .pts {
	display: block !important; box-sizing: border-box !important;
	width: 100% !important; min-height: 60px !important; max-height: 200px;
	margin: 0 !important; padding: 11px 14px !important;
	border-radius: 8px !important;
	border: 1px solid rgba(255,255,255,0.07) !important;
	background: rgba(0,0,0,0.28) !important;
	color: #d7def0 !important; font-size: 14px !important; line-height: 21px !important;
	resize: none !important; outline: none !important;
	transition: border-color .18s;
}
.flw_replybox textarea:focus,
.flw_replybox .pts:focus { border-color: rgba(255,255,255,0.22) !important; }
.flw_replybox textarea::placeholder,
.flw_replybox .pts::placeholder { color: rgba(239,243,255,0.34) !important; }

/* 提交按钮：品牌紫渐变（评论=「回复」、转发=「转发」） */
.flw_replybox .pn.pnc,
.flw_replybox button.pnc {
	display: inline-flex !important; align-items: center; justify-content: center;
	float: none !important; width: auto !important; height: 34px;
	margin: 12px 0 0 !important; padding: 0 22px !important;
	border: 0 !important; border-radius: 8px !important;
	background: linear-gradient(120deg, #b026d8, #6a3aff) !important;
	color: #fff !important; font-size: 14px !important; font-weight: 600;
	cursor: pointer; box-shadow: 0 4px 14px rgba(120,40,220,0.30);
	transition: filter .18s, box-shadow .18s;
}
.flw_replybox .pnc:hover { filter: brightness(1.08); box-shadow: 0 5px 18px rgba(120,40,220,0.42); }
.flw_replybox .pnc strong,
.flw_replybox .pnc span { color: #fff !important; font-weight: 600; }

/* 复选框 +「同时回复 / 同时转播」标签 */
.flw_replybox label {
	display: inline-flex !important; align-items: center; gap: 6px;
	margin: 12px 14px 0 0 !important; padding: 0 !important; float: none !important;
	color: rgba(239,243,255,0.6) !important; font-size: 13px !important; cursor: pointer;
}
.flw_replybox label input[type=checkbox] {
	width: 14px; height: 14px; margin: 0 !important; vertical-align: middle;
	accent-color: #8e44ff; cursor: pointer;
}

/* 字数计数「还能输入 N 字」 */
.flw_replybox .ptm { margin-top: 8px !important; }
.flw_replybox .flw_count,
.flw_replybox .ptm { display: inline-block; color: rgba(239,243,255,0.4) !important; font-size: 12px !important; }
.flw_replybox .xg1 { color: rgba(239,243,255,0.72) !important; }

/* 转发框的控件行（div 版）：复选 + 计数 + 按钮同排靠右 */
.flw_replybox .flw_replybar {
	display: flex !important; align-items: center; gap: 12px; flex-wrap: wrap;
	margin-top: 4px;
}
.flw_replybox .flw_replybar label { margin: 8px 0 0 !important; }
.flw_replybox .flw_replybar .flw_count { margin-top: 8px; }
.flw_replybox .flw_replybar .pnc { margin: 8px 0 0 auto !important; }

/* 评论框里已有的回复列表 */
.flw_replybox ul[id^="newreply"] { margin: 12px 0 0 !important; padding: 0 !important; list-style: none !important; }
.flw_replybox ul[id^="newreply"]:empty { display: none !important; }
.flw_replybox ul[id^="newreply"] li {
	padding: 8px 0 !important; border-top: 1px solid rgba(255,255,255,0.05) !important;
	color: rgba(239,243,255,0.78) !important; font-size: 13px !important; line-height: 19px;
}
.flw_replybox ul[id^="newreply"] li a.xi2 { color: #c7a6ff !important; margin-right: 4px; }

/* 底部行：评论框保留「→去论坛查看所有回复」靠右；关闭栏已从两个表单移除 */
.flw_replybox .cl {
	display: flex !important; align-items: center; justify-content: flex-end;
	margin-top: 12px !important; padding-top: 10px !important;
	border-top: 1px solid rgba(255,255,255,0.05) !important;
}
.flw_replybox .cl:empty { display: none !important; }
.flw_replybox .cl a { float: none !important; font-size: 13px !important; }
.flw_replybox .cl a.xi2 { color: #c7a6ff !important; }
.flw_replybox .cl a.xi2:hover { color: #d9c2ff !important; }

/* 加载更多 */
#loadingfeed { text-align: center; margin: 18px 0 8px; }
#loadingfeed a { display: inline-block; padding: 9px 26px; border-radius: 999px; background: rgba(120,70,200,0.14); color: rgba(239,243,255,0.78) !important; font-size: 14px; }
#loadingfeed a:hover { background: rgba(140,68,255,0.26); color: #fff !important; }

/* 空态 / 无类型时的提示 */
.artg-feed-empty { padding: 60px 20px; text-align: center; color: rgba(239,243,255,0.45); font-size: 15px; }
.artg-feed-empty a { color: #c7a6ff !important; }

/* =========================================================================
   右栏 · 模块
   ========================================================================= */
.artg-side-mod { margin-bottom: 16px; border-radius: 10px; background: linear-gradient(180deg, rgba(12,20,38,0.92), rgba(6,15,23,0.98)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); overflow: hidden; }
.artg-side-hd {
	display: flex; align-items: center; justify-content: space-between;
	padding: 13px 16px 9px; font-size: 15px; font-weight: 700; color: #f0f3ff;
}
.artg-side-hd:before {
	content: ""; width: 4px; height: 15px; margin-right: 8px; border-radius: 2px;
	background: linear-gradient(180deg, #ff2df7, #8e44ff); box-shadow: 0 0 8px rgba(200,55,255,0.7);
}
.artg-side-hd span { flex: 1 1 auto; }
.artg-side-hd .artg-side-more { font-size: 12px; font-weight: 400; color: rgba(239,243,255,0.45) !important; }
.artg-side-hd .artg-side-more:hover { color: #c7a6ff !important; }
.artg-side-bd { padding: 4px 10px 12px; }

/* 热门作品：缩略图 + 标题 */
.artg-hotwork { display: flex; gap: 10px; padding: 8px 6px; border-radius: 8px; transition: background .16s; }
.artg-hotwork:hover { background: rgba(120,70,200,0.12); }
.artg-hotwork-cover { flex: 0 0 96px; width: 96px; height: 60px; border-radius: 6px; overflow: hidden; background: #0b111f; }
.artg-hotwork-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artg-hotwork-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.artg-hotwork-title { color: #e7ecff !important; font-size: 13px; line-height: 18px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.artg-hotwork:hover .artg-hotwork-title { color: #fff !important; }
.artg-hotwork-stat { margin-top: 4px; color: rgba(239,243,255,0.42); font-size: 12px; }

/* 可能感兴趣的人 */
.artg-sugu { display: flex; align-items: center; gap: 10px; padding: 8px 6px; }
.artg-sugu-avt { flex: 0 0 auto; }
.artg-sugu-avt img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.artg-sugu-main { flex: 1 1 auto; min-width: 0; }
.artg-sugu-name { display: block; color: #e7ecff !important; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artg-sugu-name:hover { color: #fff !important; }
.artg-sugu-meta { color: rgba(239,243,255,0.42); font-size: 12px; margin-top: 2px; }
.artg-sugu-btn {
	flex: 0 0 auto; height: 30px; padding: 0 14px; border-radius: 999px; cursor: pointer;
	display: inline-flex; align-items: center; font-size: 13px;
	color: #fff !important; background: linear-gradient(120deg, #b026d8, #6a3aff);
	box-shadow: 0 4px 12px rgba(120,50,220,0.32); transition: filter .18s;
}
.artg-sugu-btn:hover { filter: brightness(1.1); color: #fff !important; }
.artg-sugu-btn.is-followed { background: rgba(255,255,255,0.08); box-shadow: none; color: rgba(239,243,255,0.6) !important; }

/* 热门文章：序号 + 标题 */
.artg-hotart { display: flex; align-items: center; gap: 10px; padding: 8px 6px; }
.artg-hotart-no { flex: 0 0 20px; text-align: center; font-size: 15px; font-weight: 700; font-style: italic; color: rgba(239,243,255,0.34); }
.artg-hotart:nth-child(1) .artg-hotart-no { color: #ff5da2; }
.artg-hotart:nth-child(2) .artg-hotart-no { color: #ff9b54; }
.artg-hotart:nth-child(3) .artg-hotart-no { color: #ffd166; }
.artg-hotart-title { flex: 1 1 auto; min-width: 0; color: #d7def0 !important; font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artg-hotart:hover .artg-hotart-title { color: #fff !important; }

/* 公告 / 活动 */
.artg-notice { display: block; padding: 9px 6px; color: rgba(239,243,255,0.74) !important; font-size: 13px; line-height: 19px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.artg-notice:last-child { border-bottom: 0; }
.artg-notice:hover { color: #fff !important; }
.artg-notice .artg-notice-tag { display: inline-block; margin-right: 6px; padding: 0 6px; height: 18px; line-height: 18px; border-radius: 4px; font-size: 11px; color: #fff; background: linear-gradient(120deg, #b026d8, #6a3aff); vertical-align: middle; }
.artg-side-empty { padding: 16px 8px; color: rgba(239,243,255,0.38); font-size: 13px; text-align: center; }

/* =========================================================================
   左栏个人卡 · 副标题（昵称下身份行）
   ========================================================================= */
.artg-fl-sub { margin: 5px 12px 0; color: rgba(239, 243, 255, 0.42); font-size: 12px; }

/* =========================================================================
   中栏 Tab 行 · 「最新 ▾」排序控件（右对齐，纯展示）
   ========================================================================= */
.artg-feed-sort {
	display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
	color: rgba(239, 243, 255, 0.5); font-size: 12.5px; cursor: pointer;
	transition: color .18s;
}
.artg-feed-sort:hover { color: rgba(239, 243, 255, 0.85); }
.artg-feed-sort svg { display: block; }

/* =========================================================================
   九宫格灯箱（全屏覆盖层）
   ========================================================================= */
.artg-lb {
	position: fixed; inset: 0; z-index: 100; display: none;
	align-items: center; justify-content: center; padding: 40px;
	background: rgba(4, 6, 14, 0.92); backdrop-filter: blur(8px);
	animation: artgLbIn .18s ease;
}
@keyframes artgLbIn { from { opacity: 0; } to { opacity: 1; } }
.artg-lb-stage { position: relative; display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; animation: artgLbPop .22s cubic-bezier(.2,.7,.3,1); }
@keyframes artgLbPop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.artg-lb-img { display: block; max-width: min(80vw, 900px); max-height: min(82vh, 700px); object-fit: contain; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); cursor: default; }
.artg-lb-cap { position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; font-size: 13px; color: rgba(230, 228, 245, 0.7); }
.artg-lb-btn {
	position: absolute; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; cursor: pointer;
	transition: background .18s;
}
.artg-lb-btn:hover { background: rgba(255, 255, 255, 0.18); }
.artg-lb-close { top: 24px; right: 28px; width: 44px; height: 44px; }
.artg-lb-prev { left: 28px; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.artg-lb-next { right: 28px; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.artg-lb .artg-lb-prev, .artg-lb .artg-lb-next { display: none; }
.artg-lb.is-multi .artg-lb-prev, .artg-lb.is-multi .artg-lb-next { display: flex; }

/* ======================= 「上传受限」弹窗 ======================= */
/* 图片超大小限制时的提示，照搬作品发帖页 artgamer_post_work.css 的 .artg-upload-alert*。
   弹窗由 artgamer_feed.js 的 showUploadLimit() 追加到 document.body，故选择器顶层不带 .artg-compose。 */
.artg-upload-alert {
	position: fixed;
	inset: 0;
	z-index: 100200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background:
		radial-gradient(circle at 50% 0, rgba(79, 91, 180, 0.18), transparent 34%),
		rgba(2, 6, 18, 0.68);
	backdrop-filter: blur(7px);
}
.artg-upload-alert.is-visible { display: flex; }
.artg-upload-alert-box {
	position: relative;
	display: flex;
	align-items: center;
	gap: 22px;
	width: min(460px, calc(100vw - 40px));
	min-height: 174px;
	padding: 28px 28px 26px;
	border: 1px solid rgba(102, 121, 192, 0.58);
	border-radius: 20px;
	background:
		radial-gradient(circle at 14% 24%, rgba(123, 61, 255, 0.18), transparent 32%),
		radial-gradient(circle at 92% 68%, rgba(59, 77, 255, 0.12), transparent 30%),
		linear-gradient(135deg, rgba(19, 25, 55, 0.98), rgba(8, 12, 28, 0.98));
	box-shadow:
		0 20px 70px rgba(0, 0, 0, 0.54),
		0 0 0 1px rgba(123, 61, 255, 0.18),
		0 0 32px rgba(102, 73, 255, 0.22);
	color: #eef3ff;
	overflow: hidden;
}
.artg-upload-alert-box::before,
.artg-upload-alert-box::after {
	content: "";
	position: absolute;
	pointer-events: none;
}
.artg-upload-alert-box::before {
	right: 20px;
	top: 44px;
	width: 104px;
	height: 68px;
	background-image: radial-gradient(circle, rgba(125, 109, 255, 0.24) 1.4px, transparent 1.7px);
	background-size: 16px 16px;
	opacity: .42;
}
.artg-upload-alert-box::after {
	left: -30px;
	right: -30px;
	bottom: -18px;
	height: 74px;
	border-radius: 50%;
	border-top: 1px solid rgba(126, 61, 255, 0.28);
	box-shadow: inset 0 16px 34px rgba(82, 54, 200, 0.1);
}
.artg-upload-alert-mark {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	border: 2px solid rgba(171, 100, 255, 0.84);
	background:
		linear-gradient(145deg, #8b36ff, #3920b7);
	box-shadow:
		0 0 22px rgba(123, 61, 255, 0.52),
		0 0 0 10px rgba(123, 61, 255, 0.09),
		0 0 0 22px rgba(123, 61, 255, 0.045);
	color: #fff;
	font-size: 42px;
	font-weight: 700;
	line-height: 1;
	text-shadow: 0 0 14px rgba(255, 255, 255, 0.55);
}
.artg-upload-alert-main {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.artg-upload-alert-title {
	margin: 0 !important;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	text-shadow: 0 0 14px rgba(255, 255, 255, 0.16);
}
.artg-upload-alert-msg {
	margin: 0 !important;
	color: rgba(226, 231, 255, 0.78);
	font-size: 15px;
	line-height: 1.6;
	word-break: break-word;
}
.artg-upload-alert-msg strong {
	color: #8e5bff;
	font-size: 1.2em;
	font-weight: 800;
	text-shadow: 0 0 14px rgba(142, 91, 255, 0.42);
}
.artg-upload-alert-ok {
	align-self: flex-end;
	min-width: 112px;
	height: 42px;
	margin: 6px 0 0 !important;
	padding: 0 24px;
	border: 1px solid rgba(155, 112, 255, 0.72);
	border-radius: 10px;
	background: linear-gradient(135deg, #8e2cff, #326bff);
	box-shadow:
		0 10px 24px rgba(73, 69, 255, 0.28),
		0 0 18px rgba(142, 44, 255, 0.26);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 40px;
	cursor: pointer;
	transition: filter .15s, transform .15s, box-shadow .15s;
}
.artg-upload-alert-ok:hover {
	filter: brightness(1.08);
	box-shadow:
		0 12px 30px rgba(73, 69, 255, 0.36),
		0 0 24px rgba(142, 44, 255, 0.34);
}
.artg-upload-alert-ok:active { transform: translateY(1px); }
.artg-upload-alert-ok:focus-visible {
	outline: 2px solid rgba(214, 197, 255, 0.75);
	outline-offset: 2px;
}