/* ============================================================
   server-detail.html 服务器详情页 — 视觉美化层
   目标：低调的冷灰蓝配色，避免大面积灰阶的同时不使用高饱和亮色，
   以「石墨渐变横幅 + 蓝灰规格卡 + 灰蓝评分条」保持沉稳观感。
   仅被 server-detail.html 引入，不影响其它页面。
   ============================================================ */

/* ---------- 1. 页面背景：暖色柔光，替代整片灰底 ---------- */
.trial-main {
	background:
		radial-gradient(1100px 420px at 22% -12%, rgba(100, 116, 139, 0.07), transparent 62%),
		var(--c-bg);
}

/* ---------- 2. 主卡片：更清晰的浮起感 ---------- */
.server-detail-wrapper {
	border-color: rgba(226, 232, 240, 0.9);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 44px rgba(15, 23, 42, 0.08);
}

/* ---------- 3. 产品头：深色渐变横幅 + 白色标题 + 彩色徽标 ---------- */
.server-header {
	position: relative;
	overflow: hidden;
	margin: -24px -26px 20px;
	padding: 26px 28px;
	border: none;
	border-radius: var(--r-lg) var(--r-lg) 0 0;
	background:
		radial-gradient(560px 240px at 88% -30%, rgba(148, 163, 184, 0.35), transparent 62%),
		linear-gradient(120deg, #1e293b 0%, #273447 52%, #334155 100%);
}
/* 横幅右下角装饰光斑 */
.server-header::after {
	content: "";
	position: absolute;
	right: -60px;
	bottom: -80px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(148, 163, 184, 0.18), transparent 70%);
	pointer-events: none;
}
.server-header h1 {
	position: relative;
	z-index: 1;
	color: #fff;
	text-shadow: 0 2px 14px rgba(15, 23, 42, 0.35);
}
.server-header .server-meta {
	position: relative;
	z-index: 1;
}
.server-meta > span {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	color: #e2e8f0;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.server-meta > span i {
	color: #94a3b8;
}
.server-meta a {
	color: #f1f5f9;
}
.server-meta a:hover {
	color: #94a3b8;
}
/* 有货徽标：绿色实心，更醒目（需高于 .server-meta > span 的选择器优先级） */
.server-header .server-meta > span.server-status {
	background: linear-gradient(135deg, #10b981, #059669);
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}
.server-header .server-meta > span.server-status i {
	color: #a7f3d0 !important;
}

/* ---------- 4. 区块标题：橙色渐变装饰条 ---------- */
.server-detail-block-title::before {
	width: 4px;
	height: 16px;
	background: linear-gradient(180deg, #5b7d95, #3d5a70);
	border-radius: 3px;
}

/* ---------- 5. 配置参数：九宫格多彩卡片 ---------- */
.specs-grid {
	gap: 12px;
}
.spec-card {
	position: relative;
	overflow: hidden;
	padding: 14px 14px 13px;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* 每张卡片顶部彩色装饰条 */
.spec-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--spec-c), rgba(255, 255, 255, 0));
	opacity: 0.9;
}
.spec-card:hover {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.16);
}
/* 规格卡统一使用低调蓝灰主色，避免页面颜色过多 */
.specs-grid .spec-card { --spec-c: #5b7d95; }
/* 图标彩色徽章 */
.spec-card h3 {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--c-text-2);
}
.spec-card h3 i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	border-radius: 7px;
	color: #fff;
	background: linear-gradient(135deg, var(--spec-c), color-mix(in srgb, var(--spec-c) 72%, #0f172a));
	font-size: 0.72rem;
	box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--spec-c) 55%, transparent);
}
/* 规格值着色 + 轻微渐变 */
.spec-card .spec-value {
	color: var(--spec-c);
	font-weight: 700;
}

/* ---------- 6. 购买条：橙色渐变面板 ---------- */
.server-detail-buy {
	border: none;
	background:
		radial-gradient(520px 180px at 92% -40%, rgba(255, 255, 255, 0.16), transparent 60%),
		radial-gradient(420px 200px at -5% 120%, rgba(15, 23, 42, 0.35), transparent 60%),
		linear-gradient(120deg, #1e293b 0%, #2c3a4d 52%, #334155 100%);
	box-shadow: 0 14px 34px -10px rgba(30, 41, 59, 0.45);
}
.server-detail-buy-label {
	color: rgba(255, 255, 255, 0.85);
}
.server-detail-buy-line .price-value,
.server-detail-buy .price-value {
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.server-detail-buy .price-slash {
	color: rgba(255, 255, 255, 0.75);
}
.server-detail-buy .price-month {
	color: rgba(255, 255, 255, 0.8);
}
.server-detail-buy-points li {
	color: rgba(255, 255, 255, 0.92);
}
.server-detail-buy-points .fa-check {
	color: #94a3b8;
}
/* 底部固定购买条与上方购买条风格一致 */
.server-detail-cta-fixed {
	background: var(--c-bg-card);
}
/* 桌面端固定条内容不再贴左：与主内容列对齐留出空隙 */
@media (min-width: 768px) {
	.server-detail-cta-fixed-inner {
		padding-left: var(--layout-main-pad-x, 24px);
	}
}
.server-detail-cta-fixed .server-detail-buy-main .server-detail-buy-label {
	color: var(--c-text-3);
}
.server-detail-cta-fixed .price-value {
	color: #5b7d95;
}
.server-detail-cta-fixed .price-slash {
	color: #5b7d95;
}
.server-detail-cta-fixed .price-month {
	color: var(--c-text-3);
}
.server-detail-cta-fixed .server-detail-buy-points li {
	color: var(--c-text-2);
}
.server-detail-cta-fixed .server-detail-buy-points .fa-check {
	color: #5b7d95;
}

/* ---------- 7. 用户评价面板：白底 + 柔光，替代灰底 ---------- */
.server-detail-panel {
	background:
		radial-gradient(640px 200px at 100% 0%, rgba(100, 116, 139, 0.05), transparent 60%),
		var(--c-bg-card);
	border-color: var(--c-line);
	box-shadow: var(--s-xs);
}
.server-detail-panel-divider {
	background: linear-gradient(90deg, var(--c-line), rgba(226, 232, 240, 0.2));
}

/* ---------- 8. 评分：金色星星 + 橙色渐变评分条 ---------- */
.server-rating-score-num .num {
	background: linear-gradient(120deg, #5b7d95, #3d5a70);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.server-rating-stars {
	color: #8aa2b8;
	filter: drop-shadow(0 2px 4px rgba(100, 116, 139, 0.35));
}
.server-rating-bar-row .fill {
	background: linear-gradient(90deg, #5b7d95 0%, #94a3b8 100%);
}
.server-rating-dim-val {
	color: #5b7d95;
}
.server-rating-dim-bar > span {
	background: linear-gradient(90deg, #5b7d95 0%, #94a3b8 100%);
}

/* ---------- 9. 留言区：彩色渐变头像 + 主题色链接 ---------- */
.server-detail-feedback .show-comment-avatar {
	border: none;
	color: #fff;
	font-weight: 700;
	background: linear-gradient(135deg, #64748b, #475569);
	box-shadow: 0 4px 10px -3px rgba(15, 23, 42, 0.25);
}

/* 盖楼线索：主题色描边 */
.show-comment-replies--thread {
	border-left-color: rgba(91, 125, 149, 0.5);
}
.show-comment-thread-label {
	color: #5b7d95;
}
.show-comment-product i {
	color: #5b7d95;
}
.show-comment-product:hover {
	color: #5b7d95;
}

/* ---------- 10. 发表留言按钮激活态 ---------- */
.server-comment-submit:not(:disabled) {
	background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
	border-color: transparent;
	color: #fff;
}
.server-comment-submit:not(:disabled):hover {
	background: linear-gradient(180deg, #475569 0%, #334155 100%);
	border-color: transparent;
	color: #fff;
}

/* ---------- 10b. 访客卡片「登录后发表留言」：浮层更实、按钮悬停对比更清晰 ---------- */
/* 浮层更不透明，避免下方禁用表单的占位文字/星星透出造成视觉干扰 */
.server-comment-guest-gate {
	background: rgba(255, 255, 255, 0.94);
}
.server-comment-guest-gate__card {
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}
.server-comment-guest-gate__btn {
	border-color: var(--c-line-strong);
	background: var(--c-bg-card);
	color: var(--c-text);
	font-weight: 700;
}
/* 次级按钮「注册账号」悬停：低调蓝灰底 + 蓝灰边框 */
.server-comment-guest-gate__btn:hover {
	background: rgba(91, 125, 149, 0.08);
	border-color: #5b7d95;
	color: #5b7d95;
}
/* 主按钮「登录」悬停：提亮 + 上浮 + 投影加深 */
.server-comment-guest-gate__btn--primary {
	border-color: transparent;
}
.server-comment-guest-gate__btn--primary:hover {
	background: linear-gradient(180deg, #475569 0%, #334155 100%);
	color: #fff;
	border-color: transparent;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -4px rgba(51, 65, 85, 0.55);
}
html.io-dark-mode .server-comment-guest-gate {
	background: rgba(15, 23, 42, 0.92);
}
html.io-dark-mode .server-comment-guest-gate__btn {
	background: #1e293b;
	border-color: #475569;
	color: #e2e8f0;
}
html.io-dark-mode .server-comment-guest-gate__btn:hover {
	background: rgba(148, 163, 184, 0.14);
	border-color: #94a3b8;
	color: #cbd5e1;
}
html.io-dark-mode .server-comment-guest-gate__btn--primary:hover {
	background: linear-gradient(180deg, #475569 0%, #334155 100%);
	color: #fff;
	border-color: transparent;
}

/* ---------- 11. 暗色模式适配 ---------- */
html.io-dark-mode .trial-main {
	background:
		radial-gradient(1100px 420px at 22% -12%, rgba(100, 116, 139, 0.09), transparent 62%),
		var(--c-bg);
}
html.io-dark-mode .server-detail-wrapper {
	border-color: #2a3750;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.35);
}
html.io-dark-mode .server-header {
	background:
		radial-gradient(560px 240px at 88% -30%, rgba(148, 163, 184, 0.28), transparent 62%),
		linear-gradient(120deg, #0f172a 0%, #1e293b 52%, #334155 100%);
}
html.io-dark-mode .spec-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
	border-color: #2a3750;
}
html.io-dark-mode .spec-card:hover {
	border-color: color-mix(in srgb, var(--spec-c) 60%, transparent);
	box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.5);
}
html.io-dark-mode .spec-card .spec-value {
	color: color-mix(in srgb, var(--spec-c) 78%, #fff);
}
html.io-dark-mode .server-detail-buy {
	box-shadow: 0 14px 34px -10px rgba(30, 41, 59, 0.5);
}
html.io-dark-mode .server-detail-panel {
	background:
		radial-gradient(640px 200px at 100% 0%, rgba(100, 116, 139, 0.08), transparent 60%),
		rgba(0, 0, 0, 0.2);
}
html.io-dark-mode .server-rating-score-num .num {
	background: linear-gradient(120deg, #7d9cb4, #5b7d95);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
html.io-dark-mode .server-detail-cta-fixed {
	background: #0f1624;
}
html.io-dark-mode .server-detail-cta-fixed .price-value,
html.io-dark-mode .server-detail-cta-fixed .price-slash {
	color: #7d9cb4;
}
html.io-dark-mode .server-comment-submit:not(:disabled) {
	background: linear-gradient(180deg, #475569 0%, #334155 100%);
	border-color: transparent;
	color: #fff;
}

/* ---------- 12. 移动端微调：头部负边距随内边距变化 ---------- */
@media (max-width: 767px) {
	.server-header {
		margin: -18px -18px 16px;
		padding: 22px 20px;
	}
}

/* ============================================================
   亮色模式 · 清爽纯白改造（仅亮色生效，暗色保持原样）
   目标：亮色下尽可能使用纯白背景，去掉灰蒙渐变，
   红色仅点缀「价格」与「申请测试」两处；按钮按苹果简约风缩小。
   ============================================================ */

/* 0. 页面背景：纯白，去掉灰色径向渐变 */
html:not(.io-dark-mode) .trial-main {
	background: #ffffff;
}

/* 主卡片：纯白 + 极浅描边 + 柔和投影 */
html:not(.io-dark-mode) .server-detail-wrapper {
	background: #ffffff;
	border-color: #eef1f5;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.06);
}

/* 3a. 产品头横幅：纯白，仅留一条极浅分隔线 */
html:not(.io-dark-mode) .server-header {
	background: #ffffff;
	border-bottom: 1px solid #eef1f5;
}
html:not(.io-dark-mode) .server-header h1 {
	color: #111827;
	text-shadow: none;
}
html:not(.io-dark-mode) .server-meta > span {
	background: #f8fafc;
	border-color: #eef1f5;
	color: #475569;
}
html:not(.io-dark-mode) .server-meta > span i {
	color: #94a3b8;
}
html:not(.io-dark-mode) .server-meta a {
	color: #334155;
}
html:not(.io-dark-mode) .server-meta a:hover {
	color: #64748b;
}

/* 4a. 区块标题装饰条：深蓝灰 → 浅灰 */
html:not(.io-dark-mode) .server-detail-block-title::before {
	background: linear-gradient(180deg, #94a3b8, #cbd5e1);
}

/* 5a. 配置参数卡片：纯白 + 浅灰点缀（图标去深色、标签/数值减深） */
html:not(.io-dark-mode) .specs-grid .spec-card {
	--spec-c: #cbd5e1;
	background: #ffffff;
	border-color: #eef1f5;
}
html:not(.io-dark-mode) .spec-card:hover {
	border-color: #e2e8f0;
	box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.1);
}
/* 标签：深灰 → 浅灰 */
html:not(.io-dark-mode) .spec-card h3 {
	color: #94a3b8;
}
/* 图标徽章：去掉深色渐变实心块，改浅灰底 + 灰图标 */
html:not(.io-dark-mode) .spec-card h3 i {
	background: #f1f5f9;
	color: #94a3b8;
	box-shadow: none;
}
/* 数值：保持可读的中灰，减重更轻盈 */
html:not(.io-dark-mode) .spec-card .spec-value {
	color: #64748b;
	font-weight: 600;
}

/* 6a. 购买条：纯白面板（价格红色点缀），按钮改苹果简约风 */
html:not(.io-dark-mode) .server-detail-buy {
	border: 1px solid #eef1f5;
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}
html:not(.io-dark-mode) .server-detail-buy-label {
	color: var(--c-text-3);
}
html:not(.io-dark-mode) .server-detail-buy .price-value {
	color: #dc2626;
	text-shadow: none;
	font-size: 1.5rem;
	line-height: 1.1;
}
html:not(.io-dark-mode) .server-detail-buy .price-slash {
	color: rgba(220, 38, 38, 0.5);
}
html:not(.io-dark-mode) .server-detail-buy .price-month {
	color: var(--c-text-3);
	font-size: 0.5em;
}
html:not(.io-dark-mode) .server-detail-buy-points li {
	color: var(--c-text-2);
}
html:not(.io-dark-mode) .server-detail-buy-points .fa-check {
	color: #94a3b8;
}

/* 6b. 主 CTA「申请测试」：红色（点缀 1），苹果简约尺寸 */
html:not(.io-dark-mode) .server-detail-cta-main {
	min-width: 128px;
	height: 38px;
	padding: 0 22px;
	gap: 8px;
	border-radius: 9px;
	font-size: 0.875rem;
	background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: 0 3px 10px rgba(220, 38, 38, 0.28);
}
html:not(.io-dark-mode) .server-detail-cta-main .fa-server {
	font-size: 0.8rem;
}
html:not(.io-dark-mode) .server-detail-cta-main .fa-chevron-right {
	font-size: 0.7rem;
}
html:not(.io-dark-mode) .server-detail-cta-main:hover {
	background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
	box-shadow: 0 6px 16px rgba(220, 38, 38, 0.32);
}
html:not(.io-dark-mode) .server-detail-cta-main:active {
	box-shadow: 0 2px 8px rgba(220, 38, 38, 0.24);
}
/* 「加入对比」：苹果简约尺寸，悬停与红色主按钮同系 */
html:not(.io-dark-mode) .server-detail-compare-btn {
	min-width: 104px;
	height: 38px;
	padding: 0 18px;
	border-radius: 9px;
	font-size: 0.8125rem;
	font-weight: 500;
}
html:not(.io-dark-mode) .server-detail-compare-btn:hover {
	border-color: #dc2626;
	color: #dc2626;
}

/* 6c. 底部固定购买条：纯白 + 红色价格 */
html:not(.io-dark-mode) .server-detail-cta-fixed {
	background: #ffffff;
	border-top-color: #eef1f5;
	box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
}
html:not(.io-dark-mode) .server-detail-cta-fixed .price-value {
	color: #dc2626;
	font-size: 1.5rem;
	line-height: 1.1;
}
html:not(.io-dark-mode) .server-detail-cta-fixed .price-slash {
	color: rgba(220, 38, 38, 0.5);
}
html:not(.io-dark-mode) .server-detail-cta-fixed .price-month {
	color: var(--c-text-3);
	font-size: 0.5em;
}
html:not(.io-dark-mode) .server-detail-cta-fixed .server-detail-buy-points li {
	color: var(--c-text-2);
}
html:not(.io-dark-mode) .server-detail-cta-fixed .server-detail-buy-points .fa-check {
	color: #94a3b8;
}

/* 7a. 用户评价面板：纯白，去掉灰色径向 */
html:not(.io-dark-mode) .server-detail-panel {
	background: #ffffff;
	border-color: #eef1f5;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
}
html:not(.io-dark-mode) .server-detail-panel-divider {
	background: linear-gradient(90deg, #eef1f5, rgba(238, 241, 245, 0.2));
}

/* 8a. 评分区：中性灰，星星保留暖金 */
html:not(.io-dark-mode) .server-rating-score-num .num {
	background: linear-gradient(120deg, #64748b, #94a3b8);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
html:not(.io-dark-mode) .server-rating-stars {
	color: #f59e0b;
	filter: drop-shadow(0 2px 4px rgba(180, 120, 20, 0.25));
}
html:not(.io-dark-mode) .server-rating-bar-row .fill {
	background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%);
}
html:not(.io-dark-mode) .server-rating-dim-val {
	color: #64748b;
}
html:not(.io-dark-mode) .server-rating-dim-bar > span {
	background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%);
}

/* 9a. 留言区：浅灰头像、盖楼线索 */
html:not(.io-dark-mode) .server-detail-feedback .show-comment-avatar {
	background: linear-gradient(135deg, #eef1f5, #e2e8f0);
	color: #475569;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
/* 盖楼区：浅色装饰线 */
html:not(.io-dark-mode) .show-comment-replies--thread {
	border-left-color: #e2e8f0;
}
html:not(.io-dark-mode) .show-comment-thread-label,
html:not(.io-dark-mode) .show-comment-product i,
html:not(.io-dark-mode) .show-comment-product:hover {
	color: #64748b;
}
/* 盖楼回复项：去灰渐变背景 → 纯白 + 浅色边条（更清爽） */
html:not(.io-dark-mode) .show-comment-reply {
	background: #ffffff;
	border-color: #eef1f5;
}
html:not(.io-dark-mode) .show-comment-reply::before {
	background: #cbd5e1;
	opacity: 1;
}
/* 楼层徽标「NF」：浅灰芯片 + 灰文字 */
html:not(.io-dark-mode) .show-comment-reply-floor-no {
	background: #f1f5f9;
	border-color: #e5e9f0;
	color: #64748b;
}
/* 盖楼头文字 / @提及：减深 */
html:not(.io-dark-mode) .show-comment-thread-head {
	color: #64748b;
}
html:not(.io-dark-mode) .show-comment-reply-at {
	color: #64748b;
}

/* 10a. 发布留言按钮：深色渐变 → 中灰（红色已用于价格/CTA，此处保持灰） */
html:not(.io-dark-mode) .server-comment-submit:not(:disabled) {
	background: linear-gradient(180deg, #64748b 0%, #475569 100%);
	border-color: transparent;
	color: #fff;
}
html:not(.io-dark-mode) .server-comment-submit:not(:disabled):hover {
	background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
	border-color: transparent;
	color: #fff;
}

/* 10b. 访客卡片主按钮「登录」悬停：深色 → 中灰 */
html:not(.io-dark-mode) .server-comment-guest-gate__btn--primary:hover {
	background: linear-gradient(180deg, #64748b 0%, #475569 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 8px 20px -4px rgba(71, 85, 105, 0.5);
}