/* ==========================================================================
   组件层：按钮、导航、卡片、目录、分页、评论、页脚、灯箱
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 按钮
   -------------------------------------------------------------------------- */

.tide-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.78em 1.6em;
	border: 1px solid var(--tide-border-strong);
	border-radius: 99px;
	background: var(--tide-surface-2);
	color: var(--tide-text);
	font-family: inherit;
	font-size: var(--tide-fs-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
	transition: transform var(--tide-dur-fast) var(--tide-ease-spring),
		border-color var(--tide-dur) var(--tide-ease),
		box-shadow var(--tide-dur) var(--tide-ease),
		color var(--tide-dur-fast) var(--tide-ease),
		background-color var(--tide-dur) var(--tide-ease);
}

/* 斜向扫光：鼠标移入时一道高光掠过，观感高级且只用 transform */
.tide-btn::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.34) 50%, transparent 68%);
	transform: translateX(-130%);
	transition: transform calc(0.75s * var(--tide-speed)) var(--tide-ease-out);
}

.tide-btn:hover,
.tide-btn:focus-visible {
	transform: translateY(-2px);
	border-color: var(--tide-border-accent);
	box-shadow: var(--tide-glow-soft);
	color: var(--tide-text);
}

.tide-btn:hover::after {
	transform: translateX(130%);
}

.tide-btn:active {
	transform: translateY(0) scale(0.975);
	transition-duration: 0.08s;
}

.tide-btn--primary {
	border-color: transparent;
	background: var(--tide-gradient);
	color: #05070d;
	box-shadow: var(--tide-glow-soft);
}

.tide-btn--primary:hover,
.tide-btn--primary:focus-visible {
	color: #05070d;
	box-shadow: var(--tide-glow-mid);
}

.tide-btn--ghost {
	border-color: var(--tide-border);
	background: transparent;
	color: var(--tide-muted);
}

.tide-btn--ghost:hover {
	color: var(--tide-text);
}

.tide-btn--lg {
	padding: 0.95em 2.1em;
	font-size: var(--tide-fs-base);
}

.tide-btn--block {
	width: 100%;
}

.tide-btn[disabled],
.tide-btn[aria-disabled="true"] {
	opacity: 0.45;
	pointer-events: none;
}

/* 幽灵图标按钮：导航栏右侧那排方形按钮 */
.tide-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 12px;
	background: transparent;
	color: var(--tide-muted);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color var(--tide-dur-fast) var(--tide-ease),
		background-color var(--tide-dur-fast) var(--tide-ease),
		border-color var(--tide-dur-fast) var(--tide-ease),
		transform var(--tide-dur-fast) var(--tide-ease-spring);
}

.tide-iconbtn:hover {
	border-color: var(--tide-border);
	background: var(--tide-surface-2);
	color: var(--tide-accent);
	transform: translateY(-2px);
}

.tide-iconbtn:active {
	transform: translateY(0) scale(0.92);
}

.tide-icon {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -0.14em;
}

/* --------------------------------------------------------------------------
   2. 顶部导航
   -------------------------------------------------------------------------- */

.tide-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: var(--tide-z-sticky);
	padding-block: var(--tide-sp-4);
	transition: padding var(--tide-dur) var(--tide-ease),
		background-color var(--tide-dur) var(--tide-ease),
		box-shadow var(--tide-dur) var(--tide-ease),
		border-color var(--tide-dur) var(--tide-ease);
	border-bottom: 1px solid transparent;
}

/* 滚动后收起高度并加毛玻璃，让内容区更大 */
.tide-header.is-scrolled {
	padding-block: var(--tide-sp-2);
	border-bottom-color: var(--tide-border);
	background: rgba(var(--tide-bg-rgb), 0.72);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
	-webkit-backdrop-filter: saturate(160%) blur(18px);
	backdrop-filter: saturate(160%) blur(18px);
}

:root[data-tide-mode="light"] .tide-header.is-scrolled {
	background: rgba(255, 255, 255, 0.78);
	box-shadow: 0 10px 34px rgba(18, 38, 72, 0.08);
}

.tide-header__inner {
	display: flex;
	align-items: center;
	gap: var(--tide-sp-5);
}

.tide-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	flex: none;
	color: var(--tide-text);
	font-family: var(--tide-font-display);
	font-size: var(--tide-fs-md);
	font-weight: 700;
	letter-spacing: 0.01em;
}

.tide-brand:hover {
	color: var(--tide-text);
}

.tide-brand__logo {
	max-height: 40px;
	width: auto;
	transition: transform var(--tide-dur) var(--tide-ease-spring);
}

.tide-brand:hover .tide-brand__logo {
	transform: scale(1.04);
}

.tide-brand__mark {
	position: relative;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: var(--tide-gradient);
	color: #05070d;
	box-shadow: var(--tide-glow-soft);
	font-size: 1.05rem;
	font-weight: 800;
}

.tide-nav {
	margin-inline: auto;
}

.tide-nav__list {
	display: flex;
	align-items: center;
	gap: var(--tide-sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tide-nav__item {
	position: relative;
	margin: 0;
}

.tide-nav__link {
	position: relative;
	display: inline-block;
	padding: 0.5em 0.95em;
	border-radius: 10px;
	color: var(--tide-muted);
	font-size: var(--tide-fs-sm);
	font-weight: 500;
	transition: color var(--tide-dur-fast) var(--tide-ease),
		background-color var(--tide-dur-fast) var(--tide-ease);
}

.tide-nav__link:hover,
.tide-nav__link.is-current,
.current-menu-item > .tide-nav__link,
.current_page_item > .tide-nav__link,
.current-menu-ancestor > .tide-nav__link {
	color: var(--tide-text);
	background: var(--tide-surface-2);
}

/* 当前位置下方一条渐变短线 */
.tide-nav__link::after {
	content: "";
	position: absolute;
	inset-inline: 0.95em;
	bottom: 0.28em;
	height: 2px;
	border-radius: 99px;
	background: var(--tide-gradient);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--tide-dur) var(--tide-ease-out);
}

.tide-nav__link:hover::after,
.tide-nav__link.is-current::after,
.current-menu-item > .tide-nav__link::after,
.current-menu-ancestor > .tide-nav__link::after {
	transform: scaleX(1);
}

/* 二级菜单 */
.tide-nav .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	inset-inline-start: 0;
	z-index: 5;
	min-width: 190px;
	margin: 0;
	padding: var(--tide-sp-2);
	list-style: none;
	border: 1px solid var(--tide-border);
	border-radius: var(--tide-radius-sm);
	background: rgba(var(--tide-bg-rgb), 0.94);
	box-shadow: var(--tide-shadow);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--tide-dur) var(--tide-ease),
		transform var(--tide-dur) var(--tide-ease-out),
		visibility var(--tide-dur);
}

:root[data-tide-mode="light"] .tide-nav .sub-menu {
	background: rgba(255, 255, 255, 0.96);
}

.tide-nav__item:hover > .sub-menu,
.tide-nav__item:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.tide-nav .sub-menu .tide-nav__link,
.tide-nav .sub-menu a {
	display: block;
	padding: 0.5em 0.8em;
	border-radius: 8px;
	color: var(--tide-muted);
	font-size: var(--tide-fs-sm);
}

.tide-nav .sub-menu a:hover {
	background: var(--tide-surface-2);
	color: var(--tide-accent);
}

.tide-header__actions {
	display: flex;
	align-items: center;
	gap: var(--tide-sp-1);
	flex: none;
}

/* 明暗切换按钮：太阳/月亮两个图标叠在一起旋转切换 */
.tide-theme-toggle .tide-icon {
	position: absolute;
	transition: transform var(--tide-dur) var(--tide-ease-spring),
		opacity var(--tide-dur) var(--tide-ease);
}

.tide-theme-toggle .tide-icon--moon {
	transform: rotate(0) scale(1);
	opacity: 1;
}

.tide-theme-toggle .tide-icon--sun {
	transform: rotate(-90deg) scale(0.4);
	opacity: 0;
}

:root[data-tide-mode="light"] .tide-theme-toggle .tide-icon--moon {
	transform: rotate(90deg) scale(0.4);
	opacity: 0;
}

:root[data-tide-mode="light"] .tide-theme-toggle .tide-icon--sun {
	transform: rotate(0) scale(1);
	opacity: 1;
}

/* 阅读进度条 */
.tide-progress {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: var(--tide-z-progress);
	height: 2px;
	background: var(--tide-gradient);
	transform: scaleX(0);
	transform-origin: left;
	will-change: transform;
	box-shadow: 0 0 12px rgba(var(--tide-accent-rgb), 0.7);
}

/* --------------------------------------------------------------------------
   3. 移动端抽屉菜单
   -------------------------------------------------------------------------- */

.tide-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--tide-z-drawer);
	visibility: hidden;
}

.tide-drawer__mask {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity var(--tide-dur) var(--tide-ease);
}

.tide-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(88vw, 380px);
	padding: var(--tide-sp-5);
	border-inline-start: 1px solid var(--tide-border);
	background: rgba(var(--tide-bg-rgb), 0.97);
	box-shadow: var(--tide-shadow-lg);
	overflow-y: auto;
	transform: translateX(102%);
	transition: transform calc(0.42s * var(--tide-speed)) var(--tide-ease-out);
}

:root[data-tide-mode="light"] .tide-drawer__panel {
	background: rgba(255, 255, 255, 0.98);
}

.tide-drawer.is-open {
	visibility: visible;
}

.tide-drawer.is-open .tide-drawer__mask {
	opacity: 1;
}

.tide-drawer.is-open .tide-drawer__panel {
	transform: translateX(0);
}

.tide-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--tide-sp-5);
}

.tide-drawer__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tide-drawer__nav li {
	margin: 0;
}

.tide-drawer__nav a {
	display: block;
	padding: 0.85em 0.4em;
	border-bottom: 1px solid var(--tide-border);
	color: var(--tide-text);
	font-size: var(--tide-fs-md);
	font-weight: 500;
}

.tide-drawer__nav a:hover {
	color: var(--tide-accent);
	padding-inline-start: 0.8em;
}

/* 抽屉里每一项依次滑入，制造节奏感 */
.tide-drawer.is-open .tide-drawer__nav li {
	animation: tide-slide-in calc(0.5s * var(--tide-speed)) var(--tide-ease-out) backwards;
}

.tide-drawer.is-open .tide-drawer__nav li:nth-child(1) { animation-delay: 0.06s; }
.tide-drawer.is-open .tide-drawer__nav li:nth-child(2) { animation-delay: 0.1s; }
.tide-drawer.is-open .tide-drawer__nav li:nth-child(3) { animation-delay: 0.14s; }
.tide-drawer.is-open .tide-drawer__nav li:nth-child(4) { animation-delay: 0.18s; }
.tide-drawer.is-open .tide-drawer__nav li:nth-child(5) { animation-delay: 0.22s; }
.tide-drawer.is-open .tide-drawer__nav li:nth-child(6) { animation-delay: 0.26s; }
.tide-drawer.is-open .tide-drawer__nav li:nth-child(7) { animation-delay: 0.3s; }
.tide-drawer.is-open .tide-drawer__nav li:nth-child(8) { animation-delay: 0.34s; }

.tide-drawer__search {
	margin-top: var(--tide-sp-5);
}

/* --------------------------------------------------------------------------
   4. 搜索浮层
   -------------------------------------------------------------------------- */

.tide-search {
	position: fixed;
	inset: 0;
	z-index: var(--tide-z-drawer);
	display: grid;
	place-items: start center;
	padding-top: 18vh;
	visibility: hidden;
}

.tide-search__mask {
	position: absolute;
	inset: 0;
	background: rgba(var(--tide-bg-rgb), 0.82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	opacity: 0;
	transition: opacity var(--tide-dur) var(--tide-ease);
}

.tide-search__panel {
	position: relative;
	width: min(92vw, 620px);
	padding: var(--tide-sp-5);
	border: 1px solid var(--tide-border-strong);
	border-radius: var(--tide-radius-lg);
	background: var(--tide-surface-2);
	box-shadow: var(--tide-shadow-lg), var(--tide-glow-soft);
	opacity: 0;
	transform: translateY(-18px) scale(0.98);
	transition: opacity var(--tide-dur) var(--tide-ease),
		transform calc(0.42s * var(--tide-speed)) var(--tide-ease-out);
}

:root[data-tide-mode="light"] .tide-search__panel {
	background: rgba(255, 255, 255, 0.97);
}

.tide-search.is-open {
	visibility: visible;
}

.tide-search.is-open .tide-search__mask {
	opacity: 1;
}

.tide-search.is-open .tide-search__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.tide-search__form {
	display: flex;
	align-items: center;
	gap: var(--tide-sp-3);
}

.tide-search__form .tide-icon {
	flex: none;
	color: var(--tide-accent);
}

.tide-search__form input[type="search"] {
	flex: 1;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: var(--tide-fs-lg);
	padding: 0.4em 0;
}

.tide-search__form input[type="search"]:focus {
	background: transparent;
}

.tide-search__hint {
	margin: var(--tide-sp-3) 0 0;
	color: var(--tide-muted);
	font-size: var(--tide-fs-xs);
}

/* --------------------------------------------------------------------------
   4.1 动效引擎接管态
   --------------------------------------------------------------------------
   tide.js 给 <html> 加上 .tide-motion 后，抽屉与搜索浮层的位移/透明度
   改由脚本逐帧驱动（弹簧积分）。此时必须关掉 CSS 过渡，否则同一处
   transform 会被两边同时写，出现「抖一下」的观感。
   没有 JS 或关闭动效时不会加这个类，样式退回上面的纯 CSS 过渡。 */
.tide-motion .tide-drawer__panel,
.tide-motion .tide-drawer__mask,
.tide-motion .tide-search__panel,
.tide-motion .tide-search__mask {
	transition: none;
	will-change: transform, opacity;
}

/* 抽屉面板：竖向手势留给列表滚动，横向手势才用来拖拽关闭 */
.tide-motion .tide-drawer__panel {
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   5. 区块标题（每个首页模块顶部的那一组文字）
   -------------------------------------------------------------------------- */

.tide-section {
	position: relative;
	padding-block: var(--tide-section-y);
}

.tide-section__head {
	margin-bottom: var(--tide-sp-7);
}

.tide-section__head--center {
	text-align: center;
}

.tide-section__head--between {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--tide-sp-5);
	flex-wrap: wrap;
}

.tide-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin-bottom: var(--tide-sp-3);
	color: var(--tide-accent);
	font-family: var(--tide-font-mono);
	font-size: var(--tide-fs-xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.tide-kicker::before {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--tide-accent);
	box-shadow: var(--tide-glow-soft);
}

.tide-section__title {
	margin-bottom: var(--tide-sp-3);
	font-size: var(--tide-fs-2xl);
	letter-spacing: -0.015em;
}

.tide-section__desc {
	max-width: 56ch;
	margin: 0;
	color: var(--tide-muted);
	font-size: var(--tide-fs-md);
}

.tide-section__head--center .tide-section__desc {
	margin-inline: auto;
}

/* 标题右侧的「查看全部」 */
.tide-more {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	color: var(--tide-muted);
	font-size: var(--tide-fs-sm);
	font-weight: 600;
	white-space: nowrap;
}

.tide-more .tide-icon {
	transition: transform var(--tide-dur) var(--tide-ease-spring);
}

.tide-more:hover {
	color: var(--tide-accent);
}

.tide-more:hover .tide-icon {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   6. 文章卡片
   -------------------------------------------------------------------------- */

.tide-grid {
	display: grid;
	gap: var(--tide-sp-5);
}

.tide-grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.tide-grid--2 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
}

.tide-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--tide-border);
	border-radius: var(--tide-radius);
	background: var(--tide-surface);
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--tide-dur) var(--tide-ease-out),
		border-color var(--tide-dur) var(--tide-ease),
		box-shadow var(--tide-dur) var(--tide-ease),
		background-color var(--tide-dur) var(--tide-ease);
}

/* 卡片四角的高光边框：用渐变描边做出「游戏 UI」的锐利感 */
.tide-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(var(--tide-accent-rgb), 0.55), transparent 42%, transparent 60%, rgba(var(--tide-accent-2-rgb), 0.45));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity var(--tide-dur) var(--tide-ease);
	pointer-events: none;
}

.tide-card:hover {
	transform: translateY(-6px);
	border-color: var(--tide-border-accent);
	background: var(--tide-surface-2);
	box-shadow: var(--tide-shadow), var(--tide-glow-soft);
}

.tide-card:hover::before {
	opacity: 1;
}

.tide-card__link {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
}

.tide-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(var(--tide-accent-rgb), 0.14), rgba(var(--tide-accent-2-rgb), 0.14));
}

.tide-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform calc(0.85s * var(--tide-speed)) var(--tide-ease-out),
		filter var(--tide-dur) var(--tide-ease);
}

.tide-card:hover .tide-card__img {
	transform: scale(1.06);
}

/* 无特色图时的兜底：主题色渐变 + 一个图标，比空白色块好看 */
.tide-thumb-fallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(60% 60% at 30% 20%, rgba(var(--tide-accent-rgb), 0.3), transparent 70%),
		radial-gradient(60% 60% at 78% 82%, rgba(var(--tide-accent-2-rgb), 0.28), transparent 70%),
		var(--tide-surface-2);
	color: var(--tide-accent);
	opacity: 0.85;
}

.tide-thumb-fallback__icon {
	width: 34px;
	height: 34px;
	opacity: 0.7;
	filter: drop-shadow(0 0 12px rgba(var(--tide-accent-rgb), 0.6));
}

.tide-card__badge {
	position: absolute;
	top: var(--tide-sp-3);
	inset-inline-start: var(--tide-sp-3);
	z-index: 2;
	padding: 0.28em 0.75em;
	border-radius: 99px;
	background: rgba(var(--tide-bg-rgb), 0.72);
	color: var(--tide-accent);
	font-size: var(--tide-fs-xs);
	font-weight: 600;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.tide-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--tide-sp-3);
	padding: var(--tide-sp-5);
}

.tide-card__title {
	margin: 0;
	font-size: var(--tide-fs-md);
	line-height: 1.45;
	transition: color var(--tide-dur-fast) var(--tide-ease);
}

.tide-card:hover .tide-card__title {
	color: var(--tide-accent);
}

.tide-card__excerpt {
	margin: 0;
	color: var(--tide-muted);
	font-size: var(--tide-fs-sm);
	line-height: 1.72;
}

.tide-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tide-sp-3);
	margin-top: auto;
	padding-top: var(--tide-sp-4);
	border-top: 1px solid var(--tide-border);
}

.tide-card--plain .tide-card__media {
	display: none;
}

/* 横向列表样式（首页文章模块可选） */
.tide-postlist {
	display: grid;
	gap: var(--tide-sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tide-postlist__item {
	margin: 0;
}

.tide-row {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: var(--tide-sp-5);
	padding: var(--tide-sp-5);
	border: 1px solid var(--tide-border);
	border-radius: var(--tide-radius);
	background: var(--tide-surface);
	transition: transform var(--tide-dur) var(--tide-ease-out),
		border-color var(--tide-dur) var(--tide-ease),
		background-color var(--tide-dur) var(--tide-ease),
		box-shadow var(--tide-dur) var(--tide-ease);
}

.tide-row:hover {
	transform: translateX(6px);
	border-color: var(--tide-border-accent);
	background: var(--tide-surface-2);
	box-shadow: var(--tide-glow-soft);
}

.tide-row__media {
	flex: none;
	width: 200px;
	aspect-ratio: 3 / 2;
	border-radius: var(--tide-radius-sm);
	overflow: hidden;
	background: var(--tide-surface-2);
}

.tide-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tide-row__body {
	display: flex;
	flex-direction: column;
	gap: var(--tide-sp-2);
	min-width: 0;
}

.tide-row__title {
	margin: 0;
	font-size: var(--tide-fs-md);
}

.tide-row__excerpt {
	margin: 0;
	color: var(--tide-muted);
	font-size: var(--tide-fs-sm);
}

.tide-row__foot {
	margin-top: auto;
}

/* --------------------------------------------------------------------------
   7. 元信息、标签
   -------------------------------------------------------------------------- */

.tide-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--tide-sp-2) var(--tide-sp-4);
	color: var(--tide-muted);
	font-size: var(--tide-fs-xs);
}

.tide-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.tide-meta a {
	color: inherit;
}

.tide-meta a:hover {
	color: var(--tide-accent);
}

.tide-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tide-sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tide-chip {
	margin: 0;
	padding: 0.24em 0.7em;
	border: 1px solid var(--tide-border);
	border-radius: 99px;
	background: var(--tide-surface-2);
	color: var(--tide-muted);
	font-size: var(--tide-fs-xs);
	font-weight: 500;
	transition: color var(--tide-dur-fast) var(--tide-ease),
		border-color var(--tide-dur-fast) var(--tide-ease),
		transform var(--tide-dur-fast) var(--tide-ease-spring);
}

a.tide-chip:hover {
	border-color: var(--tide-border-accent);
	color: var(--tide-accent);
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   8. 分页 / 面包屑
   -------------------------------------------------------------------------- */

.tide-pager {
	margin-top: var(--tide-sp-7);
}

.tide-pager__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--tide-sp-2);
}

.tide-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.85em;
	border: 1px solid var(--tide-border);
	border-radius: 12px;
	background: var(--tide-surface);
	color: var(--tide-muted);
	font-size: var(--tide-fs-sm);
	font-weight: 600;
	transition: transform var(--tide-dur-fast) var(--tide-ease-spring),
		border-color var(--tide-dur-fast) var(--tide-ease),
		color var(--tide-dur-fast) var(--tide-ease),
		box-shadow var(--tide-dur-fast) var(--tide-ease);
}

.tide-pager .page-numbers:hover {
	transform: translateY(-3px);
	border-color: var(--tide-border-accent);
	color: var(--tide-accent);
	box-shadow: var(--tide-glow-soft);
}

.tide-pager .page-numbers.current {
	border-color: transparent;
	background: var(--tide-gradient);
	color: #05070d;
	box-shadow: var(--tide-glow-soft);
}

.tide-pager .page-numbers.dots {
	border-color: transparent;
	background: none;
}

.tide-crumb {
	margin-bottom: var(--tide-sp-5);
}

.tide-crumb__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--tide-sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--tide-muted);
	font-size: var(--tide-fs-xs);
}

.tide-crumb__item {
	display: inline-flex;
	align-items: center;
	gap: var(--tide-sp-1);
	margin: 0;
}

.tide-crumb__item a {
	color: var(--tide-muted);
}

.tide-crumb__item a:hover {
	color: var(--tide-accent);
}

.tide-crumb__sep {
	opacity: 0.45;
}

/* --------------------------------------------------------------------------
   9. 文章目录
   -------------------------------------------------------------------------- */

.tide-toc {
	margin-bottom: var(--tide-sp-6);
	padding: var(--tide-sp-4) var(--tide-sp-5);
	border: 1px solid var(--tide-border);
	border-left: 2px solid var(--tide-accent);
	border-radius: var(--tide-radius-sm);
	background: var(--tide-surface);
}

.tide-toc__head {
	display: flex;
	align-items: center;
	gap: 0.5em;
	color: var(--tide-text);
	font-size: var(--tide-fs-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.tide-toc__toggle {
	margin-inline-start: auto;
	padding: 0.2em;
	border: 0;
	background: none;
	color: var(--tide-muted);
	cursor: pointer;
	transition: transform var(--tide-dur) var(--tide-ease), color var(--tide-dur-fast) ease;
}

.tide-toc__toggle:hover {
	color: var(--tide-accent);
}

.tide-toc__toggle[aria-expanded="false"] .tide-icon {
	transform: rotate(-90deg);
}

.tide-toc__list {
	margin: var(--tide-sp-3) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: tide-toc;
	max-height: 46vh;
	overflow-y: auto;
}

.tide-toc.is-collapsed .tide-toc__list {
	display: none;
}

.tide-toc__item {
	position: relative;
	margin: 0;
	padding-inline-start: 1.1em;
	line-height: 1.6;
}

.tide-toc__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.72em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--tide-border-strong);
	transition: background-color var(--tide-dur-fast) var(--tide-ease),
		box-shadow var(--tide-dur-fast) var(--tide-ease);
}

.tide-toc__item--h3 {
	padding-inline-start: 2em;
	font-size: var(--tide-fs-sm);
}

.tide-toc__item--h3::before {
	inset-inline-start: 0.9em;
	width: 4px;
	height: 4px;
}

.tide-toc__item a {
	display: block;
	padding-block: 0.2em;
	color: var(--tide-muted);
	font-size: var(--tide-fs-sm);
	transition: color var(--tide-dur-fast) var(--tide-ease),
		transform var(--tide-dur-fast) var(--tide-ease-out);
}

.tide-toc__item a:hover,
.tide-toc__item.is-active a {
	color: var(--tide-accent);
}

.tide-toc__item.is-active a {
	font-weight: 600;
}

.tide-toc__item.is-active::before {
	background: var(--tide-accent);
	box-shadow: var(--tide-glow-text);
}

/* --------------------------------------------------------------------------
   10. 侧边栏挂件
   -------------------------------------------------------------------------- */

.tide-sidebar {
	display: grid;
	gap: var(--tide-sp-5);
	align-content: start;
}

.widget {
	padding: var(--tide-sp-5);
	border: 1px solid var(--tide-border);
	border-radius: var(--tide-radius);
	background: var(--tide-surface);
	transition: border-color var(--tide-dur) var(--tide-ease),
		background-color var(--tide-dur) var(--tide-ease);
}

.widget:hover {
	border-color: var(--tide-border-accent);
	background: var(--tide-surface-2);
}

.widget__title,
.widget .widgettitle {
	position: relative;
	margin: 0 0 var(--tide-sp-4);
	padding-bottom: var(--tide-sp-3);
	border-bottom: 1px solid var(--tide-border);
	font-size: var(--tide-fs-base);
}

.widget__title span::before,
.widget .widgettitle::before {
	content: "";
	position: absolute;
	bottom: -1px;
	inset-inline-start: 0;
	width: 42px;
	height: 2px;
	border-radius: 99px;
	background: var(--tide-gradient);
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li {
	margin: 0;
	padding: 0.55em 0;
	border-bottom: 1px dashed var(--tide-border);
	color: var(--tide-muted);
	font-size: var(--tide-fs-sm);
}

.widget li:last-child {
	border-bottom: 0;
}

.widget a {
	color: var(--tide-muted);
}

.widget a:hover {
	color: var(--tide-accent);
}

.widget select {
	margin-top: var(--tide-sp-2);
}

.widget_tag_cloud a,
.wp-block-tag-cloud a {
	display: inline-block;
	margin: 0 0.35em 0.5em 0;
	padding: 0.2em 0.7em;
	border: 1px solid var(--tide-border);
	border-radius: 99px;
	background: var(--tide-surface-2);
	color: var(--tide-muted);
	font-size: var(--tide-fs-xs) !important;
	transition: all var(--tide-dur-fast) var(--tide-ease);
}

.widget_tag_cloud a:hover,
.wp-block-tag-cloud a:hover {
	border-color: var(--tide-border-accent);
	color: var(--tide-accent);
	transform: translateY(-2px);
}

.widget .search-form {
	display: flex;
	gap: var(--tide-sp-2);
}

/* --------------------------------------------------------------------------
   11. 头像
   -------------------------------------------------------------------------- */

/* 头像是唯一可能来自站外的图片（Gravatar）。这里做成「外壳 + 本地兜底」结构：
   站外头像加载失败时，JS 会把 <img> 就地换成首字母色块，
   因此国内网络下也不会出现破损图。 */
.tide-avatar {
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--tide-avatar-size, 72px);
	height: var(--tide-avatar-size, 72px);
	border-radius: 50%;
	overflow: hidden;
	background: var(--tide-gradient-soft);
	border: 1px solid var(--tide-border-strong);
}

.tide-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tide-avatar__initial {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--tide-gradient);
	color: #05070d;
	font-family: var(--tide-font-display);
	font-weight: 800;
	font-size: calc(var(--tide-avatar-size, 72px) * 0.42);
	line-height: 1;
	letter-spacing: 0;
	user-select: none;
}

/* 文章底部作者卡的头部尺寸更大，边框也更强调 */
.tide-avatar--accent {
	border: 2px solid var(--tide-border-accent);
	box-shadow: var(--tide-glow-soft);
}

/* --------------------------------------------------------------------------
   12. 评论区
   -------------------------------------------------------------------------- */

.tide-comments {
	margin-top: var(--tide-sp-7);
	padding-top: var(--tide-sp-7);
	border-top: 1px solid var(--tide-border);
}

.tide-comments__title {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-size: var(--tide-fs-lg);
}

.tide-comments__list {
	margin: 0 0 var(--tide-sp-6);
	padding: 0;
	list-style: none;
}

.tide-comments__list .children {
	margin: var(--tide-sp-4) 0 0;
	padding-inline-start: var(--tide-sp-5);
	border-inline-start: 1px solid var(--tide-border);
	list-style: none;
}

.comment-body {
	position: relative;
	padding: var(--tide-sp-4) var(--tide-sp-5);
	border: 1px solid var(--tide-border);
	border-radius: var(--tide-radius);
	background: var(--tide-surface);
	transition: border-color var(--tide-dur) var(--tide-ease);
}

.comment-body:hover {
	border-color: var(--tide-border-accent);
}

li.comment {
	margin-bottom: var(--tide-sp-4);
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: var(--tide-sp-3);
	margin-bottom: var(--tide-sp-3);
}

.comment-author img {
	border-radius: 50%;
	border: 1px solid var(--tide-border-strong);
}

.comment-author .fn {
	color: var(--tide-text);
	font-size: var(--tide-fs-sm);
	font-style: normal;
	font-weight: 600;
}

.comment-metadata {
	margin-inline-start: auto;
	color: var(--tide-muted);
	font-size: var(--tide-fs-xs);
}

.comment-metadata a {
	color: inherit;
}

.comment-content {
	color: var(--tide-muted);
	font-size: var(--tide-fs-sm);
}

.comment-content p:last-child {
	margin-bottom: 0;
}

.reply a {
	display: inline-block;
	padding: 0.2em 0.7em;
	border: 1px solid var(--tide-border);
	border-radius: 99px;
	color: var(--tide-muted);
	font-size: var(--tide-fs-xs);
	transition: all var(--tide-dur-fast) var(--tide-ease);
}

.reply a:hover {
	border-color: var(--tide-border-accent);
	color: var(--tide-accent);
}

.comment-respond {
	padding: var(--tide-sp-5);
	border: 1px solid var(--tide-border);
	border-radius: var(--tide-radius);
	background: var(--tide-surface);
}

.comment-reply-title {
	font-size: var(--tide-fs-lg);
}

.comment-reply-title small {
	margin-inline-start: 0.6em;
	font-size: var(--tide-fs-xs);
	font-weight: 400;
}

.comment-form {
	display: grid;
	gap: var(--tide-sp-4);
}

.comment-form label {
	display: block;
	margin-bottom: var(--tide-sp-2);
	color: var(--tide-muted);
	font-size: var(--tide-fs-xs);
}

.comment-form p {
	margin: 0;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.comment-form-cookies-consent label {
	margin: 0;
}

.comment-form .submit {
	justify-self: start;
	padding: 0.78em 1.9em;
	border: 0;
	border-radius: 99px;
	background: var(--tide-gradient);
	color: #05070d;
	font-size: var(--tide-fs-sm);
	font-weight: 700;
	cursor: pointer;
	transition: transform var(--tide-dur-fast) var(--tide-ease-spring),
		box-shadow var(--tide-dur) var(--tide-ease);
}

.comment-form .submit:hover {
	transform: translateY(-2px);
	box-shadow: var(--tide-glow-mid);
}

/* --------------------------------------------------------------------------
   13. 页脚
   -------------------------------------------------------------------------- */

.tide-footer {
	position: relative;
	margin-top: var(--tide-sp-8);
	padding-top: var(--tide-sp-7);
	border-top: 1px solid var(--tide-border);
	background: linear-gradient(180deg, transparent, rgba(var(--tide-accent-rgb), 0.045));
}

.tide-footer__top {
	display: grid;
	grid-template-columns: minmax(260px, 1.4fr) repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--tide-sp-6);
	padding-bottom: var(--tide-sp-7);
}

.tide-footer__brand {
	display: grid;
	gap: var(--tide-sp-3);
	align-content: start;
}

.tide-footer__about {
	max-width: 40ch;
	margin: 0;
	color: var(--tide-muted);
	font-size: var(--tide-fs-sm);
}

.tide-footer .widget {
	padding: 0;
	border: 0;
	background: none;
}

.tide-footer .widget:hover {
	background: none;
}

.tide-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tide-sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tide-social__item {
	margin: 0;
}

.tide-social__link {
	position: relative;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--tide-border);
	border-radius: 13px;
	background: var(--tide-surface);
	color: var(--tide-muted);
	transition: transform var(--tide-dur-fast) var(--tide-ease-spring),
		color var(--tide-dur-fast) var(--tide-ease),
		border-color var(--tide-dur-fast) var(--tide-ease),
		box-shadow var(--tide-dur) var(--tide-ease);
}

.tide-social__link:hover {
	transform: translateY(-4px) rotate(-4deg);
	border-color: var(--tide-border-accent);
	color: var(--tide-accent);
	box-shadow: var(--tide-glow-soft);
}

/* 悬停时从下方浮出名称 */
.tide-social__link::after {
	content: attr(data-label);
	position: absolute;
	bottom: calc(100% + 8px);
	inset-inline-start: 50%;
	padding: 0.2em 0.6em;
	border-radius: 6px;
	background: rgba(var(--tide-bg-rgb), 0.94);
	color: var(--tide-text);
	font-size: var(--tide-fs-xs);
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 6px);
	pointer-events: none;
	transition: opacity var(--tide-dur-fast) var(--tide-ease),
		transform var(--tide-dur-fast) var(--tide-ease-out);
}

.tide-social__link:hover::after {
	opacity: 1;
	transform: translate(-50%, 0);
}

.tide-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--tide-sp-4);
	padding-block: var(--tide-sp-5);
	border-top: 1px solid var(--tide-border);
	color: var(--tide-muted);
	font-size: var(--tide-fs-xs);
}

.tide-footer__bottom p {
	margin: 0;
}

.tide-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tide-sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tide-footer__links li {
	margin: 0;
}

.tide-footer__links a {
	color: var(--tide-muted);
}

.tide-footer__links a:hover {
	color: var(--tide-accent);
}

/* 页脚竖向菜单（放在挂件里时用） */
.tide-footer__links--stack {
	display: grid;
	gap: 0.1em;
}

.tide-footer__links--stack li {
	border-bottom: 1px dashed var(--tide-border);
}

.tide-footer__links--stack li:last-child {
	border-bottom: 0;
}

.tide-footer__links--stack a {
	display: block;
	padding: 0.55em 0;
	color: var(--tide-muted);
	font-size: var(--tide-fs-sm);
}

.tide-footer__links--stack a:hover {
	color: var(--tide-accent);
	padding-inline-start: 0.4em;
}

/* 登录后才出现在页脚的「管理后台」入口 */
.tide-footer__admin {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.3em 0.8em;
	border: 1px solid var(--tide-border-accent);
	border-radius: 99px;
	background: var(--tide-surface-2);
	color: var(--tide-accent);
	font-size: var(--tide-fs-xs);
	transition: transform var(--tide-dur-fast) var(--tide-ease-spring),
		box-shadow var(--tide-dur) var(--tide-ease);
}

.tide-footer__admin:hover {
	transform: translateY(-2px);
	color: var(--tide-accent);
	box-shadow: var(--tide-glow-soft);
}

.tide-footer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tide-sp-4);
}

/* --------------------------------------------------------------------------
   13. 浮动元素：光标光晕、返回顶部
   -------------------------------------------------------------------------- */

.tide-cursor {
	position: fixed;
	top: 0;
	inset-inline-start: 0;
	z-index: 0;
	width: 560px;
	height: 560px;
	margin: -280px 0 0 -280px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--tide-accent-rgb), 0.13) 0%, rgba(var(--tide-accent-2-rgb), 0.07) 42%, transparent 68%);
	opacity: 0;
	pointer-events: none;
	will-change: transform;
	transition: opacity calc(0.6s * var(--tide-speed)) var(--tide-ease);
}

.tide-cursor.is-active {
	opacity: 1;
}

.tide-top {
	position: fixed;
	inset-inline-end: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: var(--tide-z-sticky);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--tide-border-strong);
	border-radius: 15px;
	background: rgba(var(--tide-bg-rgb), 0.8);
	color: var(--tide-muted);
	cursor: pointer;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px) scale(0.9);
	transition: opacity var(--tide-dur) var(--tide-ease),
		transform var(--tide-dur) var(--tide-ease-spring),
		color var(--tide-dur-fast) var(--tide-ease),
		border-color var(--tide-dur-fast) var(--tide-ease),
		box-shadow var(--tide-dur) var(--tide-ease),
		visibility var(--tide-dur);
}

.tide-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.tide-top:hover {
	color: var(--tide-accent);
	border-color: var(--tide-border-accent);
	box-shadow: var(--tide-glow-soft);
	transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   15. 灯箱（相册大图浏览）
   -------------------------------------------------------------------------- */

.tide-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--tide-z-lightbox);
	display: grid;
	grid-template-rows: auto 1fr auto;
	visibility: hidden;
	background: rgba(2, 4, 9, 0.94);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	opacity: 0;
	transition: opacity var(--tide-dur) var(--tide-ease), visibility var(--tide-dur);
}

.tide-lightbox.is-open {
	visibility: visible;
	opacity: 1;
}

.tide-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tide-sp-4);
	padding: var(--tide-sp-4) var(--tide-sp-5);
	color: #e6ecf5;
}

.tide-lightbox__counter {
	font-family: var(--tide-font-mono);
	font-size: var(--tide-fs-sm);
	letter-spacing: 0.1em;
	opacity: 0.75;
}

.tide-lightbox__actions {
	display: flex;
	gap: var(--tide-sp-2);
}

.tide-lightbox__actions .tide-iconbtn {
	color: #e6ecf5;
}

.tide-lightbox__actions .tide-iconbtn:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: transparent;
	color: #fff;
}

.tide-lightbox__stage {
	position: relative;
	display: grid;
	place-items: center;
	padding: 0 var(--tide-sp-5);
	overflow: hidden;
}

.tide-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--tide-radius-sm);
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
	opacity: 0;
	transform: scale(0.96);
	transition: opacity var(--tide-dur) var(--tide-ease),
		transform calc(0.5s * var(--tide-speed)) var(--tide-ease-out);
}

.tide-lightbox__img.is-loaded {
	opacity: 1;
	transform: scale(1);
}

.tide-lightbox__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transform: translateY(-50%);
	transition: background-color var(--tide-dur-fast) var(--tide-ease),
		transform var(--tide-dur-fast) var(--tide-ease-spring);
}

.tide-lightbox__nav:hover {
	background: rgba(var(--tide-accent-rgb), 0.35);
	transform: translateY(-50%) scale(1.08);
}

.tide-lightbox__nav--prev {
	inset-inline-start: var(--tide-sp-4);
}

.tide-lightbox__nav--next {
	inset-inline-end: var(--tide-sp-4);
}

.tide-lightbox__foot {
	padding: var(--tide-sp-5);
	text-align: center;
	color: #cfd8e6;
	font-size: var(--tide-fs-sm);
}

.tide-lightbox__caption {
	margin: 0;
	opacity: 0.85;
}

@media (max-width: 640px) {
	.tide-lightbox__nav {
		width: 42px;
		height: 42px;
	}
}

/* --------------------------------------------------------------------------
   15. 提示条（复制成功等轻提示，不用系统弹窗）
   -------------------------------------------------------------------------- */

.tide-toast {
	position: fixed;
	inset-inline: 0;
	bottom: clamp(1.5rem, 5vh, 3rem);
	z-index: 120;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.tide-toast__item {
	padding: 0.7em 1.4em;
	border: 1px solid var(--tide-border-strong);
	border-radius: 99px;
	background: rgba(var(--tide-bg-rgb), 0.92);
	color: var(--tide-text);
	font-size: var(--tide-fs-sm);
	box-shadow: var(--tide-shadow), var(--tide-glow-soft);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	animation: tide-toast-in calc(0.5s * var(--tide-speed)) var(--tide-ease-spring);
}

.tide-toast__item.is-leaving {
	animation: tide-toast-out calc(0.32s * var(--tide-speed)) var(--tide-ease) forwards;
}

/* --------------------------------------------------------------------------
   17. 空状态
   -------------------------------------------------------------------------- */

.tide-empty {
	padding: var(--tide-sp-8) var(--tide-sp-5);
	border: 1px dashed var(--tide-border-strong);
	border-radius: var(--tide-radius);
	text-align: center;
	color: var(--tide-muted);
}

.tide-empty .tide-icon {
	width: 42px;
	height: 42px;
	margin-bottom: var(--tide-sp-4);
	color: var(--tide-accent);
	opacity: 0.8;
}

.tide-empty h3 {
	margin-bottom: var(--tide-sp-2);
}

.tide-empty p {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   18. 站点内容包裹层
   -------------------------------------------------------------------------- */

.tide-site {
	position: relative;
	z-index: var(--tide-z-content);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.tide-main {
	flex: 1;
	/* 给固定导航让出位置，首屏会用负边距把这段补回去 */
	padding-top: var(--tide-header-h);
}

/* --------------------------------------------------------------------------
   登录 WordPress 后台后，页面顶部会多出一条管理工具栏。
   它本身是 fixed 且 z-index 极高，固定定位的导航必须跟着往下让位，
   否则导航会被压在工具栏底下点不到。
   -------------------------------------------------------------------------- */

body.admin-bar .tide-header {
	top: 32px;
}

body.admin-bar .tide-progress {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .tide-header {
		top: 46px;
	}

	body.admin-bar .tide-progress {
		top: 46px;
	}
}

/* --------------------------------------------------------------------------
   19. 全站背景层（图片 / 动态壁纸）
   -------------------------------------------------------------------------- */

/* 层级设计：这一层用 z-index:-1 落在根层叠上下文的最底部，于是绘制顺序是
   「画布底色 → 背景层 → 主题柔光(body::before) → 颗粒(body::after) → 内容」。
   柔光与颗粒始终叠在站长自己的壁纸上，画面不会被压平。

   上下各留 60px 余量（inset: -60px 0），是给视差位移留活动空间，
   位移被限制在 ±48px 内，所以永远不会露出边缘。

   这里刻意不写 will-change：固定定位的全屏元素本身就会被提升为合成层，
   再声明一次只会让这块显存常驻，得不偿失。 */
.tide-bgwall {
	position: fixed;
	inset: -60px 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background-color: var(--tide-bgwall-color, transparent);
	background-image: var(--tide-bgwall-gradient, none);
	background-size: cover;
	background-position: center center;
	transform: translate3d(0, var(--tide-bgwall-parallax, 0px), 0);
}

.tide-bgwall__media {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 放大倍率由后台的模糊强度推导：模糊会让边缘采样到透明像素，
	   放大一点就能把那圈羽化边藏到裁切区之外。 */
	transform: scale(var(--tide-bgwall-scale, 1));
	transform-origin: center center;
	filter: blur(var(--tide-bgwall-blur, 0px));
}

/* 视频压在封面图之上；视频不加载时下面的封面图就是兜底 */
.tide-bgwall__movie {
	z-index: 1;
}

.tide-bgwall__veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(var(--tide-bg-rgb), var(--tide-bgwall-dim, 0));
}

/* 站长自带了壁纸时，可以关掉主题自带的柔光装饰，把画面完全让给壁纸 */
body.tide-no-glow::before {
	display: none;
}

/* --------------------------------------------------------------------------
   19b. 内容底衬
   --------------------------------------------------------------------------
   与背景层同为 z-index:-1，但排在后面，所以压在壁纸之上、正文之下。
   作用只有一个：壁纸太亮太花时，给全站文字铺一层半透明底色。
   用主题自带深色底时浓度是 0，等于不存在。
   -------------------------------------------------------------------------- */

.tide-scrim {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--tide-scrim-color, transparent);
}

/* --------------------------------------------------------------------------
   20. 响应式
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.tide-nav {
		display: none;
	}

	.tide-header__inner {
		gap: var(--tide-sp-3);
	}

	.tide-header__actions {
		margin-inline-start: auto;
	}

	.tide-row__media {
		width: 160px;
	}
}

@media (max-width: 720px) {
	.tide-footer__top {
		grid-template-columns: 1fr;
	}

	.tide-row {
		flex-direction: column;
		gap: var(--tide-sp-4);
	}

	.tide-row__media {
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	.tide-row:hover {
		transform: translateY(-4px);
	}

	.tide-footer__bottom {
		justify-content: center;
		text-align: center;
	}
}

@media (max-width: 520px) {
	.tide-grid--3,
	.tide-grid--2 {
		grid-template-columns: 1fr;
	}

	.tide-section__head--between {
		align-items: flex-start;
	}
}