/*
* LittleLink
* https://littlelink.io
* Free to use under the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/

/* Base Typography Scale & Spacing Units
-------------------------------------------------- */
:root {
  font-size:16px;           /* 1.25 modular scale for typography */
  --scale-0:1rem;           /* 16px */
  --scale-1:1.25rem;        /* 20px */
  --scale-2:1.563rem;       /* 25px */
  --scale-3:1.953rem;       /* 31px */
  --scale-4:2.441rem;       /* 39px */
  --scale-5:3.052rem;       /* 49px */

  /* Spacing units */
  --spacing-xs:0.5rem;      /* 8px */
  --spacing-s:1rem;         /* 16px */
  --spacing-m:1.5rem;       /* 24px */
  --spacing-l:2rem;         /* 32px */
  --spacing-xl:3rem;        /* 48px */
  --spacing-xxl:4rem;       /* 64px */
}

/* Base Styles
-------------------------------------------------- */
html {
    background-color: #6da2d4;
    scroll-behavior: auto !important;
}

:root.theme-dark,
:root.theme-dark html {
    background-color: #0b1120;
}

:root.theme-auto,
:root.theme-auto html {
    background-color: #0b1120;
}

@media (prefers-color-scheme: light) {
    :root.theme-auto,
    :root.theme-auto html {
        background-color: #6da2d4;
    }
}

body {
	margin:0;
	padding:0;
	background-color:transparent;
	color:#ffffff;
	font-family: "LXGW WenKai TC", "LXGW WenKai", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	font-size:var(--scale-1);    			/* 20px */
	font-weight:400;
	line-height:1.6;
	overflow-x: hidden;
	overflow-x: clip;
	-webkit-overflow-scrolling: touch;
}

/* Grid & Container
-------------------------------------------------- */
.container {
	position:relative;
	width:100%;
	max-width:60rem;    				/* 960px */
	text-align:center;
	margin:0 auto;
	padding:var(--spacing-xl) var(--spacing-m) 0 var(--spacing-m);
	box-sizing:border-box;
	z-index: 3;
	pointer-events: none;
}

.column {
	width:100%;
	box-sizing:border-box;
}

/* For devices larger than 400px */
@media (min-width:25rem) {            /* 400px */
	.container {
		width:85%;
		padding-left:0;
		padding-right:0;
	}
}

/* For devices larger than 550px */
@media (min-width:34.375rem) {        /* 550px */
	.container {
		width:80%;
	}
	.column {
		margin-left:0;
	}
}

/* 2.5D Living Anime Sky Canvas */
.sky-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-height: 100lvh;
    min-height: -webkit-fill-available;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-color: #6da2d4;
    background-image: url('../images/anime_sky_bg.jpg');
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    contain: strict;
}

:root.theme-dark .sky-container,
:root.theme-auto .sky-container {
    background-color: #0b1120;
    background-image: 
        linear-gradient(rgba(10, 15, 26, 0.72), rgba(10, 15, 26, 0.82)),
        url('../images/anime_sky_bg.jpg');
}

@media (prefers-color-scheme: light) {
    :root.theme-auto .sky-container {
        background-color: #6da2d4;
        background-image: url('../images/anime_sky_bg.jpg');
    }
}

#sky-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ==================================================
 * 页面路由容器体系 (Page View Containers)
 * 直接切换模式：杜绝任何页面位移/滑动特效，保持背景天空绝对静止
 * ================================================== */
html,
body {
    scroll-behavior: auto !important;
}

.homepage-view,
.guide-view {
    position: relative;
    width: 100%;
    min-height: 100%;
    min-height: 100dvh;
    z-index: 1;
    -webkit-overflow-scrolling: touch;
}

/* Airplane Animation */
.airplane-wrapper {
    position: fixed;
    top: 25%; 
    left: 0;
    width: 96px;
    z-index: 2;
    animation: flyAirplane 35s linear infinite;
    pointer-events: none;
    will-change: transform;
}

.airplane {
    width: 100%;
    display: block;
    pointer-events: auto;
    opacity: 0.9;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 2;
    position: relative;
}

@keyframes flyAirplane {
    0% {
        transform: translate(-150px, 0px) rotate(2deg);
    }
    50% {
        transform: translate(calc(50vw - 150px), -20px) rotate(0deg);
    }
    100% {
        transform: translate(calc(100vw + 150px), 10px) rotate(1deg);
    }
}

/* Typography
-------------------------------------------------- */
h1 {
	margin:0 0 0.667rem 0;
	font-size:var(--scale-5);           /* ~49px */
	font-weight:800;
	line-height:1.1;
	letter-spacing:-0.02em;
	word-wrap:break-word;
	overflow-wrap:break-word;
	pointer-events: auto;
}

h1 a,
h1 a:not(.button),
:root.theme-dark h1 a,
:root.theme-dark h1 a:not(.button),
:root.theme-auto h1 a,
:root.theme-auto h1 a:not(.button) {
	color: #ffffff;
	text-decoration: none;
	transition: color 0.2s ease;
	text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

h1 a:hover,
h1 a:not(.button):hover,
:root.theme-dark h1 a:hover,
:root.theme-dark h1 a:not(.button):hover,
:root.theme-auto h1 a:hover,
:root.theme-auto h1 a:not(.button):hover {
	color: #4899F7;
}

.container p {
	margin: 0 0 clamp(1.25rem, 3vw, 1.75rem) 0;
	font-size:var(--scale-1);
	line-height:1.6;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
	pointer-events: auto;
}

/* Footer */
footer {
	margin:var(--spacing-xxl) 0;            /* 4rem (64px) top and bottom */
	font-size:var(--scale-0);
	text-align: center;
}

/* Responsive adjustments */
@media (max-width:34.375rem) {              /* 550px */
	h1 {
		font-size:var(--scale-4);
	}
	body {
		font-size:var(--scale-0);
	}
	.container p {
		font-size:var(--scale-0);
	}
	footer {
		margin:var(--spacing-xl) 0;         	/* 3rem (48px) top and bottom */
	}
}

/* Links
-------------------------------------------------- */
a {
	color:#2457F5;
	text-decoration:underline;
	pointer-events: auto;
}
a:hover {
	color:#083BDA;
}

/* Background Image behind title and subtitle
-------------------------------------------------- */
.title-background {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  margin-top: 2rem;
}

.title-background img {
  width: auto;
  height: auto;
  max-width: 100%;
  opacity: 0.15;
}

/* Category Navigation Filter */
.category-nav-wrapper {
	position: sticky;
	top: calc(1.25rem + (2.75rem - 2.5rem) / 2); /* 1.375rem (22px) -> 水平中线精确对齐指南与主题按钮 2.625rem (42px) */
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 0;
	margin-bottom: clamp(1.5rem, 3.5vw, 2rem);
	margin-inline: auto;
	pointer-events: none;
	z-index: 999;
}

.category-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 0;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	user-select: none;
	pointer-events: auto;
}

.category-nav .category-btn,
.category-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto !important;
	max-width: none !important;
	min-width: 5rem;
	height: 2.5rem !important;
	min-height: 2.5rem !important;
	padding: 0 1.5rem !important;
	font-size: 1rem !important;
	font-weight: 700;
	font-family: inherit;
	color: #ffffff !important;
	background-color: rgba(45, 156, 240, 0.45) !important;
	background: rgba(45, 156, 240, 0.45) !important;
	border: 1px solid rgba(255, 255, 255, 0.6) !important;
	border-radius: 9999px !important;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	outline: none;
	text-decoration: none !important;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
	.category-nav .category-btn:hover,
	.category-btn:hover {
		color: #ffffff !important;
		background-color: rgba(45, 156, 240, 0.75) !important;
		background: rgba(45, 156, 240, 0.75) !important;
		border-color: #ffffff !important;
		transform: scale(1.05);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
	}
}

.category-nav .category-btn.is-active,
.category-btn.is-active {
	color: #1a1a1a !important;
	background-color: rgba(255, 255, 255, 0.7) !important;
	background: rgba(255, 255, 255, 0.7) !important;
	border: 1px solid rgba(255, 255, 255, 0.6) !important;
	border-color: rgba(255, 255, 255, 0.6) !important;
	font-weight: 700;
	text-shadow: none !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
	transform: scale(1.05);
}

@media (hover: hover) and (pointer: fine) {
	.category-nav .category-btn.is-active:hover,
	.category-btn.is-active:hover {
		color: #1a1a1a !important;
		background-color: rgba(255, 255, 255, 0.8) !important;
		background: rgba(255, 255, 255, 0.8) !important;
		border-color: rgba(255, 255, 255, 0.8) !important;
	}
}

.category-nav .category-btn:active,
.category-btn:active {
	transform: scale(0.97);
}

@media (max-width: 34.375rem) {
	.category-nav-wrapper {
		top: calc(0.875rem + (2.5rem - 2.25rem) / 2); /* 1.0rem (16px) -> 水平中线精确对齐移动端指南与主题按钮 2.125rem (34px) */
	}
	.category-nav {
		gap: 0.5rem;
	}
	.category-nav .category-btn,
	.category-btn {
		min-width: 3.8rem;
		height: 2.25rem !important;
		min-height: 2.25rem !important;
		padding: 0 0.85rem !important;
		font-size: 0.9375rem !important;
	}
}

/* Button Stack - Grid Layout
鈥撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€?*/
.button-stack {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	justify-content: center;
	justify-items: center;
	max-width: 60rem;
	margin: 0 auto;
}

.button,button:not(.theme-toggle-btn):not(.category-btn):not(.guide-toggle-btn):not(.guide-modal-close):not(.back-to-top-btn) {
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:flex-start;
	width:100%;
	max-width: 18.75rem;
	min-height:4.125rem;
	padding:0.625rem 2.35rem 0.625rem 0.875rem;
	font-size:1rem;
	font-weight:700;
	text-decoration:none;
	white-space:normal;
	background-color:rgba(45, 156, 240, 0.5);
	color:#ffffff;
	border:1px solid #ffffff;
	border-radius:0.5rem;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	cursor:pointer;
	box-sizing:border-box;
	hyphens:auto;
	text-align:left;
	line-height:1.3;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	text-shadow: none !important;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
	.button:hover,button:not(.theme-toggle-btn):not(.category-btn):not(.guide-toggle-btn):not(.guide-modal-close):not(.back-to-top-btn):hover {
		background-color:rgba(255, 255, 255, 0.5) !important;
		border-color: rgba(255, 255, 255, 0.6) !important;
		color: #1a1a1a !important;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		text-shadow: none !important;
		transform:translateY(-2px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
	}
}

.button.button-xzwl {
	background-color:rgba(45, 156, 240, 0.5);
	border:1px solid #ffffff;
	color:#ffffff;
}

/* Card Internal Layout (Two-Line Info) */
.card-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	min-width: 0;
	flex: 1;
	width: 100%;
	line-height: 1.25;
}

.card-header {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	max-width: 100%;
	margin-bottom: 0.2rem;
}

.card-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: -0.01em;
	transition: color 0.25s ease;
}

.card-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.15rem 0.35rem;
	border-radius: 0.25rem;
	white-space: nowrap;
	flex-shrink: 0;
	letter-spacing: 0.02em;
	transition: all 0.25s ease;
	text-shadow: none !important;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #ffffff;
}

/* Specific Tag Colors */
.tag-dedicated,
.tag-has-dedicated {
	background: rgba(254, 240, 138, 0.25);
	color: #fef08a;
	border: 1px solid rgba(250, 204, 21, 0.6);
}

.tag-premium,
.tag-has-premium {
	background: rgba(167, 243, 208, 0.25);
	color: #a7f3d0;
	border: 1px solid rgba(110, 231, 183, 0.6);
}

.tag-nat {
	background: rgba(199, 210, 254, 0.25);
	color: #e0e7ff;
	border: 1px solid rgba(165, 180, 252, 0.6);
}

.tag-commercial,
.tag-business {
	background: rgba(14, 165, 233, 0.25);
	color: #bae6fd;
	border: 1px solid rgba(56, 189, 248, 0.6);
}

.tag-direct {
	background: rgba(186, 230, 253, 0.25);
	color: #bae6fd;
	border: 1px solid rgba(56, 189, 248, 0.6);
}

.tag-emby {
	background: rgba(82, 181, 75, 0.28);
	color: #bbf7d0;
	border: 1px solid rgba(74, 222, 128, 0.6);
}

.tag-timeless,
.tag-unlimited {
	background: rgba(251, 146, 60, 0.25);
	color: #fed7aa;
	border: 1px solid rgba(249, 115, 22, 0.6);
}

.tag-non-home,
.tag-not-home,
.tag-red {
	background: rgba(239, 68, 68, 0.22);
	color: #fecaca;
	border: 1px solid rgba(239, 68, 68, 0.65);
}

.tag-xinjiang {
	background: rgba(45, 212, 191, 0.25);
	color: #99f6e4;
	border: 1px solid rgba(45, 212, 191, 0.6);
}

.tag-satellite {
	background: rgba(192, 132, 252, 0.25);
	color: #f3e8ff;
	border: 1px solid rgba(192, 132, 252, 0.6);
}

.card-meta {
	font-size: 0.8125rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.88);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	letter-spacing: -0.01em;
	transition: color 0.25s ease;
}

.card-meta .card-tag {
	vertical-align: middle;
}

@media (hover: hover) and (pointer: fine) {
	.button:hover .card-title {
		color: #1a1a1a;
	}

	.button:hover .card-tag {
		background: rgba(0, 0, 0, 0.08);
		color: #334155;
		border-color: rgba(0, 0, 0, 0.15);
	}

	.button:hover .tag-dedicated,
	.button:hover .tag-has-dedicated {
		background: rgba(234, 179, 8, 0.22);
		color: #854d0e;
		border-color: rgba(202, 138, 4, 0.5);
	}

	.button:hover .tag-premium,
	.button:hover .tag-has-premium {
		background: rgba(16, 185, 129, 0.2);
		color: #065f46;
		border-color: rgba(5, 150, 105, 0.45);
	}

	.button:hover .tag-nat {
		background: rgba(99, 102, 241, 0.18);
		color: #3730a3;
		border-color: rgba(79, 70, 229, 0.45);
	}

	.button:hover .tag-commercial,
	.button:hover .tag-business {
		background: rgba(14, 165, 233, 0.18);
		color: #0369a1;
		border-color: rgba(2, 132, 199, 0.45);
	}

	.button:hover .tag-direct {
		background: rgba(14, 165, 233, 0.18);
		color: #0369a1;
		border-color: rgba(2, 132, 199, 0.45);
	}

	.button:hover .tag-emby {
		background: rgba(82, 181, 75, 0.22);
		color: #14532d;
		border-color: rgba(34, 197, 94, 0.5);
	}

	.button:hover .tag-timeless,
	.button:hover .tag-unlimited {
		background: rgba(249, 115, 22, 0.22);
		color: #9a3412;
		border-color: rgba(234, 88, 12, 0.5);
	}

	.button:hover .tag-non-home,
	.button:hover .tag-not-home,
	.button:hover .tag-red {
		background: rgba(239, 68, 68, 0.16);
		color: #b91c1c;
		border-color: rgba(220, 38, 38, 0.5);
	}

	.button:hover .tag-xinjiang {
		background: rgba(20, 184, 166, 0.22);
		color: #115e59;
		border-color: rgba(13, 148, 136, 0.5);
	}

	.button:hover .tag-satellite {
		background: rgba(168, 85, 247, 0.22);
		color: #581c87;
		border-color: rgba(147, 51, 234, 0.5);
	}

	.button:hover .card-meta {
		color: rgba(26, 26, 26, 0.82);
	}
}

/* Center the last button when it's alone in the row (odd number of buttons) */
/* Rule removed for 3-column layout */

/* ==========================================================================
   严格分类隔离与首屏展示规则
   同一分类下，只允许显示所属分类的卡片，彻底避免首屏加载时跨分类闪烁与内容泄露
   ========================================================================== */

/* 1. 严格分类隔离：非当前激活分类的卡片强制隐藏，任何情况下均不可显示 */
body[data-active-category="airport"] .button-stack .button:not([data-category="airport"]),
body[data-active-category="noble"] .button-stack .button:not([data-category="noble"]),
body[data-active-category="vps"] .button-stack .button:not([data-category="vps"]),
body:not([data-active-category]) .button-stack .button:not([data-category="airport"]) {
	display: none !important;
}

/* 2. 隐藏卡片状态：未处于展开状态时强制隐藏 */
.button-stack:not(.is-expanded) .button.card-hidden {
	display: none !important;
}

/* 3. 展开状态下，隐藏卡片在所属分类内淡入显示（受严格分类隔离规则绝对约束，绝不跨分类显示） */
.button-stack.is-expanded .button.card-hidden {
	display: inline-flex;
	animation: cardFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 4. 分类过滤辅助类兜底 */
.button-stack .button.category-filtered-out,
.button-stack.is-expanded .button.card-hidden.category-filtered-out {
	display: none !important;
}

@keyframes cardCategoryFade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.button-stack .button.category-fade-in {
	animation: cardCategoryFade 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cardFadeIn {
	from {
		opacity: 0;
		transform: translateY(-8px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Minimalist Expand Button between Button Stack and Middle Footer */
.expand-btn-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 1.25rem auto -0.8rem auto;
	background: transparent !important;
	pointer-events: auto;
}

.expand-card-btn,
.expand-card-btn:hover,
.expand-card-btn:focus,
.expand-card-btn:active {
	width: auto !important;
	max-width: none !important;
	min-height: 0 !important;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	padding: 0.5rem 1rem !important;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.7);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
	-webkit-tap-highlight-color: transparent;
	pointer-events: auto;
}

.expand-card-btn:hover {
	color: #ffffff !important;
	transform: translateY(2px);
}

.expand-card-btn:active {
	transform: translateY(3px) scale(0.95);
}

.expand-card-btn .expand-icon {
	width: 28px;
	height: 28px;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.expand-btn-wrapper.is-expanded .expand-card-btn .expand-icon {
	transform: rotate(180deg);
}

.expand-btn-wrapper.is-expanded .expand-card-btn:hover {
	transform: translateY(-2px);
}

/* Middle Footer - between two rows of buttons */
.middle-footer {
	text-align: center;
	font-size: var(--scale-0);
	margin: var(--spacing-l) 0;
	padding: var(--spacing-s) 0;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.middle-footer a,
footer a,
:root.theme-dark .middle-footer a,
:root.theme-auto .middle-footer a {
	color: #ffffff !important;
	text-decoration: underline;
	transition: opacity 0.2s ease;
}

.middle-footer a:hover,
footer a:hover,
:root.theme-dark .middle-footer a:hover,
:root.theme-auto .middle-footer a:hover {
	color: #ffffff !important;
	opacity: 0.8;
}

/* Icons
鈥撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€?*/
.icon {
	width:1.875rem;
	height:1.875rem;
	margin-right:0.65rem;
	flex-shrink:0;
	border-radius:0.375rem;
	object-fit:contain;
}

/* Theme System
-------------------------------------------------- */
/* Minimalist Sun/Theme Toggle Button in Top-Right */
.theme-toggle-btn {
	position: fixed;
	top: 1.25rem;
	right: 1.25rem;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: 50%;
	cursor: pointer;
	color: #ffffff;
	z-index: 1000;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
	transition: none;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus,
.theme-toggle-btn:active {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.theme-stage {
	position: relative;
	width: 2rem;
	height: 2rem;
	overflow: hidden; /* 地平线视窗裁剪：太阳落山时沉入下方地平线隐藏，日出时从下方冉冉升起 */
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
}

/* 鼠标悬停到主题切换按钮上时，不显示按钮背景，仅对图标做高亮和轻微放大效果 */
.theme-toggle-btn:hover .theme-stage {
	transform: scale(1.15);
	filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.6));
}

.theme-toggle-btn:active .theme-stage {
	transform: scale(0.92);
}

.theme-stage .theme-icon {
	position: absolute;
	width: 1.625rem;
	height: 1.625rem;
	stroke: currentColor;
	stroke-width: 1.85;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	pointer-events: none;
	will-change: transform, opacity;
}

/* 
  太阳和月亮真实天体升落轨迹：
  - 白天 (Light): 太阳位于正中 (translateY(0))，月亮隐于地平线下方 (translateY(135%))
  - 点击太阳 -> 切换为暗黑模式 (Dark): 太阳像真实日落一样垂直沉入地平线 (translateY(135%))，月亮升起就位 (translateY(0))
  - 点击月亮 -> 切换为浅色模式 (Light): 月亮下落隐退，太阳像真实日出一样从地平线下方升起归位 (translateY(0))
*/

/* Light theme */
:root.theme-light .sun-icon {
	opacity: 1;
	transform: translateY(0);
	transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.08s, opacity 0.35s ease 0.08s;
}
:root.theme-light .moon-icon {
	opacity: 0;
	transform: translateY(135%);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

/* Dark theme */
:root.theme-dark .sun-icon {
	opacity: 0;
	transform: translateY(135%);
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
:root.theme-dark .moon-icon {
	opacity: 1;
	transform: translateY(0);
	transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.08s, opacity 0.35s ease 0.08s;
}

/* Auto theme */
:root.theme-auto .sun-icon {
	opacity: 1;
	transform: translateY(0);
	transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.08s, opacity 0.35s ease 0.08s;
}
:root.theme-auto .moon-icon {
	opacity: 0;
	transform: translateY(135%);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
@media (prefers-color-scheme: dark) {
	:root.theme-auto .sun-icon {
		opacity: 0;
		transform: translateY(135%);
		transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
	}
	:root.theme-auto .moon-icon {
		opacity: 1;
		transform: translateY(0);
		transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.08s, opacity 0.35s ease 0.08s;
	}
}

@media (max-width: 34.375rem) {
	.theme-toggle-btn {
		top: 0.875rem;
		right: 0.875rem;
		width: 2.5rem;
		height: 2.5rem;
	}
	.theme-stage {
		width: 1.85rem;
		height: 1.85rem;
	}
	.theme-stage .theme-icon {
		width: 1.45rem;
		height: 1.45rem;
	}
}

/* Minimalist Back to Top Button in Bottom-Right
-------------------------------------------------- */
.back-to-top-btn {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: 50%;
	cursor: pointer;
	color: #ffffff !important;
	z-index: 1000;
	pointer-events: none;
	opacity: 0;
	transform: translateY(12px) scale(0.9);
	transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	text-shadow: none !important;
	filter: none !important;
}

.back-to-top-btn.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

.back-to-top-btn:hover,
.back-to-top-btn:focus {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	transform: translateY(-3px) scale(1.15);
	filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.6)) !important;
}

.back-to-top-btn:active {
	transform: translateY(0) scale(0.92);
}

.back-to-top-btn .back-to-top-icon {
	width: 1.625rem;
	height: 1.625rem;
	stroke: #ffffff !important;
	stroke-width: 1.85;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	flex-shrink: 0;
	filter: none !important;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 34.375rem) {
	.back-to-top-btn {
		bottom: 1rem;
		right: 1rem;
		width: 2.5rem;
		height: 2.5rem;
	}
	.back-to-top-btn .back-to-top-icon {
		width: 1.45rem;
		height: 1.45rem;
	}
}

/* Light theme is default above */
:root.theme-light {
	color-scheme: light;
}

/* Dark theme styles */
:root.theme-dark {
	color-scheme: dark;
	background-color: transparent;
}
:root.theme-dark :focus-visible {
	outline: 2px solid #60a5fa;
	outline-offset: 2px;
}
:root.theme-dark body {
	background-color: transparent;
	color: #ffffff;
}
:root.theme-dark .button,
:root.theme-dark button:not(.theme-toggle-btn):not(.category-btn):not(.guide-toggle-btn):not(.guide-modal-close):not(.back-to-top-btn) {
	background-color: rgba(15, 23, 42, 0.65);
	color: #f1f5f9;
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	text-shadow: none;
}
:root.theme-dark .button .card-title {
	color: #ffffff !important;
}
:root.theme-dark .button .card-meta {
	color: #e2e8f0 !important;
}
:root.theme-dark .card-title.highlight-title {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important;
}

:root.theme-dark .category-nav .category-btn,
:root.theme-dark .category-btn {
	background-color: rgba(15, 23, 42, 0.6) !important;
	background: rgba(15, 23, 42, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	color: #e2e8f0 !important;
}

:root.theme-dark .category-nav .category-btn.is-active,
:root.theme-dark .category-btn.is-active {
	background-color: rgba(255, 255, 255, 0.85) !important;
	background: rgba(255, 255, 255, 0.85) !important;
	border-color: rgba(255, 255, 255, 0.85) !important;
	color: #0f172a !important;
}

@media (hover: hover) and (pointer: fine) {
	:root.theme-dark .button:hover,
	:root.theme-dark button:not(.theme-toggle-btn):not(.category-btn):not(.guide-toggle-btn):not(.guide-modal-close):not(.back-to-top-btn):hover {
		background-color: rgba(30, 41, 59, 0.85) !important;
		border-color: rgba(147, 197, 253, 0.5) !important;
		color: #ffffff !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(147, 197, 253, 0.18) !important;
	}

	:root.theme-dark .button:hover .card-title {
		color: #ffffff !important;
	}
	:root.theme-dark .button:hover .card-meta {
		color: #e2e8f0 !important;
	}

	:root.theme-dark .button:hover .card-tag {
		background: rgba(255, 255, 255, 0.12);
		color: #f1f5f9;
		border-color: rgba(255, 255, 255, 0.25);
	}
	:root.theme-dark .button:hover .tag-dedicated,
	:root.theme-dark .button:hover .tag-has-dedicated {
		background: rgba(254, 240, 138, 0.25);
		color: #fef08a;
		border-color: rgba(250, 204, 21, 0.6);
	}
	:root.theme-dark .button:hover .tag-premium,
	:root.theme-dark .button:hover .tag-has-premium {
		background: rgba(167, 243, 208, 0.25);
		color: #a7f3d0;
		border-color: rgba(110, 231, 183, 0.6);
	}
	:root.theme-dark .button:hover .tag-nat {
		background: rgba(199, 210, 254, 0.25);
		color: #e0e7ff;
		border-color: rgba(165, 180, 252, 0.6);
	}
	:root.theme-dark .button:hover .tag-commercial,
	:root.theme-dark .button:hover .tag-business {
		background: rgba(14, 165, 233, 0.25);
		color: #bae6fd;
		border-color: rgba(56, 189, 248, 0.6);
	}
	:root.theme-dark .button:hover .tag-direct {
		background: rgba(186, 230, 253, 0.25);
		color: #bae6fd;
		border-color: rgba(56, 189, 248, 0.6);
	}
	:root.theme-dark .button:hover .tag-emby {
		background: rgba(82, 181, 75, 0.28);
		color: #bbf7d0;
		border-color: rgba(74, 222, 128, 0.6);
	}
	:root.theme-dark .button:hover .tag-timeless,
	:root.theme-dark .button:hover .tag-unlimited {
		background: rgba(251, 146, 60, 0.25);
		color: #fed7aa;
		border-color: rgba(249, 115, 22, 0.6);
	}
	:root.theme-dark .button:hover .tag-non-home,
	:root.theme-dark .button:hover .tag-not-home,
	:root.theme-dark .button:hover .tag-red {
		background: rgba(239, 68, 68, 0.25);
		color: #fecaca;
		border-color: rgba(239, 68, 68, 0.65);
	}
	:root.theme-dark .button:hover .tag-xinjiang {
		background: rgba(45, 212, 191, 0.25);
		color: #99f6e4;
		border-color: rgba(45, 212, 191, 0.6);
	}
	:root.theme-dark .button:hover .tag-satellite {
		background: rgba(192, 132, 252, 0.25);
		color: #f3e8ff;
		border-color: rgba(192, 132, 252, 0.6);
	}

	:root.theme-dark .category-nav .category-btn:hover,
	:root.theme-dark .category-btn:hover {
		background-color: rgba(30, 41, 59, 0.8) !important;
		background: rgba(30, 41, 59, 0.8) !important;
		border-color: rgba(255, 255, 255, 0.4) !important;
		color: #ffffff !important;
	}
	:root.theme-dark .category-nav .category-btn.is-active:hover,
	:root.theme-dark .category-btn.is-active:hover {
		background-color: #ffffff !important;
		background: #ffffff !important;
		color: #0f172a !important;
	}
}

:root.theme-dark a:not(.button) {
	color: #93c5fd;
}
:root.theme-dark a:not(.button):hover {
	color: #bfdbfe;
}

/* Auto theme */
:root.theme-auto {
	color-scheme: light dark;
	background-color: transparent;
}
@media (prefers-color-scheme: dark) {
	:root.theme-auto {
		background-color: transparent;
	}
	:root.theme-auto body {
		background-color: transparent;
		color: #ffffff;
	}
	:root.theme-auto .button,
	:root.theme-auto button:not(.theme-toggle-btn):not(.category-btn):not(.guide-toggle-btn):not(.guide-modal-close):not(.back-to-top-btn) {
		background-color: rgba(15, 23, 42, 0.65);
		color: #f1f5f9;
		border: 1px solid rgba(255, 255, 255, 0.15);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		text-shadow: none;
	}
	:root.theme-auto .button:hover,
	:root.theme-auto button:not(.theme-toggle-btn):not(.category-btn):not(.guide-toggle-btn):not(.guide-modal-close):not(.back-to-top-btn):hover {
		background-color: rgba(30, 41, 59, 0.85) !important;
		border-color: rgba(147, 197, 253, 0.5) !important;
		color: #ffffff !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(147, 197, 253, 0.18) !important;
	}
	:root.theme-auto .button .card-title,
	:root.theme-auto .button:hover .card-title {
		color: #ffffff !important;
	}
	:root.theme-auto .button .card-meta,
	:root.theme-auto .button:hover .card-meta {
		color: #e2e8f0 !important;
	}
	:root.theme-auto .card-title.highlight-title {
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important;
	}
	:root.theme-auto .button:hover .card-tag {
		background: rgba(255, 255, 255, 0.12);
		color: #f1f5f9;
		border-color: rgba(255, 255, 255, 0.25);
	}
	:root.theme-auto .button:hover .tag-dedicated,
	:root.theme-auto .button:hover .tag-has-dedicated {
		background: rgba(254, 240, 138, 0.25);
		color: #fef08a;
		border-color: rgba(250, 204, 21, 0.6);
	}
	:root.theme-auto .button:hover .tag-premium,
	:root.theme-auto .button:hover .tag-has-premium {
		background: rgba(167, 243, 208, 0.25);
		color: #a7f3d0;
		border-color: rgba(110, 231, 183, 0.6);
	}
	:root.theme-auto .button:hover .tag-nat {
		background: rgba(199, 210, 254, 0.25);
		color: #e0e7ff;
		border-color: rgba(165, 180, 252, 0.6);
	}
	:root.theme-auto .button:hover .tag-commercial,
	:root.theme-auto .button:hover .tag-business {
		background: rgba(14, 165, 233, 0.25);
		color: #bae6fd;
		border-color: rgba(56, 189, 248, 0.6);
	}
	:root.theme-auto .button:hover .tag-direct {
		background: rgba(186, 230, 253, 0.25);
		color: #bae6fd;
		border-color: rgba(56, 189, 248, 0.6);
	}
	:root.theme-auto .button:hover .tag-emby {
		background: rgba(82, 181, 75, 0.28);
		color: #bbf7d0;
		border-color: rgba(74, 222, 128, 0.6);
	}
	:root.theme-auto .button:hover .tag-timeless,
	:root.theme-auto .button:hover .tag-unlimited {
		background: rgba(251, 146, 60, 0.25);
		color: #fed7aa;
		border-color: rgba(249, 115, 22, 0.6);
	}
	:root.theme-auto .button:hover .tag-non-home,
	:root.theme-auto .button:hover .tag-not-home,
	:root.theme-auto .button:hover .tag-red {
		background: rgba(239, 68, 68, 0.25);
		color: #fecaca;
		border-color: rgba(239, 68, 68, 0.65);
	}
	:root.theme-auto .button:hover .tag-xinjiang {
		background: rgba(45, 212, 191, 0.25);
		color: #99f6e4;
		border-color: rgba(45, 212, 191, 0.6);
	}
	:root.theme-auto .button:hover .tag-satellite {
		background: rgba(192, 132, 252, 0.25);
		color: #f3e8ff;
		border-color: rgba(192, 132, 252, 0.6);
	}
	:root.theme-auto .category-nav .category-btn,
	:root.theme-auto .category-btn {
		background-color: rgba(15, 23, 42, 0.6) !important;
		background: rgba(15, 23, 42, 0.6) !important;
		border: 1px solid rgba(255, 255, 255, 0.18) !important;
		color: #e2e8f0 !important;
	}
	:root.theme-auto .category-nav .category-btn:hover,
	:root.theme-auto .category-btn:hover {
		background-color: rgba(30, 41, 59, 0.8) !important;
		background: rgba(30, 41, 59, 0.8) !important;
		border-color: rgba(255, 255, 255, 0.4) !important;
		color: #ffffff !important;
	}
	:root.theme-auto .category-nav .category-btn.is-active,
	:root.theme-auto .category-btn.is-active {
		background-color: rgba(255, 255, 255, 0.85) !important;
		background: rgba(255, 255, 255, 0.85) !important;
		border-color: rgba(255, 255, 255, 0.85) !important;
		color: #0f172a !important;
	}
	:root.theme-auto .category-nav .category-btn.is-active:hover,
	:root.theme-auto .category-btn.is-active:hover {
		background-color: #ffffff !important;
		background: #ffffff !important;
		color: #0f172a !important;
	}
	:root.theme-auto :focus-visible {
		outline: 2px solid #60a5fa;
		outline-offset: 2px;
	}
	:root.theme-auto a:not(.button) {
		color: #93c5fd;
	}
	:root.theme-auto a:not(.button):hover {
		color: #bfdbfe;
	}
}

/* Responsive Button Stack - Tablet Two Columns
鈥撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€?*/
@media (max-width:62rem) {                  /* 992px */
	.button-stack {
		grid-template-columns: repeat(2, 1fr);
		max-width: 40rem;
	}
}

/* Responsive Button Stack - Mobile Single Column
鈥撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€撯€?*/
@media (max-width:48rem) {                  /* 768px */
	.button-stack {
		grid-template-columns: 1fr;
		gap: 0.75rem;
		justify-items: center;
	}
	/* Middle footer responsive adjustment */
	.middle-footer {
		margin: var(--spacing-m) 0;
		padding: var(--spacing-xs) 0;
	}
	.expand-btn-wrapper {
		margin-bottom: -0.6rem;
	}
	.seo-knowledge-section {
		margin-top: 1.55rem;
	}
	/* Reduce airplane size on mobile and start flight only after load */
	.airplane-wrapper {
		width: 64px;
		animation: none;
		transform: translate(-90px, 0);
		opacity: 0;
	}
	.airplane-wrapper.mobile-flying {
		opacity: 1;
		animation: flyAirplaneMobile 15s linear infinite;
	}
}

@keyframes flyAirplaneMobile {
	0% {
		transform: translate(-90px, 0px) rotate(2deg);
	}
	50% {
		transform: translate(calc(50vw - 32px), -16px) rotate(0deg);
	}
	100% {
		transform: translate(calc(100vw + 90px), 10px) rotate(1deg);
	}
}

.highlight-title {
  background: linear-gradient(to top, rgba(255, 235, 59, 0.9) 0%, rgba(255, 235, 59, 0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 75%;
  background-position: bottom;
  padding: 0 4px;
  border-radius: 2px;
  text-decoration: none !important;
  color: inherit;
}

.middle-footer a.highlight-title,
.middle-footer a:has(.highlight-title) {
  text-decoration: none !important;
}

/* 引入并兼容谷歌字体 LXGW WenKai / LXGW WenKai TC */
@font-face {
  font-family: 'LXGW WenKai';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('LXGW WenKai Light'), local('LXGW WenKai TC Light'), local('LXGW WenKai TC'), local('LXGW WenKai'), url(https://fonts.gstatic.com/s/lxgwwenkaitc/v10/w8gAH20td8wNsI3f40DmtXZb4_MmBfkp.ttf) format('truetype');
}
@font-face {
  font-family: 'LXGW WenKai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('LXGW WenKai Regular'), local('LXGW WenKai TC Regular'), local('LXGW WenKai TC'), local('LXGW WenKai'), url(https://fonts.gstatic.com/s/lxgwwenkaitc/v10/w8gDH20td8wNsI3f40DmtXZb48uK.ttf) format('truetype');
}
@font-face {
  font-family: 'LXGW WenKai';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('LXGW WenKai Bold'), local('LXGW WenKai TC Bold'), local('LXGW WenKai TC'), local('LXGW WenKai'), url(https://fonts.gstatic.com/s/lxgwwenkaitc/v10/w8gAH20td8wNsI3f40DmtXZb4_M2Avkp.ttf) format('truetype');
}

html,
body,
button,
input,
textarea,
select {
  font-family: "LXGW WenKai TC", "LXGW WenKai", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html, body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   Website Card QR Code Feature (Desktop & Mobile)
   ========================================================================== */

/* Elevate card z-index on hover and active popup (higher than category nav z-index 999) */
.button:hover {
  z-index: 10;
}
.button.qr-active,
.button:has(.qr-trigger:hover),
.button:has(.qr-popup:hover) {
  z-index: 1010;
}

/* QR Trigger Icon inside card on the right (Default visible on all devices) */
.qr-trigger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%) !important;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background: rgba(56, 189, 248, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.65);
  color: #ffffff;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer;
  transition: background 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.qr-trigger svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  fill: currentColor;
  margin: 0;
  padding: 0;
  transform: translateZ(0) !important;
  backface-visibility: hidden;
  transition: none !important;
}

/* Button hover state styling for QR icon */
.button:hover .qr-trigger {
  background: rgba(56, 189, 248, 0.65);
  color: #ffffff;
}

/* Active, focused or hovered trigger */
.button .qr-trigger:hover,
.button .qr-trigger:focus-visible,
.button.qr-active .qr-trigger {
  background: rgba(224, 242, 254, 0.95) !important;
  color: #0284c7 !important;
  border-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* QR Popup above the card: positioned stably without vertical slide jitter */
.qr-popup {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.2s ease,
              visibility 0.2s ease;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1)) drop-shadow(0 12px 28px rgba(0, 20, 50, 0.18));
  cursor: default;
}

/* Hover bridge between trigger/card and popup */
.qr-popup::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 20px;
  pointer-events: auto;
}

/* Reveal popup when card has .qr-active class (via click) */
.button.qr-active .qr-popup {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Desktop hover convenience */
@media (hover: hover) and (pointer: fine) {
  .qr-trigger:hover ~ .qr-popup,
  .qr-popup:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Crisp white popup card */
.qr-popup-card {
  background: #ffffff;
  border: none;
  border-radius: 0.75rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Crisp white inner container for optimal smartphone scanning */
.qr-code-box {
  width: 124px;
  height: 124px;
  background: #ffffff;
  border-radius: 0.5rem;
  padding: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  overflow: hidden;
}

.qr-code-box canvas,
.qr-code-box img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: 2px;
}

/* Caption text below QR code with fixed height to avoid layout shift */
.qr-caption {
  margin-top: 0.45rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  height: 1.25rem;
  color: #475569;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  white-space: nowrap;
  font-family: "LXGW WenKai TC", "LXGW WenKai", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  padding: 0 0.35rem;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.qr-caption:hover {
  color: #0284c7;
  background-color: rgba(2, 132, 199, 0.08);
}

.qr-caption.copied {
  color: #10b981 !important;
  background-color: rgba(16, 185, 129, 0.1) !important;
}

.qr-caption svg {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  margin: 0;
  padding: 0;
  transform: translateZ(0) !important;
  backface-visibility: hidden;
  transition: none !important;
}

/* Downward arrow indicator using clip-path without backdrop-filter to seamlessly merge into the parent */
.qr-arrow {
  position: absolute;
  bottom: -5.5px; /* Overlaps card by 0.5px to prevent subpixel gaps */
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 6px;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: -1; /* Place the 0.5px overlap behind the card */
}

/* Dark mode styling: popup card and arrow stay pure white matching the QR background */
:root.theme-dark .qr-popup {
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45)) drop-shadow(0 14px 30px rgba(0, 0, 0, 0.6));
}
:root.theme-dark .qr-popup-card,
:root.theme-dark .qr-arrow {
  background: #ffffff;
}
:root.theme-dark .qr-caption {
  color: #475569;
}

@media (prefers-color-scheme: dark) {
  :root.theme-auto .qr-popup {
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45)) drop-shadow(0 14px 30px rgba(0, 0, 0, 0.6));
  }
  :root.theme-auto .qr-popup-card,
  :root.theme-auto .qr-arrow {
    background: #ffffff;
  }
  :root.theme-auto .qr-caption {
    color: #475569;
  }
}

/* Hide QR codes during physics collapse Easter egg */
body.cards-falling .qr-trigger,
body.cards-falling .qr-popup {
  display: none !important;
}

/* Guide Button (Top-Left) & Modal Dialog
-------------------------------------------------- */
/* Minimalist Guide Button in Top-Left (Transparent, no capsule background) */
.guide-toggle-btn {
	position: fixed;
	top: 1.25rem;
	left: 1.25rem;
	height: 2.75rem;
	padding: 0 0.5rem;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	color: #ffffff !important;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1;
	z-index: 1000;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	text-shadow: none !important;
	filter: none !important;
	opacity: 1 !important;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
}

.guide-toggle-btn span {
	color: #ffffff !important;
	text-shadow: none !important;
}

.guide-toggle-btn:hover,
.guide-toggle-btn:focus,
.guide-toggle-btn:active {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.guide-toggle-btn:hover {
	transform: scale(1.15);
	filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.6)) !important;
}

.guide-toggle-btn:active {
	transform: scale(0.92);
}

.guide-toggle-btn .guide-icon {
	width: 1.2rem;
	height: 1.2rem;
	stroke: #ffffff !important;
	stroke-width: 1.85;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	flex-shrink: 0;
	filter: none !important;
}

@media (max-width: 34.375rem) {
	.guide-toggle-btn {
		top: 0.875rem;
		left: 0.875rem;
		height: 2.5rem;
		padding: 0 0.35rem;
		font-size: 0.875rem;
		gap: 0.25rem;
	}
	.guide-toggle-btn .guide-icon {
		width: 1.05rem;
		height: 1.05rem;
	}
}

/* Guide Modal Dialog */
.guide-modal {
	position: fixed;
	top: 9.75rem;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 0;
	border: none;
	background: transparent;
	width: min(92vw, 32rem);
	max-height: calc(100vh - 11rem);
	border-radius: 1rem;
	overflow: visible;
	z-index: 2000;
	color: inherit;
	outline: none;
	box-sizing: border-box;
}

.guide-modal::backdrop {
	background-color: transparent;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.guide-modal[open] {
	animation: guideModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.guide-modal[open]::backdrop {
	animation: guideBackdropFadeIn 0.25s ease forwards;
}

@keyframes guideModalFadeIn {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes guideBackdropFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Lock background scrolling when guide modal is open */
html.guide-modal-open,
body.guide-modal-open {
	overflow: hidden !important;
	touch-action: none !important;
	overscroll-behavior: none !important;
}

.guide-modal-content {
	position: relative;
	border-radius: 1rem;
	padding: 1.5rem;
	background-color: rgba(45, 156, 240, 0.8);
	color: #ffffff;
	border: 1px solid #ffffff;
	box-shadow: 0 12px 36px rgba(14, 116, 144, 0.25), 0 2px 8px rgba(0, 0, 0, 0.05);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	max-height: 85vh;
	overflow-y: auto;
	box-sizing: border-box;
	text-align: left;
	touch-action: pan-y;
}

.guide-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.guide-modal-title-wrapper {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.guide-modal-title-icon {
	width: 1.35rem;
	height: 1.35rem;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	color: #ffffff;
}

.guide-modal-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
}

.guide-modal-close {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	width: 2rem;
	height: 2rem;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.375rem;
	color: #ffffff;
	cursor: pointer;
	opacity: 0.85;
	transition: all 0.2s ease;
}

.guide-modal-close:hover {
	opacity: 1;
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.18) !important;
}

.guide-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.guide-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #ffffff;
}

.guide-item-badge {
	width: 1.5rem;
	height: 1.5rem;
	min-width: 1.5rem;
	border-radius: 50%;
	font-size: 0.85rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.15rem;
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff;
	flex-shrink: 0;
}

.guide-item-text {
	flex: 1;
	min-width: 0;
}

.guide-sub-link {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.9rem;
	color: #e0f2fe;
}

.guide-modal-content a {
	color: #fef08a;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 600;
	transition: color 0.2s ease;
}

.guide-modal-content a:hover {
	color: #ffffff;
}

/* Dark mode modal styles */
:root.theme-dark .guide-modal-content {
	background-color: rgba(15, 23, 42, 0.8);
	color: #f1f5f9;
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

:root.theme-dark .guide-modal::backdrop {
	background-color: transparent;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

:root.theme-dark .guide-modal-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:root.theme-dark .guide-modal-title {
	color: #f8fafc;
}

:root.theme-dark .guide-modal-title-icon {
	color: #60a5fa;
}

:root.theme-dark .guide-modal-close {
	color: #94a3b8;
}

:root.theme-dark .guide-modal-close:hover {
	color: #f8fafc;
	background-color: rgba(255, 255, 255, 0.1) !important;
}

:root.theme-dark .guide-item {
	color: #cbd5e1;
}

:root.theme-dark .guide-item-badge {
	background: rgba(96, 165, 250, 0.2);
	color: #60a5fa;
}

:root.theme-dark .guide-sub-link {
	color: #94a3b8;
}

:root.theme-dark .guide-modal-content a {
	color: #60a5fa;
}

:root.theme-dark .guide-modal-content a:hover {
	color: #93c5fd;
}

/* Auto theme dark mode */
@media (prefers-color-scheme: dark) {
	:root.theme-auto .guide-modal-content {
		background-color: rgba(15, 23, 42, 0.8);
		color: #f1f5f9;
		border: 1px solid rgba(255, 255, 255, 0.15);
		box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.25);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}

	:root.theme-auto .guide-modal::backdrop {
		background-color: transparent;
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}

	:root.theme-auto .guide-modal-header {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	:root.theme-auto .guide-modal-title {
		color: #f8fafc;
	}

	:root.theme-auto .guide-modal-title-icon {
		color: #60a5fa;
	}

	:root.theme-auto .guide-modal-close {
		color: #94a3b8;
	}

	:root.theme-auto .guide-modal-close:hover {
		color: #f8fafc;
		background-color: rgba(255, 255, 255, 0.1) !important;
	}

	:root.theme-auto .guide-item {
		color: #cbd5e1;
	}

	:root.theme-auto .guide-item-badge {
		background: rgba(96, 165, 250, 0.2);
		color: #60a5fa;
	}

	:root.theme-auto .guide-sub-link {
		color: #94a3b8;
	}

	:root.theme-auto .guide-modal-content a {
		color: #60a5fa;
	}

	:root.theme-auto .guide-modal-content a:hover {
		color: #93c5fd;
	}
}

@media (max-width: 34.375rem) {
	.guide-modal {
		top: 8.5rem;
		max-height: calc(100vh - 9.25rem);
	}
	.guide-modal-content {
		padding: 1.25rem 1rem;
	}
	.guide-modal-title {
		font-size: 1.125rem;
	}
	.guide-item {
		font-size: 0.9rem;
		gap: 0.6rem;
	}
}

/* Hide guide modal during physics collapse Easter egg */
body.cards-falling .guide-modal {
	display: none !important;
}



/* ==================================================
 * SuperSEO Knowledge Section & Semantic Typography
 * ================================================== */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

h3.card-title {
	margin: 0;
	padding: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: inherit;
	display: inline-block;
}

.seo-knowledge-section {
	position: relative;
	width: 100%;
	margin-top: 1.65rem;
	margin-bottom: var(--spacing-l);
	text-align: left;
	pointer-events: auto;
	box-sizing: border-box;
}

/* 当分类切换至老站或VPS时隐藏下方的指南内容模块 */
body[data-active-category="noble"] .seo-knowledge-section,
body[data-active-category="vps"] .seo-knowledge-section,
body[data-active-category="noble"] #seo-knowledge,
body[data-active-category="vps"] #seo-knowledge {
	display: none !important;
}

.seo-block {
	margin-bottom: var(--spacing-xl);
	padding: 1.5rem;
	background: rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
	color: #1e293b;
	transition: all 0.3s ease;
}

:root.theme-dark .seo-block,
:root.theme-auto .seo-block {
	background: rgba(18, 22, 34, 0.55);
	border-color: rgba(255, 255, 255, 0.12);
	color: #e2e8f0;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

@media (prefers-color-scheme: light) {
	:root.theme-auto .seo-block {
		background: rgba(255, 255, 255, 0.45);
		border-color: rgba(255, 255, 255, 0.6);
		color: #1e293b;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
	}
}

.seo-block-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	color: inherit;
}

:root.theme-dark .seo-block-title,
:root.theme-auto .seo-block-title {
	border-bottom-color: rgba(255, 255, 255, 0.12);
}

@media (prefers-color-scheme: light) {
	:root.theme-auto .seo-block-title {
		border-bottom-color: rgba(0, 0, 0, 0.08);
	}
}

.seo-snippets-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
	margin-top: 0.75rem;
}

.seo-snippet-card {
	padding: 1rem;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.4);
}

:root.theme-dark .seo-snippet-card,
:root.theme-auto .seo-snippet-card {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: light) {
	:root.theme-auto .seo-snippet-card {
		background: rgba(255, 255, 255, 0.3);
		border-color: rgba(255, 255, 255, 0.4);
	}
}

.seo-snippet-card h3 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.5rem 0;
	color: inherit;
}

.seo-snippet-card p {
	font-size: 0.92rem;
	line-height: 1.6;
	margin: 0;
	color: #1e293b !important;
	text-shadow: none !important;
	opacity: 1 !important;
}

:root.theme-dark .seo-snippet-card p,
:root.theme-auto .seo-snippet-card p {
	color: #cbd5e1 !important;
	text-shadow: none !important;
	opacity: 1 !important;
}

@media (prefers-color-scheme: light) {
	:root.theme-auto .seo-snippet-card p {
		color: #1e293b !important;
		text-shadow: none !important;
		opacity: 1 !important;
	}
}

.methodology-list,
.seo-block > p,
.faq-answer {
	color: #1e293b !important;
	text-shadow: none !important;
}

:root.theme-dark .methodology-list,
:root.theme-dark .seo-block > p,
:root.theme-dark .faq-answer,
:root.theme-auto .methodology-list,
:root.theme-auto .seo-block > p,
:root.theme-auto .faq-answer {
	color: #cbd5e1 !important;
	text-shadow: none !important;
}

@media (prefers-color-scheme: light) {
	:root.theme-auto .methodology-list,
	:root.theme-auto .seo-block > p,
	:root.theme-auto .faq-answer {
		color: #1e293b !important;
		text-shadow: none !important;
	}
}


/* Cluster Guides */
.seo-cluster-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
	margin-top: 1rem;
}

.seo-cluster-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.25rem;
	background: rgba(255, 255, 255, 0.35);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

:root.theme-dark .seo-cluster-card,
:root.theme-auto .seo-cluster-card {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: light) {
	:root.theme-auto .seo-cluster-card {
		background: rgba(255, 255, 255, 0.35);
		border-color: rgba(255, 255, 255, 0.45);
	}
}

.seo-cluster-card:hover {
	transform: translateY(-2px);
	border-color: #3b82f6;
}

.seo-cluster-card h3 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.5rem 0;
	color: inherit;
}

.seo-cluster-card h3 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.5rem 0;
	color: #0f172a;
}

:root.theme-dark .seo-cluster-card h3,
:root.theme-auto .seo-cluster-card h3 {
	color: #f8fafc;
}

@media (prefers-color-scheme: light) {
	:root.theme-auto .seo-cluster-card h3 {
		color: #0f172a;
	}
}

.seo-cluster-card p {
	font-size: 0.88rem;
	line-height: 1.55;
	margin: 0 0 0.75rem 0;
	color: #1e293b !important;
	text-shadow: none !important;
	opacity: 1 !important;
	font-weight: 450;
}

:root.theme-dark .seo-cluster-card p,
:root.theme-auto .seo-cluster-card p {
	color: #cbd5e1 !important;
	text-shadow: none !important;
	opacity: 1 !important;
}

@media (prefers-color-scheme: light) {
	:root.theme-auto .seo-cluster-card p {
		color: #1e293b !important;
		text-shadow: none !important;
		opacity: 1 !important;
	}
}

.seo-cluster-link-text {
	font-size: 0.85rem;
	font-weight: 600;
	color: #2563eb;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

:root.theme-dark .seo-cluster-link-text,
:root.theme-auto .seo-cluster-link-text {
	color: #60a5fa;
}

@media (prefers-color-scheme: light) {
	:root.theme-auto .seo-cluster-link-text {
		color: #2563eb;
	}
}

/* FAQ Accordion */
.faq-accordion {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1rem;
}

.faq-item {
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.4);
	overflow: hidden;
	transition: background 0.2s ease;
}

:root.theme-dark .faq-item,
:root.theme-auto .faq-item {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: light) {
	:root.theme-auto .faq-item {
		background: rgba(255, 255, 255, 0.25);
		border-color: rgba(255, 255, 255, 0.4);
	}
}

.faq-question {
	padding: 0.9rem 1.1rem;
	font-size: 0.98rem;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: inherit;
}

.faq-question::-webkit-details-marker {
	display: none;
}

.faq-question::after {
	content: '+';
	font-size: 1.2rem;
	font-weight: 400;
	transition: transform 0.2s ease;
}

.faq-item[open] .faq-question::after {
	content: '−';
}

.faq-answer {
	padding: 0 1.1rem 1rem 1.1rem;
	font-size: 0.9rem;
	line-height: 1.6;
	opacity: 0.9;
	color: inherit;
}

.methodology-list {
	padding-left: 1.25rem;
	margin: 0.75rem 0;
	font-size: 0.92rem;
	line-height: 1.65;
}

.methodology-list li {
	margin-bottom: 0.5rem;
}

.affiliate-disclosure-box {
	margin-top: 1.25rem;
	padding: 0.85rem 1rem;
	background: rgba(234, 179, 8, 0.1);
	border: 1px dashed rgba(234, 179, 8, 0.4);
	border-radius: 8px;
	font-size: 0.85rem;
	line-height: 1.5;
}

/* ==========================================================================
   分类切换极速拖影动效（老站“省心” / VPS“不难”）
   ========================================================================== */
.category-speed-toast-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 99999;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.speed-toast-card {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate3d(-50%, calc(var(--start-y, 110vh) - 50%), 0);
	pointer-events: none;
	user-select: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	will-change: transform, opacity;
	animation: speedToastFlight 1.0s cubic-bezier(0.18, 0.88, 0.3, 1) forwards;
}

.speed-toast-text,
.speed-toast-ghost {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
	font-size: clamp(4.8rem, 13.5vw, 8.1rem);
	font-weight: 900;
	letter-spacing: 0.18em;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}

/* 统一纯白字体加高亮，完全删除光晕特效 */
.speed-toast-text {
	position: relative;
	z-index: 5;
	color: #ffffff;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 2px rgba(255, 255, 255, 0.95);
	filter: brightness(1.15);
	will-change: transform;
}

/* 4层纵向幽灵残影克隆（纯白拖尾，模拟极速动态拖尾模糊，无缩放） */
.speed-toast-ghost {
	position: absolute;
	left: 50%;
	top: 50%;
	transform-origin: center center;
	pointer-events: none;
	user-select: none;
	z-index: 1;
	color: #ffffff;
	text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
	will-change: transform, opacity, filter;
}

.speed-toast-ghost.ghost-1 {
	animation: speedGhostTrail1 1.0s cubic-bezier(0.18, 0.88, 0.3, 1) forwards;
}
.speed-toast-ghost.ghost-2 {
	animation: speedGhostTrail2 1.0s cubic-bezier(0.18, 0.88, 0.3, 1) forwards;
}
.speed-toast-ghost.ghost-3 {
	animation: speedGhostTrail3 1.0s cubic-bezier(0.18, 0.88, 0.3, 1) forwards;
}
.speed-toast-ghost.ghost-4 {
	animation: speedGhostTrail4 1.0s cubic-bezier(0.18, 0.88, 0.3, 1) forwards;
}

/* 极速运动白色光线粒子（Streaks） */
.speed-toast-streaks {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 140%;
	height: 140px;
	pointer-events: none;
	z-index: 0;
}

.speed-streak {
	position: absolute;
	width: 2px;
	height: 70px;
	border-radius: 2px;
	opacity: 0;
	background: linear-gradient(to top, transparent, rgba(255, 255, 255, 0.8));
	animation: speedStreakRush 1.0s cubic-bezier(0.18, 0.88, 0.3, 1) forwards;
}

.speed-streak.line-1 { left: 15%; animation-delay: 0.02s; }
.speed-streak.line-2 { left: 38%; animation-delay: 0.00s; }
.speed-streak.line-3 { left: 62%; animation-delay: 0.03s; }
.speed-streak.line-4 { left: 85%; animation-delay: 0.01s; }

/* 核心位移关键帧：
   0% ~ 30% (0.30s): 底部进入 -> 明显平滑减速移入第二行卡片中心（比之前加0.1秒，移动过程更清晰）
   30% ~ 70% (0.40s): 第二行卡片中心水平对齐静止停留 0.4 秒（无任何缩小动作）
   70% ~ 100% (0.30s): 极速向上发射消失（比之前加0.1秒，冲顶过程更明显完整）
*/
@keyframes speedToastFlight {
	0% {
		transform: translate3d(-50%, calc(var(--start-y, 110vh) - 50%), 0);
		opacity: 0;
		animation-timing-function: cubic-bezier(0.18, 0.88, 0.3, 1);
	}
	4% {
		opacity: 1;
	}
	30%, 70% {
		transform: translate3d(-50%, calc(var(--target-y, 40vh) - 50%), 0);
		opacity: 1;
		animation-timing-function: cubic-bezier(0.42, 0, 0.85, 0.25);
	}
	95% {
		opacity: 1;
	}
	100% {
		transform: translate3d(-50%, calc(var(--exit-y, -180px) - 50%), 0);
		opacity: 0;
	}
}

/* 幽灵残影 1（近距离纯白高保真残影） */
@keyframes speedGhostTrail1 {
	0% {
		transform: translate3d(-50%, -50%, 0) translateY(24px);
		opacity: 0.75;
		filter: blur(0.8px);
	}
	30%, 70% {
		transform: translate3d(-50%, -50%, 0) translateY(0);
		opacity: 0;
		filter: blur(0);
	}
	76% {
		opacity: 0.7;
	}
	100% {
		transform: translate3d(-50%, -50%, 0) translateY(35px);
		opacity: 0;
		filter: blur(1.2px);
	}
}

/* 幽灵残影 2 */
@keyframes speedGhostTrail2 {
	0% {
		transform: translate3d(-50%, -50%, 0) translateY(48px);
		opacity: 0.55;
		filter: blur(1.8px);
	}
	30%, 70% {
		transform: translate3d(-50%, -50%, 0) translateY(0);
		opacity: 0;
		filter: blur(0);
	}
	76% {
		opacity: 0.55;
	}
	100% {
		transform: translate3d(-50%, -50%, 0) translateY(68px);
		opacity: 0;
		filter: blur(2.5px);
	}
}

/* 幽灵残影 3 */
@keyframes speedGhostTrail3 {
	0% {
		transform: translate3d(-50%, -50%, 0) translateY(76px);
		opacity: 0.35;
		filter: blur(3.2px);
	}
	30%, 70% {
		transform: translate3d(-50%, -50%, 0) translateY(0);
		opacity: 0;
		filter: blur(0);
	}
	76% {
		opacity: 0.35;
	}
	100% {
		transform: translate3d(-50%, -50%, 0) translateY(105px);
		opacity: 0;
		filter: blur(4.2px);
	}
}

/* 幽灵残影 4（远距离拖尾羽化） */
@keyframes speedGhostTrail4 {
	0% {
		transform: translate3d(-50%, -50%, 0) translateY(110px);
		opacity: 0.2;
		filter: blur(4.8px);
	}
	30%, 70% {
		transform: translate3d(-50%, -50%, 0) translateY(0);
		opacity: 0;
		filter: blur(0);
	}
	76% {
		opacity: 0.2;
	}
	100% {
		transform: translate3d(-50%, -50%, 0) translateY(145px);
		opacity: 0;
		filter: blur(6px);
	}
}

/* 极速运动光线粒子帧 */
@keyframes speedStreakRush {
	0% {
		transform: translateY(60px) scaleY(1.8);
		opacity: 0.85;
	}
	30%, 70% {
		transform: translateY(0) scaleY(0.2);
		opacity: 0;
	}
	76% {
		opacity: 0.8;
	}
	100% {
		transform: translateY(90px) scaleY(2);
		opacity: 0;
	}
}

/* 无障碍减弱动态支持 */
@media (prefers-reduced-motion: reduce) {
	.speed-toast-card {
		animation: speedToastReduced 1.0s ease-in-out forwards !important;
		transform: translate3d(-50%, calc(var(--target-y, 40vh) - 50%), 0) !important;
	}
	.speed-toast-ghost,
	.speed-toast-streaks {
		display: none !important;
	}
	@keyframes speedToastReduced {
		0% { opacity: 0; }
		30% { opacity: 1; }
		70% { opacity: 1; }
		100% { opacity: 0; }
	}
}