@charset "utf-8";
/* ==========================================================================
   右侧悬浮工具条 v2  ·  sider.css
   引入位置：tp5/application/index/view/common/head.html（style.css 之后）
   作用域：.sider.skyrail（不与 style.css 里旧的 .sider / .side_* 规则冲突）
   ========================================================================== */

.sider.skyrail {
	--sr-green: #25a063;
	--sr-green-d: #1c7d4c;
	--sr-green-dd: #15603a;
	--sr-tint: #eef7f1;
	--sr-ink: #1f2937;
	--sr-ink-2: #4b5563;
	--sr-line: #e7ebef;
	position: fixed;
	right: 18px;
	top: 50%;
	left: auto;
	bottom: auto;
	z-index: 300;
	display: block;
	transform: translateY(-50%);
	animation: skyrailIn .52s cubic-bezier(.22, .7, .3, 1) .22s both;
	font-family: inherit;
	line-height: 1;
	-webkit-text-size-adjust: 100%;
}

@keyframes skyrailIn {
	from { opacity: 0; transform: translateY(-50%) translateX(16px); }
	to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* 自己带 box-sizing，不依赖站点 style.css 的 *{box-sizing:border-box}
   （否则二维码卡片会从 176px 撑成 202px，浮层尺寸跟着跑偏） */
.sider.skyrail,
.sider.skyrail *,
.sider.skyrail *::before,
.sider.skyrail *::after { box-sizing: border-box; }

/* ---------- 卡片容器 ---------- */
.skyrail__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	width: 64px;
	padding: 6px;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(12px) saturate(1.5);
	backdrop-filter: blur(12px) saturate(1.5);
	border: 1px solid rgba(15, 23, 42, .07);
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .05);
}

/* ---------- 单项 ---------- */
.skyrail__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: transparent;
	color: var(--sr-ink-2);
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.skyrail__item:hover,
.skyrail__item:focus-visible {
	background: var(--sr-tint);
	color: var(--sr-green-d);
	text-decoration: none;
}
.skyrail__item:active { transform: scale(.95); }
.skyrail__item:focus { outline: none; }
.skyrail__item:focus-visible {
	outline: 2px solid var(--sr-green-d);
	outline-offset: 2px;
}

/* ---------- 3D 立体图标 ---------- */
.skyrail__sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}
.skyrail__ico {
	position: relative;
	display: block;
	width: 28px;
	height: 28px;
	overflow: visible;
	transition: transform .26s cubic-bezier(.22, .7, .3, 1);
}
.skyrail__ico use { transform-box: fill-box; transform-origin: center; }
/* 底层：“挤出”的厚度，偏暗绿，形成立体侧面 */
.skyrail__ico-ext {
	--sr-face: var(--sr-ext);
	--sr-cut: var(--sr-ext);
	transform: translateY(1.5px);
	opacity: .9;
}
/* 面层：渐变主体 + 雕刻出来的细节 + 柔和投影 */
.skyrail__ico-face {
	--sr-face: var(--sr-grad);
	--sr-cut: #fff;
	filter: url(#srDrop);
}
.skyrail__item {
	--sr-grad: url(#srGradGreen);
	--sr-ext: #0E5A38;
}
.skyrail__top { --sr-grad: url(#srGradGreen); --sr-ext: #0E5A38; }

.skyrail__item:hover .skyrail__ico,
.skyrail__item:focus-visible .skyrail__ico {
	transform: translateY(-1.5px) scale(1.06);
}
.skyrail__top:hover .skyrail__ico { transform: translateY(-1.5px); }

/* 主行动：免费试用（绿色渐变芯片 + 白色立体图标） */
.skyrail__item--primary {
	--sr-grad: url(#srGradWhite);
	--sr-ext: #14603A;
	--sr-cut-face: 0, 0, 0;
	width: 46px;
	height: 46px;
	margin: 3px auto;
	border-radius: 16px;
	background: linear-gradient(155deg, #25a063 0%, #1c7d4c 100%);
	color: #fff;
	box-shadow: 0 6px 14px rgba(28, 125, 76, .24);
}
.skyrail__item--primary .skyrail__ico-face { --sr-cut: #1c7d4c; filter: none; }
.skyrail__item--primary:hover,
.skyrail__item--primary:focus-visible {
	background: linear-gradient(155deg, #1f8a55 0%, #15603a 100%);
	color: #fff;
	box-shadow: 0 9px 22px rgba(21, 96, 58, .32);
}

/* 分隔线 */
.skyrail__sep {
	display: block;
	width: 24px;
	height: 1px;
	margin: 5px 0;
	background: var(--sr-line);
}

/* ---------- 悬停提示 ---------- */
.skyrail__tip {
	position: absolute;
	right: calc(100% + 14px);
	top: 50%;
	display: block;
	padding: 8px 11px;
	white-space: nowrap;
	font-size: 12.5px;
	line-height: 1;
	letter-spacing: .3px;
	color: #fff;
	background: var(--sr-ink);
	border-radius: 8px;
	box-shadow: 0 8px 22px rgba(15, 23, 42, .18);
	opacity: 0;
	visibility: hidden;
	transform: translate(6px, -50%);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	pointer-events: none;
}
.skyrail__tip::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -4px;
	width: 8px;
	height: 8px;
	background: var(--sr-ink);
	border-radius: 1px;
	transform: translateY(-50%) rotate(45deg);
}
.skyrail__item:hover .skyrail__tip,
.skyrail__item:focus-visible .skyrail__tip {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
}

/* ---------- 公众号二维码浮层 ---------- */
.skyrail__qr {
	position: absolute;
	right: calc(100% + 14px);
	top: 50%;
	z-index: 40;
	display: block;
	width: 176px;
	padding: 12px 12px 11px;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, .07);
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .05);
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translate(8px, -50%);
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
	pointer-events: none;
}
.skyrail__qr::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -5px;
	width: 9px;
	height: 9px;
	background: #fff;
	border-top: 1px solid rgba(15, 23, 42, .07);
	border-right: 1px solid rgba(15, 23, 42, .07);
	transform: translateY(-50%) rotate(45deg);
}
.skyrail__qr img {
	display: block;
	width: 152px;
	height: 152px;
	border-radius: 8px;
	object-fit: cover;
}
.skyrail__qr-t {
	display: block;
	margin-top: 9px;
	font-size: 12px;
	line-height: 1.5;
	color: #6b7280;
}
/* ---------- 悬停/聚焦/点击三种展开方式 ----------
   重要：hover 相关规则一律包进 @media (hover:hover)，触屏设备根本不参与，
   避免 iOS Safari 点击后 :hover 粘滞（且 button 不获焦）把浮层重新压成隐藏。
   ------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
	.skyrail__item:hover .skyrail__qr,
	.skyrail__item:focus-within .skyrail__qr {
		opacity: 1;
		visibility: visible;
		transform: translate(0, -50%);
		pointer-events: auto;
	}
}
/* 触屏端只认 .is-open 这一个开关：
   不掺 :hover（会粘滞）、也不掺 :focus-within（Android Chrome 点击后会给元素焦点，
   导致第二次点“关注”取消 is-open 后浮层仍被 focus 规则撑着关不掉）。 */
.skyrail__qr.is-open {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
	pointer-events: auto;
}
/* 二维码展开时收起文字提示，避免重叠 */
@media (hover: hover) and (pointer: fine) {
	.skyrail__item.has-qr:hover .skyrail__tip,
	.skyrail__item.has-qr:focus-within .skyrail__tip { opacity: 0; visibility: hidden; }
}

/* ---------- 返回顶部 ---------- */
.skyrail__top {
	position: absolute;
	left: 50%;
	top: calc(100% + 8px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(15, 23, 42, .08);
	border-radius: 50%;
	background: rgba(255, 255, 255, .96);
	color: var(--sr-ink-2);
	box-shadow: 0 8px 20px rgba(15, 23, 42, .10);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px);
	transition: opacity .24s ease, transform .24s ease, visibility .24s, color .2s, background-color .2s;
}
.skyrail__top:hover {
	background: var(--sr-green-d);
	border-color: var(--sr-green-d);
	color: #fff;
}
.skyrail__top:hover .skyrail__ico-face {
	--sr-grad: url(#srGradWhite);
	--sr-cut: #1c7d4c;
}
.skyrail__top:focus { outline: none; }
.skyrail__top:focus-visible {
	outline: 2px solid var(--sr-green-d);
	outline-offset: 3px;
}
.skyrail__top.is-show {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* ---------- 桌面端隐藏移动端标签 ---------- */
.skyrail__label { display: none; }

/* ---------- 平板窄屏：贴边收窄 ---------- */
@media (max-width: 1024px) and (min-width: 751px) {
	.sider.skyrail { right: 8px; }
	.skyrail__card { width: 56px; padding: 5px; }
	.skyrail__item { width: 46px; height: 46px; }
	.skyrail__ico { width: 24px; height: 24px; }
}

/* ---------- 移动端：底部工具条 ---------- */
@media (max-width: 750px) {
	.sider.skyrail {
		right: 0;
		left: 0;
		top: auto;
		bottom: 0;
		transform: none;
		animation: none;
		z-index: 350;
	}
	.skyrail__card {
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		width: 100%;
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, .97);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		border: 0;
		border-top: 1px solid rgba(15, 23, 42, .08);
		border-radius: 0;
		box-shadow: 0 -6px 20px rgba(15, 23, 42, .08);
	}
	.skyrail__item {
		flex: 1 1 0;
		width: auto;
		height: 52px;
		flex-direction: column;
		gap: 4px;
		border-radius: 12px;
	}
	.skyrail__item .skyrail__ico { width: 24px; height: 24px; }
	.skyrail__label {
		display: block;
		font-size: 11px;
		line-height: 1;
		letter-spacing: .2px;
	}
	/* 移动端把主行动做成绿底胶囊，比浅色块更能拉动转化 */
	.skyrail__item--primary {
		flex: 1.22 1 0;
		width: auto;
		height: auto;
		margin: 3px 4px;
		border-radius: 26px;
		background: linear-gradient(155deg, #25a063 0%, #1c7d4c 100%);
		color: #fff;
		box-shadow: 0 5px 12px rgba(28, 125, 76, .22);
	}
	.skyrail__item--primary .skyrail__label { font-weight: 600; }
	.skyrail__item--primary:hover {
		background: linear-gradient(155deg, #1f8a55 0%, #15603a 100%);
		color: #fff;
	}
	.skyrail__tip,
	.skyrail__sep,
	.skyrail__top { display: none !important; }

	/* 移动端二维码：向上居中弹出。
	   选择器统一走 .sider.skyrail 前缀提升权重到 (0,5,0)，
	   任何 hover / focus 规则都不可能再把它压回隐藏，只认 .is-open。 */
	.sider.skyrail .skyrail__item.has-qr { z-index: 2; }
	.sider.skyrail .skyrail__item.has-qr > .skyrail__qr {
		right: auto;
		left: 50%;
		top: auto;
		bottom: calc(100% + 12px);
		z-index: 60;
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 8px);
		pointer-events: none;
	}
	.sider.skyrail .skyrail__item.has-qr > .skyrail__qr::after {
		top: auto;
		bottom: -5px;
		right: 50%;
		transform: translateX(50%) rotate(135deg);
	}
	.sider.skyrail .skyrail__item.has-qr > .skyrail__qr.is-open {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		pointer-events: auto;
	}
	.sider.skyrail .skyrail__item.has-qr > .skyrail__qr.is-open img {
		width: 152px;
		height: 152px;
	}
	.skyrail__label { text-align: center; }
}

/* ---------- 降级：尊重系统减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
	.sider.skyrail,
	.sider.skyrail * {
		animation: none !important;
		transition: none !important;
	}
	.sider.skyrail { opacity: 1; }
}