@charset "UTF-8";

:root {
	/* 河岸纸白 · 日间 */
	--bg-0: #f5f7fa;
	--bg-1: #eef1f6;
	--surface: rgba(255, 255, 255, 0.96);
	--surface-solid: #ffffff;
	--text: #1a2332;
	--muted: #5b6573;
	--border: #e2e6ee;
	--primary: #2563eb;
	--primary-soft: #eef3ff;
	--primary-border: #bfdbfe;
	--accent: #c2410c;
	--accent-soft: #fff7ed;
	--danger: #e11d48;
	--danger-bg: #fff1f2;
	--success: #16a34a;
	--success-bg: #f0fdf4;
	--shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
	--header-bg: rgba(255, 255, 255, 0.88);
	--content-text: #334155;
	--cover-placeholder: #e8edf5;
	--glow-primary: rgba(37, 99, 235, 0.08);
	--glow-accent: rgba(194, 65, 12, 0.05);
	--overlay: rgba(15, 23, 42, 0.45);
	--btn-on-primary: #ffffff;
	--surface-muted: #f8fafc;
	--table-head: #f1f5f9;
	--table-hover: rgba(37, 99, 235, 0.04);
	--chip-muted: #eef2f7;
	--console-title: #1e293b;
	--console-lead: #64748b;
	--console-head-from: rgba(239, 246, 255, 0.95);
	--console-head-mid: rgba(255, 255, 255, 0.96);
	--console-head-to: rgba(245, 247, 250, 0.94);
	--progress-track: #e2e8f0;
	--progress-fill: #2563eb;
	--badge-solid: #1d4ed8;
	--radius: 10px;
	--control-h: 36px;
	/* 控制台查询区：关键词 / 下拉统一固定宽度 */
	--filter-q-w: 280px;
	--filter-select-w: 160px;
	--font: ui-monospace, "SF Mono", "Sarasa Mono SC", "Microsoft YaHei Mono", "Noto Sans Mono CJK SC", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	/* 数据数字：系统无衬线 + 等宽数字（tabular），用于积分/经验/统计等 */
	--font-num: "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial,
		"PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
	--display: var(--font);
	--rounded: var(--font);
	--fs-2xs: 11px;
	--fs-xs: 12px;
	--fs-sm: 13px;
	--fs-md: 14px;
	--fs-lg: 16px;
	--fs-xl: 18px;
	--fs-2xl: 20px;
	--fs-3xl: 24px;
	--fs-4xl: 28px;
	--lh-tight: 1.25;
	--lh-title: 1.4;
	--lh-body: 1.65;
	color-scheme: light;
}

html[data-theme="dark"] {
	/* 河岸夜读 · 夜间 */
	--bg-0: #0b1220;
	--bg-1: #0e1626;
	--surface: rgba(20, 28, 44, 0.94);
	--surface-solid: #141c2c;
	--text: #eef3fb;
	--muted: #9aabc2;
	--border: #2a3648;
	--primary: #60a5fa;
	--primary-soft: rgba(96, 165, 250, 0.14);
	--primary-border: rgba(96, 165, 250, 0.38);
	--accent: #fb923c;
	--accent-soft: rgba(251, 146, 60, 0.14);
	--danger: #fb7185;
	--danger-bg: rgba(251, 113, 133, 0.14);
	--success: #4ade80;
	--success-bg: rgba(74, 222, 128, 0.12);
	--shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
	--header-bg: rgba(11, 18, 32, 0.88);
	--content-text: #d7e2ec;
	--cover-placeholder: #1a2436;
	--glow-primary: rgba(37, 99, 235, 0.16);
	--glow-accent: rgba(251, 146, 60, 0.08);
	--overlay: rgba(0, 0, 0, 0.62);
	--btn-on-primary: #0b1220;
	--surface-muted: #121a28;
	--table-head: #1a2436;
	--table-hover: rgba(96, 165, 250, 0.08);
	--chip-muted: rgba(154, 171, 194, 0.14);
	--console-title: #eef3fb;
	--console-lead: #b7c4d6;
	--console-head-from: rgba(20, 32, 52, 0.96);
	--console-head-mid: rgba(20, 28, 44, 0.94);
	--console-head-to: rgba(11, 18, 32, 0.92);
	--progress-track: #2a3648;
	--progress-fill: #60a5fa;
	--badge-solid: #3b82f6;
	color-scheme: dark;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: var(--font);
	outline: none;
}

/* 专业网页数字：等宽对齐 + 无衬线，用于积分/经验/统计等 */
.num,
.font-num {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	letter-spacing: -0.015em;
}

.gamification-stats strong,
.stat-num,
.ledger-table .col-time,
.ledger-table .col-delta,
.ledger-table .col-balance,
.shichao-hud strong,
.level-guide-xp,
.reward-rules-table td:nth-child(2),
.reward-rules-table td:nth-child(3),
.pager-num,
.col-sort,
.col-count,
.col-id,
.ai-ask-admin-table .col-id,
.ai-ask-admin-table .col-count,
.ai-ask-admin-table .col-time,
.ai-ask-down-table .col-id,
.ai-ask-down-table .col-time,
.faqs-admin-table .col-sort,
.friend-links-admin-table .col-sort,
.columns-table .col-sort,
.my-articles-table .col-stats {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	letter-spacing: -0.015em;
}

/* 覆盖 .btn { display } 等规则，避免 hidden 按钮仍显示 */
[hidden] {
	display: none !important;
}

html, body {
	width: 100%;
	min-height: 100%;
	background:
		radial-gradient(circle at top left, var(--glow-primary), transparent 30%),
		radial-gradient(circle at bottom right, var(--glow-accent), transparent 28%),
		linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 100%);
	color: var(--text);
	overflow-wrap: break-word;
}

a {
	text-decoration: none;
	color: var(--primary);
}

a:hover:not(.site-brand) {
	opacity: 0.9;
}

.f12 {
	font-size: 12px;
	line-height: 1.4;
}

.tag {
	color: var(--accent, #2f6fed);
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

.h-font {
	font-family: "Kaiti SC", "STKaiti", "Songti SC", serif !important;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--header-bg);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--border);
}

.site-header-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px 28px;
	flex-wrap: wrap;
}

.site-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	flex-shrink: 0;
}

.site-brand-logo {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	display: block;
}

.site-brand-title {
	font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif;
	font-size: var(--fs-xl);
	font-weight: 600;
	line-height: 1;
	color: var(--text);
	white-space: nowrap;
	letter-spacing: 0.12em;
}

.site-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	flex: 1;
	min-width: 0;
	justify-content: center;
}

.site-nav-link {
	padding: 6px 10px;
	border-radius: 999px;
	color: var(--muted);
	font-family: var(--rounded);
	font-size: var(--fs-md);
	font-weight: 600;
	max-width: 8.5em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.site-nav-link:hover,
.site-nav-link.is-active {
	background: var(--primary-soft);
	color: var(--primary);
}

.site-header-actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-sm);
	color: var(--muted);
	flex-shrink: 0;
	line-height: 1;
}

.header-tools,
.header-user {
	display: inline-flex;
	align-items: center;
	align-self: center;
	height: var(--control-h);
}

.header-tools {
	gap: 6px;
}

.site-header-actions .header-tool-btn,
.site-header-actions a.header-tool-btn,
.site-header-actions a.header-search-link,
.site-header-actions .btn,
.site-header-actions .header-user-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	gap: 6px;
	height: var(--control-h);
	min-height: var(--control-h);
	max-height: var(--control-h);
	padding: 0 12px;
	margin: 0;
	box-sizing: border-box;
	border-radius: 999px;
	border: 1px solid var(--border);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	font-family: inherit;
	text-decoration: none;
	vertical-align: middle;
	opacity: 1;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.site-header-actions .header-tool-btn,
.site-header-actions a.header-tool-btn,
.site-header-actions a.header-search-link {
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
}

.site-header-actions .header-tool-btn:hover,
.site-header-actions a.header-tool-btn:hover,
.site-header-actions a.header-search-link:hover {
	border-color: var(--primary-border);
	color: var(--primary);
	background: var(--primary-soft);
	opacity: 1;
}

.site-header-actions .header-tool-btn.is-active,
.site-header-actions a.header-search-link.is-active {
	background: var(--primary-soft);
	border-color: var(--primary-border);
	color: var(--primary);
}

.header-search-icon,
.theme-toggle-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: block;
}

.site-header-actions .btn {
	font-weight: 700;
}

.site-header-actions .btn-primary {
	background: var(--primary);
	color: var(--btn-on-primary);
	border-color: var(--primary);
}

.site-header-actions .btn-ghost {
	background: var(--surface);
	color: var(--text);
	border-color: var(--border);
}

.site-header-actions .btn-ghost:hover {
	border-color: var(--primary-border);
	color: var(--primary);
	background: var(--primary-soft);
	opacity: 1;
}

.site-header-actions .header-publish-btn {
	min-width: 4.5em;
	padding: 0 14px;
}

.header-user {
	position: relative;
}

.site-header-actions .header-user-btn {
	gap: 8px;
	max-width: 168px;
	padding: 0 10px 0 6px;
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
}

.site-header-actions .header-user-btn:hover,
.header-user.is-open .header-user-btn {
	border-color: var(--primary-border);
	background: var(--primary-soft);
}

.header-user-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--primary), #60a5fa);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	flex-shrink: 0;
	line-height: 1;
}

.header-user-avatar.lg {
	width: 40px;
	height: 40px;
	font-size: 15px;
}

.header-user-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
}

.header-user-caret {
	flex-shrink: 0;
	color: var(--muted);
	transition: transform 0.15s ease;
}

.header-user.is-open .header-user-caret {
	transform: rotate(180deg);
}

.header-user-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 220px;
	padding: 10px;
	border-radius: 14px;
	border: 1px solid var(--border);
	background: var(--surface-solid);
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
	z-index: 40;
}

.header-user-menu-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 12px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--border);
}

.header-user-menu-id {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.header-user-menu-id strong {
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.header-user-menu-id .muted {
	font-size: 12px;
}

.header-user-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 36px;
	padding: 0 10px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	text-align: left;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
}

.header-user-menu-item .menu-ico {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	display: block;
	color: var(--muted);
}

.header-user-menu-item:hover {
	background: var(--primary-soft);
	color: var(--primary);
}

.header-user-menu-item:hover .menu-ico {
	color: var(--primary);
}

.header-user-menu-item.is-danger {
	color: var(--danger, #be123c);
}

.header-user-menu-item.is-danger .menu-ico {
	color: var(--danger, #be123c);
}

.header-user-menu-item.is-danger:hover {
	background: var(--danger-bg, rgba(190, 18, 60, 0.08));
	color: var(--danger, #be123c);
}

.header-user-menu-item.is-danger:hover .menu-ico {
	color: var(--danger, #be123c);
}

.header-user-logout {
	display: block;
	margin: 6px 0 0;
	padding-top: 6px;
	border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
	.header-user-name {
		display: none;
	}

	.site-header-actions .header-user-btn {
		padding: 0 8px 0 6px;
		max-width: none;
	}

	.site-header-actions .header-publish-btn {
		padding: 0 12px;
		min-width: 0;
	}
}

.site-main {
	flex: 1;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 20px 48px;
}

.site-footer {
	border-top: 1px solid var(--border);
	background: var(--surface);
}

.site-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 20px;
	text-align: center;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.4;
}

.site-footer-inner > .muted {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
}

.site-footer-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 14px;
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
}

.site-footer-meta .muted {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
}

.site-footer-meta a {
	color: var(--text);
	font-size: 12px;
	text-decoration: none;
}

.site-footer-meta a:hover {
	opacity: 0.75;
}

.site-beian {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 14px;
	margin: 4px 0 0;
	padding: 0;
}

.site-beian li {
	display: flex;
	align-items: center;
}

.site-beian a.c333.f12,
.f12 {
	font-size: 12px;
	line-height: 1.4;
}

.site-beian a.c333,
.c333 {
	color: #333;
}

.site-beian a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 17px;
	line-height: 17px;
}

.site-beian a.c333.f12 {
	line-height: 17px;
}

.site-beian img {
	display: block;
	width: 16px;
	height: 17px;
	max-width: none;
	flex: none;
	object-fit: contain;
}

.site-beian a:hover {
	opacity: 0.75;
}

.muted {
	color: var(--muted);
}

.page-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 24px;
	align-items: start;
}

.page-primary {
	min-width: 0;
}

.page-aside {
	position: sticky;
	top: 76px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tide-play,
.friend-links {
	padding: 16px 18px 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}

.tide-play-title,
.friend-links-title {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	color: var(--text);
	font-family: var(--rounded);
	font-size: var(--fs-lg);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: var(--lh-tight);
}

.tide-play-list,
.friend-links-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.tide-play-list li,
.friend-links-list li {
	min-width: 0;
	max-width: 100%;
}

.tide-play-list a,
.tide-play-list a:visited,
.friend-links-list a,
.friend-links-list a:visited {
	display: block;
	max-width: 100%;
	padding: 0;
	border-radius: 0;
	color: var(--primary);
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tide-play-list a:hover,
.friend-links-list a:hover {
	opacity: 0.8;
}

/* —— 漂流瓶服务 —— */
.pp-reports-table {
	margin-top: 0;
	table-layout: fixed;
	width: 100%;
}

.pp-reports-table th,
.pp-reports-table td {
	padding: 14px 16px;
	vertical-align: top;
}

.pp-reports-table thead th {
	background: var(--table-head);
	font-weight: 700;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}

.pp-reports-table tbody tr:hover {
	background: var(--table-hover);
}

.pp-reports-table .col-meta {
	width: 148px;
}

.pp-reports-table .col-reason {
	width: 132px;
}

.pp-reports-table .col-content {
	width: auto;
	min-width: 0;
}

.pp-reports-table .col-status {
	width: 120px;
}

.pp-reports-table .col-actions {
	width: 168px;
	white-space: nowrap;
	vertical-align: middle;
}

.pp-report-meta,
.pp-report-reason,
.pp-report-content,
.pp-report-status {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}

.pp-report-time {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.35;
}

.pp-report-party,
.pp-report-count,
.pp-report-status .muted {
	font-size: 12px;
	line-height: 1.35;
}

.pp-report-reason .muted {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 100%;
	font-size: 12px;
	line-height: 1.4;
}

.pp-report-content {
	gap: 8px;
}

.pp-report-text {
	margin: 0;
	max-width: 100%;
	font-size: 13px;
	line-height: 1.55;
	color: var(--text);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.pp-reports-table .col-actions .row-actions {
	flex-wrap: nowrap;
	gap: 12px;
}

.pp-reports-table .col-actions .row-actions form {
	display: inline;
	margin: 0;
}

.pp-reports-table .col-actions .row-actions .link-btn {
	/* 覆盖 .row-actions button 的通用样式，统一为 link-btn */
	border: none;
	background: transparent;
	color: var(--primary);
	font-size: 13px;
	font-weight: 600;
	padding: 0;
	line-height: inherit;
	border-radius: 0;
}

.pp-reports-table .col-actions .row-actions .link-btn:hover:not(:disabled) {
	text-decoration: underline;
	opacity: 1;
}

@media (max-width: 960px) {
	.pp-reports-table .col-meta {
		width: 128px;
	}

	.pp-reports-table .col-reason {
		width: 112px;
	}

	.pp-reports-table .col-actions {
		width: 148px;
	}

	.pp-reports-table .col-actions .row-actions {
		flex-wrap: wrap;
		gap: 8px 12px;
	}
}

/* —— 岸线排版：首页 / 栏目 —— */
.shore-kicker {
	margin: 0;
	color: var(--primary);
	font-family: var(--rounded);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.shore-body {
	background:
		radial-gradient(ellipse 80% 50% at 8% -10%, var(--glow-primary), transparent 52%),
		radial-gradient(ellipse 60% 40% at 100% 8%, var(--glow-accent), transparent 46%),
		linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}

.shore-page {
	padding-top: 22px;
	padding-bottom: 48px;
}

.shore-masthead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 28px;
	flex-wrap: wrap;
	margin: 0 0 20px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--border);
}

.shore-masthead.is-inline {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px 14px;
	margin: 0 0 14px;
	padding: 0 0 12px;
}

.shore-masthead.is-inline .shore-kicker {
	flex-shrink: 0;
}

.shore-masthead.is-inline h1 {
	margin: 0;
	flex-shrink: 0;
}

.shore-masthead.is-inline .shore-lead {
	margin: 0;
	max-width: none;
	padding-bottom: 0;
	flex: 1 1 auto;
	min-width: 0;
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.shore-masthead.is-inline .shore-feed-tabs {
	width: auto;
	margin-top: 0;
	flex-shrink: 0;
	margin-left: auto;
}

.shore-feed-tabs {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
	margin-top: 12px;
}

.shore-feed-tab {
	display: inline-flex;
	align-items: center;
	padding: 4px 0 2px;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--muted);
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: 600;
}

.shore-feed-tab:hover {
	color: var(--text);
}

.shore-feed-tab.is-active {
	color: var(--primary);
	border-bottom-color: var(--primary);
	background: transparent;
}

.shore-feed-tab.is-muted {
	opacity: 0.75;
}

.shore-hot-range {
	display: flex;
	gap: 10px;
	width: 100%;
	margin-top: 10px;
}

.shore-hot-range a {
	font-size: var(--fs-sm);
	color: var(--muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
}

.shore-hot-range a.is-active {
	color: var(--primary);
	border-bottom-color: var(--primary);
}

.shore-hot-note {
	width: 100%;
	margin: 8px 0 0;
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.follow-pulse {
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface));
}

.follow-pulse-label {
	margin: 0 0 8px;
	font-size: 12px;
}

.follow-pulse-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.follow-pulse-list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px 4px 4px;
	border-radius: 999px;
	background: var(--surface-solid);
	border: 1px solid var(--border);
	text-decoration: none;
	color: var(--text);
	font-size: 13px;
}

.follow-pulse-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--surface-muted);
	font-size: 12px;
	font-weight: 700;
}

.follow-pulse-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.follow-pulse-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--primary);
}

.author-series {
	margin: 0 0 28px;
}

.author-series-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 10px;
}

.author-series-head h2 {
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--text);
	line-height: 1.3;
}

.author-series-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.author-series-list > li {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 0;
}

.author-series-card {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 14px;
	align-items: stretch;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface-solid, var(--surface));
	text-decoration: none;
	color: inherit;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.author-series-card:hover {
	border-color: var(--primary-border);
	background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface));
}

.author-series-card:hover .author-series-body h3 {
	color: var(--primary);
}

.author-series-cover {
	width: 72px;
	aspect-ratio: 3 / 4;
	border-radius: 8px;
	overflow: hidden;
	background: linear-gradient(145deg, #dbeafe, #93c5fd);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.author-series-cover.is-fallback {
	font-family: var(--display);
	font-size: 1.35rem;
	font-weight: 700;
	color: #1e3a8a;
	letter-spacing: 0.02em;
}

.author-series-body {
	display: grid;
	align-content: center;
	gap: 6px;
	min-width: 0;
}

.author-series-body h3 {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.4;
	color: var(--text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.author-series-summary {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.author-series-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 2px;
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.4;
}

.author-series-sep {
	margin: 0 6px;
	opacity: 0.55;
}

.author-series-list a {
	text-decoration: none;
	color: inherit;
}

.js-author-follow.is-following {
	color: var(--primary);
	border-color: var(--primary-border);
	background: var(--primary-soft);
}

.series-masthead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 24px;
	flex-wrap: wrap;
	margin: 0 0 28px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--border);
}

.series-masthead-main {
	flex: 1 1 16rem;
	min-width: 0;
}

.series-masthead .shore-kicker {
	margin: 0 0 8px;
}

.series-masthead h1 {
	font-family: var(--display);
	font-size: clamp(var(--fs-2xl), 2.2vw, var(--fs-3xl));
	font-weight: 600;
	line-height: var(--lh-title);
	letter-spacing: 0.01em;
	margin: 0;
	color: var(--text);
	overflow-wrap: anywhere;
	word-break: break-word;
	white-space: normal;
}

.series-summary {
	margin: 10px 0 0;
	max-width: 40rem;
	color: var(--muted);
	font-size: var(--fs-md);
	line-height: 1.65;
}

.series-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 2px;
	margin: 12px 0 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.5;
}

.series-meta a {
	color: var(--primary);
	text-decoration: none;
	font-weight: 600;
}

.series-meta a:hover {
	text-decoration: underline;
}

.series-meta-sep {
	margin: 0 6px;
	opacity: 0.55;
	line-height: inherit;
}

.series-meta .series-flood-meta {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0 6px;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	min-width: 0;
	max-width: min(100%, 22rem);
	vertical-align: middle;
}

.series-meta .series-flood-meta .series-flood-label {
	flex: 0 0 auto;
	color: var(--primary);
	font-weight: 600;
	font-size: inherit;
	line-height: inherit;
}

.series-meta .series-flood-meta .series-flood-note {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.series-actions {
	display: flex;
	flex-shrink: 0;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	margin: 0;
	padding-bottom: 2px;
}

.series-actions .link-btn {
	font-size: 14px;
	font-weight: 600;
}

.series-toc {
	margin: 0;
}

.series-toc-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 4px;
}

.series-toc-head h2 {
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--text);
	line-height: 1.3;
}

.series-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--border);
}

.series-toc-list > li {
	border-bottom: 1px solid var(--border);
}

.series-ep {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: 12px 14px;
	align-items: start;
	padding: 14px 4px;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.series-ep:hover {
	background: color-mix(in srgb, var(--primary-soft) 70%, transparent);
}

.series-ep:hover .series-ep-title {
	color: var(--primary);
}

.series-ep-index {
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--muted);
	text-align: right;
	padding-top: 1px;
}

.series-ep-main {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.series-ep-title {
	font-size: var(--fs-md);
	font-weight: 650;
	line-height: 1.45;
	color: var(--text);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.series-ep-sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 2px;
	font-size: 12px;
	line-height: 1.4;
}

.series-ep-stats {
	font-size: 12px;
	white-space: nowrap;
}

.series-nav-title {
	color: var(--primary);
	text-decoration: none;
	font-weight: 600;
}

.series-meta-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.series-meta-form input {
	min-width: 140px;
	flex: 1;
	height: var(--control-h);
	padding: 0 10px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
	color: var(--text);
}

.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;
}

.author-follow-meta {
	margin: 6px 0 0;
}

.author-follow-meta a {
	color: var(--primary);
	font-weight: 650;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.author-follow-meta a:hover {
	color: var(--primary);
	text-decoration-thickness: 2px;
}

.follow-masthead {
	align-items: center;
}

.follow-tabs {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 0 auto;
}

.follow-tab {
	display: inline-flex;
	align-items: center;
	padding: 4px 0 6px;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--muted);
	background: transparent;
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.follow-tab:hover {
	color: var(--text);
}

.follow-tab.is-current {
	color: var(--primary);
	border-bottom-color: var(--primary);
	background: transparent;
}

.follow-people {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.follow-person {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface-solid);
}

.follow-person-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 72px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--surface-2, var(--border));
	color: var(--text);
	font-size: 28px;
	font-weight: 600;
	text-decoration: none;
}

.follow-person-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.follow-person-body {
	min-width: 0;
	flex: 1;
}

.follow-person-name {
	display: block;
	font-family: var(--rounded);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--text);
	text-decoration: none;
}

.follow-person .shore-lead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	max-width: none;
	margin-top: 6px;
	padding-bottom: 0;
	overflow: visible;
	-webkit-line-clamp: unset;
	line-clamp: unset;
}

.follow-person .author-bio {
	margin-top: 8px;
}

.follow-person-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	align-self: center;
}

.follow-state {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	border: 1px solid var(--primary-border);
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

.follow-state[hidden] {
	display: none;
}

.follow-person-btn {
	height: 28px;
	padding: 0 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface-solid);
	color: var(--text);
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

.follow-person-btn.is-unfollow {
	border-color: var(--danger, #e11d48);
	background: var(--danger-bg, #fff1f2);
	color: var(--danger, #e11d48);
}

.read-next h2 {
	margin: 0 0 12px;
	font-size: 18px;
}

.read-next-group + .read-next-group {
	margin-top: 12px;
}

.read-next-group h3 {
	margin: 0 0 6px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
}

.read-next-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.read-next-list a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 6px 8px;
	margin: 0 -8px;
	border-radius: 8px;
	color: var(--primary);
	text-decoration: none;
}

.read-next-list a span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.read-next-list a:hover {
	background: var(--primary-soft);
}

.read-next-list small {
	color: var(--muted);
	flex: none;
	text-decoration: none;
}

.series-nav {
	display: flex;
	justify-content: center;
	margin: 14px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--border);
}

.series-nav-capsule {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	padding: 2px;
	border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
	border-radius: 999px;
	background:
		linear-gradient(
			165deg,
			color-mix(in srgb, var(--primary) 7%, var(--surface-solid)) 0%,
			var(--surface-muted) 100%
		);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent),
		0 1px 2px color-mix(in srgb, var(--text) 5%, transparent);
}

.series-nav-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 0;
	min-height: 26px;
	padding: 0 10px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

a.series-nav-item:hover {
	color: var(--primary);
	background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.series-nav-item.is-disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

.series-nav-catalog {
	padding: 0 12px;
	color: #fff;
	background: linear-gradient(180deg, color-mix(in srgb, #fff 16%, var(--primary)), var(--primary));
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
		0 1px 2px color-mix(in srgb, var(--primary) 30%, transparent);
}

a.series-nav-catalog:hover {
	color: #fff;
	background: linear-gradient(180deg, color-mix(in srgb, #fff 22%, var(--primary)), var(--primary));
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent),
		0 1px 4px color-mix(in srgb, var(--primary) 38%, transparent);
}

.series-nav-ico {
	display: block;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	opacity: 0.9;
}

.publish-meta-grid .span-2 {
	grid-column: 1 / -1;
}

.shore-masthead-text {
	min-width: 0;
}

.shore-masthead h1 {
	font-family: var(--rounded);
	font-size: var(--fs-3xl);
	font-weight: 600;
	line-height: var(--lh-tight);
	letter-spacing: 0.01em;
	margin: 4px 0 0;
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shore-lead {
	margin: 0;
	max-width: 22rem;
	color: var(--muted);
	font-size: var(--fs-md);
	line-height: var(--lh-body);
	padding-bottom: 3px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.shore-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	gap: 32px;
	align-items: start;
}

.shore-layout:not(:has(.page-aside)) {
	grid-template-columns: minmax(0, 1fr);
}

.shore-primary {
	min-width: 0;
}

.shore-feed {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.shore-slot {
	margin: 0 0 14px;
	color: var(--muted);
	font-family: var(--rounded);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.28em;
}

.shore-section-head {
	margin-bottom: 18px;
}

.shore-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	color: #f6f3ee;
	border: 1px solid rgba(255, 255, 255, 0.28);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	flex-shrink: 0;
}

.shore-chip.is-quiet {
	background: var(--primary-soft);
	border-color: transparent;
	color: var(--primary);
}

.shore-meta {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px 8px;
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-xs);
	line-height: 1.4;
	min-width: 0;
}

.shore-meta > span:first-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shore-meta.is-on-dark {
	color: rgba(246, 243, 238, 0.78);
}

.shore-feature-link {
	position: relative;
	display: block;
	min-height: 380px;
	border-radius: 24px;
	overflow: hidden;
	color: #f6f3ee;
	background: #0f172a;
}

.shore-feature-link:hover {
	opacity: 1;
}

.shore-feature-media,
.shore-feature-shade {
	position: absolute;
	inset: 0;
}

.shore-feature-media {
	background: linear-gradient(145deg, #1e3a5f, #0f172a);
}

.shore-feature-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.01);
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.shore-feature-link:hover .shore-feature-media img {
	transform: scale(1.06);
}

.shore-feature-shade {
	background:
		linear-gradient(90deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.12) 52%, transparent 100%),
		linear-gradient(180deg, transparent 28%, rgba(15, 23, 42, 0.88) 100%);
}

.shore-feature-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 380px;
	padding: 36px 36px 32px;
	max-width: 40rem;
}

.shore-feature-top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	color: rgba(246, 243, 238, 0.78);
	font-size: var(--fs-xs);
	font-weight: 600;
}

.shore-feature-top time,
.shore-card-top time,
.shore-row-top time {
	flex-shrink: 0;
	white-space: nowrap;
}

.shore-feature-body h2 {
	font-family: var(--display);
	font-size: clamp(var(--fs-2xl), 3vw, var(--fs-4xl));
	font-weight: 600;
	line-height: var(--lh-tight);
	margin: 0 0 12px;
	color: #f6f3ee;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.shore-feature-summary {
	margin: 0 0 16px;
	color: rgba(246, 243, 238, 0.82);
	font-size: var(--fs-md);
	line-height: var(--lh-body);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.shore-tide-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 20px;
	align-items: stretch;
}

.shore-card {
	min-width: 0;
	height: 100%;
}

.shore-card-link {
	display: flex;
	flex-direction: column;
	color: inherit;
	height: 100%;
	min-width: 0;
}

.shore-card-link:hover {
	opacity: 1;
}

.shore-card-media {
	aspect-ratio: 16 / 10;
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(145deg, #dbeafe, #93c5fd);
}

.shore-card-media img,
.shore-row-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.shore-card-link:hover .shore-card-media img,
.shore-row-link:hover .shore-row-media img {
	transform: scale(1.05);
}

.shore-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
	padding: 14px 2px 0;
	min-width: 0;
}

.shore-card-top,
.shore-row-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: var(--muted);
	font-size: var(--fs-xs);
	min-width: 0;
}

.shore-card-body h2,
.shore-row-body h2 {
	font-family: var(--display);
	font-size: var(--fs-xl);
	font-weight: 600;
	line-height: var(--lh-title);
	margin: 0;
	color: var(--text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	word-break: break-word;
	min-height: calc(var(--lh-title) * 2em);
}

.shore-card-link:hover h2,
.shore-row-link:hover h2 {
	color: var(--primary);
}

.shore-card-summary,
.shore-row-summary {
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-md);
	line-height: var(--lh-body);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	word-break: break-word;
	min-height: calc(var(--lh-body) * 2em);
}

.shore-card-body .shore-meta {
	margin-top: auto;
}

.shore-stream-list {
	display: flex;
	flex-direction: column;
}

.shore-row + .shore-row {
	border-top: 1px solid var(--border);
}

.shore-row-link {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 28px;
	padding: 22px 0;
	color: inherit;
	align-items: center;
}

.shore-row-link:hover {
	opacity: 1;
}

.shore-row-media {
	width: 200px;
	aspect-ratio: 16 / 11;
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(145deg, #dbeafe, #93c5fd);
}

.shore-row-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.shore-empty {
	text-align: center;
	padding: 72px 24px;
	border: 1px dashed var(--border);
	border-radius: 20px;
	background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.shore-empty .shore-kicker {
	margin-bottom: 12px;
}

.shore-empty h2 {
	font-family: var(--display);
	font-size: var(--fs-3xl);
	font-weight: 600;
	margin: 0 0 10px;
	color: var(--text);
}

.shore-empty p {
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-md);
}

.shore-pager {
	margin-top: 40px;
}

.shore-page .page-aside {
	top: 88px;
}

@media (prefers-reduced-motion: reduce) {
	.shore-feature-media img,
	.shore-card-media img,
	.shore-row-media img {
		transition: none;
	}

	.shore-feature-link:hover .shore-feature-media img,
	.shore-card-link:hover .shore-card-media img,
	.shore-row-link:hover .shore-row-media img {
		transform: none;
	}
}

.form-actions,
.article-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: var(--radius);
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	background: var(--surface-solid);
	color: var(--text);
}

.btn-sm {
	padding: 7px 12px;
	font-size: 13px;
}

.btn-primary {
	background: var(--primary);
	color: var(--btn-on-primary);
	border-color: var(--primary);
}

.btn-ghost {
	background: var(--surface);
	border-color: var(--border);
	color: var(--text);
}

.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.type-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.type-filters a {
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
}

.type-filters a.is-active {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--btn-on-primary);
}

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

.article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.4;
}

.article-meta > span {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
}

.article-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin-top: 2px;
}

.article-byline-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	min-width: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.4;
}

.article-byline-aside {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
}

.article-published {
	color: var(--muted);
}

.article-stats {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	color: var(--muted);
	font-size: var(--fs-2xs);
	line-height: 1;
	white-space: nowrap;
}

.article-stats > span + span::before {
	content: "·";
	margin: 0 5px;
	opacity: 0.5;
}

.article-speech {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.article-speech-btn,
.article-speech-stop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 22px;
	padding: 2px 8px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.article-speech-btn:hover,
.article-speech-stop:hover {
	color: var(--primary);
	border-color: var(--primary);
	background: var(--primary-soft);
}

.article-speech-btn.is-active {
	color: var(--primary);
	border-color: var(--primary);
	background: var(--primary-soft);
}

.article-speech-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.article-speech-icon {
	flex-shrink: 0;
}

.badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 12px;
	font-weight: 700;
}

.badge-soft {
	background: var(--accent-soft);
	color: var(--accent);
}

.panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 24px;
	box-shadow: var(--shadow);
	margin-bottom: 20px;
}

.panel h1,
.panel h2 {
	margin-bottom: 8px;
}

.stack-form {
	display: grid;
	gap: 14px;
	margin-top: 16px;
}

.stack-form label,
.form-grid label {
	display: grid;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
}

.stack-form input,
.stack-form select,
.data-table select {
	width: 100%;
	height: var(--control-h);
	padding: 0 12px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--surface-solid);
	color: var(--text);
	font-size: 14px;
	font-family: inherit;
	line-height: calc(var(--control-h) - 2px);
}

.stack-form textarea {
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--surface-solid);
	color: var(--text);
	font-size: 14px;
	font-family: inherit;
	line-height: 1.5;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

.checkbox {
	align-content: end;
}

.field-hint {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 400;
}

.form-meta-row {
	display: grid;
	grid-template-columns: 1fr 140px;
	gap: 12px;
	align-items: start;
}

.column-code-name-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.column-meta-row {
	grid-template-columns: 140px minmax(0, 1fr);
}

.form-meta-row > label {
	display: grid;
	gap: 6px;
	align-content: start;
}

.form-meta-row > .switch-row {
	align-self: end;
	min-height: 42px;
}

.switch-row {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface-solid);
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	cursor: pointer;
	box-sizing: border-box;
}

.switch-row input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	accent-color: var(--primary);
	flex: 0 0 16px;
	align-self: center;
	vertical-align: middle;
}

.switch-row-text {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.25em;
	min-width: 0;
	line-height: 1.4;
	font-weight: 600;
}

.switch-row-text a {
	color: var(--accent, #2f6fed);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}

@media (max-width: 560px) {
	.form-meta-row,
	.column-code-name-grid {
		grid-template-columns: 1fr;
	}
}

.field-error {
	color: var(--danger);
	font-size: 12px;
	font-weight: 600;
	margin-top: 4px;
	display: block;
}

.field-error[hidden] {
	display: none !important;
}

.field-caption {
	display: inline-block;
}

.field-caption-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
}

.field-caption-row .field-caption {
	margin: 0;
}

.ai-polish-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.ai-mark,
.ai-generated-mark,
.ask-ai-note {
	color: var(--muted);
	font-size: 12px;
	line-height: 1.5;
}

.ai-generated-mark {
	margin: 0 0 8px;
}

.ask-ai-note {
	margin: 8px 0 0;
}

.ai-polish-btn,
[data-word-import] {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 28px;
	min-height: 28px;
	padding: 0 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

.ai-polish-btn {
	color: var(--primary);
	border-color: var(--primary-border);
	background: var(--primary-soft);
}

.ai-polish-btn:hover:not(:disabled) {
	opacity: 0.92;
}

.ai-polish-btn.is-busy,
.ai-polish-btn:disabled {
	opacity: 0.65;
	cursor: wait;
}

.label-required .field-caption::after {
	content: " *";
	color: var(--danger);
	font-weight: 800;
}

input.is-invalid,
textarea.is-invalid,
select.is-invalid {
	border-color: var(--danger) !important;
	background: var(--danger-bg);
	box-shadow: 0 0 0 3px rgba(190, 18, 60, 0.08);
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.swal2-popup {
	font-family: var(--font);
}

.heanbian-toast-container.swal2-center {
	align-items: center !important;
	justify-content: center !important;
	padding: 16px !important;
}

/* 盖过原生 <dialog showModal> 顶层，避免 toast 被弹窗挡住 */
.heanbian-toast-container[popover],
.swal2-container[popover] {
	width: auto !important;
	max-width: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	overflow: visible !important;
}

.heanbian-toast {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	max-width: min(420px, calc(100vw - 32px)) !important;
	width: auto !important;
	min-width: min(280px, calc(100vw - 32px)) !important;
	padding: 14px 20px !important;
	font-size: 14px !important;
	border-radius: 12px !important;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12) !important;
	border: 1px solid var(--border) !important;
	overflow: hidden !important;
	text-align: left !important;
}

.heanbian-toast .swal2-html-container,
.heanbian-toast-html,
.heanbian-toast .swal2-title,
.heanbian-toast-title {
	flex: 0 1 auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
	color: var(--text) !important;
	text-align: left !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.heanbian-toast .swal2-icon {
	margin: 0 !important;
	width: 1.6em !important;
	height: 1.6em !important;
	min-width: 1.6em !important;
	border-width: 0.15em !important;
	flex-shrink: 0 !important;
	align-self: center !important;
}

.heanbian-toast .swal2-icon .swal2-icon-content {
	font-size: 0.9em !important;
}

.heanbian-toast .swal2-timer-progress-bar-container {
	position: absolute !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	grid-column: unset !important;
}

.heanbian-confirm {
	padding: 28px 24px 22px !important;
	border-radius: 16px !important;
	border: 1px solid var(--border) !important;
	background: var(--surface-solid) !important;
	color: var(--text) !important;
	box-shadow: var(--shadow) !important;
}

.heanbian-confirm .heanbian-confirm-icon {
	margin: 0 auto 12px !important;
}

.heanbian-confirm-title,
.heanbian-confirm .swal2-title {
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	color: var(--text) !important;
}

.heanbian-confirm-text,
.heanbian-confirm .swal2-html-container {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: var(--muted) !important;
}

.heanbian-confirm-actions,
.heanbian-confirm .swal2-actions {
	margin: 22px 0 0 !important;
	gap: 10px;
}

.heanbian-confirm .btn {
	height: var(--control-h);
	min-height: var(--control-h);
	min-width: 88px;
	padding: 0 16px;
	line-height: 1;
	appearance: none;
	-webkit-appearance: none;
}

.upload-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.upload-field .field-caption {
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
}

.upload-box {
	display: grid;
	gap: 12px;
	padding: 14px;
	border: 1px dashed var(--border);
	border-radius: 12px;
	background: var(--surface-muted);
	box-sizing: border-box;
	align-content: start;
	/* 触发文案 + 可选操作 + 140 预览 + 清除：有图/无图同高 */
	min-height: 300px;
	flex: 1 1 auto;
}

.upload-field.is-uploading .upload-box {
	opacity: 0.7;
	pointer-events: none;
}

.upload-trigger {
	display: grid;
	gap: 4px;
	cursor: pointer;
}

.upload-trigger-text {
	color: var(--primary);
	font-weight: 700;
	font-size: 14px;
}

.upload-hint {
	font-size: 12px;
	font-weight: 400;
}

.upload-preview-wrap {
	display: grid;
	gap: 10px;
	justify-items: start;
	min-height: 182px;
}

.upload-preview-wrap[hidden] {
	display: none !important;
}

.upload-preview {
	display: block;
	width: 140px;
	height: 140px;
	max-width: 140px;
	max-height: 140px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: var(--surface-solid);
}

.upload-preview:not([src]),
.upload-preview[src=""] {
	display: none !important;
}

.upload-status {
	font-size: 12px;
	font-weight: 600;
	color: var(--success);
}

.upload-status.is-error {
	color: var(--danger);
}

.profile-avatar-upload .upload-box {
	max-width: none;
}

.profile-avatar-preview {
	width: 140px !important;
	height: 140px !important;
	max-height: none !important;
	border-radius: 50% !important;
	object-fit: cover;
}

.profile-tip-uploads {
	display: grid;
	gap: 10px;
}

.profile-tip-hint {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
}

.profile-tip-upload-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	align-items: stretch;
}

.profile-tip-preview-img {
	width: 140px !important;
	height: 140px !important;
	max-height: none !important;
	border-radius: 12px !important;
	object-fit: contain;
	background: var(--surface-muted);
}

.profile-tip-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.profile-tip-item {
	margin: 0;
	display: grid;
	gap: 6px;
	justify-items: center;
}

.profile-tip-item img {
	width: 120px;
	height: 120px;
	object-fit: contain;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface-muted);
}

.profile-tip-item figcaption {
	font-size: 12px;
	color: var(--muted);
}

.tip-modal {
	width: min(520px, calc(100vw - 32px));
}

.tip-modal-lead {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.55;
}

.tip-qr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
}

.tip-qr-item {
	margin: 0;
	display: grid;
	gap: 8px;
	justify-items: center;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--surface-muted);
}

.tip-qr-item img {
	width: min(180px, 100%);
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 8px;
	background: #fff;
}

.tip-qr-item figcaption {
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
}

.tip-qr-empty {
	margin: 8px 0 0;
	padding: 28px 16px;
	text-align: center;
	color: var(--muted);
	font-size: 14px;
	border: 1px dashed var(--border);
	border-radius: 14px;
	background: var(--surface-muted);
}

@media (max-width: 640px) {
	.profile-tip-upload-grid {
		grid-template-columns: 1fr;
	}
}

.publish-form {
	gap: 18px;
}

.form-section {
	display: grid;
	gap: 14px;
	padding: 16px 18px 18px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--surface-muted);
}

.form-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border);
}

.form-section-head h2 {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	color: var(--text);
}

.form-section-head .muted {
	font-size: 12px;
}

.publish-meta-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.publish-media-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	align-items: stretch;
}

.publish-media-grid .upload-box {
	min-height: 300px;
}

.upload-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.upload-head .upload-trigger {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}

.upload-head .btn {
	flex: 0 0 auto;
	margin-top: 0;
}

.upload-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.cover-pick-modal {
	width: min(640px, calc(100vw - 32px));
}

.cover-pick-lead {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
}

.cover-pick-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
}

.cover-pick-item {
	display: block;
	margin: 0;
	padding: 0;
	border: 2px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--surface-muted);
	cursor: pointer;
	aspect-ratio: 1;
}

.cover-pick-item:hover,
.cover-pick-item:focus-visible {
	border-color: var(--primary);
	outline: none;
	box-shadow: 0 0 0 3px var(--primary-soft);
}

.cover-pick-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #fff;
}

.cover-pick-empty {
	margin: 0;
	padding: 28px 16px;
	text-align: center;
	color: var(--muted);
	font-size: 14px;
	border: 1px dashed var(--border);
	border-radius: 14px;
	background: var(--surface-muted);
}

.publish-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.publish-actions-bottom {
	position: sticky;
	bottom: 0;
	z-index: 8;
	margin-top: 4px;
	box-shadow: 0 -6px 18px color-mix(in srgb, var(--text) 6%, transparent);
}

.publish-schedule {
	display: grid;
	gap: 12px;
}

.publish-schedule-time {
	display: grid;
	gap: 6px;
}

.publish-schedule-time input[type="datetime-local"] {
	max-width: 280px;
}

.publish-agreement-body {
	display: grid;
	gap: 8px;
}

.publish-agreement-body .field-error {
	display: block;
	margin: 0;
}

@media (max-width: 800px) {
	.publish-meta-grid,
	.publish-media-grid {
		grid-template-columns: 1fr;
	}
}

.article-page {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 28px;
	box-shadow: var(--shadow);
}

.page-layout .article-page {
	width: 100%;
	max-width: none;
	margin: 0;
}

.article-after {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 20px;
	width: 100%;
}

.article-panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 20px 22px;
	box-shadow: var(--shadow);
}

.article-panel-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 14px 22px;
}

.article-header {
	margin-bottom: 24px;
}

.article-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 2px;
	margin: 0 0 10px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.article-kicker a {
	color: var(--muted);
	text-decoration: none;
}

.article-kicker a:hover {
	color: var(--primary);
}

.article-kicker-sep {
	margin: 0 6px;
	opacity: 0.55;
	font-weight: 500;
}

.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.article-header h1,
.article-header h2,
.article-header h3 {
	font-family: var(--display);
	font-size: clamp(var(--fs-2xl), 2.4vw, var(--fs-3xl));
	font-weight: 600;
	line-height: var(--lh-title);
	margin: 0 0 14px;
	color: var(--text);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.article-cover {
	margin: 0 0 20px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--cover-placeholder);
}

.article-content {
	font-size: var(--fs-lg);
	line-height: 1.85;
	color: var(--content-text);
	margin-bottom: 24px;
	word-break: break-word;
}

.article-content-rich {
	white-space: normal;
}

.article-content-rich h1,
.article-content-rich h2,
.article-content-rich h3 {
	margin: 1.2em 0 0.55em;
	line-height: 1.35;
}

.article-content-rich p {
	margin: 0 0 0.9em;
}

.article-content-rich ul,
.article-content-rich ol {
	margin: 0 0 0.9em 1.3em;
}

.article-content-rich img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
	margin: 12px 0;
}

.article-content-rich pre,
.article-content-rich code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
}

.article-content-rich pre {
	padding: 12px 14px;
	border-radius: 10px;
	background: #0f172a;
	color: #e2e8f0;
	overflow-x: auto;
}

.article-content-rich blockquote {
	margin: 0 0 0.9em;
	padding: 8px 14px;
	border-left: 3px solid var(--primary-border);
	background: var(--primary-soft);
	color: var(--muted);
}

.article-content-rich table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1em;
	font-size: 14px;
}

.article-content-rich th,
.article-content-rich td {
	border: 1px solid var(--border);
	padding: 8px 10px;
}

/* —— 发布页正文编辑器 —— */
.content-editor {
	display: grid;
	gap: 0;
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	background: var(--surface-solid);
}

.content-editor-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 14px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--border);
	background: var(--surface-muted);
}

.content-editor-tools {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.content-editor-tools .btn,
.content-editor-tools .ai-polish-btn,
.content-editor-tools [data-word-import] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 28px;
	min-height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	font-family: var(--rounded, inherit);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
}

.content-editor-tools [data-word-import] {
	color: var(--text);
	border-color: var(--border);
	background: var(--surface-solid);
}

.content-editor-tools [data-word-import]:hover:not(:disabled) {
	color: #1e4e8c;
	border-color: color-mix(in srgb, #2b579a 35%, var(--border));
	background: color-mix(in srgb, #2b579a 8%, var(--surface-solid));
}

.word-import-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: 3px;
	background: #2b579a;
	color: #fff;
	font-family: var(--rounded, system-ui, sans-serif);
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.content-editor-tools .ai-polish-btn {
	color: var(--primary);
	border-color: var(--primary-border);
	background: var(--primary-soft);
}

.content-editor-body {
	min-width: 0;
	background: var(--surface-solid);
}

.content-editor-pane {
	padding: 0;
}

.content-editor-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	justify-content: space-between;
}

.content-editor-actions,
.content-editor-extra {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.content-format-switch {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: stretch;
	height: 30px;
	padding: 2px;
	gap: 0;
	overflow: hidden;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--surface-solid);
	border: 1px solid var(--border);
}

.content-format-option {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	margin: 0;
	gap: 0;
	height: 100%;
	font-size: 12px;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
}

.stack-form .content-format-option {
	display: inline-flex;
	gap: 0;
	font-size: 12px;
	font-weight: 600;
	color: inherit;
}

.content-format-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: auto;
	height: auto;
	min-height: 0;
	padding: 0;
	border: 0;
}

.content-format-option span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 12px;
	border-radius: 999px;
	box-sizing: border-box;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--muted);
}

.content-format-option input:checked + span {
	background: var(--primary-soft);
	color: var(--primary);
}

.stack-form .content-editor .content-plain-input,
.content-plain-input {
	display: block;
	width: 100%;
	min-height: 320px;
	margin: 0;
	resize: vertical;
	border: none;
	border-radius: 0;
	padding: 16px 18px;
	background: transparent;
	box-shadow: none;
	font: inherit;
	line-height: 1.7;
	color: var(--text);
}

.stack-form .content-editor .content-plain-input:focus,
.content-plain-input:focus {
	outline: none;
	border: none;
	box-shadow: none;
}

.wangeditor-shell {
	border: none;
	border-radius: 0;
	overflow: hidden;
	background: var(--surface-solid);
}

.wangeditor-toolbar {
	border-bottom: 1px solid var(--border) !important;
}

.wangeditor-body {
	min-height: 320px;
}

.vditor-shell {
	border: none;
	border-radius: 0;
	overflow: hidden;
	background: var(--surface-solid);
}

.content-editor .vditor {
	border: none;
	border-radius: 0;
}

.content-editor .vditor-toolbar {
	border-radius: 0;
}

.content-editor-hint {
	margin: 8px 2px 0;
	font-size: 12px;
	line-height: 1.5;
}

.content-editor .field-error {
	margin: 0;
	padding: 8px 14px 10px;
	border-top: 1px solid var(--border);
}

.content-editor.is-pasting {
	opacity: 0.72;
	pointer-events: none;
}

@media (max-width: 640px) {
	.content-editor-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.content-editor-tools {
		width: 100%;
		padding-top: 2px;
	}
}

.article-actions {
	border-top: none;
}

.article-actions form {
	display: inline-flex;
	margin: 0;
}

.article-actions .btn {
	height: var(--control-h);
	min-height: var(--control-h);
	padding: 0 16px;
	line-height: 1;
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
}

.article-comments {
	margin-top: 0;
	border-top: none;
}

.article-comments .comments-header {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 18px;
}

.article-comments .comments-header h2 {
	font-family: var(--display);
	font-size: var(--fs-2xl);
	font-weight: 600;
	margin: 0;
	line-height: 1.2;
}

.article-comments .comments-count {
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
}

.article-comments .comment-composer {
	display: grid;
	gap: 10px;
	margin-bottom: 22px;
	/**
	padding: 14px;
	border: 1px solid var(--border);
	border-radius: 12px;
	*/
	background: var(--surface-solid);
}

.article-comments .comment-composer textarea {
	width: 100%;
	min-height: 88px;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface-muted);
	color: var(--text);
	font-size: 14px;
	line-height: 1.6;
	font-family: inherit;
	resize: vertical;
}

.article-comments .comment-composer textarea:focus {
	outline: none;
	border-color: var(--primary);
	background: var(--surface-solid);
	box-shadow: 0 0 0 3px var(--glow-primary);
}

.article-comments .comment-composer-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.article-comments .comment-composer-bar .comment-composer-hint {
	flex: 1;
	min-width: 120px;
}

.article-comments .comment-composer-bar .ai-polish-btn {
	order: -1;
}

.article-comments .comment-composer-hint {
	color: var(--muted);
	font-size: 12px;
}

.article-comments .comment-login-hint {
	margin: 0 0 22px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--surface-muted);
	border: 1px dashed var(--border);
	color: var(--muted);
	font-size: 14px;
}

.article-comments .comment-login-hint a {
	color: var(--primary);
	font-weight: 700;
}

.article-comments .comment-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--border);
}

.article-comments .comment-item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 12px;
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid var(--border);
	list-style: none;
	background: transparent;
}

.article-comments .comment-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.article-comments .comment-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--primary-soft);
	border: 1px solid var(--primary-border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

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

.article-comments .comment-avatar.is-fallback span {
	color: var(--primary);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	user-select: none;
}

.article-comments .comment-main {
	min-width: 0;
}

.article-comments .comment-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.article-comments .comment-who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	min-width: 0;
}

.article-comments .comment-name {
	color: var(--text);
	font-size: 14px;
	font-weight: 700;
}

.article-comments .comment-who .author-level-badge {
	font-size: 11px;
}

.article-comments .comment-time {
	color: var(--muted);
	font-size: 12px;
}

.article-comments .comment-delete {
	margin: 0;
	flex-shrink: 0;
}

.article-comments .comment-delete-btn {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	line-height: 1.4;
}

.article-comments .comment-delete-btn:hover {
	color: var(--danger);
}

.article-comments .comment-head-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.article-comments .comment-reply-btn {
	border: 0;
	background: transparent;
	padding: 0;
	font: inherit;
	font-size: 12px;
	color: var(--muted);
	cursor: pointer;
}

.article-comments .comment-reply-btn:hover {
	color: var(--text);
}

.article-comments .comment-report-link {
	font-size: 12px;
	color: var(--muted);
	text-decoration: none;
}

.article-comments .comment-report-link:hover {
	color: var(--text);
}

.article-comments .comment-replies {
	margin-top: 12px;
	padding-left: 12px;
	border-left: 2px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.article-comments .comment-item.is-reply {
	padding: 0;
	border: 0;
}

.article-comments .comment-reply-hint {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0 0;
}

.article-author-link {
	color: var(--primary);
	text-decoration: none;
}

.article-author-link:hover {
	text-decoration: underline;
}

.author-masthead-row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.author-masthead .shore-lead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	max-width: none;
	padding-bottom: 0;
	overflow: visible;
	-webkit-line-clamp: unset;
	line-clamp: unset;
}

.author-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--surface-2, var(--border));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 600;
}

.author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.author-bio {
	margin: 8px 0 0;
	max-width: 40em;
	color: var(--muted);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	word-break: break-word;
}

.shore-emblem {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 4px;
	vertical-align: middle;
	line-height: 1;
}

.shore-emblem-motto {
	font-size: 12px;
	color: var(--muted);
}

/* 等级徽章（正圆，无绶带）：lg 等级页 | md 文章/作者行内 */
.shore-medal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
	vertical-align: middle;
}

.shore-medal img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}

.shore-medal-lg {
	width: 60px;
}

.shore-medal-lg img {
	width: 60px;
	height: 60px;
}

/* 行内默认：正圆 */
.shore-medal-md,
.shore-medal-sm {
	width: 28px;
}

.shore-medal-md img,
.shore-medal-sm img {
	width: 28px;
	height: 28px;
}

.emblem-wear-current {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface-muted, var(--surface));
}

.emblem-wear-current .shore-medal-lg {
	width: 60px;
}

.emblem-wear-current .shore-medal-lg img {
	width: 60px;
	height: 60px;
}

.emblem-wear-current .shore-emblem-motto,
.emblem-wear-current .muted {
	font-size: 13px;
}

/* 文章 byline：紧凑行内章 */
.article-author .shore-emblem,
.article-byline .shore-emblem {
	margin-left: 2px;
	align-self: center;
}

.article-author .shore-medal-md,
.article-author .shore-medal-sm,
.article-byline .shore-medal-md,
.article-byline .shore-medal-sm {
	width: 26px;
}

.article-author .shore-medal-md img,
.article-author .shore-medal-sm img,
.article-byline .shore-medal-md img,
.article-byline .shore-medal-sm img {
	width: 26px;
	height: 26px;
}

/* 作者页头像旁：略大一点更醒目 */
.author-masthead .shore-emblem,
.shore-lead .shore-emblem {
	margin-left: 4px;
	align-self: center;
}

.author-masthead .shore-medal-md,
.author-masthead .shore-medal-sm,
.shore-lead .shore-medal-md,
.shore-lead .shore-medal-sm {
	width: 32px;
}

.author-masthead .shore-medal-md img,
.author-masthead .shore-medal-sm img,
.shore-lead .shore-medal-md img,
.shore-lead .shore-medal-sm img {
	width: 32px;
	height: 32px;
}

.tide-seal-wall {
	margin: 0;
}

.tide-seal-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px 16px;
	margin-bottom: 12px;
}

.tide-seal-head h2,
.shore-quote-block > h2 {
	margin: 0 0 4px;
	font-size: 1.05rem;
}

.tide-seal-lead {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
}

.tide-seal-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tide-seal-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: min(100%, 11rem);
	max-width: 100%;
	padding: 12px 14px;
	border-radius: 4px 14px 10px 14px;
	background:
		linear-gradient(145deg, rgba(37, 99, 235, 0.06), transparent 55%),
		var(--surface-muted, #f8fafc);
	border: 1px dashed color-mix(in srgb, var(--primary, #2563eb) 35%, var(--border));
	transform: rotate(-0.4deg);
}

.tide-seal-item:nth-child(even) {
	transform: rotate(0.5deg);
	border-radius: 14px 4px 14px 10px;
}

.tide-seal-item.is-mine {
	border-style: solid;
	border-color: color-mix(in srgb, var(--primary, #2563eb) 55%, var(--border));
	background:
		linear-gradient(145deg, rgba(37, 99, 235, 0.12), transparent 60%),
		var(--surface, #fff);
}

.tide-seal-item .tide-seal-text {
	margin: 0;
	max-width: 100%;
	font-size: 0.95rem;
	line-height: 1.45;
	letter-spacing: 0.02em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tide-seal-item .tide-seal-meta {
	font-size: 12px;
	color: var(--muted);
}

.tide-seal-empty {
	margin: 0;
	padding: 18px 16px;
	text-align: center;
	font-size: 14px;
	border: 1px dashed var(--border);
	border-radius: 14px;
	background: var(--surface-muted, #f8fafc);
}

.tide-seal-modal {
	width: min(440px, calc(100vw - 32px));
}

.tide-seal-field {
	display: grid;
	gap: 6px;
}

.tide-seal-field .field-hint {
	justify-self: end;
	font-variant-numeric: tabular-nums;
}

.shore-quote-block {
	margin: 0;
}

.shore-quote-block ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.shore-quote-head {
	margin-bottom: 12px;
}

.shore-quote-lead {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
}

.shore-quote-block li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px 8px 14px;
	border-left: 3px solid var(--primary);
	background: var(--surface-muted, #f8fafc);
	border-radius: 0 8px 8px 0;
	line-height: 1.55;
}

.shore-quote-text {
	margin: 0;
	min-width: 0;
}

.shore-quote-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex: 0 0 auto;
}

.shore-quote-mark {
	font-size: 12px;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 999px;
	color: var(--muted);
	border: 1px solid var(--border);
}

.js-shore-quote-keep.is-kept {
	color: var(--muted);
	font-weight: 500;
}

.quote-wall {
	display: grid;
	gap: 12px;
}

.quote-wall-card {
	padding: 16px 18px;
	border-left: 3px solid var(--primary);
	background: var(--surface-muted, #f8fafc);
	border-radius: 0 10px 10px 0;
}

.quote-wall-text {
	margin: 0 0 12px;
	font-size: 1.15rem;
	line-height: 1.5;
}

.quote-wall-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	font-size: 13px;
}

.quote-wall-meta .quote-wall-article {
	min-width: 0;
}

.quote-wall-page {
	max-width: 720px;
	margin: 0 auto;
}

.quote-wall-page .faq-tabs {
	margin-bottom: 16px;
}

.series-watch-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.series-watch-btn.is-watching {
	color: var(--primary);
	font-weight: 700;
}

.series-flood-meta {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px 8px;
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
	min-width: 0;
}

.series-flood-meta .series-flood-label {
	flex: 0 0 auto;
	color: var(--primary);
	font-weight: 600;
	line-height: inherit;
}

.series-table-summary,
.series-table-flood-note {
	margin: 4px 0 0;
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.series-table-flood-note {
	flex: 1 1 auto;
	margin: 0;
}

.daily-shore-ritual {
	position: relative;
}

.daily-shore-ritual .form-section-head h2 {
	letter-spacing: 0.04em;
}

.daily-shore-ritual .daily-shore-ritual-lead {
	margin: 0 0 12px;
	line-height: 1.6;
}

.shore-quotes-saved {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.shore-quotes-modal {
	width: min(560px, calc(100vw - 32px));
}

.shore-quotes-modal-lead {
	margin: 0 0 12px;
}

.shore-quotes-modal .modal-body > div > label {
	display: grid;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
}

.shore-quotes-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 112px;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--surface-solid);
	color: var(--text);
	font-size: 14px;
	font-family: inherit;
	line-height: 1.55;
	resize: vertical;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.shore-quotes-input::placeholder {
	color: var(--muted);
	opacity: 0.85;
}

.shore-quotes-input:hover {
	border-color: color-mix(in srgb, var(--text) 18%, var(--border));
}

.shore-quotes-input:focus {
	border-color: color-mix(in srgb, var(--primary, #2f6fed) 55%, var(--border));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #2f6fed) 18%, transparent);
}

.shore-quotes-input.is-invalid {
	border-color: color-mix(in srgb, #c45c4a 55%, var(--border));
	box-shadow: 0 0 0 3px color-mix(in srgb, #c45c4a 16%, transparent);
}

.shore-quotes-modal .field-error {
	margin-top: 2px;
}

.shore-quote-saved-item {
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface-muted, #f8fafc);
}

.shore-quote-saved-item > p {
	margin: 0 0 8px;
	line-height: 1.5;
}

.shore-quote-tide-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	font-size: 13px;
}

.shore-quote-tide-row > label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-weight: 500;
	color: var(--text);
	line-height: 1.3;
	cursor: pointer;
}

.shore-quote-tide-row > label > input[type="checkbox"] {
	margin: 0;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	accent-color: var(--primary, #2f6fed);
	vertical-align: middle;
}

.shore-quotes-modal .field-caption-row .link-btn.ai-polish-btn {
	font-weight: 600;
}

.emblem-wear-card {
	margin: 18px 0 8px;
	padding: 0;
	border: none;
	background: transparent;
}

.emblem-wear-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px 16px;
	margin-bottom: 12px;
}

.emblem-wear-head h2 {
	margin: 0 0 4px;
	font-size: 1.05rem;
}

.emblem-wear-lead {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
}

.emblem-wear-empty {
	margin: 0;
	padding: 14px 16px;
	font-size: 14px;
	border: 1px dashed var(--border);
	border-radius: 14px;
	background: var(--surface-muted, #f8fafc);
}

.emblem-wear-modal {
	width: min(440px, calc(100vw - 32px));
}

.notices-table {
	table-layout: fixed;
	width: 100%;
}

.notices-table .col-time {
	width: 148px;
	white-space: nowrap;
}

.notices-table .col-channel,
.notices-table .col-status {
	width: 72px;
	white-space: nowrap;
}

.notices-table .col-type {
	width: 120px;
}

.notices-table .col-title {
	width: 180px;
}

.notices-table .col-actions {
	width: 64px;
	white-space: nowrap;
}

.notices-table td {
	vertical-align: middle;
}

.notice-pager-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.notice-size,
.notice-jump {
	display: flex;
	align-items: center;
	margin: 0;
}

.notice-size label,
.notice-jump label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--muted);
	font-size: 13px;
}

.notice-size select,
.notice-jump input {
	box-sizing: border-box;
	width: 72px;
	height: 36px;
	min-height: 36px;
	margin: 0;
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
	font-family: var(--font-num);
	font-size: 13px;
	font-weight: 600;
	line-height: 34px;
	font-variant-numeric: tabular-nums lining-nums;
}

.notice-size select {
	padding-right: 22px;
}

.notice-jump input {
	width: 48px;
	padding: 0 6px;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
	-webkit-appearance: none;
}

.notice-jump input::-webkit-outer-spin-button,
.notice-jump input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.daily-shore-banner {
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var(--primary-border);
	border-radius: 16px;
	background: var(--primary-soft);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	box-shadow: var(--shadow);
}

.daily-shore-card,
.duo-week-card {
	margin-top: 20px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface, #fff);
}

.daily-shore-link {
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
}

.daily-shore-link:hover {
	text-decoration: underline;
}

.daily-shore-claim {
	margin-top: 10px;
}

.article-comments .comment-content {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--content-text);
	white-space: pre-wrap;
	word-break: break-word;
}

.article-comments .comment-empty {
	margin: 4px 0 0;
	padding: 18px 16px;
	border-radius: 12px;
	background: var(--surface-muted);
	border: 1px dashed var(--border);
	color: var(--muted);
	font-size: 14px;
	text-align: center;
}

.console-layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.console-aside {
	position: sticky;
	top: 76px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow);
	overflow: hidden;
}

.console-aside-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-bottom: 1px solid var(--border);
	background: linear-gradient(180deg, var(--glow-primary), transparent);
}

.console-avatar,
.console-avatar-fallback {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.console-avatar-fallback {
	display: grid;
	place-items: center;
	background: var(--primary);
	color: var(--btn-on-primary);
	font-size: 18px;
	font-weight: 700;
}

.console-aside-meta {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.console-aside-meta strong {
	font-size: 14px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.console-aside-meta span {
	font-size: 12px;
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.console-role {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin-top: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 11px;
	font-weight: 700;
}

.console-role-user {
	background: var(--chip-muted);
	color: var(--muted);
}

.console-menu {
	display: grid;
	padding: 10px 8px 14px;
	gap: 2px;
}

.console-menu-group {
	display: grid;
	gap: 2px;
}

.console-menu-group--games,
.console-menu-group--create {
	margin-top: 8px;
	padding-top: 10px;
	border-top: 2px solid transparent;
}

/* 账户 / 小游戏 / 创作管理 — 三组不同色横线 */
.console-menu-group--account {
	padding-bottom: 2px;
}

.console-menu-group--games {
	border-top-color: #4f9a8f;
}

.console-menu-group--create {
	border-top-color: #c07a48;
}

.console-menu-label {
	margin: 10px 10px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--muted);
	text-transform: uppercase;
}

.console-menu-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid transparent;
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.console-menu-link .menu-ico {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	display: block;
	color: var(--muted);
}

.console-menu-text {
	min-width: 0;
	flex: 1 1 auto;
}

.console-menu-link:hover {
	background: var(--table-hover);
	opacity: 1;
	color: var(--text);
}

.console-menu-link:hover .menu-ico {
	color: var(--text);
}

.console-menu-link.is-active {
	background: var(--primary-soft);
	border-color: var(--primary-border);
	color: var(--primary);
	font-weight: 700;
}

.console-menu-link.is-active .menu-ico {
	color: var(--primary);
}

.console-main {
	margin-bottom: 0;
	min-width: 0;
}

.console-main-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 20px;
	flex-wrap: wrap;
	margin: 0 0 18px;
	padding: 0 0 14px;
	border: 0;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	background: none;
	box-shadow: none;
	position: relative;
	overflow: visible;
}

.console-main-head::before {
	display: none;
}

.console-main-title {
	min-width: 0;
	flex: 1 1 220px;
	padding: 0;
}

.console-main-title h1,
.console-main-head h1 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
	margin: 0;
	color: var(--text);
	letter-spacing: 0;
}

.console-main-title h1::before,
.console-main-head h1::before {
	content: "";
	flex: 0 0 auto;
	width: 3px;
	height: 1em;
	border-radius: 2px;
	background: var(--primary);
}

.console-lead,
.console-main-title .muted,
.console-main-head > div > .muted {
	display: block;
	margin: 6px 0 0 13px;
	max-width: 40rem;
	width: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--muted);
}

.console-lead::before {
	display: none;
}

.console-main-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
	margin-left: auto;
	position: relative;
	z-index: 1;
	padding-bottom: 2px;
}

.console-filters {
	margin-bottom: 14px;
}

.profile-view {
	width: 100%;
	max-width: none;
}

.profile-fields {
	width: 100%;
	display: grid;
	gap: 0;
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--surface-muted);
}

.gamification-card {
	margin-bottom: 16px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: linear-gradient(180deg, var(--surface-muted) 0%, var(--surface-solid) 100%);
}

.gamification-level {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.gamification-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-weight: inherit;
	font-size: inherit;
	box-shadow: none;
	overflow: visible;
}

.gamification-badge .shore-medal,
.gamification-badge .shore-medal-lg {
	width: 60px;
}

.level-badge-text {
	position: relative;
	z-index: 1;
}

/* 等级专属色：溪 → 河 → 江 → 湖 → 海 → 洋，亮色 */
.level-tone-xi {
	--level-solid: #2ed4a8;
	--level-on-solid: #ffffff;
	--level-soft: #e8fbf5;
	--level-border: #b4f3de;
	--level-text: #0e9a74;
	--level-progress: #2ed4a8;
}

.level-tone-he {
	--level-solid: #2eb6f6;
	--level-on-solid: #ffffff;
	--level-soft: #e7f7ff;
	--level-border: #b3e6fc;
	--level-text: #0b86c2;
	--level-progress: #2eb6f6;
}

.level-tone-jiang {
	--level-solid: #4c90ff;
	--level-on-solid: #ffffff;
	--level-soft: #eef4ff;
	--level-border: #c6daff;
	--level-text: #245ed6;
	--level-progress: #4c90ff;
}

.level-tone-hu {
	--level-solid: #6e7cff;
	--level-on-solid: #ffffff;
	--level-soft: #f1f2ff;
	--level-border: #d4d8ff;
	--level-text: #424ee0;
	--level-progress: #6e7cff;
}

.level-tone-hai {
	--level-solid: #5b8cff;
	--level-on-solid: #ffffff;
	--level-soft: #eef3ff;
	--level-border: #c9d8ff;
	--level-text: #2f62e0;
	--level-progress: #5b8cff;
}

.level-tone-yang {
	--level-solid: #3a56e8;
	--level-on-solid: #ffffff;
	--level-soft: #eef0ff;
	--level-border: #c4ccff;
	--level-text: #2438c8;
	--level-progress: #3a56e8;
}

.gamification-card.level-tone-xi,
.gamification-card.level-tone-he,
.gamification-card.level-tone-hu,
.gamification-card.level-tone-jiang,
.gamification-card.level-tone-hai,
.gamification-card.level-tone-yang {
	border-color: var(--level-border);
	background: linear-gradient(160deg, var(--level-soft) 0%, var(--surface-solid) 58%);
}

.gamification-card.level-tone-xi .gamification-progress span,
.gamification-card.level-tone-he .gamification-progress span,
.gamification-card.level-tone-hu .gamification-progress span,
.gamification-card.level-tone-jiang .gamification-progress span,
.gamification-card.level-tone-hai .gamification-progress span,
.gamification-card.level-tone-yang .gamification-progress span {
	background: var(--level-progress);
}

.gamification-level strong {
	display: block;
	font-size: 16px;
}

.gamification-level .muted {
	margin: 4px 0 0;
	font-size: 13px;
}

.gamification-progress {
	height: 8px;
	border-radius: 999px;
	background: var(--progress-track);
	overflow: hidden;
	margin-bottom: 12px;
}

.gamification-progress span {
	display: block;
	height: 100%;
	background: var(--progress-fill);
	border-radius: inherit;
}

.gamification-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.gamification-card-compact .gamification-stats {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 0;
}

.gamification-card-compact .gamification-stats.creator-stats-4,
.gamification-card-compact .gamification-stats.pailang-stats-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.creator-stats-window {
	margin-top: 12px;
}

.creator-top-list {
	margin-top: 12px;
}

.creator-top-list .checkin-hint {
	margin-bottom: 6px;
}

.creator-top-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.creator-top-items li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: var(--fs-sm);
}

.creator-top-items a {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.creator-top-items .muted {
	flex-shrink: 0;
}

.gamification-stats .muted {
	display: block;
	font-size: 12px;
	margin-bottom: 2px;
}

.gamification-stats strong {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.checkin-stats {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 16px;
}

.checkin-action {
	display: grid;
	gap: 10px;
	justify-items: start;
}

.checkin-btn {
	min-width: 140px;
}

.checkin-btn.is-done {
	opacity: 0.75;
	cursor: default;
}

.checkin-hint {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	max-width: 42rem;
}

/* —— 河岸小游戏 · 统一玩法规则 —— */
.game-rules {
	--game-rules-accent: #1a6b72;
	margin: 0 0 14px;
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	background:
		radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--game-rules-accent) 10%, transparent), transparent 55%),
		var(--surface);
}

.game-rules-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 14px 10px;
	border-bottom: 1px solid var(--border);
}

.game-rules-kicker {
	margin: 0 0 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--game-rules-accent);
}

.game-rules-head h2 {
	margin: 0;
	font-size: 1.05rem;
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.25;
}

.game-rules-head .muted {
	font-size: 12px;
	max-width: 18rem;
	line-height: 1.4;
}

.game-rules-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: game-step;
}

.game-rules-steps > li {
	counter-increment: game-step;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: 2px 10px;
	align-items: start;
	align-content: start;
	justify-items: start;
	text-align: left;
	padding: 12px 14px;
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	min-height: 0;
}

.game-rules-steps > li:last-child {
	border-right: none;
}

.game-rules-steps > li::before {
	content: counter(game-step, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1;
	font-size: 11px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	color: var(--game-rules-accent);
	line-height: 1.6;
	padding-top: 1px;
}

.game-rules-steps > li > strong {
	grid-column: 2;
	grid-row: 1;
	display: block;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--text);
	text-align: left;
}

.game-rules-steps > li > span {
	grid-column: 2;
	grid-row: 2;
	display: block;
	margin: 0;
	width: 100%;
	max-width: 100%;
	font-size: 12px;
	line-height: 1.5;
	color: var(--muted);
	text-align: left;
	text-wrap: pretty;
	overflow-wrap: break-word;
	word-break: normal;
}

.game-rules-steps .num,
.game-rules-steps strong.num {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
	color: var(--text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.game-rules-limits {
	padding: 10px 14px 12px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--muted);
	background: color-mix(in srgb, var(--surface-muted) 80%, transparent);
}

.game-rules-limits strong.num {
	color: var(--text);
}

.game-rules-more {
	border-top: 1px solid var(--border);
	background: var(--surface);
}

.game-rules-more > summary {
	list-style: none;
	cursor: pointer;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 650;
	color: var(--text);
	user-select: none;
}

.game-rules-more > summary::-webkit-details-marker {
	display: none;
}

.game-rules-more > summary::after {
	content: "展开";
	float: right;
	font-size: 12px;
	font-weight: 500;
	color: var(--muted);
}

.game-rules-more[open] > summary::after {
	content: "收起";
}

.game-rules-glossary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 8px 12px;
	margin: 0;
	padding: 0 14px 14px;
}

.game-rules-glossary > div {
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
}

.game-rules-glossary dt {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 700;
	color: var(--text);
}

.game-rules-glossary dd {
	margin: 0;
	font-size: 11px;
	line-height: 1.5;
	color: var(--muted);
}

.game-play-zone {
	margin: 4px 0 8px;
	/*
	padding: 12px;
	border: 1px dashed color-mix(in srgb, var(--border) 85%, var(--game-rules-accent, #1a6b72));
	border-radius: 16px;
	*/
	background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.game-play-zone .game-rules {
	margin-bottom: 12px;
}

.game-play-zone .shichao-launch,
.game-play-zone .dudeng-launch,
.game-play-zone .diejian-launch,
.game-play-zone .pailang-launch,
.game-play-zone .liqu-launch,
.game-play-zone .chaozhi-launch,
.game-play-zone .chaojie-launch {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}

.game-status-ops {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.45;
	max-width: none;
}

@media (max-width: 720px) {
	.game-rules-steps > li {
		border-right: none;
	}

	.game-rules-head .muted {
		max-width: none;
	}
}

.checkin-calendar {
	margin-top: 16px;
	padding: 16px 16px 14px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background:
		radial-gradient(ellipse 80% 60% at 0% 0%, var(--glow-primary), transparent 55%),
		var(--surface-solid);
}

.checkin-cal-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.checkin-cal-title h2 {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--console-title);
	font-family: var(--font-num);
}

.checkin-cal-kicker {
	margin: 0 0 2px;
	font-size: 12px;
}

.checkin-cal-nav {
	display: flex;
	gap: 6px;
}

.checkin-cal-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 0 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface-solid);
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.checkin-cal-nav-btn:hover {
	color: var(--primary);
	border-color: var(--primary-border);
	background: var(--primary-soft);
}

.checkin-cal-body {
	margin-top: 12px;
}

.checkin-cal-weekdays,
.checkin-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	column-gap: 4px;
	row-gap: 4px;
	width: 100%;
}

.checkin-cal-weekdays {
	margin: 0 0 6px;
}

.checkin-cal-weekdays span {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--muted);
	line-height: 1.8;
}

.checkin-cal-cell {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-self: stretch;
	position: relative;
	box-sizing: border-box;
	border-radius: 10px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--text);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.checkin-cal-day {
	font-family: var(--font-num);
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	z-index: 1;
}

.checkin-cal-cell:not(.is-empty):not(.is-checked) {
	background: var(--surface-muted);
	border-color: color-mix(in srgb, var(--border) 70%, transparent);
}

.checkin-cal-cell.is-empty {
	background: transparent;
	border-color: transparent;
	pointer-events: none;
}

.checkin-cal-cell.is-checked {
	background: var(--primary-soft);
	border-color: var(--primary-border);
	color: var(--primary);
}

.checkin-cal-cell.is-checked::after {
	content: "";
	position: absolute;
	right: 5px;
	bottom: 5px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--primary);
	opacity: 0.9;
}

.checkin-cal-cell.is-today {
	box-shadow: inset 0 0 0 1.5px var(--primary);
}

.checkin-cal-cell.is-today:not(.is-checked) {
	background: var(--surface-solid);
	border-color: var(--primary-border);
	color: var(--primary);
}

.checkin-cal-cell.is-today.is-checked {
	background: color-mix(in srgb, var(--primary) 14%, var(--primary-soft));
}

.checkin-cal-legend {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 12px 0 0;
	font-size: 12px;
}

.checkin-cal-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 4px;
	vertical-align: -2px;
	margin-right: 2px;
	border: 1px solid transparent;
}

.checkin-cal-swatch.is-checked {
	background: var(--primary-soft);
	border-color: var(--primary-border);
}

.checkin-cal-swatch.is-today {
	background: var(--surface-solid);
	box-shadow: inset 0 0 0 1.5px var(--primary);
	border-color: var(--primary-border);
}

@media (max-width: 520px) {
	.checkin-calendar {
		padding: 12px;
	}

	.checkin-cal-cell {
		border-radius: 8px;
	}

	.checkin-cal-day {
		font-size: 14px;
	}

	.checkin-cal-cell.is-checked::after {
		right: 4px;
		bottom: 4px;
		width: 4px;
		height: 4px;
	}
}

/* 潮汐日历标记点 */
.checkin-cal-cell {
	flex-direction: column;
	gap: 4px;
	cursor: pointer;
	font: inherit;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
}

.checkin-cal-cell:disabled,
.checkin-cal-cell.is-empty {
	cursor: default;
}

.tide-cal-marks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3px;
	max-width: 94%;
	line-height: 0;
	z-index: 1;
}

.tide-mark {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--muted);
	box-shadow:
		0 0 0 1.5px #fff,
		0 1px 2px rgba(15, 40, 70, 0.28);
	opacity: 1;
}

/* 高饱和色点：在浅蓝底上仍清晰可辨 */
.tide-mark-checkin { background: #1d6ef5; }
.tide-mark-shore { background: #00b894; }
.tide-mark-seal { background: #6c5ce7; }
.tide-mark-tide_in { background: #fd7e14; }
.tide-mark-series_update { background: #a855f7; }
.tide-mark-publish { background: #e11d48; }

.checkin-cal-cell.is-checked::after {
	display: none;
}

.tide-cal-legend .tide-mark-legend {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.tide-cal-legend .tide-mark {
	width: 8px;
	height: 8px;
}

.tide-day-modal .modal-card {
	max-width: 420px;
	width: min(92vw, 420px);
}

.tide-day-events {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tide-day-event {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 8px 10px;
	align-items: baseline;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--surface-muted);
	border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.tide-day-event-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--primary);
	white-space: nowrap;
}

.tide-day-event-title {
	color: var(--text);
	text-decoration: none;
	font-size: 13px;
	word-break: break-word;
}

a.tide-day-event-title:hover {
	color: var(--primary);
}

.tide-day-event-at {
	font-size: 11px;
	white-space: nowrap;
}

.tide-day-empty {
	margin: 8px 0 0;
}

.tide-report-quote {
	margin-top: 16px;
}

.tide-report-quote-title {
	margin: 0 0 10px;
	padding: 0;
	border: none;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text);
}

.tide-report-period {
	margin: 0 0 14px;
	font-size: 13px;
}

.tide-report-stats {
	grid-template-columns: 1fr 1fr;
	margin-bottom: 4px;
}

.tide-report-quote-text {
	margin: 0;
	padding: 12px 14px;
	border-left: 3px solid var(--primary);
	background: var(--primary-soft);
	border-radius: 0 10px 10px 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text);
}

.diejian-source-link,
.pailang-source-links {
	margin-top: 10px;
	font-size: 12px;
}

.pailang-source-links a,
.diejian-source-link a {
	color: var(--primary);
	text-decoration: none;
}

.pailang-source-links a:hover,
.diejian-source-link a:hover {
	text-decoration: underline;
}

.console-menu-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	padding: 0 6px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	background: var(--badge-solid);
	color: var(--btn-on-primary);
}

.menu-ico {
	flex-shrink: 0;
	vertical-align: middle;
}

.gamification-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.article-author {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	line-height: 1.4;
}

.author-level-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	height: 22px;
	border-radius: 999px;
	background: var(--level-soft, var(--primary-soft));
	border: 1px solid var(--level-border, var(--primary-border));
	color: var(--level-text, var(--primary));
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	box-sizing: border-box;
}

/* 作家身份：与等级软标同高。圆底白 V，四档用饱和亮色 */
.writer-title-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0 8px 0 4px;
	height: 22px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	box-sizing: border-box;
	background: var(--writer-soft, #f0f2f5);
	border: 1px solid var(--writer-border, #c9ced4);
	color: var(--writer-text, #4a5568);
}

.writer-title-badge::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	border-radius: 50%;
	background-color: var(--writer-mark, var(--writer-text));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' d='M3.7 4.85 8 11.2 12.3 4.85'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px 15px;
}

.writer-title-trainee {
	--writer-soft: #d7f8e3;
	--writer-border: #34d399;
	--writer-text: #067a45;
	--writer-mark: #059669;
}

.writer-title-associate {
	--writer-soft: #d4f7fb;
	--writer-border: #22d3ee;
	--writer-text: #0c7490;
	--writer-mark: #0891b2;
}

.writer-title-writer {
	--writer-soft: #e5edff;
	--writer-border: #7c93ff;
	--writer-text: #2d46c9;
	--writer-mark: #3451e8;
}

.writer-title-master {
	--writer-soft: #fff6d0;
	--writer-border: #f5c04a;
	--writer-text: #b45309;
	--writer-mark: #c97800;
}

html[data-theme="dark"] .writer-title-trainee {
	--writer-soft: #163528;
	--writer-border: #34d399;
	--writer-text: #6ee7b7;
	--writer-mark: #059669;
}

html[data-theme="dark"] .writer-title-associate {
	--writer-soft: #12383a;
	--writer-border: #22d3ee;
	--writer-text: #67e8f9;
	--writer-mark: #0891b2;
}

html[data-theme="dark"] .writer-title-writer {
	--writer-soft: #1c2450;
	--writer-border: #818cf8;
	--writer-text: #c7d2fe;
	--writer-mark: #4f46e5;
}

html[data-theme="dark"] .writer-title-master {
	--writer-soft: #3a2c10;
	--writer-border: #fbbf24;
	--writer-text: #fcd34d;
	--writer-mark: #c97800;
}

.level-guide-list {
	list-style: none;
	display: grid;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
}

.level-guide-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-left: 3px solid var(--level-solid, var(--border));
	border-radius: 12px;
	background: linear-gradient(90deg, var(--level-soft, var(--surface-muted)) 0%, var(--surface-muted) 48%);
}

.level-guide-item.is-current {
	border-color: var(--level-border, var(--primary-border));
	border-left-color: var(--level-solid, var(--primary));
	background: linear-gradient(90deg, var(--level-soft, var(--primary-soft)) 0%, var(--surface-muted) 72%);
	box-shadow: var(--shadow);
}

.level-guide-item.is-locked {
	opacity: 0.92;
}

.level-guide-badge {
	position: relative;
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	box-shadow: none;
	overflow: visible;
}

.level-guide-badge .shore-medal-lg {
	width: 60px;
}

.level-guide-badge .shore-medal-lg img {
	width: 60px;
	height: 60px;
}

.level-guide-item.is-locked .level-guide-badge {
	filter: grayscale(0.28) saturate(0.85);
	opacity: 0.9;
}

.level-guide-item.is-current .level-guide-badge {
	filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--level-solid, #7b3bb8) 35%, transparent));
}

.level-guide-item.is-current .level-guide-tag:not(.is-muted) {
	background: var(--level-solid, var(--primary));
	color: var(--level-on-solid, var(--btn-on-primary));
}

.level-guide-body {
	min-width: 0;
	flex: 1;
}

.level-guide-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 4px;
}

.level-guide-head strong {
	font-size: 16px;
	color: var(--level-text, inherit);
}

.level-guide-item.is-locked .level-guide-head strong {
	color: inherit;
}

.level-guide-tag {
	display: inline-flex;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--primary);
	color: var(--btn-on-primary);
	font-size: 11px;
	font-weight: 700;
}

.level-guide-tag.is-muted {
	background: var(--chip-muted);
	color: var(--muted);
}

.level-guide-xp {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.reward-rules {
	margin-top: 20px;
	padding: 20px 20px 8px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: linear-gradient(180deg, var(--bg-0) 0%, var(--surface-solid) 40%);
}

.reward-rules .form-section-head {
	margin-bottom: 16px;
	padding-bottom: 12px;
	align-items: flex-end;
}

.reward-rules .form-section-head h2 {
	font-size: var(--fs-xl);
	font-family: var(--display);
	font-weight: 600;
}

.reward-rules .form-section-head .muted {
	font-size: 13px;
	line-height: 1.5;
	max-width: 28rem;
}

.reward-rules .admin-table-wrap {
	border: none;
	border-radius: 0;
	background: transparent;
	overflow: visible;
	margin: 0 -4px;
}

.reward-rules-table {
	margin-top: 0;
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
}

.reward-rules-table th,
.reward-rules-table td {
	padding: 14px 16px;
	font-size: 14px;
	vertical-align: middle;
	border-bottom: 1px solid var(--border);
}

.reward-rules-table thead th {
	padding-top: 4px;
	padding-bottom: 12px;
	background: transparent;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700;
	border-bottom-color: var(--border);
}

.reward-rules-table tbody tr:last-child td {
	border-bottom: none;
}

.reward-rules-table tbody tr:hover td {
	background: var(--table-hover);
}

.reward-rules-table th:nth-child(1),
.reward-rules-table td:nth-child(1) {
	width: 46%;
	text-align: left;
	font-weight: 600;
}

.reward-rules-table th:nth-child(2),
.reward-rules-table td:nth-child(2),
.reward-rules-table th:nth-child(3),
.reward-rules-table td:nth-child(3) {
	width: 27%;
	text-align: left;
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--success);
}

.reward-rules-table thead th:nth-child(2),
.reward-rules-table thead th:nth-child(3) {
	color: var(--muted);
	font-weight: 700;
}

.ledger-table {
	margin-top: 0;
	table-layout: fixed;
	width: 100%;
}

.ledger-table th,
.ledger-table td {
	padding: 12px 18px;
	vertical-align: middle;
}

.ledger-table thead th {
	background: var(--table-head);
	font-weight: 700;
	white-space: nowrap;
}

.ledger-table .col-time {
	width: 168px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ledger-table .col-event {
	width: 22%;
	overflow: hidden;
}

.ledger-table .col-currency {
	width: 96px;
	white-space: nowrap;
}

.ledger-table .col-delta,
.ledger-table .col-balance {
	width: 108px;
	white-space: nowrap;
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.ledger-table .col-delta.is-plus {
	color: var(--success);
}

.ledger-table .col-delta.is-minus {
	color: var(--danger);
}

.ledger-table .col-remark {
	width: 26%;
	font-size: 13px;
	overflow: hidden;
}

.profile-field {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 12px;
	padding: 14px 16px;
	border-top: 1px solid var(--border);
	align-items: center;
}

.profile-field:first-child {
	border-top: none;
}

.profile-field dt {
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
}

.profile-field dd {
	font-size: 15px;
	font-weight: 600;
	word-break: break-all;
}

.profile-field-bio {
	align-items: start;
}

.profile-field-bio dd {
	font-weight: 500;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
}

.profile-edit-form input:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	background: var(--surface-muted);
}

.profile-edit {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.avatar,
.avatar-fallback {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 10px;
}

.avatar-fallback {
	display: grid;
	place-items: center;
	background: var(--primary);
	color: var(--btn-on-primary);
	font-size: 28px;
	font-weight: 700;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 16px;
	font-size: 14px;
	color: var(--text);
	background: transparent;
}

.data-table th,
.data-table td {
	padding: 10px 8px;
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
	color: inherit;
}

.data-table th {
	color: var(--muted);
	font-size: 12px;
	background: var(--table-head);
}

.data-table tbody td {
	color: var(--text);
	background: transparent;
}

.data-table tbody tr:hover td {
	background: var(--table-hover);
}

.my-articles-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.my-articles-table {
	table-layout: fixed;
	width: max(100%, 960px);
	min-width: 960px;
	border-collapse: separate;
	border-spacing: 0;
}

.my-articles-table .col-title,
.articles-table .col-title {
	width: 240px;
	min-width: 200px;
	max-width: 280px;
}

.my-articles-table .col-title {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--surface-muted);
	box-shadow: 1px 0 0 var(--border);
}

.my-articles-table thead .col-title {
	z-index: 3;
	background: var(--table-head);
}

.my-articles-table tbody tr:hover .col-title {
	background: var(--table-head);
}

.title-ellipsis {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.cell-overflow-tip {
	position: fixed;
	z-index: 80;
	max-width: min(360px, calc(100vw - 24px));
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--surface-solid);
	color: var(--text);
	box-shadow: var(--shadow);
	font-size: 13px;
	line-height: 1.5;
	word-break: break-word;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}

.cell-overflow-tip.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.cell-overflow-tip {
		transition: none;
	}
}

.my-articles-table .col-type {
	width: 72px;
	white-space: nowrap;
}

.my-articles-table .col-status {
	width: 120px;
	white-space: nowrap;
}

.my-articles-table .col-published {
	width: 148px;
	white-space: nowrap;
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	color: var(--muted);
}

.my-articles-table .col-stats {
	width: 180px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
	font-size: 13px;
}

.my-articles-table .col-actions {
	position: sticky;
	right: 0;
	z-index: 2;
	width: 220px;
	min-width: 200px;
	white-space: normal;
	background: var(--surface-muted);
	box-shadow: -1px 0 0 var(--border);
}

.my-articles-table thead .col-actions {
	z-index: 3;
	background: var(--table-head);
}

.my-articles-table tbody tr:hover .col-actions {
	background: var(--table-head);
}

.bookmarks-table .col-author {
	width: 100px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bookmarks-table .col-date {
	width: 110px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
	font-size: 13px;
}

.bookmarks-table .col-actions {
	width: 160px;
}

.quote-keeps-table .col-article {
	width: 240px;
	min-width: 200px;
	max-width: 280px;
}

.quote-keeps-table .col-author {
	width: 100px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.quote-keeps-table .col-actions {
	width: 200px;
	min-width: 200px;
	white-space: nowrap;
}

.my-articles-table .col-actions .row-actions {
	flex-wrap: wrap;
}

.my-articles-table .col-actions .row-actions form {
	display: inline-flex;
	margin: 0;
}

.quote-keeps-table .col-actions .row-actions {
	flex-wrap: nowrap;
}

.articles-table {
	table-layout: fixed;
	width: 100%;
	margin-top: 0;
}

.articles-table th,
.articles-table td {
	padding: 12px 14px;
	vertical-align: middle;
}

.articles-table thead th {
	background: var(--table-head);
	font-weight: 700;
	border-bottom: 1px solid var(--border);
}

.articles-table tbody tr:hover {
	background: var(--table-hover);
}

.admin-articles-table .col-author {
	width: 112px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.admin-articles-table .col-type {
	width: 72px;
	white-space: nowrap;
}

.admin-articles-table .col-status {
	width: 240px;
}

.admin-articles-table .col-actions {
	width: 120px;
	white-space: nowrap;
}

.admin-articles-table .col-actions .row-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: nowrap;
}

.admin-articles-table .status-cell {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex-wrap: nowrap;
}

.admin-articles-table .machine-verdict {
	display: inline;
	margin: 0;
	font-size: 12px;
	line-height: 1.35;
	white-space: nowrap;
	flex-shrink: 0;
}

.admin-comments-table {
	table-layout: fixed;
	width: max(100%, 1180px);
	min-width: 1180px;
	border-collapse: separate;
	border-spacing: 0;
}

.admin-comments-table .col-user {
	position: sticky;
	left: 0;
	z-index: 2;
	width: 132px;
	min-width: 132px;
	max-width: 160px;
	background: var(--surface-muted);
	box-shadow: 1px 0 0 var(--border);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.admin-comments-table thead .col-user {
	z-index: 3;
	background: var(--table-head);
}

.admin-comments-table tbody tr:hover .col-user {
	background: var(--table-head);
}

.admin-comments-table .col-user time {
	display: block;
	margin-top: 2px;
	font-size: 12px;
}

.admin-comments-table .col-article {
	width: 280px;
	min-width: 240px;
	white-space: normal;
	word-break: break-word;
}

.admin-comments-table .col-content {
	width: 420px;
	min-width: 360px;
}

.admin-comments-table .comment-mod-text {
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.admin-comments-table .col-status {
	width: 180px;
	min-width: 160px;
}

.admin-comments-table .col-actions {
	position: sticky;
	right: 0;
	z-index: 2;
	width: 168px;
	min-width: 168px;
	white-space: nowrap;
	background: var(--surface-muted);
	box-shadow: -1px 0 0 var(--border);
}

.admin-comments-table thead .col-actions {
	z-index: 3;
	background: var(--table-head);
}

.admin-comments-table tbody tr:hover .col-actions {
	background: var(--table-head);
}

.admin-comments-table .row-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.admin-comments-table .review-reason {
	display: block;
	margin-top: 4px;
	font-size: 12px;
}

.review-detail-stack {
	display: block;
	width: 100%;
}

.review-detail-stack > * {
	display: block;
	width: 100%;
	max-width: 100%;
	float: none;
	clear: both;
}

.review-toolbar {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--table-head);
}

.review-toolbar-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 16px;
}

.review-toolbar-field {
	display: grid;
	gap: 6px;
	min-width: 180px;
	flex: 0 1 220px;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	margin: 0;
}

.review-toolbar-field select {
	width: 100%;
	height: var(--control-h);
	padding: 0 12px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--surface-solid);
	font: inherit;
	color: var(--text);
}

.review-toolbar-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-left: auto;
}

.review-toolbar-reason {
	display: grid;
	gap: 6px;
	margin: 12px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
}

.review-toolbar-reason textarea {
	width: 100%;
	min-height: 64px;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--surface-solid);
	font: inherit;
	color: var(--text);
	resize: vertical;
}

.review-toolbar-tip {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.45;
}

.review-detail-article {
	min-width: 0;
	width: 100%;
	padding-top: 4px;
	border-top: 1px solid var(--border);
}

.review-detail-header {
	margin: 16px 0;
}

.review-detail-header h2 {
	margin: 10px 0 8px;
	font-size: 22px;
	line-height: 1.35;
	word-break: break-word;
}

.review-detail-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.review-detail-meta {
	margin: 0;
	font-size: 13px;
}

.review-detail-notes {
	margin: 12px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--table-head);
	display: grid;
	gap: 8px;
}

.review-detail-notes p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text);
	word-break: break-word;
}

.review-detail-notes strong {
	display: inline-block;
	min-width: 4.5em;
	margin-right: 8px;
	color: var(--muted);
	font-weight: 600;
}

@media (max-width: 720px) {
	.review-toolbar-actions {
		margin-left: 0;
		width: 100%;
	}
}

.review-modal-summary {
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--table-head);
	margin-bottom: 4px;
}

.review-modal-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	word-break: break-word;
}

.review-modal-meta,
.review-modal-machine-row,
.review-modal-tip {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
}

.review-modal-machine-row,
.review-modal-summary .review-reason-hint {
	margin-top: 6px;
}

.review-modal-machine-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
}

.review-modal-tip {
	margin-top: 4px;
}

.review-modal-foot {
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.review-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	min-width: 0;
}

.review-reason-input {
	flex: 1;
	min-width: 0;
	width: 0;
	height: var(--control-h);
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--surface-solid);
	font-size: 13px;
	font-family: inherit;
	color: var(--text);
}

.review-reason-hint {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.4;
}

.review-actions .btn {
	flex-shrink: 0;
	height: var(--control-h);
	padding-top: 0;
	padding-bottom: 0;
	line-height: 1;
}

.status-pill.is-draft {
	background: var(--accent-soft);
	color: var(--accent);
}

.status-pill.is-pending {
	background: var(--primary-soft);
	color: var(--primary);
}

.status-pill.is-rejected {
	background: var(--danger-bg);
	color: var(--danger);
}

.reject-reason-body {
	margin: 12px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--table-head);
	font-size: 14px;
	line-height: 1.55;
	color: var(--text);
	white-space: pre-wrap;
	word-break: break-word;
}

.machine-verdict {
	display: block;
	margin-top: 4px;
	font-size: 11px;
}

.users-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.users-filter > label {
	display: flex;
	align-items: center;
	margin: 0;
}

.users-filter > label:not(.users-filter-q) {
	flex: 0 0 var(--filter-select-w);
	width: var(--filter-select-w);
	max-width: 100%;
}

.users-filter-q {
	flex: 0 0 var(--filter-q-w);
	width: var(--filter-q-w);
	max-width: 100%;
}

.users-filter input[type="search"],
.users-filter input[type="text"],
.users-filter input[type="date"],
.users-filter select,
.users-filter .btn {
	height: var(--control-h);
	box-sizing: border-box;
	margin: 0;
	padding: 0 12px;
	border-radius: 8px;
	border: 1px solid var(--border);
	font-size: 13px;
	font-weight: 600;
	line-height: calc(var(--control-h) - 2px);
	font-family: inherit;
}

.users-filter input[type="search"],
.users-filter input[type="text"],
.users-filter input[type="date"],
.users-filter select {
	width: 100%;
	background: var(--surface-solid);
	color: var(--text);
	font-weight: 500;
}

.users-filter select {
	padding-right: 28px;
}

.users-filter .btn {
	flex: 0 0 auto;
}

.users-filter.notices-filter,
.users-filter.articles-filter {
	flex-wrap: nowrap;
}

.users-filter.notices-filter > .users-filter-q,
.users-filter.articles-filter > .users-filter-q {
	flex: 1 1 160px;
	width: auto;
	min-width: 120px;
}

.users-filter.notices-filter > label:not(.users-filter-q),
.users-filter.articles-filter > label:not(.users-filter-q) {
	flex: 1 1 112px;
	width: auto;
	min-width: 108px;
	max-width: 160px;
}

.users-filter .btn-sm {
	padding: 0 14px;
	font-size: 13px;
}

/* 用户中心 / 管理后台：按钮与单行输入、下拉统一高度 */
.console-main .btn:not(.ai-polish-btn):not([data-word-import]),
.modal-dialog .btn {
	height: var(--control-h);
	min-height: var(--control-h);
	padding-top: 0;
	padding-bottom: 0;
	line-height: 1;
	appearance: none;
	-webkit-appearance: none;
}

.modal-dialog .btn {
	border-radius: 8px;
}

.console-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.modal-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.console-main select,
.modal-dialog select {
	height: var(--control-h);
	min-height: var(--control-h);
	padding-top: 0;
	padding-bottom: 0;
	line-height: calc(var(--control-h) - 2px);
}

.console-main textarea,
.modal-dialog textarea {
	height: auto;
	min-height: 0;
	line-height: 1.5;
}

.users-table {
	table-layout: fixed;
	width: max(100%, 1120px);
	min-width: 1120px;
	border-collapse: separate;
	border-spacing: 0;
}

.users-table .col-user {
	position: sticky;
	left: 0;
	z-index: 2;
	width: 148px;
	min-width: 148px;
	max-width: 180px;
	background: var(--surface-muted);
	box-shadow: 1px 0 0 var(--border);
}

.users-table thead .col-user {
	z-index: 3;
	background: var(--table-head);
}

.users-table tbody tr:hover .col-user {
	background: var(--table-head);
}

.users-table .col-nick {
	width: 140px;
	min-width: 120px;
}

.users-table .col-level {
	width: 168px;
	min-width: 160px;
	white-space: nowrap;
}

.users-table .col-level .author-level-badge {
	max-width: 100%;
}

.users-table .col-writer {
	width: 100px;
	min-width: 96px;
	white-space: nowrap;
}

.users-table .col-email {
	width: 220px;
	min-width: 200px;
}

.users-table .col-role,
.users-table .col-status {
	width: 100px;
	min-width: 96px;
	white-space: nowrap;
}

.users-table .col-actions {
	position: sticky;
	right: 0;
	z-index: 2;
	width: 240px;
	min-width: 220px;
	white-space: normal;
	background: var(--surface-muted);
	box-shadow: -1px 0 0 var(--border);
}

.users-table thead .col-actions {
	z-index: 3;
	background: var(--table-head);
}

.users-table tbody tr:hover .col-actions {
	background: var(--table-head);
}

.user-actions {
	flex-wrap: wrap;
	gap: 4px 8px;
}

.users-table .col-user .title-ellipsis,
.users-table .col-nick .title-ellipsis,
.users-table .col-email .title-ellipsis {
	max-width: none;
}

#user-view-modal {
	width: min(680px, calc(100vw - 32px));
}

.user-view-dl {
	display: grid;
	gap: 16px;
	margin: 0;
}

.user-view-group h3 {
	margin: 0 0 8px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.user-view-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.user-view-grid--3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.user-view-grid > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface-muted);
}

.user-view-grid > div.is-wide {
	grid-column: 1 / -1;
}

.user-view-dl dt {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.3;
}

.user-view-dl dd {
	margin: 0;
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	word-break: break-word;
	white-space: pre-wrap;
}

.user-view-dl dd.is-empty {
	color: var(--muted);
	font-weight: 500;
}

.user-view-dl dd.is-chip {
	align-self: flex-start;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
}

.user-view-dl dd.is-on {
	background: var(--success-bg);
	color: var(--success);
}

.user-view-dl dd.is-off {
	background: var(--danger-bg);
	color: var(--danger);
}

.user-view-dl dd.is-admin {
	background: var(--primary-soft);
	color: var(--primary);
}

@media (max-width: 560px) {
	.user-view-grid,
	.user-view-grid--3 {
		grid-template-columns: 1fr;
	}
}

.row-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.row-actions form {
	display: inline;
}

.row-actions button,
.row-actions a {
	border: none;
	background: transparent;
	color: var(--primary);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	padding: 0;
}

.row-actions .danger {
	color: var(--danger);
}

.admin-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	margin-bottom: 0;
	font-size: 13px;
}

.admin-toolbar + .pager {
	margin-top: 12px;
}

.admin-table-wrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface-muted);
}

/* 包裹层已提供外边距，避免 .data-table 的 margin-top 在表头上方留白 */
.admin-table-wrap .data-table {
	margin-top: 0;
}

.columns-table {
	margin-top: 0;
	table-layout: fixed;
	width: 100%;
}

.columns-table th,
.columns-table td {
	padding: 12px 14px;
	vertical-align: middle;
}

.columns-table thead th {
	background: var(--table-head);
	font-weight: 700;
	border-bottom: 1px solid var(--border);
}

.columns-table tbody tr:hover {
	background: var(--table-hover);
}

.columns-table .col-sort {
	width: 72px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.columns-table .col-code {
	width: 128px;
}

.columns-table .col-name {
	width: 120px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.columns-table .col-desc {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
}

.columns-table .col-status {
	width: 96px;
	white-space: nowrap;
}

.columns-table .col-actions {
	width: 132px;
	white-space: nowrap;
}

.columns-table .col-actions .row-actions {
	flex-wrap: nowrap;
}

.columns-table .col-actions .row-actions form {
	display: inline-flex;
	margin: 0;
}

.code-pill {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--chip-muted);
	border: 1px solid var(--border);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 600;
	color: var(--text);
}

.status-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	border: none;
	box-shadow: none;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	vertical-align: middle;
}

button.status-pill.status-pill-btn {
	margin: 0;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
	background: inherit;
	border: none;
	box-shadow: none;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

button.status-pill.status-pill-btn.is-rejected {
	background: var(--danger-bg);
	color: var(--danger);
}

button.status-pill.status-pill-btn.is-rejected:hover {
	filter: brightness(0.96);
	color: var(--danger);
}

button.status-pill.status-pill-btn.is-rejected:focus-visible {
	outline: 2px solid var(--danger);
	outline-offset: 2px;
}

.status-pill.is-on {
	background: var(--success-bg);
	color: var(--success);
}

.status-pill.is-off {
	background: var(--chip-muted);
	color: var(--muted);
}

.link-btn {
	border: none;
	background: transparent;
	color: var(--primary);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	padding: 0;
	font-family: inherit;
	text-decoration: none;
}

a.link-btn:hover,
button.link-btn:hover:not(:disabled) {
	text-decoration: underline;
}

.link-btn:disabled,
.link-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	text-decoration: none;
	color: var(--muted);
}

.modal-dialog {
	border: none;
	padding: 0;
	background: transparent;
	width: min(560px, calc(100vw - 32px));
	max-width: calc(100vw - 32px);
	margin: auto;
	position: fixed;
	inset: 0;
	height: fit-content;
	max-height: calc(100vh - 32px);
	overflow: auto;
}

/* 河岸边 8 款游戏弹窗统一尺寸 */
.game-play-modal {
	width: min(720px, calc(100vw - 24px));
	max-width: calc(100vw - 24px);
	max-height: calc(100vh - 24px);
}

@media (max-width: 640px) {
	.game-play-modal {
		width: min(720px, calc(100vw - 16px));
		max-width: calc(100vw - 16px);
		max-height: calc(100vh - 16px);
	}
}

.modal-dialog:not([open]) {
	display: none;
}

.modal-dialog[open] {
	display: block;
}

.modal-dialog::backdrop {
	background: var(--overlay);
	backdrop-filter: blur(2px);
}

.modal-card {
	--modal-radius: 16px;
	margin: 0;
	background: var(--surface-solid);
	border: 1px solid var(--border);
	border-radius: var(--modal-radius);
	box-shadow: var(--shadow);
	/* visible：避免 flatpickr 日历被 overflow 裁切；滚动交给 .modal-dialog */
	overflow: visible;
}

.modal-dialog:has(.flatpickr-calendar.open) {
	overflow: visible;
}

.modal-dialog .flatpickr-calendar {
	z-index: 50;
}

.modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--border);
	background: var(--surface-muted);
	border-radius: var(--modal-radius, 16px) var(--modal-radius, 16px) 0 0;
}

.modal-head h2 {
	font-family: var(--display);
	font-size: var(--fs-2xl);
	font-weight: 600;
	margin: 0;
}

.modal-close {
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--muted);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.modal-close:hover {
	background: var(--primary-soft);
	color: var(--primary);
}

.modal-close:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.modal-body {
	padding: 18px 20px 8px;
	display: grid;
	gap: 14px;
}

.modal-body .stack-form,
.modal-card.stack-form {
	margin-top: 0;
	gap: 0;
}

.modal-card.stack-form > .modal-body {
	display: grid;
	gap: 14px;
}

.modal-foot {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 14px;
	padding: 14px 20px 18px;
	border-top: 1px solid var(--border);
	background: var(--surface-solid);
	border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px);
}

.schedule-modal-body {
	gap: 16px;
}

.schedule-time-form {
	margin-top: 0;
	gap: 8px;
}

.schedule-time-form .review-modal-tip {
	margin-top: 2px;
}

.schedule-modal-foot {
	gap: 12px;
}

.schedule-action-group {
	display: flex;
	align-items: center;
	gap: 12px;
}

.schedule-cancel-form {
	margin: 0;
	display: flex;
}

.schedule-cancel-btn {
	color: var(--danger);
	border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
	background: var(--danger-bg);
}

.schedule-cancel-btn:hover {
	filter: brightness(0.97);
}

.stat-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 12px;
}

.stat-row-3 {
	grid-template-columns: repeat(3, 1fr);
}

.stat-row-4 {
	grid-template-columns: repeat(4, 1fr);
}

.stat-section {
	margin-top: 22px;
}

.stat-section:first-of-type {
	margin-top: 8px;
}

.stat-section-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--console-title, var(--text));
	letter-spacing: 0.02em;
}

.stat-card {
	padding: 16px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--surface-muted);
	display: grid;
	gap: 4px;
	color: var(--muted);
	font-size: 13px;
	text-decoration: none;
}

a.stat-card.is-link {
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

a.stat-card.is-link:hover {
	border-color: color-mix(in srgb, var(--accent, #2f6fed) 45%, var(--border));
	background: var(--surface);
}

.stat-card.is-alert {
	border-color: color-mix(in srgb, #c45c4a 40%, var(--border));
	background: color-mix(in srgb, #c45c4a 8%, var(--surface-muted));
}

.stat-card.is-alert .stat-num {
	color: #b04536;
}

.stat-num {
	font-size: 28px;
	font-weight: 800;
	color: var(--text);
	line-height: 1.15;
	letter-spacing: -0.025em;
}

.friend-links-admin-table .col-sort {
	width: 64px;
	text-align: center;
}

.friend-links-admin-table .col-name {
	width: 22%;
	max-width: 0;
}

.friend-links-admin-table .col-url {
	width: 34%;
	max-width: 0;
}

.friend-links-admin-table .col-expire {
	width: 120px;
	white-space: nowrap;
	font-size: 13px;
}

.friend-links-admin-table .col-status {
	width: 80px;
}

.friend-links-admin-table .col-actions {
	width: 120px;
}

.faqs-admin-table {
	table-layout: fixed;
	width: 100%;
}

.faqs-admin-table .col-sort {
	width: 56px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.faqs-admin-table .col-name {
	width: auto;
	max-width: none;
}

.faqs-admin-table .col-name .title-ellipsis {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.faqs-admin-table .col-category {
	width: 64px;
	white-space: nowrap;
	text-align: center;
}

.faqs-admin-table .col-status {
	width: 72px;
	white-space: nowrap;
	text-align: center;
}

.faqs-admin-table .col-actions {
	width: 112px;
	white-space: nowrap;
}

.ai-ask-tabs {
	gap: 8px;
}

.ai-ask-admin-table,
.ai-ask-down-table {
	table-layout: fixed;
	width: 100%;
}

.ai-ask-admin-table .col-id,
.ai-ask-down-table .col-id {
	width: 72px;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
	white-space: nowrap;
}

.ai-ask-admin-table .col-title {
	width: auto;
	max-width: none;
}

.ai-ask-admin-table .col-owner {
	width: 100px;
	white-space: nowrap;
}

.ai-ask-admin-table .col-count {
	width: 72px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ai-ask-admin-table .col-time,
.ai-ask-down-table .col-time {
	width: 148px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	color: var(--muted);
}

.ai-ask-admin-table .col-actions {
	width: 72px;
	white-space: nowrap;
}

.ai-ask-down-table .col-session {
	width: 80px;
	white-space: nowrap;
}

.ai-ask-down-table .col-note {
	width: 22%;
	max-width: 0;
}

.ai-ask-down-table .col-summary {
	width: auto;
	max-width: none;
}

.ai-ask-session-detail {
	margin-top: 20px;
	padding: 16px 18px 18px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface-muted);
}

.ai-ask-session-modal {
	width: min(720px, calc(100vw - 32px));
}

.ai-ask-session-modal .modal-body {
	padding-top: 4px;
}

.ai-ask-session-meta {
	margin: 0 0 12px;
	font-size: 13px;
}

.ai-ask-session-modal .ask-turn-note {
	margin: 8px 0 0;
	font-size: 13px;
}

.ai-ask-session-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.ai-ask-session-head h2 {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--console-title);
}

.ai-ask-admin-history {
	margin: 0;
	padding: 0;
	max-height: min(560px, 62vh);
	overflow: auto;
	list-style: none;
}

.ai-ask-admin-history > li {
	margin: 0 0 12px;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
}

.ai-ask-admin-history > li:last-child {
	margin-bottom: 0;
}

.empty-state {
	text-align: center;
	padding: 48px 20px;
	color: var(--muted);
	border: 1px dashed var(--border);
	border-radius: 12px;
}

.empty-state-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 16px;
}

.empty-state h2 {
	color: var(--text);
	margin-bottom: 8px;
}

.pager {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
	color: var(--muted);
	font-size: 14px;
}

.pager-btn,
.pager-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
}

.pager-btn:hover,
.pager-num:hover {
	border-color: var(--primary-border);
	color: var(--primary);
	opacity: 1;
}

.pager-num.is-current {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--btn-on-primary);
}

.pager-btn.is-disabled {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}

.pager-ellipsis {
	padding: 0 4px;
	color: var(--muted);
}

@media (max-width: 800px) {
	.site-nav {
		order: 3;
		width: 100%;
		justify-content: flex-start;
	}

	.profile-edit,
	.stat-row,
	.stat-row-3,
	.stat-row-4,
	.console-layout {
		grid-template-columns: 1fr;
	}

	.console-aside {
		position: static;
	}

	.article-page,
	.panel {
		padding: 18px;
	}

	.page-layout {
		grid-template-columns: 1fr;
	}

	.shore-page {
		padding-top: 16px;
	}

	.shore-masthead {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		margin-bottom: 16px;
		padding-bottom: 14px;
	}

	.shore-masthead.is-inline {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 10px;
	}

	.shore-masthead.is-inline .shore-feed-tabs {
		margin-left: 0;
		width: 100%;
	}

	.shore-lead {
		max-width: none;
		padding-bottom: 0;
	}

	.shore-layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.shore-feed {
		gap: 28px;
	}

	.shore-feature-link,
	.shore-feature-body {
		min-height: 300px;
	}

	.shore-feature-body {
		padding: 28px 22px 24px;
	}

	.shore-tide-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.shore-row-link {
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 14px;
		padding: 16px 0;
	}

	.shore-row-media {
		width: 104px;
	}

	.shore-card-body h2,
	.shore-row-body h2 {
		font-size: var(--fs-xl);
	}

	.shore-row-summary {
		display: none;
		min-height: 0;
	}

	.page-aside {
		position: static;
		order: 2;
	}
}

/* —— 全文搜索（ES 风格） —— */
.search-page {
	padding-top: 24px;
	padding-bottom: 56px;
}

/* 与文章页一致：左右边距交给 site-main，避免双重 padding 导致错位 */
.search-layout {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	gap: 28px;
	grid-template-columns: minmax(0, 1fr) 220px;
}

.search-layout.page-layout:not(:has(.page-aside)) {
	grid-template-columns: minmax(0, 1fr);
}

.search-primary {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.search-page .page-aside {
	top: 84px;
}

.search-page .tide-play,
.search-page .friend-links {
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.search-hero {
	padding: 0;
	margin: 0 0 18px;
	width: 100%;
}

.search-hero.is-compact {
	margin-bottom: 14px;
}

.search-hero .search-box,
.search-type-filters {
	width: 100%;
	max-width: none;
	margin: 0;
}

.search-box {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	align-items: center;
	gap: 0;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	background: var(--surface-solid);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-box:focus-within {
	border-color: var(--primary-border);
	box-shadow: 0 0 0 3px var(--primary-soft);
}

.search-box-icon {
	width: 18px;
	height: 18px;
	margin-left: 14px;
	color: var(--muted);
}

.search-box-input {
	width: 100%;
	border: 0;
	outline: none;
	background: transparent;
	padding: 12px 8px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--text);
}

.search-box-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.search-box-btn {
	border: 0;
	background: var(--primary);
	color: var(--btn-on-primary);
	font-weight: 700;
	font-size: 13px;
	padding: 9px 16px;
	margin: 5px;
	border-radius: 8px;
	cursor: pointer;
}

.search-box-btn:hover {
	opacity: 0.92;
}

.search-type-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0 2px;
	margin-top: 6px;
	padding: 0;
	border-bottom: 1px solid var(--border);
}

.search-type-chip {
	display: inline-flex;
	align-items: center;
	margin-bottom: -1px;
	padding: 10px 14px 8px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--muted);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.search-type-chip.is-active {
	background: transparent;
	border-bottom-color: var(--primary);
	color: var(--text);
}

.search-type-chip:hover {
	color: var(--text);
	background: transparent;
	opacity: 1;
}

.search-results {
	margin: 0;
	padding: 0;
	width: 100%;
}

.search-toolbar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 22px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--border);
}

.search-stats {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.5;
}

.search-stats strong {
	color: var(--text);
	font-weight: 700;
}

.search-stats-sep {
	margin: 0 5px;
	opacity: 0.45;
}

.search-tokens {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.search-token {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 6px;
	border: 0;
	background: color-mix(in srgb, var(--primary-soft) 80%, var(--surface));
	color: var(--primary);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.01em;
}

.search-empty {
	padding: 44px 20px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
}

.search-empty h2 {
	font-size: 18px;
	margin-bottom: 8px;
}

.search-empty p {
	color: var(--muted);
	font-size: 14px;
}

.search-hit-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	width: 100%;
}

.search-hit-item {
	width: 100%;
	box-sizing: border-box;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-hit-item:hover {
	border-color: var(--primary-border);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
	transform: none;
}

.search-hit-link {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 14px;
	padding: 14px;
	color: inherit;
}

.search-hit-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.search-hit-link:hover {
	opacity: 1;
}

.search-hit-thumb {
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	overflow: hidden;
	background: linear-gradient(145deg, #dbeafe, #93c5fd);
	border: 1px solid var(--border);
}

.search-hit-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.search-hit-title {
	font-family: var(--display);
	font-size: var(--fs-lg);
	line-height: 1.35;
	margin: 0 0 6px;
	color: var(--text);
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.search-hit-link:hover .search-hit-title {
	color: var(--primary);
	text-decoration: none;
}

.search-hit-snippet {
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: 1.55;
	margin: 0 0 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.search-hit em.search-hit,
.search-hit-title em.search-hit,
.search-hit-snippet em.search-hit {
	font-style: normal;
	font-weight: 700;
	color: var(--accent);
	background: transparent;
	border-radius: 0;
	padding: 0;
}

.search-hit-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	align-items: center;
	color: var(--muted);
	font-size: 12px;
}

.search-hit-origin {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--surface-muted, #f1f5f9);
	color: var(--muted);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
}

.search-results .pager {
	margin-top: 22px;
}

/* —— 智能问答面板 —— */
.search-mode-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 12px;
	padding: 3px;
	border-radius: 10px;
	background: var(--surface-muted, #f1f5f9);
	border: 1px solid var(--border);
}

.search-mode-tab {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 8px;
	border: 0;
	background: transparent;
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.search-mode-tab.is-active {
	background: var(--primary);
	color: var(--btn-on-primary, #fff);
	box-shadow: 0 1px 3px rgba(37, 99, 235, 0.35);
}

.search-mode-tab:hover {
	color: var(--primary);
	opacity: 1;
}

.search-mode-tab.is-active:hover {
	color: var(--btn-on-primary, #fff);
	opacity: 0.95;
}

.ask-panel {
	margin: 0 0 22px;
	padding: 16px 18px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.ask-panel-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 12px;
}

.ask-panel-head-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ask-panel-title {
	margin: 0;
	font-family: var(--display);
	font-size: 16px;
	font-weight: 650;
	color: var(--text);
}

.ask-new-chat {
	border: 1px solid var(--border);
	background: var(--surface-muted, #f8fafc);
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 8px;
	cursor: pointer;
}

.ask-new-chat:hover {
	color: var(--primary);
	border-color: var(--primary-border);
}

.ask-panel-status {
	margin: 0;
	font-size: 12px;
	color: var(--muted);
	line-height: 1.45;
}

.ask-panel-status.is-error {
	color: var(--danger, #dc2626);
}

.ask-history {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 14px;
}

.ask-turn-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--muted);
	margin-bottom: 4px;
}

.ask-turn-user .ask-turn-body {
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--surface-muted, #f8fafc);
	border: 1px solid var(--border);
	font-size: 14px;
	line-height: 1.55;
	white-space: pre-wrap;
}

.ask-turn-assistant .ask-turn-body {
	font-size: 15px;
	line-height: 1.7;
	color: var(--text);
}

.ask-turn-assistant .ask-turn-body p {
	margin: 0 0 0.75em;
}

.ask-turn-assistant .ask-turn-body p:last-child {
	margin-bottom: 0;
}

.ask-answer {
	margin: 0 0 12px;
}

.ask-answer.is-muted .ask-answer-body {
	color: var(--muted);
}

.ask-answer.is-ungrounded .ask-answer-body {
	color: var(--muted);
}

.ask-answer.is-streaming .ask-answer-body::after {
	content: "▍";
	display: inline-block;
	margin-left: 2px;
	animation: ask-caret 1s steps(1) infinite;
	color: var(--primary);
}

@keyframes ask-caret {
	50% { opacity: 0; }
}

.ask-answer-body {
	font-size: 15px;
	line-height: 1.7;
	color: var(--text);
}

.ask-answer-body p {
	margin: 0 0 0.75em;
}

.ask-answer-body p:last-child {
	margin-bottom: 0;
}

.ask-answer-body code {
	font-size: 0.92em;
	padding: 0.1em 0.35em;
	border-radius: 4px;
	background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface));
}

.ask-cite {
	color: var(--primary);
	font-weight: 700;
	text-decoration: none;
	margin: 0 1px;
}

.ask-cite:hover {
	text-decoration: underline;
}

.ask-sources {
	list-style: none;
	margin: 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ask-followup {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
}

.ask-followup-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface-solid);
	padding: 9px 12px;
	font-size: 14px;
	color: var(--text);
}

.ask-followup-input:focus {
	outline: none;
	border-color: var(--primary-border);
	box-shadow: 0 0 0 3px var(--primary-soft);
}

.ask-followup-btn {
	border: 0;
	border-radius: 8px;
	background: var(--primary);
	color: var(--btn-on-primary);
	font-weight: 700;
	font-size: 13px;
	padding: 9px 14px;
	cursor: pointer;
}

.ask-followup-btn:hover {
	opacity: 0.92;
}

.ask-feedback {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.ask-feedback-btn {
	border: 1px solid transparent;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.ask-feedback-up {
	background: var(--success-bg);
	border-color: color-mix(in srgb, var(--success) 35%, transparent);
	color: var(--success);
}

.ask-feedback-up:hover {
	background: var(--success);
	border-color: var(--success);
	color: #fff;
}

.ask-feedback-down {
	background: var(--danger-bg);
	border-color: color-mix(in srgb, var(--danger) 35%, transparent);
	color: var(--danger);
}

.ask-feedback-down:hover {
	background: var(--danger);
	border-color: var(--danger);
	color: #fff;
}

.ask-feedback-done {
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 6px;
}

.ask-feedback-done.is-up {
	background: var(--success-bg);
	color: var(--success);
}

.ask-feedback-done.is-down {
	background: var(--danger-bg);
	color: var(--danger);
}

.ask-source-item {
	margin: 0;
}

.ask-source-link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 2px 8px;
	color: inherit;
	text-decoration: none;
}

.ask-source-link:hover .ask-source-title {
	color: var(--primary);
}

.ask-source-index {
	grid-row: 1 / span 2;
	color: var(--primary);
	font-weight: 700;
	font-size: 12px;
	padding-top: 2px;
}

.ask-source-title {
	font-size: 13px;
	font-weight: 650;
	color: var(--text);
	line-height: 1.4;
}

.ask-source-snippet {
	grid-column: 2;
	font-size: 12px;
	color: var(--muted);
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 720px) {
	.ask-panel {
		padding: 14px;
		margin-bottom: 18px;
	}

	.search-page {
		padding-top: 16px;
	}

	.search-layout {
		gap: 20px;
	}

	.search-hero {
		margin-bottom: 14px;
	}

	.search-box {
		grid-template-columns: 36px 1fr;
	}

	.search-box-btn {
		grid-column: 1 / -1;
		margin: 0 8px 8px;
		border-radius: 8px;
	}

	.search-toolbar {
		gap: 8px;
		padding-bottom: 12px;
		margin-bottom: 18px;
	}

	.search-hit-link {
		grid-template-columns: 76px 1fr;
		gap: 12px;
		padding: 12px;
	}

	.search-hit-title {
		font-size: 15px;
	}
}

/* —— 夜间阅读：补齐仍硬编码浅色底的组件 —— */
html[data-theme="dark"] .type-filters a.is-active,
html[data-theme="dark"] .btn-primary {
	color: var(--btn-on-primary);
}

html[data-theme="dark"] .site-brand-title,
html[data-theme="dark"] .site-nav-link,
html[data-theme="dark"] .shore-masthead h1,
html[data-theme="dark"] .shore-card-body h2,
html[data-theme="dark"] .shore-row-body h2,
html[data-theme="dark"] .article-header h1,
html[data-theme="dark"] .search-hit-title,
html[data-theme="dark"] .console-main-title h1,
html[data-theme="dark"] .console-main-head h1 {
	color: var(--text);
}

html[data-theme="dark"] .shore-feature-body h2 {
	color: #f6f3ee;
}

html[data-theme="dark"] .shore-card-media,
html[data-theme="dark"] .shore-row-media {
	background: linear-gradient(145deg, #1e3a5f, #0f172a);
}

html[data-theme="dark"] .search-hit-snippet,
html[data-theme="dark"] .console-lead,
html[data-theme="dark"] .console-main-title .muted {
	color: var(--muted);
}

html[data-theme="dark"] .search-hit em.search-hit,
html[data-theme="dark"] .search-hit-title em.search-hit,
html[data-theme="dark"] .search-hit-snippet em.search-hit {
	background: transparent;
	color: var(--accent);
}

html[data-theme="dark"] .site-beian a.c333.f12,
html[data-theme="dark"] .site-beian a.c333,
html[data-theme="dark"] .c333 {
	color: var(--muted);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] option {
	background: var(--surface-solid);
	color: var(--text);
	border-color: var(--border);
	color-scheme: dark;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
	color: var(--muted);
	opacity: 0.85;
}

html[data-theme="dark"] .console-main.panel,
html[data-theme="dark"] .admin-table-wrap,
html[data-theme="dark"] .profile-fields,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .gamification-card:not([class*="level-tone-"]),
html[data-theme="dark"] .level-guide-item:not([class*="level-tone-"]),
html[data-theme="dark"] .upload-box,
html[data-theme="dark"] .modal-head,
html[data-theme="dark"] .modal-foot,
html[data-theme="dark"] .modal-card {
	background: var(--surface);
	color: var(--text);
	border-color: var(--border);
}

html[data-theme="dark"] .level-tone-xi {
	--level-solid: #3ee0b8;
	--level-on-solid: #06281e;
	--level-soft: #12382f;
	--level-border: #1f8a6c;
	--level-text: #b8ffe8;
	--level-progress: #3ee0b8;
}

html[data-theme="dark"] .level-tone-he {
	--level-solid: #4ec6f8;
	--level-on-solid: #062433;
	--level-soft: #0e3348;
	--level-border: #1a7eb0;
	--level-text: #c8f0ff;
	--level-progress: #4ec6f8;
}

html[data-theme="dark"] .level-tone-jiang {
	--level-solid: #6aa2ff;
	--level-on-solid: #0c1c38;
	--level-soft: #142848;
	--level-border: #2a62c4;
	--level-text: #d6e4ff;
	--level-progress: #6aa2ff;
}

html[data-theme="dark"] .level-tone-hu {
	--level-solid: #8d96ff;
	--level-on-solid: #141838;
	--level-soft: #1c2048;
	--level-border: #4450c8;
	--level-text: #e0e4ff;
	--level-progress: #8d96ff;
}

html[data-theme="dark"] .level-tone-hai {
	--level-solid: #7aa0ff;
	--level-on-solid: #101c38;
	--level-soft: #162448;
	--level-border: #2f5ccc;
	--level-text: #dce6ff;
	--level-progress: #7aa0ff;
}

html[data-theme="dark"] .level-tone-yang {
	--level-solid: #6b7fff;
	--level-on-solid: #0e1438;
	--level-soft: #141c48;
	--level-border: #3a4cd0;
	--level-text: #d8deff;
	--level-progress: #6b7fff;
}

html[data-theme="dark"] .gamification-card[class*="level-tone-"] {
	background: linear-gradient(160deg, var(--level-soft) 0%, var(--surface) 58%);
	border-color: var(--level-border);
	color: var(--text);
}

html[data-theme="dark"] .level-guide-item[class*="level-tone-"] {
	background: linear-gradient(90deg, var(--level-soft) 0%, var(--surface) 48%);
	border-color: var(--border);
	border-left-color: var(--level-solid);
	color: var(--text);
}

html[data-theme="dark"] .level-guide-item.is-current[class*="level-tone-"] {
	background: linear-gradient(135deg, var(--level-soft) 0%, var(--surface) 72%);
	border-color: var(--level-border);
}

html[data-theme="dark"] .data-table,
html[data-theme="dark"] .data-table td,
html[data-theme="dark"] .data-table th {
	color: var(--text);
	border-color: var(--border);
}

html[data-theme="dark"] .data-table thead th,
html[data-theme="dark"] .articles-table thead th,
html[data-theme="dark"] .columns-table thead th,
html[data-theme="dark"] .ledger-table thead th {
	background: var(--table-head);
	color: var(--muted);
}

html[data-theme="dark"] .data-table tbody td {
	background: transparent;
	color: var(--text);
}

html[data-theme="dark"] .users-table tbody td.col-user,
html[data-theme="dark"] .users-table tbody td.col-actions,
html[data-theme="dark"] .admin-comments-table tbody td.col-user,
html[data-theme="dark"] .admin-comments-table tbody td.col-actions {
	background: var(--surface-muted);
}

html[data-theme="dark"] .users-table thead th.col-user,
html[data-theme="dark"] .users-table thead th.col-actions,
html[data-theme="dark"] .users-table tbody tr:hover td.col-user,
html[data-theme="dark"] .users-table tbody tr:hover td.col-actions,
html[data-theme="dark"] .admin-comments-table thead th.col-user,
html[data-theme="dark"] .admin-comments-table thead th.col-actions,
html[data-theme="dark"] .admin-comments-table tbody tr:hover td.col-user,
html[data-theme="dark"] .admin-comments-table tbody tr:hover td.col-actions {
	background: var(--table-head);
}

html[data-theme="dark"] .w-e-text-container,
html[data-theme="dark"] .w-e-bar,
html[data-theme="dark"] .w-e-text-container [data-slate-editor],
html[data-theme="dark"] .vditor,
html[data-theme="dark"] .vditor-toolbar,
html[data-theme="dark"] .vditor-content {
	background: var(--surface-solid) !important;
	color: var(--text) !important;
	border-color: var(--border) !important;
}

html[data-theme="dark"] .heanbian-toast,
html[data-theme="dark"] .heanbian-confirm {
	background: var(--surface-solid) !important;
	color: var(--text) !important;
}

.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 40px;
	height: var(--control-h);
	min-height: var(--control-h);
	max-height: var(--control-h);
	padding: 0 12px;
	box-sizing: border-box;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
}

.header-tool-btn.theme-toggle {
	min-width: 0;
	padding: 0 12px;
	border-radius: 999px;
	gap: 6px;
}

.theme-toggle:hover {
	border-color: var(--primary-border);
	color: var(--primary);
	background: var(--primary-soft);
}

.theme-toggle-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.theme-toggle-label {
	font-size: 13px;
}

html[data-theme="dark"] .header-user-menu {
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .theme-toggle-icon .theme-icon-moon {
	display: none;
}

html[data-theme="light"] .theme-toggle-icon .theme-icon-sun,
html:not([data-theme]) .theme-toggle-icon .theme-icon-sun {
	display: none;
}

html[data-theme="dark"] .theme-toggle-icon .theme-icon-sun {
	display: block;
}

/* —— 常见问题 —— */
.faq-page.site-main {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* —— 错误页（与常见问题同宽居中） —— */
.error-page.site-main {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.error-page .error-panel {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* —— 创作者协议 —— */
.legal-page.site-main {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.legal-page .legal-layout {
	display: block;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 0;
}

.legal-primary {
	padding: 24px 28px 32px;
}

.legal-hero h1 {
	margin: 0 0 10px;
	font-size: 1.75rem;
}

.legal-hero .muted {
	margin: 0 0 8px;
	line-height: 1.6;
}

.legal-meta {
	margin: 0 0 20px !important;
	font-size: 12px;
}

.legal-body section {
	margin: 0 0 22px;
}

.legal-body h2 {
	margin: 0 0 10px;
	font-size: 1.1rem;
}

.legal-body p,
.legal-body li {
	line-height: 1.7;
}

.legal-body ul {
	margin: 0 0 12px;
	padding-left: 1.25em;
}

.legal-closing {
	margin: 8px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--border);
	font-size: 13px;
}

.report-channel {
	margin: 0 0 22px;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid var(--primary-border);
	background: var(--primary-soft);
}

.report-channel-label {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--primary);
}

.report-mail {
	margin: 0 0 6px;
	font-size: 1.05rem;
	font-weight: 700;
}

.report-channel .muted {
	margin: 0;
	font-size: 13px;
}

.report-fields {
	display: grid;
	gap: 8px;
	margin: 0;
}

.report-fields > div {
	display: grid;
	grid-template-columns: 5.5em minmax(0, 1fr);
	gap: 4px 12px;
	align-items: start;
	margin: 0;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: var(--surface-muted);
}

.report-fields dt {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.7;
}

.report-fields dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--content-text);
}

.report-steps {
	list-style: none;
	counter-reset: report-step;
	display: grid;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
}

.report-steps li {
	display: grid;
	grid-template-columns: 1.6rem minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	margin: 0;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: var(--surface-solid);
}

.report-steps li::before {
	counter-increment: report-step;
	content: counter(report-step);
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: start;
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.report-steps strong,
.report-steps span {
	grid-column: 2;
}

.report-steps strong {
	display: block;
	margin-bottom: 2px;
}

.report-steps span {
	display: block;
	color: var(--content-text);
}

@media (max-width: 640px) {
	.report-fields > div {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

@media (max-width: 640px) {
	.legal-primary {
		padding: 18px 16px 24px;
	}
}

.faq-page .faq-layout {
	display: block;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 0;
}

.faq-page .faq-primary {
	width: 100%;
}

.faq-hero h1 {
	margin: 0 0 8px;
	font-size: 1.75rem;
}

.faq-hero .muted {
	margin: 0 0 16px;
}

.faq-search {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 16px;
}

.faq-search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 36px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
	color: var(--text);
}

.faq-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
	padding: 6px;
	border-radius: 14px;
	background: var(--surface-muted, #f8fafc);
	border: 1px solid var(--border);
}

.faq-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid transparent;
	color: var(--muted);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	background: transparent;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.faq-tab:hover {
	color: var(--primary);
	background: color-mix(in srgb, var(--primary-soft) 70%, transparent);
	opacity: 1;
}

.faq-tab.is-active {
	color: var(--btn-on-primary, #fff);
	background: var(--primary);
	border-color: transparent;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(37, 99, 235, 0.28);
}

.faq-tab.is-active:hover {
	color: var(--btn-on-primary, #fff);
	background: var(--primary);
	opacity: 0.95;
}

html[data-theme="dark"] .faq-tabs {
	background: color-mix(in srgb, var(--surface) 88%, #000);
}

html[data-theme="dark"] .faq-tab.is-active {
	box-shadow: 0 1px 4px rgba(37, 99, 235, 0.4);
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.faq-item {
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
	padding: 0;
}

.faq-question {
	cursor: pointer;
	list-style: none;
	padding: 14px 16px;
	font-weight: 600;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 10px;
}

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

.faq-cat {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--primary);
	background: var(--primary-soft);
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 2px 8px;
	line-height: 1.4;
}

.faq-answer {
	padding: 0 16px 16px;
	border-top: 1px solid transparent;
}

.faq-item[open] .faq-answer {
	border-top-color: var(--border);
	padding-top: 12px;
}

.faq-answer.article-content {
	font-size: 15px;
	line-height: 1.7;
}

.faq-answer.article-content > *:first-child {
	margin-top: 0;
}

.faq-answer.article-content > *:last-child {
	margin-bottom: 0;
}

/* —— 拾潮 —— */
.shichao-status,
.dudeng-status,
.diejian-status,
.piaoliuping-status,
.pailang-status,
.liqu-status,
.chaozhi-status,
.chaojie-status {
	margin-bottom: 10px;
	padding: 12px;
}

.game-play-zone .piaoliuping-sea {
	margin-bottom: 12px;
}

.shichao-stats-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shichao-archive,
.shichao-diary,
.shichao-spend,
.shichao-weekly,
.shichao-boards {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}

.shichao-archive .form-section-head,
.shichao-diary .form-section-head,
.shichao-spend .form-section-head,
.shichao-weekly .form-section-head,
.shichao-boards .form-section-head {
	margin-bottom: 8px;
}

.shichao-archive .form-section-head h2,
.shichao-diary .form-section-head h2,
.shichao-spend .form-section-head h2,
.shichao-weekly .form-section-head h2,
.shichao-boards .form-section-head h2 {
	margin: 0;
	font-size: 1rem;
}

.shichao-archive .gamification-stats {
	margin-bottom: 0;
}

.shichao-diary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.shichao-diary-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
}

.shichao-diary-diff {
	font-weight: 600;
	color: var(--text);
	min-width: 2.5em;
}

.shichao-diff-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
	max-width: 640px;
}

.shichao-diff-btn {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.shichao-diff-btn.is-active {
	background: var(--primary-soft);
	border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
	color: var(--primary);
}

.shichao-diff-hint {
	margin: 0 0 14px;
	max-width: 640px;
}

.shichao-boards .form-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
}

.shichao-board-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.shichao-board-tab {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.shichao-board-tab.is-active {
	background: var(--primary-soft);
	border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
	color: var(--primary);
}

.shichao-board-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.shichao-board-list li {
	display: grid;
	grid-template-columns: 2em minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 8px 10px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
}

.shichao-board-list li.is-self {
	background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface-muted));
}

.shichao-board-rank {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.shichao-board-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	color: var(--text);
}

.shichao-board-list li strong {
	font-variant-numeric: tabular-nums;
}

.shichao-launch {
	margin: 0 0 8px;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}

.shichao-launch .form-section-head {
	margin-bottom: 10px;
}

.shichao-launch .form-section-head h2 {
	margin: 0;
	font-size: 1rem;
}

.shichao-launch .shichao-diff-picker,
.shichao-launch .shichao-diff-hint {
	max-width: none;
}

.shichao-play-body {
	padding: 0;
}

.shichao-play-modal .shichao-stage {
	max-width: none;
	margin: 0;
	border: none;
	border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px);
}

.shichao-spend-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 10px 0 14px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 14px;
}

.shichao-spend-title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

.shichao-skins .shichao-spend-title {
	margin-bottom: 12px;
}

.shichao-skin-tier {
	margin-bottom: 14px;
}

.shichao-skin-tier:last-child {
	margin-bottom: 0;
}

.shichao-skin-tier-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.shichao-skin-tier[data-tier="default"] .shichao-skin-tier-label {
	color: #4f9a8f;
}

.shichao-skin-tier[data-tier="low"] .shichao-skin-tier-label {
	color: #c07a48;
}

.shichao-skin-tier[data-tier="high"] .shichao-skin-tier-label {
	color: #1f6f5c;
}

.shichao-skin-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.shichao-skin-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
}

.shichao-skin-list li.is-equipped {
	background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface-muted));
}

.shichao-skin-swatch {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	flex-shrink: 0;
	border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
	box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.12);
}

.shichao-skin-meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
}

.shichao-skin-meta strong {
	color: var(--text);
	font-weight: 600;
}

.shichao-weekly-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.shichao-weekly-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
	color: var(--muted);
}

.shichao-weekly-list li strong {
	color: var(--text);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.shichao-weekly-list li.is-done {
	background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface-muted));
}

.shichao-weekly-list li.is-done span,
.shichao-weekly-list li.is-done strong {
	color: var(--primary);
}

.shichao-stage {
	position: relative;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	background: var(--surface-muted);
}

.shichao-hud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
	font-size: 13px;
	color: var(--muted);
}

.shichao-hud strong {
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.shichao-mode {
	margin-left: auto;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-weight: 600;
	font-size: 12px;
}

#shichao-canvas {
	display: block;
	width: 100%;
	height: auto;
	touch-action: none;
	vertical-align: top;
	background: transparent;
	cursor: crosshair;
}

#shichao-canvas.is-boat-hover {
	cursor: grab;
}

#shichao-canvas.is-boat-dragging {
	cursor: grabbing;
}

.shichao-overlay {
	position: absolute;
	inset: 44px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(2px);
}

.shichao-overlay[hidden] {
	display: none !important;
}

.shichao-overlay-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--console-title);
}

.shichao-overlay .muted {
	margin: 0;
	max-width: 28em;
}

@media (max-width: 640px) {
	.shichao-stats-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.shichao-hud {
		gap: 6px 12px;
		font-size: 12px;
	}

	.shichao-mode {
		margin-left: 0;
	}

}



/* —— 拍浪 —— */
.pailang-stats-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pailang-archive,
.pailang-diary,
.pailang-spend,
.pailang-weekly,
.pailang-boards,
.liqu-archive,
.liqu-diary,
.liqu-spend,
.liqu-weekly,
.liqu-boards,
.liqu-daily,
.chaozhi-archive,
.chaozhi-diary,
.chaozhi-spend,
.chaozhi-weekly {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}

.pailang-archive .form-section-head,
.pailang-diary .form-section-head,
.pailang-spend .form-section-head,
.pailang-weekly .form-section-head,
.pailang-boards .form-section-head,
.liqu-archive .form-section-head,
.liqu-diary .form-section-head,
.liqu-spend .form-section-head,
.liqu-weekly .form-section-head,
.liqu-boards .form-section-head,
.liqu-daily .form-section-head,
.chaozhi-archive .form-section-head,
.chaozhi-diary .form-section-head,
.chaozhi-spend .form-section-head,
.chaozhi-weekly .form-section-head {
	margin-bottom: 8px;
}

.pailang-archive .form-section-head h2,
.pailang-diary .form-section-head h2,
.pailang-spend .form-section-head h2,
.pailang-weekly .form-section-head h2,
.pailang-boards .form-section-head h2,
.liqu-archive .form-section-head h2,
.liqu-diary .form-section-head h2,
.liqu-spend .form-section-head h2,
.liqu-weekly .form-section-head h2,
.liqu-boards .form-section-head h2,
.liqu-daily .form-section-head h2,
.chaozhi-archive .form-section-head h2,
.chaozhi-diary .form-section-head h2,
.chaozhi-spend .form-section-head h2,
.chaozhi-weekly .form-section-head h2 {
	margin: 0;
	font-size: 1rem;
}

.pailang-archive .gamification-stats {
	margin-bottom: 0;
}

.pailang-diary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.pailang-diary-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
}

.pailang-diary-diff {
	font-weight: 600;
	color: var(--text);
	min-width: 2.5em;
}

.pailang-diff-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
	max-width: 640px;
}

.pailang-diff-btn {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.pailang-diff-btn.is-active {
	background: var(--primary-soft);
	border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
	color: var(--primary);
}

.pailang-diff-hint {
	margin: 0 0 14px;
	max-width: 640px;
}

.pailang-boards .form-section-head,
.liqu-boards .form-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
}

.pailang-board-tabs,
.liqu-board-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pailang-board-tab,
.liqu-board-tab {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.pailang-board-tab.is-active,
.liqu-board-tab.is-active {
	background: var(--primary-soft);
	border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
	color: var(--primary);
}

.pailang-board-list,
.liqu-board-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.pailang-board-list li,
.liqu-board-list li {
	display: grid;
	grid-template-columns: 2em minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 8px 10px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
}

.pailang-board-list li.is-self,
.liqu-board-list li.is-self {
	background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface-muted));
}

.pailang-board-rank,
.liqu-board-rank {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.pailang-board-name,
.liqu-board-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	color: var(--text);
}

.pailang-board-list li strong,
.liqu-board-list li strong {
	font-variant-numeric: tabular-nums;
}

.pailang-launch {
	margin: 0 0 8px;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}

.pailang-launch .form-section-head {
	margin-bottom: 10px;
}

.pailang-launch .form-section-head h2 {
	margin: 0;
	font-size: 1rem;
}

.pailang-launch .pailang-diff-picker,
.pailang-launch .pailang-diff-hint {
	max-width: none;
}

.pailang-play-body {
	padding: 0;
}

.pailang-play-modal .pailang-stage {
	max-width: none;
	margin: 0;
	border: none;
	border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px);
	overflow: hidden;
}

.pailang-spend-row,
.liqu-spend-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 10px 0 14px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 14px;
}

.pailang-spend-title,
.liqu-spend-title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

.pailang-skins .pailang-spend-title,
.liqu-skins .liqu-spend-title {
	margin-bottom: 12px;
}

.pailang-skin-tier {
	margin-bottom: 14px;
}

.pailang-skin-tier:last-child {
	margin-bottom: 0;
}

.pailang-skin-tier-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.pailang-skin-tier[data-tier="default"] .pailang-skin-tier-label {
	color: #5ec4b6;
}

.pailang-skin-tier[data-tier="low"] .pailang-skin-tier-label {
	color: #c07a48;
}

.pailang-skin-tier[data-tier="high"] .pailang-skin-tier-label {
	color: #1f6f5c;
}

.pailang-skin-list,
.liqu-skin-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.pailang-skin-list li,
.liqu-skin-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
}

.pailang-skin-list li.is-equipped,
.liqu-skin-list li.is-equipped {
	background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface-muted));
}

.pailang-skin-swatch,
.liqu-skin-swatch {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	flex-shrink: 0;
	border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
	box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.12);
}

.pailang-skin-meta,
.liqu-skin-meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
}

.pailang-skin-meta strong,
.liqu-skin-meta strong {
	color: var(--text);
	font-weight: 600;
}

.pailang-weekly-list,
.liqu-weekly-list,
.chaozhi-weekly-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.pailang-weekly-list li,
.liqu-weekly-list li,
.chaozhi-weekly-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
	color: var(--muted);
}

.pailang-weekly-list li strong,
.liqu-weekly-list li strong,
.chaozhi-weekly-list li strong {
	color: var(--text);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.pailang-weekly-list li.is-done,
.liqu-weekly-list li.is-done,
.chaozhi-weekly-list li.is-done {
	background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface-muted));
}

.pailang-weekly-list li.is-done span,
.pailang-weekly-list li.is-done strong,
.liqu-weekly-list li.is-done span,
.liqu-weekly-list li.is-done strong,
.chaozhi-weekly-list li.is-done span,
.chaozhi-weekly-list li.is-done strong {
	color: var(--primary);
}

.pailang-stage {
	position: relative;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: visible;
	background: var(--surface-muted);
	/* 喜乐色板：暖阳天空 + 亮水 + 蜜沙 */
	--pl-skin-color: #5ec4b6;
	--pl-sky-warm: #ffe6c4;
	--pl-sky-cool: #9fdcf0;
	--pl-water: #35b7c9;
	--pl-water-deep: #1e8fa3;
	--pl-sand: #f2c89a;
	--pl-joy: #ffb4a2;
	perspective: 900px;
	perspective-origin: 50% 18%;
}

.pailang-hud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
	font-size: 13px;
	color: var(--muted);
	position: relative;
	z-index: 2;
}

.pailang-hud strong {
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.pailang-viewport {
	position: relative;
	width: 100%;
}

.pailang-canvas-host {
	width: 100%;
	aspect-ratio: 5 / 5.1;
	max-height: min(440px, 60vh);
	min-height: 280px;
	background:
		radial-gradient(ellipse 90% 48% at 50% -4%, rgba(255, 214, 170, 0.72), transparent 68%),
		radial-gradient(ellipse 70% 40% at 82% 18%, rgba(255, 176, 168, 0.35), transparent 55%),
		linear-gradient(180deg, #ffe6c4 0%, #9fdcf0 42%, #3db8c9 78%, #2a9aab 100%);
	overflow: hidden;
}

.pailang-canvas-host[hidden] {
	display: none !important;
}

.pailang-stage.is-three .pailang-grid {
	display: none !important;
}

.pailang-stage.is-dom .pailang-canvas-host {
	display: none !important;
}

.pailang-canvas {
	display: block;
	width: 100%;
	height: 100%;
	vertical-align: top;
}

.pailang-mode {
	margin-left: auto;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-weight: 600;
	font-size: 12px;
}

#shichao-canvas {
	display: block;
	width: 100%;
	height: auto;
	touch-action: none;
	vertical-align: top;
	background: transparent;
	cursor: crosshair;
}

#shichao-canvas.is-boat-hover {
	cursor: grab;
}

#shichao-canvas.is-boat-dragging {
	cursor: grabbing;
}

.pailang-overlay {
	position: absolute;
	inset: 44px 0 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(2px);
}

.pailang-overlay[hidden] {
	display: none !important;
}

.pailang-overlay-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--console-title);
}

.pailang-overlay .muted {
	margin: 0;
	max-width: 28em;
}

@media (max-width: 640px) {
	.pailang-stats-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gamification-card-compact .gamification-stats.creator-stats-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pailang-hud {
		gap: 6px 12px;
		font-size: 12px;
	}

	.pailang-mode {
		margin-left: 0;
	}

}

.pailang-stage {
	--pl-skin-color: #5ec4b6;
}

.pailang-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(4, minmax(0, 1fr));
	gap: 12px 14px;
	width: 100%;
	aspect-ratio: 5 / 5.1;
	max-height: min(440px, 60vh);
	padding: 18px 16px 22px;
	box-sizing: border-box;
	border-radius: 18px;
	transform-style: preserve-3d;
	transform: rotateX(18deg);
	background:
		radial-gradient(ellipse 95% 55% at 50% -10%, color-mix(in srgb, var(--pl-joy, #ffb4a2) 42%, transparent), transparent 70%),
		radial-gradient(ellipse 80% 45% at 50% 0%, color-mix(in srgb, var(--pl-sky-warm, #ffe6c4) 70%, transparent), transparent 65%),
		radial-gradient(circle at 14% 86%, rgba(255, 255, 255, 0.22), transparent 26%),
		radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--pl-joy, #ffb4a2) 28%, transparent), transparent 28%),
		linear-gradient(180deg,
			color-mix(in srgb, var(--pl-sky-warm, #ffe6c4) 72%, var(--surface-muted)),
			color-mix(in srgb, var(--pl-sky-cool, #9fdcf0) 55%, var(--pl-water, #35b7c9)) 48%,
			color-mix(in srgb, var(--pl-water-deep, #1e8fa3) 70%, #147a8a));
	border: 1px solid color-mix(in srgb, var(--pl-water, #35b7c9) 28%, var(--border));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		inset 0 -18px 28px rgba(20, 90, 100, 0.14),
		0 18px 36px rgba(255, 160, 120, 0.12);
	overflow: hidden;
}

.pailang-cell {
	position: relative;
	border: none;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	padding: 0;
	min-height: 0;
	transform-style: preserve-3d;
	-webkit-tap-highlight-color: transparent;
}

.pailang-puddle {
	position: absolute;
	inset: 8% 6% 2%;
	transform: translateZ(0) rotateX(62deg) scaleY(0.92);
	transform-origin: center bottom;
	transform-style: preserve-3d;
	pointer-events: none;
}

.pailang-puddle-well {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, #1a5a66, #0d3640 72%);
	box-shadow:
		0 10px 16px rgba(40, 70, 50, 0.2),
		inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.pailang-puddle-water {
	position: absolute;
	inset: 10%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.38), transparent 36%),
		radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--pl-skin-color) 42%, #2aa8b8), #146878 70%);
	box-shadow:
		inset 0 -10px 16px rgba(0, 40, 50, 0.28),
		inset 0 8px 12px rgba(255, 255, 255, 0.18);
	overflow: hidden;
}

.pailang-puddle-water::after {
	content: "";
	position: absolute;
	inset: -20%;
	background: repeating-linear-gradient(
		115deg,
		transparent 0 10px,
		rgba(255, 255, 255, 0.04) 10px 12px
	);
	opacity: 0.55;
	animation: pailang-water-drift 6s linear infinite;
}

.pailang-puddle-rim {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow:
		inset 0 0 0 2px rgba(255, 255, 255, 0.18),
		inset 0 -3px 0 rgba(0, 0, 0, 0.25),
		0 0 0 1px rgba(255, 255, 255, 0.08);
}

.pailang-puddle-glint {
	position: absolute;
	top: 18%;
	left: 22%;
	width: 34%;
	height: 18%;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.45), transparent);
	transform: rotate(-18deg);
	filter: blur(0.2px);
}

.pailang-cell.is-active .pailang-puddle-water {
	box-shadow:
		inset 0 -10px 16px rgba(0, 0, 0, 0.28),
		inset 0 8px 14px rgba(255, 255, 255, 0.2),
		0 0 18px color-mix(in srgb, var(--pl-skin-color) 35%, transparent);
}

.pailang-splash {
	position: absolute;
	left: 50%;
	top: 58%;
	width: 18%;
	height: 18%;
	margin: -9% 0 0 -9%;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.55);
	opacity: 0;
	transform: scale(0.4);
	pointer-events: none;
	z-index: 2;
}

.pailang-splash.is-pop {
	animation: pailang-splash 0.42s ease-out forwards;
}

.pailang-cell.is-splash .pailang-puddle-water {
	animation: pailang-ripple 0.45s ease-out;
}

.pailang-cell:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 3px;
}

.pailang-bubble {
	--pl-yaw: 0deg;
	--pl-roll: 0deg;
	position: absolute;
	inset: 4% 12% 22%;
	display: grid;
	place-items: center;
	transform-style: preserve-3d;
	transform: translate3d(0, 42%, -28px) rotateX(-68deg) scale(0.35);
	opacity: 0;
	pointer-events: none;
	transition:
		transform 0.38s cubic-bezier(0.18, 1.15, 0.32, 1),
		opacity 0.22s ease-out;
	z-index: 3;
	filter: drop-shadow(0 14px 10px rgba(8, 30, 40, 0.28));
}

.pailang-bubble .pl-gold-caption {
	position: absolute;
	left: 50%;
	bottom: -2%;
	transform: translateX(-50%);
	max-width: 92%;
	padding: 0.1rem 0.35rem;
	border-radius: 999px;
	font-size: 0.62rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #5a4010;
	background: rgba(255, 236, 170, 0.92);
	box-shadow: 0 1px 4px rgba(40, 28, 8, 0.18);
	pointer-events: none;
	z-index: 4;
}

.pailang-bubble.is-show {
	transform: translate3d(0, 0, 36px) rotateX(-8deg) rotateY(var(--pl-yaw)) rotateZ(var(--pl-roll)) scale(1);
	opacity: 1;
}

.pailang-bubble.is-sink {
	transform: translate3d(0, 36%, -18px) rotateX(-55deg) scale(0.55);
	opacity: 0;
	transition-duration: 0.28s;
}

.pailang-bubble.is-hit {
	transform: translate3d(0, -18%, 58px) rotateX(12deg) scale(1.18);
	opacity: 0;
	transition-duration: 0.2s;
	filter: drop-shadow(0 8px 6px rgba(8, 30, 40, 0.18)) brightness(1.15);
}

.pailang-bubble.is-show .pl-figure {
	animation: pailang-bob-3d 1.6s ease-in-out infinite;
	transform-origin: 50% 75%;
}

.pailang-bubble.is-hit .pl-figure,
.pailang-bubble.is-sink .pl-figure {
	animation: none;
}

.pl-char {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
	transform-style: preserve-3d;
}

.pl-shadow {
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: -2%;
	height: 18%;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4), transparent 70%);
	transform: rotateX(75deg) translateZ(-8px);
	filter: blur(1.5px);
	opacity: 0.7;
	z-index: 0;
}

.pailang-bubble.is-show .pl-shadow {
	animation: pailang-shadow 1.6s ease-in-out infinite;
}

.pl-figure {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	z-index: 1;
}

.pl-body {
	position: absolute;
	inset: 10% 12% 14%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.72) 0 8%, transparent 28%),
		radial-gradient(circle at 68% 72%, rgba(0, 0, 0, 0.22), transparent 42%),
		radial-gradient(circle at 50% 48%,
			color-mix(in srgb, var(--pl-skin-color) 95%, white),
			color-mix(in srgb, var(--pl-skin-color) 55%, #0f3038) 62%,
			#0a2228);
	box-shadow:
		inset -6px -10px 14px rgba(0, 0, 0, 0.28),
		inset 5px 7px 10px rgba(255, 255, 255, 0.28),
		0 0 0 1px color-mix(in srgb, var(--pl-skin-color) 35%, white);
	transform: translateZ(12px);
	overflow: hidden;
}

.pl-shade {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(155deg, transparent 42%, rgba(0, 0, 0, 0.22) 100%);
	pointer-events: none;
}

.pl-rim {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	pointer-events: none;
}

.pl-spec {
	position: absolute;
	top: 16%;
	left: 20%;
	width: 28%;
	height: 18%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.85), transparent 68%);
	filter: blur(0.3px);
	pointer-events: none;
}

.pl-shine {
	position: absolute;
	top: 20%;
	left: 24%;
	width: 18%;
	height: 10%;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
	transform: rotate(-28deg) translateZ(16px);
	z-index: 2;
}

.pl-eye {
	position: absolute;
	top: 38%;
	width: 11%;
	height: 13%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 65% 30%, #fff 0 18%, transparent 20%),
		radial-gradient(circle at 40% 45%, #1a242c 0 55%, #0b1014 70%);
	z-index: 3;
	transform: translateZ(18px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.pl-eye-l { left: 30%; }
.pl-eye-r { right: 30%; }

.pl-cheek {
	position: absolute;
	top: 50%;
	width: 14%;
	height: 9%;
	border-radius: 50%;
	background: rgba(255, 130, 140, 0.55);
	z-index: 2;
	transform: translateZ(15px);
	filter: blur(0.3px);
}

.pl-cheek-l { left: 16%; }
.pl-cheek-r { right: 16%; }

.pl-mouth {
	position: absolute;
	left: 50%;
	top: 61%;
	width: 17%;
	height: 10%;
	border: 2px solid #1f2a32;
	border-top: 0;
	border-radius: 0 0 12px 12px;
	transform: translateX(-50%) translateZ(18px);
	z-index: 3;
	background: transparent;
	box-sizing: border-box;
}

.pl-brow,
.pl-fin,
.pl-spike,
.pl-star {
	display: none;
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

.pailang-bubble.is-good .pl-body {
	border-radius: 48% 48% 46% 46% / 58% 58% 42% 42%;
}

.pailang-bubble.is-good .pl-fin {
	display: block;
	width: 18%;
	height: 24%;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--pl-skin-color) 85%, white),
		color-mix(in srgb, var(--pl-skin-color) 55%, #123840));
	border-radius: 40% 80% 60% 40%;
	top: 42%;
	box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.25);
	transform: translateZ(4px);
}

.pailang-bubble.is-good .pl-fin-l {
	left: -1%;
	transform: rotate(-30deg) translateZ(4px);
}

.pailang-bubble.is-good .pl-fin-r {
	right: -1%;
	transform: rotate(30deg) scaleX(-1) translateZ(4px);
}

.pailang-bubble.is-gold .pl-body {
	background:
		radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.9) 0 8%, transparent 28%),
		radial-gradient(circle at 70% 75%, rgba(120, 60, 0, 0.3), transparent 40%),
		radial-gradient(circle at 50% 48%, #fff0b8, #efb83a 48%, #b56d10 78%);
	box-shadow:
		inset -6px -10px 14px rgba(90, 40, 0, 0.28),
		inset 5px 7px 12px rgba(255, 255, 255, 0.4),
		0 0 0 1px #f2d27a,
		0 0 18px rgba(240, 190, 70, 0.45);
	animation: pailang-glow 1.3s ease-in-out infinite;
}

.pailang-bubble.is-gold .pl-cheek {
	background: rgba(255, 120, 90, 0.38);
}

.pailang-bubble.is-gold .pl-mouth {
	width: 20%;
	height: 12%;
	border-width: 2.5px;
	background: rgba(180, 70, 40, 0.12);
}

.pailang-bubble.is-gold .pl-star {
	display: block;
	width: 16%;
	height: 16%;
	background: linear-gradient(145deg, #fffcef, #ffe08a);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	filter: drop-shadow(0 0 4px rgba(255, 230, 140, 0.95));
	transform: translateZ(22px);
}

.pailang-bubble.is-gold .pl-star-1 {
	top: 2%;
	right: 4%;
	animation: pailang-twinkle 1s ease-in-out infinite;
}

.pailang-bubble.is-gold .pl-star-2 {
	bottom: 12%;
	left: 0;
	width: 12%;
	height: 12%;
	animation: pailang-twinkle 1.2s ease-in-out infinite 0.2s;
}

.pailang-bubble.is-bad .pl-body {
	border-radius: 42% 58% 48% 52% / 48% 42% 58% 52%;
	background:
		radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.35), transparent 30%),
		radial-gradient(circle at 68% 72%, rgba(0, 0, 0, 0.3), transparent 42%),
		radial-gradient(circle at 50% 48%, #e0a8a8, #9a484c 55%, #4a2024);
	box-shadow:
		inset -6px -10px 14px rgba(40, 10, 12, 0.35),
		inset 5px 7px 10px rgba(255, 255, 255, 0.18),
		0 0 0 1px #c07070;
}

.pailang-bubble.is-bad .pl-cheek {
	display: none;
}

.pailang-bubble.is-bad .pl-eye {
	height: 8%;
	top: 42%;
	border-radius: 40%;
	background: #2a1214;
	box-shadow: none;
}

.pailang-bubble.is-bad .pl-brow {
	display: block;
	width: 16%;
	height: 3px;
	background: #2a1214;
	border-radius: 2px;
	top: 34%;
	transform: translateZ(18px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}

.pailang-bubble.is-bad .pl-brow-l {
	left: 28%;
	transform: rotate(22deg) translateZ(18px);
}

.pailang-bubble.is-bad .pl-brow-r {
	right: 28%;
	transform: rotate(-22deg) translateZ(18px);
}

.pailang-bubble.is-bad .pl-mouth {
	width: 16%;
	height: 8%;
	top: 64%;
	border: 0;
	border-top: 2.5px solid #2a1214;
	border-radius: 12px 12px 0 0;
	background: transparent;
}

.pailang-bubble.is-bad .pl-spike {
	display: block;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 13px solid #b06064;
	top: 0;
	filter: drop-shadow(0 2px 1px rgba(60, 20, 24, 0.35));
	transform: translateZ(8px);
}

.pailang-bubble.is-bad .pl-spike-1 { left: 20%; transform: rotate(-14deg) translateZ(8px); }
.pailang-bubble.is-bad .pl-spike-2 { left: 42%; top: -6%; border-bottom-width: 16px; }
.pailang-bubble.is-bad .pl-spike-3 { right: 20%; left: auto; transform: rotate(14deg) translateZ(8px); }

.pailang-bubble.is-bad .pl-shine {
	opacity: 0.28;
}

@keyframes pailang-bob-3d {
	0%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg); }
	50% { transform: translate3d(0, -7%, 6px) rotateX(4deg); }
}

@keyframes pailang-shadow {
	0%, 100% { transform: rotateX(75deg) translateZ(-8px) scale(1); opacity: 0.7; }
	50% { transform: rotateX(75deg) translateZ(-8px) scale(0.82); opacity: 0.45; }
}

@keyframes pailang-glow {
	0%, 100% { filter: brightness(1); }
	50% { filter: brightness(1.1); }
}

@keyframes pailang-twinkle {
	0%, 100% { opacity: 0.5; transform: translateZ(22px) scale(0.85) rotate(0deg); }
	50% { opacity: 1; transform: translateZ(22px) scale(1.1) rotate(14deg); }
}

@keyframes pailang-splash {
	0% { opacity: 0.85; transform: scale(0.35); border-width: 3px; }
	70% { opacity: 0.35; }
	100% { opacity: 0; transform: scale(2.4); border-width: 1px; }
}

@keyframes pailang-ripple {
	0% { transform: scale(1); }
	40% { transform: scale(1.06); }
	100% { transform: scale(1); }
}

@keyframes pailang-water-drift {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(12px, -8px, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.pailang-grid {
		transform: none;
	}

	.pailang-bubble,
	.pailang-bubble.is-show .pl-figure,
	.pailang-bubble.is-show .pl-shadow,
	.pailang-bubble.is-gold .pl-body,
	.pailang-bubble.is-gold .pl-star,
	.pailang-puddle-water::after,
	.pailang-splash.is-pop,
	.pailang-cell.is-splash .pailang-puddle-water {
		animation: none !important;
		transition: opacity 0.12s ease-out !important;
	}

	.pailang-bubble {
		transform: scale(0.4);
	}

	.pailang-bubble.is-show {
		transform: scale(1);
	}
}


/* —— 渡灯 —— */
.dudeng-archive,
.dudeng-diary,
.dudeng-spend,
.dudeng-weekly,
.dudeng-boards {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}

.dudeng-archive .form-section-head,
.dudeng-diary .form-section-head,
.dudeng-spend .form-section-head,
.dudeng-weekly .form-section-head,
.dudeng-boards .form-section-head {
	margin-bottom: 8px;
}

.dudeng-archive .form-section-head h2,
.dudeng-diary .form-section-head h2,
.dudeng-spend .form-section-head h2,
.dudeng-weekly .form-section-head h2,
.dudeng-boards .form-section-head h2 {
	margin: 0;
	font-size: 1rem;
}

.dudeng-launch {
	margin: 0 0 8px;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}

.dudeng-launch .form-section-head {
	margin-bottom: 10px;
}

.dudeng-launch .form-section-head h2 {
	margin: 0;
	font-size: 1rem;
}

.dudeng-launch .dudeng-diff-picker,
.dudeng-launch .dudeng-diff-hint {
	max-width: none;
}

.dudeng-spend-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.dudeng-spend-title {
	margin: 0 0 4px;
	font-weight: 600;
}

.dudeng-skins .dudeng-spend-title {
	margin-bottom: 10px;
}

.dudeng-skin-tier {
	margin-bottom: 12px;
}

.dudeng-skin-tier:last-child {
	margin-bottom: 0;
}

.dudeng-skin-tier-label {
	margin: 0 0 6px;
	font-size: 0.85rem;
	color: var(--muted);
}

.dudeng-skin-tier[data-tier="default"] .dudeng-skin-tier-label {
	color: var(--text);
}

.dudeng-skin-tier[data-tier="low"] .dudeng-skin-tier-label {
	color: #8a6a3a;
}

.dudeng-skin-tier[data-tier="high"] .dudeng-skin-tier-label {
	color: #3d5a80;
}

.dudeng-skin-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.dudeng-skin-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: 10px;
}

.dudeng-skin-list li.is-equipped {
	border-color: color-mix(in srgb, var(--accent, #4f9a8f) 55%, var(--border));
}

.dudeng-skin-swatch {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.dudeng-skin-meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dudeng-skin-meta strong {
	font-size: 0.95rem;
}

.dudeng-diary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.dudeng-diary-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
}

.dudeng-diary-time {
	min-width: 5.5em;
}

.dudeng-play-body {
	padding: 0;
}

.dudeng-play-modal .dudeng-stage {
	max-width: none;
	margin: 0;
	border: none;
	border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px);
}

.dudeng-stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--surface-muted);
}

.dudeng-hud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
	font-size: 13px;
	color: var(--muted);
}

.dudeng-hud strong {
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.dudeng-mode {
	margin-left: auto;
	padding: 2px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, #f0c36a 28%, var(--surface-muted));
	color: #a16207;
	font-weight: 600;
	font-size: 12px;
}

#dudeng-canvas {
	display: block;
	width: 100%;
	height: auto;
	touch-action: none;
	cursor: grab;
	vertical-align: top;
}

#dudeng-canvas.is-dragging {
	cursor: grabbing;
}

.dudeng-overlay {
	position: absolute;
	inset: 44px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(2px);
}

.dudeng-overlay[hidden] {
	display: none !important;
}

.dudeng-overlay-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--console-title);
}

.dudeng-overlay .muted {
	margin: 0;
	max-width: 28em;
}

@media (max-width: 640px) {

	.dudeng-mode {
		margin-left: 0;
	}
}

.dudeng-weekly-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.dudeng-weekly-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
	color: var(--muted);
}

.dudeng-weekly-list li strong {
	color: var(--text);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.dudeng-weekly-list li.is-done {
	background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface-muted));
}

.dudeng-weekly-list li.is-done span,
.dudeng-weekly-list li.is-done strong {
	color: var(--primary);
}

.dudeng-diff-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
}

.dudeng-diff-btn {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.dudeng-diff-btn.is-active {
	background: color-mix(in srgb, #f0c36a 28%, var(--surface));
	border-color: color-mix(in srgb, #f0c36a 45%, var(--border));
	color: #a16207;
}

.dudeng-diff-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.dudeng-diff-hint {
	margin: 0 0 14px;
	max-width: 640px;
}

.dudeng-inscription-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
}

.dudeng-inscription-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	min-width: 4.5em;
	line-height: 1;
}

.dudeng-inscription-input {
	box-sizing: border-box;
	flex: 1;
	min-width: 120px;
	max-width: 220px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface-muted);
	color: var(--text);
	font-size: 13px;
	line-height: 30px;
}

.dudeng-inscription-row .link-btn {
	flex-shrink: 0;
	line-height: 1;
}

.dudeng-boards .form-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
}

.dudeng-board-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.dudeng-board-tab {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.dudeng-board-tab.is-active {
	background: color-mix(in srgb, #f0c36a 28%, var(--surface));
	border-color: color-mix(in srgb, #f0c36a 45%, var(--border));
	color: #a16207;
}

.dudeng-board-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.dudeng-board-list li {
	display: grid;
	grid-template-columns: 2em minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 8px 10px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
}

.dudeng-board-list li.is-self {
	background: color-mix(in srgb, #f0c36a 22%, var(--surface-muted));
}

.dudeng-board-rank {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.dudeng-board-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	color: var(--text);
}

.dudeng-board-list li strong {
	font-variant-numeric: tabular-nums;
}

.dudeng-diary-diff {
	font-weight: 600;
	color: var(--text);
	min-width: 2.5em;
}

/* —— 叠笺 —— */
.diejian-archive,
.diejian-diary,
.diejian-spend,
.diejian-weekly,
.diejian-boards {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}

.diejian-archive .form-section-head,
.diejian-diary .form-section-head,
.diejian-spend .form-section-head,
.diejian-weekly .form-section-head,
.diejian-boards .form-section-head {
	margin-bottom: 8px;
}

.diejian-archive .form-section-head h2,
.diejian-diary .form-section-head h2,
.diejian-spend .form-section-head h2,
.diejian-weekly .form-section-head h2,
.diejian-boards .form-section-head h2 {
	margin: 0;
	font-size: 1rem;
}

.diejian-launch {
	margin: 0 0 8px;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}

.diejian-launch .form-section-head {
	margin-bottom: 10px;
}

.diejian-launch .form-section-head h2 {
	margin: 0;
	font-size: 1rem;
}

.diejian-launch .diejian-diff-picker,
.diejian-launch .diejian-diff-hint {
	max-width: none;
}

.diejian-archive .gamification-stats {
	margin-bottom: 0;
}

.diejian-diary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.diejian-diary-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
}

.diejian-diary-time {
	min-width: 5.5em;
}

.diejian-play-body {
	padding: 0;
}

.diejian-stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: linear-gradient(180deg,
		color-mix(in srgb, #c5d8e8 35%, var(--surface)) 0%,
		color-mix(in srgb, #8eb4c9 28%, var(--surface-muted)) 48%,
		color-mix(in srgb, #6a9aaa 40%, var(--surface-muted)) 100%);
	border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px);
	min-height: 360px;
}

.diejian-hud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	font-size: 13px;
	color: var(--muted);
}

.diejian-hud strong {
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.diejian-mode {
	margin-left: auto;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-weight: 600;
	font-size: 12px;
}

.diejian-panel {
	padding: 18px 16px 20px;
}

.diejian-listen {
	text-align: center;
	min-height: 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.diejian-listen-hint {
	margin: 0;
	letter-spacing: 0.12em;
	font-size: 12px;
	text-transform: none;
}

.diejian-listen-wave {
	margin: 0;
	font-size: clamp(22px, 5vw, 32px);
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--text);
	min-height: 1.4em;
	opacity: 0.92;
}

.diejian-listen-wave.is-wave {
	animation: diejian-wave 1.6s ease-in-out infinite;
}

.diejian-listen-wave.is-fade {
	opacity: 0;
	transition: opacity 0.35s ease;
	animation: none;
}

@keyframes diejian-wave {
	0%, 100% { transform: translateY(0); filter: blur(0); opacity: 0.95; }
	50% { transform: translateY(-4px); filter: blur(0.2px); opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
	.diejian-listen-wave.is-wave {
		animation: none;
	}
}

.diejian-slot-label {
	margin: 0 0 8px;
	font-size: 12px;
}

.diejian-slots,
.diejian-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
	min-height: 44px;
}

.diejian-slot,
.diejian-tile {
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border-radius: 10px;
	border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
	background: color-mix(in srgb, var(--surface) 92%, transparent);
	color: var(--text);
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
}

.diejian-tile:not(:disabled) {
	cursor: grab;
}

.diejian-tile.is-dragging {
	opacity: 0.55;
	cursor: grabbing;
}

.diejian-slot.is-drop-target {
	outline: 2px solid var(--primary);
	outline-offset: 1px;
	background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface));
}

.diejian-slot.is-filled {
	background: color-mix(in srgb, var(--primary-soft) 75%, var(--surface));
	border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.diejian-tile.is-used,
.diejian-tile:disabled {
	opacity: 0.35;
	cursor: default;
}

.diejian-assemble-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: flex-end;
}

.diejian-overlay {
	position: absolute;
	inset: 48px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	text-align: center;
	background: color-mix(in srgb, var(--surface) 82%, transparent);
	backdrop-filter: blur(4px);
}

.diejian-overlay[hidden] {
	display: none !important;
}

.diejian-overlay-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}

.diejian-overlay .muted {
	white-space: pre-line;
	max-width: 28em;
}

.diejian-diff-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 8px;
}

.diejian-diff-btn {
	padding: 6px 14px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--surface-muted);
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.diejian-diff-btn.is-active {
	background: var(--primary-soft);
	color: var(--primary);
	border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.diejian-diff-hint {
	margin: 0 0 12px;
}

.diejian-diary-diff {
	font-weight: 600;
	color: var(--text);
	min-width: 2.5em;
}

.diejian-listen-wave.is-fog .diejian-listen-ch {
	letter-spacing: 0.12em;
}

.diejian-listen-ch {
	display: inline-block;
	transition: opacity 0.18s ease, filter 0.18s ease;
}

.diejian-listen-wave.is-flash .diejian-listen-ch {
	opacity: 1 !important;
	filter: none !important;
	text-shadow: 0 0 12px color-mix(in srgb, var(--primary) 45%, transparent);
}

.diejian-compare {
	display: grid;
	gap: 8px;
	margin: 4px 0 8px;
	padding: 10px 12px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--surface-muted) 80%, transparent);
	text-align: left;
	width: min(100%, 22em);
}

.diejian-compare-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 14px;
}

.diejian-compare-row > .muted {
	min-width: 2.5em;
	font-size: 12px;
}

.diejian-compare-ch {
	min-width: 1.4em;
	text-align: center;
	font-weight: 700;
	padding: 2px 4px;
	border-radius: 4px;
}

.diejian-compare-ch.is-ok {
	color: var(--primary);
	background: color-mix(in srgb, var(--primary-soft) 70%, transparent);
}

.diejian-compare-ch.is-bad {
	color: #b42318;
	background: color-mix(in srgb, #fecdca 55%, transparent);
}

.diejian-stage {
	--diejian-paper: #e8dcc8;
}

.diejian-slots .diejian-slot,
.diejian-assemble {
	/* 笺皮主色轻轻铺在岸笺槽 */
}

.diejian-slots .diejian-slot {
	background: color-mix(in srgb, var(--diejian-paper) 55%, var(--surface));
}

.diejian-slots .diejian-slot.is-filled {
	background: color-mix(in srgb, var(--diejian-paper) 70%, var(--primary-soft));
}

.diejian-spend-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 10px 0 14px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 14px;
}

.diejian-spend-title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

.diejian-skins .diejian-spend-title {
	margin-bottom: 12px;
}

.diejian-skin-tier {
	margin-bottom: 14px;
}

.diejian-skin-tier-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.diejian-skin-tier[data-tier="default"] .diejian-skin-tier-label { color: #4f9a8f; }
.diejian-skin-tier[data-tier="low"] .diejian-skin-tier-label { color: #c07a48; }
.diejian-skin-tier[data-tier="high"] .diejian-skin-tier-label { color: #1f6f5c; }

.diejian-skin-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.diejian-skin-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
}

.diejian-skin-list li.is-equipped {
	background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface-muted));
}

.diejian-skin-swatch {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	flex-shrink: 0;
	border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
	box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.08);
}

.diejian-skin-meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
}

.diejian-weekly-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.diejian-weekly-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
	color: var(--muted);
}

.diejian-weekly-list li strong {
	color: var(--text);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.diejian-weekly-list li.is-done {
	background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface-muted));
}

.diejian-weekly-list li.is-done span,
.diejian-weekly-list li.is-done strong {
	color: var(--primary);
}

.diejian-boards .form-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.diejian-board-tabs {
	display: flex;
	gap: 6px;
}

.diejian-board-tab {
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface-muted);
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.diejian-board-tab.is-active {
	background: var(--primary-soft);
	color: var(--primary);
	border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.diejian-board-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.diejian-board-list li {
	display: grid;
	grid-template-columns: 2em minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 8px 10px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
}

.diejian-board-list li.is-self {
	background: color-mix(in srgb, var(--diejian-paper, #e8dcc8) 35%, var(--surface-muted));
}

.diejian-board-rank {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.diejian-board-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	color: var(--text);
}

.diejian-board-list li strong {
	font-variant-numeric: tabular-nums;
}

/* —— 漂流瓶 —— */
.piaoliuping-spend,
.piaoliuping-diary,
.piaoliuping-echo,
.piaoliuping-my,
.piaoliuping-skins,
.piaoliuping-weekly,
.piaoliuping-boards,
.piaoliuping-shore-news,
.piaoliuping-shore-keep {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}

.piaoliuping-spend .form-section-head,
.piaoliuping-diary .form-section-head,
.piaoliuping-echo .form-section-head,
.piaoliuping-my .form-section-head,
.piaoliuping-skins .form-section-head,
.piaoliuping-weekly .form-section-head,
.piaoliuping-boards .form-section-head,
.piaoliuping-shore-news .form-section-head,
.piaoliuping-shore-keep .form-section-head {
	margin-bottom: 6px;
}

.piaoliuping-spend .form-section-head h2,
.piaoliuping-diary .form-section-head h2,
.piaoliuping-echo .form-section-head h2,
.piaoliuping-my .form-section-head h2,
.piaoliuping-skins .form-section-head h2,
.piaoliuping-weekly .form-section-head h2,
.piaoliuping-boards .form-section-head h2,
.piaoliuping-shore-news .form-section-head h2,
.piaoliuping-shore-keep .form-section-head h2 {
	margin: 0;
}

/* 潮上游戏区：夜海画布 + 岸上操作坞 */
.piaoliuping-sea {
	--pp-throw: #c97a2b;
	--pp-throw-deep: #a35f1c;
	--pp-pick: #1a8a8f;
	--pp-pick-deep: #146e72;
	display: grid;
	grid-template-rows: minmax(200px, 1fr) auto;
	margin: 0 0 12px;
	min-height: 320px;
	border-radius: 16px;
	border: 1px solid var(--border);
	overflow: hidden;
	background: var(--surface);
	isolation: isolate;
	user-select: none;
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}

.pp-sea-viewport {
	position: relative;
	min-height: 260px;
	overflow: hidden;
}

.pp-sea-canvas-host {
	position: relative;
	width: 100%;
	min-height: 280px;
	aspect-ratio: 16 / 9;
	max-height: min(420px, 52vh);
	background:
		radial-gradient(ellipse 55% 45% at 78% 22%, rgba(255, 230, 180, 0.35), transparent 58%),
		radial-gradient(ellipse 70% 50% at 20% 40%, rgba(120, 180, 230, 0.22), transparent 60%),
		linear-gradient(180deg, #1e3a62 0%, #2a5a80 42%, #3a88a0 78%, #c8b898 100%);
	overflow: hidden;
	z-index: 1;
}

.pp-sea-canvas-host[hidden] {
	display: none !important;
}

.pp-sea-canvas {
	display: block;
	width: 100%;
	height: 100%;
	vertical-align: top;
}

.piaoliuping-sea.is-three .pp-sea-stage {
	display: none !important;
}

.piaoliuping-sea.is-dom .pp-sea-canvas-host {
	display: none !important;
}

.pp-sea-stage {
	position: relative;
	min-height: 260px;
	overflow: hidden;
	z-index: 0;
}

.pp-sea-sky {
	position: absolute;
	inset: 0 0 38%;
	background:
		radial-gradient(ellipse 55% 45% at 78% 32%, rgba(255, 214, 160, 0.28), transparent 58%),
		radial-gradient(ellipse 40% 30% at 18% 20%, rgba(120, 170, 220, 0.12), transparent 60%),
		linear-gradient(180deg, #0a1628 0%, #132a45 52%, #18485a 100%);
	z-index: 0;
	transition: background 0.6s ease;
}

.piaoliuping-sea.is-tide-morning .pp-sea-sky {
	background:
		radial-gradient(ellipse 60% 50% at 82% 28%, rgba(255, 196, 140, 0.45), transparent 55%),
		radial-gradient(ellipse 45% 35% at 22% 40%, rgba(160, 210, 240, 0.22), transparent 60%),
		linear-gradient(180deg, #3a5a88 0%, #6a8fb0 48%, #a8c4d4 100%);
}

.piaoliuping-sea.is-tide-morning .pp-sea-moon {
	opacity: 0.35;
	filter: brightness(1.1);
}

.piaoliuping-sea.is-tide-morning .pp-sea-star,
.piaoliuping-sea.is-tide-morning .pp-sea-stars {
	opacity: 0.12;
}

.piaoliuping-sea.is-tide-noon .pp-sea-sky {
	background:
		radial-gradient(ellipse 50% 40% at 72% 18%, rgba(255, 236, 180, 0.55), transparent 52%),
		radial-gradient(ellipse 40% 30% at 20% 30%, rgba(180, 220, 255, 0.2), transparent 58%),
		linear-gradient(180deg, #5b8fb8 0%, #7eb0c8 45%, #9ec8d4 100%);
}

.piaoliuping-sea.is-tide-noon .pp-sea-moon {
	opacity: 0;
}

.piaoliuping-sea.is-tide-noon .pp-sea-star,
.piaoliuping-sea.is-tide-noon .pp-sea-stars {
	opacity: 0;
}

.piaoliuping-sea.is-tide-night .pp-sea-sky {
	background:
		radial-gradient(ellipse 55% 45% at 78% 32%, rgba(255, 214, 160, 0.28), transparent 58%),
		radial-gradient(ellipse 40% 30% at 18% 20%, rgba(120, 170, 220, 0.12), transparent 60%),
		linear-gradient(180deg, #0a1628 0%, #132a45 52%, #18485a 100%);
}

.pp-sea-milky {
	position: absolute;
	inset: 8% -8% 20%;
	background:
		radial-gradient(ellipse 55% 28% at 42% 38%, rgba(170, 200, 255, 0.14), transparent 70%),
		radial-gradient(ellipse 40% 22% at 58% 52%, rgba(210, 190, 255, 0.08), transparent 72%);
	filter: blur(10px);
	opacity: 0.85;
	pointer-events: none;
	animation: pp-milky-drift 18s ease-in-out infinite;
}

.piaoliuping-sea.is-tide-morning .pp-sea-milky,
.piaoliuping-sea.is-tide-noon .pp-sea-milky {
	opacity: 0.2;
}

.pp-sea-stars {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-repeat: no-repeat;
}

.pp-sea-stars-far {
	opacity: 0.75;
	background-image:
		radial-gradient(1px 1px at 6% 18%, rgba(255, 255, 255, 0.7), transparent),
		radial-gradient(1px 1px at 12% 42%, rgba(255, 255, 255, 0.45), transparent),
		radial-gradient(1.2px 1.2px at 18% 12%, rgba(255, 255, 255, 0.8), transparent),
		radial-gradient(1px 1px at 24% 56%, rgba(210, 230, 255, 0.4), transparent),
		radial-gradient(1px 1px at 31% 28%, rgba(255, 255, 255, 0.55), transparent),
		radial-gradient(1.4px 1.4px at 37% 8%, rgba(255, 255, 255, 0.85), transparent),
		radial-gradient(1px 1px at 44% 48%, rgba(255, 255, 255, 0.35), transparent),
		radial-gradient(1px 1px at 49% 22%, rgba(220, 235, 255, 0.6), transparent),
		radial-gradient(1.2px 1.2px at 55% 62%, rgba(255, 255, 255, 0.4), transparent),
		radial-gradient(1px 1px at 61% 16%, rgba(255, 255, 255, 0.7), transparent),
		radial-gradient(1px 1px at 67% 44%, rgba(255, 255, 255, 0.45), transparent),
		radial-gradient(1.3px 1.3px at 73% 10%, rgba(255, 245, 220, 0.8), transparent),
		radial-gradient(1px 1px at 79% 52%, rgba(255, 255, 255, 0.35), transparent),
		radial-gradient(1px 1px at 86% 26%, rgba(255, 255, 255, 0.65), transparent),
		radial-gradient(1.2px 1.2px at 92% 40%, rgba(210, 230, 255, 0.5), transparent),
		radial-gradient(1px 1px at 8% 68%, rgba(255, 255, 255, 0.3), transparent),
		radial-gradient(1px 1px at 41% 70%, rgba(255, 255, 255, 0.28), transparent),
		radial-gradient(1px 1px at 96% 18%, rgba(255, 255, 255, 0.55), transparent);
	animation: pp-stars-pulse 7s ease-in-out infinite;
}

.pp-sea-stars-near {
	opacity: 0.9;
	background-image:
		radial-gradient(1.6px 1.6px at 10% 30%, #fff, transparent),
		radial-gradient(1.2px 1.2px at 22% 8%, rgba(255, 250, 230, 0.95), transparent),
		radial-gradient(1.4px 1.4px at 33% 46%, #fff, transparent),
		radial-gradient(1.8px 1.8px at 47% 14%, rgba(255, 255, 255, 0.95), transparent),
		radial-gradient(1.2px 1.2px at 58% 36%, rgba(220, 235, 255, 0.9), transparent),
		radial-gradient(1.5px 1.5px at 70% 6%, #fff, transparent),
		radial-gradient(1.2px 1.2px at 82% 48%, rgba(255, 245, 220, 0.85), transparent),
		radial-gradient(1.6px 1.6px at 90% 22%, #fff, transparent),
		radial-gradient(1.3px 1.3px at 15% 58%, rgba(255, 255, 255, 0.75), transparent),
		radial-gradient(1.2px 1.2px at 63% 58%, rgba(255, 255, 255, 0.7), transparent);
	animation: pp-stars-pulse 5.2s ease-in-out infinite reverse;
}

.pp-sea-moon {
	position: absolute;
	top: 16%;
	right: 14%;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff8e7, #f0d9a8 55%, #d4b878 100%);
	box-shadow:
		0 0 18px rgba(255, 236, 190, 0.75),
		0 0 48px rgba(255, 220, 160, 0.45),
		0 0 80px rgba(255, 200, 120, 0.2);
	animation: pp-moon-glow 8s ease-in-out infinite;
	z-index: 1;
}

.pp-sea-star {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
	opacity: 0.75;
	animation: pp-star-twinkle 3.2s ease-in-out infinite;
	z-index: 1;
}

.pp-sea-star-a { top: 18%; left: 12%; }
.pp-sea-star-b { top: 32%; left: 28%; animation-delay: 0.8s; width: 2px; height: 2px; }
.pp-sea-star-c { top: 12%; left: 46%; animation-delay: 1.6s; width: 4px; height: 4px; }
.pp-sea-star-d { top: 26%; left: 62%; animation-delay: 2.2s; width: 2px; height: 2px; }
.pp-sea-star-e { top: 40%; left: 8%; animation-delay: 0.4s; width: 2px; height: 2px; animation-duration: 2.6s; }
.pp-sea-star-f { top: 10%; left: 74%; animation-delay: 1.1s; width: 3px; height: 3px; animation-duration: 4s; }
.pp-sea-star-g { top: 36%; left: 84%; animation-delay: 2.8s; width: 2px; height: 2px; }
.pp-sea-star-h { top: 20%; left: 38%; animation-delay: 1.9s; width: 2px; height: 2px; animation-duration: 2.4s; }

/* —— 星空飞鸟 —— */
.pp-sea-birds,
.pp-sea-taikonauts {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 2;
}

.pp-sea-bird {
	position: absolute;
	left: var(--pp-start-left, -10%);
	top: var(--pp-lane, 12%);
	width: 28px;
	height: 14px;
	opacity: var(--pp-opacity, 0.8);
	will-change: transform;
	animation: pp-bird-fly-right var(--pp-dur, 22s) linear infinite;
	animation-delay: var(--pp-delay, 0s);
}

.pp-sea-bird.is-left {
	animation-name: pp-bird-fly-left;
}

.pp-sea-bird-body {
	position: absolute;
	left: 8px;
	top: 5px;
	width: 12px;
	height: 5px;
	border-radius: 40% 50% 50% 40%;
	background: var(--pp-bird-body, #2a2a32);
}

.pp-sea-bird-beak {
	position: absolute;
	left: 19px;
	top: 6px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 2px 0 2px 5px;
	border-color: transparent transparent transparent var(--pp-bird-beak, #e8a040);
}

.pp-sea-bird-tail {
	position: absolute;
	left: 4px;
	top: 5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 2.5px 6px 2.5px 0;
	border-color: transparent var(--pp-bird-body, #2a2a32) transparent transparent;
	opacity: 0.9;
}

.pp-sea-bird-wing {
	position: absolute;
	left: 9px;
	top: 2px;
	width: 10px;
	height: 6px;
	border-radius: 50% 50% 10% 50%;
	background: var(--pp-bird-wing, #4a4a55);
	transform-origin: 50% 90%;
	animation: pp-bird-flap 0.42s ease-in-out infinite;
}

.pp-sea-bird-wing.is-back {
	opacity: 0.7;
	animation-delay: -0.21s;
	transform: scaleX(0.9);
}

.pp-sea-bird-wing.is-front {
	left: 11px;
}

@keyframes pp-bird-flap {
	0%, 100% { transform: rotate(-28deg) scaleY(1); }
	50% { transform: rotate(32deg) scaleY(0.85); }
}

@keyframes pp-bird-fly-right {
	0% { transform: translate3d(0, 0, 0) scale(var(--pp-scale, 0.8)); }
	25% { transform: translate3d(28vw, -6px, 0) scale(var(--pp-scale, 0.8)); }
	55% { transform: translate3d(62vw, 5px, 0) scale(var(--pp-scale, 0.8)); }
	100% { transform: translate3d(120vw, -2px, 0) scale(var(--pp-scale, 0.8)); }
}

@keyframes pp-bird-fly-left {
	0% { transform: translate3d(0, 0, 0) scale(var(--pp-scale, 0.8)) scaleX(-1); }
	30% { transform: translate3d(-34vw, 5px, 0) scale(var(--pp-scale, 0.8)) scaleX(-1); }
	65% { transform: translate3d(-72vw, -4px, 0) scale(var(--pp-scale, 0.8)) scaleX(-1); }
	100% { transform: translate3d(-120vw, 2px, 0) scale(var(--pp-scale, 0.8)) scaleX(-1); }
}

/* —— 中国航天员（飞天服剪影） —— */
.pp-sea-taiko {
	position: absolute;
	left: var(--pp-start-left, -8%);
	top: var(--pp-lane, 16%);
	width: 36px;
	height: 52px;
	opacity: 0.92;
	filter: drop-shadow(0 0 8px rgba(180, 220, 255, 0.45));
	will-change: transform;
	animation: pp-taiko-roam-right var(--pp-dur, 40s) linear infinite;
	animation-delay: var(--pp-delay, 0s);
	z-index: 3;
}

.pp-sea-taiko.is-left {
	animation-name: pp-taiko-roam-left;
}

.pp-sea-taiko.is-arc {
	animation-name: pp-taiko-roam-arc;
}

.pp-sea-taiko-body {
	position: absolute;
	left: 10px;
	top: 16px;
	width: 16px;
	height: 20px;
	border-radius: 6px 6px 4px 4px;
	background:
		linear-gradient(180deg, #f4f7fb 0%, #d8e2ee 55%, #b8c8d8 100%);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.55),
		inset 3px 0 0 rgba(30, 90, 180, 0.55),
		inset -3px 0 0 rgba(30, 90, 180, 0.35);
}

.pp-sea-taiko-body::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 7px;
	width: 8px;
	height: 5px;
	border-radius: 1px;
	background: linear-gradient(90deg, #de2910 33%, #fff 33% 66%, #de2910 66%);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.pp-sea-taiko-pack {
	position: absolute;
	left: 7px;
	top: 18px;
	width: 8px;
	height: 16px;
	border-radius: 3px;
	background: linear-gradient(180deg, #c8d4e0, #8a9aac);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.pp-sea-taiko-helmet {
	position: absolute;
	left: 9px;
	top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: linear-gradient(145deg, #f8fbff, #c5d2e0 70%, #9aadc0);
	box-shadow:
		inset 0 0 0 2px rgba(255, 255, 255, 0.5),
		0 0 10px rgba(200, 230, 255, 0.35);
	z-index: 2;
}

.pp-sea-taiko-visor {
	position: absolute;
	left: 3px;
	top: 5px;
	width: 12px;
	height: 8px;
	border-radius: 40% 40% 45% 45%;
	background: linear-gradient(135deg, rgba(40, 90, 140, 0.85), rgba(20, 40, 70, 0.95));
	box-shadow: inset 0 1px 0 rgba(180, 220, 255, 0.45);
}

.pp-sea-taiko-flag {
	position: absolute;
	right: -1px;
	top: 2px;
	width: 7px;
	height: 5px;
	border-radius: 1px;
	background: linear-gradient(90deg, #de2910 70%, #ffde00 70%);
	box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15);
}

.pp-sea-taiko-arm {
	position: absolute;
	top: 18px;
	width: 6px;
	height: 14px;
	border-radius: 3px;
	background: linear-gradient(180deg, #eef3f8, #a8b8c8);
	z-index: 1;
	transform-origin: top center;
}

.pp-sea-taiko-arm.is-left {
	left: 4px;
	animation: pp-taiko-swim-arm-l 2.4s ease-in-out infinite;
}

.pp-sea-taiko-arm.is-right {
	right: 4px;
	animation: pp-taiko-swim-arm-r 2.4s ease-in-out infinite;
	animation-delay: -1.2s;
}

.pp-sea-taiko-leg {
	position: absolute;
	top: 34px;
	width: 7px;
	height: 14px;
	border-radius: 3px;
	background: linear-gradient(180deg, #e4ebf2, #9aabbc);
	transform-origin: top center;
}

.pp-sea-taiko-leg.is-left {
	left: 11px;
	animation: pp-taiko-swim-leg-l 2.8s ease-in-out infinite;
}

.pp-sea-taiko-leg.is-right {
	right: 11px;
	animation: pp-taiko-swim-leg-r 2.8s ease-in-out infinite;
	animation-delay: -1.4s;
}

.pp-sea-taiko-hair {
	position: absolute;
	left: 11px;
	top: 1px;
	width: 14px;
	height: 8px;
	border-radius: 50% 50% 20% 20%;
	background: linear-gradient(180deg, #3a2818, #1a1008);
	z-index: 3;
	clip-path: ellipse(70% 55% at 50% 40%);
}

.pp-sea-taiko.is-female .pp-sea-taiko-body {
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.55),
		inset 3px 0 0 rgba(200, 60, 90, 0.35),
		inset -3px 0 0 rgba(30, 90, 180, 0.45);
}

.pp-sea-taiko-badge {
	position: absolute;
	left: 14px;
	top: 24px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #ffe08a, #c9a227 70%);
	box-shadow: 0 0 0 1px rgba(120, 80, 20, 0.35);
	z-index: 3;
}

.pp-sea-taiko.is-male:nth-child(2) .pp-sea-taiko-badge {
	background: radial-gradient(circle at 35% 35%, #c8e0ff, #4a7ab0 70%);
}

@keyframes pp-taiko-roam-right {
	0% { transform: translate3d(0, 0, 0) scale(var(--pp-scale, 0.9)) rotate(-8deg); }
	20% { transform: translate3d(22vw, -10px, 0) scale(var(--pp-scale, 0.9)) rotate(6deg); }
	45% { transform: translate3d(48vw, 8px, 0) scale(var(--pp-scale, 0.9)) rotate(-4deg); }
	70% { transform: translate3d(76vw, -6px, 0) scale(var(--pp-scale, 0.9)) rotate(8deg); }
	100% { transform: translate3d(118vw, 2px, 0) scale(var(--pp-scale, 0.9)) rotate(-3deg); }
}

@keyframes pp-taiko-roam-left {
	0% { transform: translate3d(0, 0, 0) scale(var(--pp-scale, 0.9)) scaleX(-1) rotate(6deg); }
	25% { transform: translate3d(-28vw, 10px, 0) scale(var(--pp-scale, 0.9)) scaleX(-1) rotate(-8deg); }
	55% { transform: translate3d(-58vw, -8px, 0) scale(var(--pp-scale, 0.9)) scaleX(-1) rotate(5deg); }
	80% { transform: translate3d(-88vw, 6px, 0) scale(var(--pp-scale, 0.9)) scaleX(-1) rotate(-6deg); }
	100% { transform: translate3d(-120vw, -2px, 0) scale(var(--pp-scale, 0.9)) scaleX(-1) rotate(4deg); }
}

@keyframes pp-taiko-roam-arc {
	0% { transform: translate3d(0, 18px, 0) scale(var(--pp-scale, 0.9)) rotate(-12deg); }
	18% { transform: translate3d(18vw, -14px, 0) scale(var(--pp-scale, 0.9)) rotate(4deg); }
	40% { transform: translate3d(42vw, -22px, 0) scale(var(--pp-scale, 0.9)) rotate(10deg); }
	62% { transform: translate3d(68vw, -8px, 0) scale(var(--pp-scale, 0.9)) rotate(-6deg); }
	82% { transform: translate3d(92vw, 12px, 0) scale(var(--pp-scale, 0.9)) rotate(8deg); }
	100% { transform: translate3d(118vw, 4px, 0) scale(var(--pp-scale, 0.9)) rotate(-2deg); }
}

@keyframes pp-taiko-swim-arm-l {
	0%, 100% { transform: rotate(12deg); }
	50% { transform: rotate(38deg); }
}

@keyframes pp-taiko-swim-arm-r {
	0%, 100% { transform: rotate(-16deg); }
	50% { transform: rotate(-42deg); }
}

@keyframes pp-taiko-swim-leg-l {
	0%, 100% { transform: rotate(4deg); }
	50% { transform: rotate(22deg); }
}

@keyframes pp-taiko-swim-leg-r {
	0%, 100% { transform: rotate(-6deg); }
	50% { transform: rotate(-24deg); }
}

.piaoliuping-sea.is-tide-morning .pp-sea-bird,
.piaoliuping-sea.is-tide-noon .pp-sea-bird {
	opacity: calc(var(--pp-opacity, 0.8) * 0.95);
	filter: drop-shadow(0 1px 2px rgba(40, 60, 90, 0.25));
}

.piaoliuping-sea.is-tide-morning .pp-sea-taiko,
.piaoliuping-sea.is-tide-noon .pp-sea-taiko {
	filter: drop-shadow(0 2px 6px rgba(80, 120, 180, 0.35));
}

@keyframes pp-star-twinkle {
	0%, 100% { opacity: 0.25; transform: scale(0.85); }
	40% { opacity: 1; transform: scale(1.45); }
	70% { opacity: 0.55; transform: scale(1.05); }
}

@keyframes pp-stars-pulse {
	0%, 100% { opacity: 0.55; }
	50% { opacity: 0.95; }
}

@keyframes pp-milky-drift {
	0%, 100% { transform: translateX(-1.5%) translateY(0); opacity: 0.7; }
	50% { transform: translateX(2%) translateY(-2%); opacity: 1; }
}

@keyframes pp-moon-glow {
	0%, 100% { box-shadow: 0 0 18px rgba(255, 236, 190, 0.7), 0 0 48px rgba(255, 220, 160, 0.4), 0 0 80px rgba(255, 200, 120, 0.18); }
	50% { box-shadow: 0 0 24px rgba(255, 240, 200, 0.9), 0 0 60px rgba(255, 220, 160, 0.55), 0 0 96px rgba(255, 200, 120, 0.28); }
}

.pp-sea-water {
	position: absolute;
	inset: 44% 0 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(40, 130, 145, 0.45) 0%, transparent 22%),
		linear-gradient(180deg, #1a6574 0%, #124e5c 38%, #0d3f4c 68%, #0b3542 100%);
	overflow: hidden;
}

.pp-sea-water::before {
	content: "";
	position: absolute;
	left: -20%;
	right: -20%;
	top: -6%;
	height: 28%;
	background:
		radial-gradient(ellipse 42% 70% at 18% 80%, rgba(200, 240, 245, 0.22), transparent 70%),
		radial-gradient(ellipse 38% 65% at 48% 90%, rgba(170, 225, 235, 0.2), transparent 70%),
		radial-gradient(ellipse 40% 70% at 78% 75%, rgba(190, 235, 240, 0.18), transparent 70%);
	animation: pp-horizon-swell 5.5s ease-in-out infinite;
	pointer-events: none;
}

.pp-sea-wave {
	position: absolute;
	left: -18%;
	width: 136%;
	height: 56px;
	border-radius: 48% / 100%;
	opacity: 0.7;
	filter: blur(0.2px);
	animation: pp-wave-drift 6.5s ease-in-out infinite;
	will-change: transform;
}

.pp-sea-wave-1 {
	top: 4%;
	height: 42px;
	background:
		linear-gradient(180deg, rgba(230, 250, 255, 0.42) 0%, rgba(160, 220, 230, 0.18) 55%, transparent 100%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
	animation-duration: 5.2s;
}

.pp-sea-wave-2 {
	top: 22%;
	height: 52px;
	background:
		linear-gradient(180deg, rgba(150, 220, 230, 0.32) 0%, rgba(90, 170, 185, 0.14) 60%, transparent 100%);
	animation-duration: 7.1s;
	animation-delay: -1.8s;
	animation-name: pp-wave-drift-alt;
}

.pp-sea-wave-3 {
	top: 44%;
	height: 64px;
	background:
		linear-gradient(180deg, rgba(100, 185, 200, 0.26) 0%, rgba(60, 140, 155, 0.12) 55%, transparent 100%);
	animation-duration: 8.6s;
	animation-delay: -3.4s;
}

.pp-sea-wave-4 {
	top: 66%;
	height: 72px;
	background:
		linear-gradient(180deg, rgba(70, 150, 165, 0.2) 0%, rgba(40, 110, 125, 0.1) 50%, transparent 100%);
	animation-duration: 10.2s;
	animation-delay: -5s;
	animation-name: pp-wave-drift-alt;
	opacity: 0.55;
}

.pp-sea-ripple {
	position: absolute;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, rgba(230, 250, 255, 0.45), transparent);
	opacity: 0;
	pointer-events: none;
	animation: pp-ripple-run 7s ease-in-out infinite;
}

.pp-sea-ripple-a {
	top: 18%;
	left: -15%;
	width: 42%;
	animation-delay: 0s;
}

.pp-sea-ripple-b {
	top: 38%;
	left: 40%;
	width: 36%;
	animation-delay: -3.2s;
	animation-duration: 8.5s;
}

.pp-sea-foam {
	position: absolute;
	left: -5%;
	right: -5%;
	top: -2px;
	height: 22px;
	background:
		radial-gradient(ellipse 18% 90% at 12% 40%, rgba(255, 255, 255, 0.35), transparent 70%),
		radial-gradient(ellipse 22% 100% at 38% 55%, rgba(230, 250, 255, 0.28), transparent 72%),
		radial-gradient(ellipse 20% 90% at 62% 35%, rgba(255, 255, 255, 0.3), transparent 70%),
		radial-gradient(ellipse 24% 100% at 88% 50%, rgba(220, 245, 250, 0.25), transparent 72%),
		linear-gradient(180deg, rgba(220, 245, 248, 0.5), transparent 85%);
	opacity: 0.9;
	animation: pp-foam-sway 4.8s ease-in-out infinite;
}

.pp-sea-shimmer {
	position: absolute;
	left: 5%;
	right: 5%;
	top: 12%;
	height: 48%;
	background:
		linear-gradient(108deg, transparent 28%, rgba(255, 255, 255, 0.1) 46%, transparent 58%),
		linear-gradient(95deg, transparent 55%, rgba(180, 230, 240, 0.08) 68%, transparent 78%);
	animation: pp-shimmer 7.5s ease-in-out infinite;
	pointer-events: none;
	mix-blend-mode: soft-light;
}

.pp-sea-glint {
	position: absolute;
	top: 10%;
	left: 20%;
	width: 28%;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	filter: blur(1px);
	opacity: 0;
	animation: pp-glint 6.8s ease-in-out infinite;
	pointer-events: none;
}

@keyframes pp-wave-drift {
	0%, 100% { transform: translate3d(0, 0, 0) scaleX(1); }
	25% { transform: translate3d(-3%, 5px, 0) scaleX(1.02); }
	50% { transform: translate3d(-7%, 2px, 0) scaleX(0.98); }
	75% { transform: translate3d(-2%, 7px, 0) scaleX(1.01); }
}

@keyframes pp-wave-drift-alt {
	0%, 100% { transform: translate3d(0, 0, 0) scaleX(1.01); }
	30% { transform: translate3d(4%, 6px, 0) scaleX(0.97); }
	55% { transform: translate3d(7%, 1px, 0) scaleX(1.03); }
	80% { transform: translate3d(2%, 8px, 0) scaleX(0.99); }
}

@keyframes pp-horizon-swell {
	0%, 100% { transform: translateY(0) scaleX(1); opacity: 0.85; }
	50% { transform: translateY(6px) scaleX(1.04); opacity: 1; }
}

@keyframes pp-foam-sway {
	0%, 100% { transform: translateX(0); opacity: 0.75; }
	50% { transform: translateX(-3%); opacity: 1; }
}

@keyframes pp-ripple-run {
	0%, 12% { opacity: 0; transform: translateX(0) scaleX(0.7); }
	28% { opacity: 0.7; }
	55% { opacity: 0.35; transform: translateX(55%) scaleX(1.15); }
	78%, 100% { opacity: 0; transform: translateX(95%) scaleX(0.85); }
}

@keyframes pp-shimmer {
	0%, 100% { opacity: 0.3; transform: translateX(-4%); }
	50% { opacity: 0.85; transform: translateX(5%); }
}

@keyframes pp-glint {
	0%, 40%, 100% { opacity: 0; transform: translateX(0); }
	50% { opacity: 0.8; transform: translateX(40%); }
	65% { opacity: 0; transform: translateX(80%); }
}

/* —— 海上船舶 —— */
.pp-sea-ships,
.pp-sea-fishes {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.pp-sea-ship {
	position: absolute;
	z-index: 2;
	left: var(--pp-start-left, -12%);
	top: var(--pp-lane, 8%);
	width: 54px;
	height: 28px;
	pointer-events: none;
	opacity: var(--pp-opacity, 0.82);
	filter: drop-shadow(0 2px 3px rgba(0, 20, 30, 0.25));
	will-change: transform;
	animation: pp-ship-sail-right var(--pp-dur, 42s) linear infinite;
	animation-delay: var(--pp-delay, 0s);
}

.pp-sea-ship.is-left {
	animation-name: pp-ship-sail-left;
}

.pp-sea-ship-hull {
	position: absolute;
	left: 4px;
	bottom: 2px;
	width: 44px;
	height: 10px;
	border-radius: 2px 10px 4px 12px;
	background: linear-gradient(180deg, var(--pp-hull, #c4a574) 0%, var(--pp-hull-deep, #5c4510) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.35);
}

.pp-sea-ship-hull.is-skiff {
	width: 36px;
	height: 8px;
	left: 8px;
	border-radius: 40% 40% 8px 8px;
}

.pp-sea-ship-hull.is-slim {
	width: 48px;
	height: 8px;
	border-radius: 2px 14px 3px 14px;
}

.pp-sea-ship-cabin {
	position: absolute;
	left: 14px;
	bottom: 10px;
	width: 14px;
	height: 8px;
	border-radius: 2px 2px 0 0;
	background: linear-gradient(180deg, var(--pp-cabin, #e8dcc8), var(--pp-cabin-deep, #b8a078));
}

.pp-sea-ship-cabin.is-long {
	left: 10px;
	width: 22px;
	height: 9px;
}

.pp-sea-ship-mast {
	position: absolute;
	left: 28px;
	bottom: 10px;
	width: 2px;
	height: 18px;
	background: linear-gradient(180deg, var(--pp-mast, #d4b896), var(--pp-hull-deep, #6b5428));
	border-radius: 1px;
}

.pp-sea-ship-mast.is-tall {
	height: 22px;
	left: 30px;
}

.pp-sea-ship-mast.is-fore {
	left: 16px;
	height: 16px;
}

.pp-sea-ship-sail {
	position: absolute;
	left: 30px;
	bottom: 12px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 16px 12px;
	border-color: transparent transparent var(--pp-sail, rgba(248, 250, 252, 0.88)) transparent;
	filter: drop-shadow(1px 0 0 rgba(180, 210, 230, 0.35));
}

.pp-sea-ship-sail.is-large {
	border-width: 0 0 20px 14px;
	bottom: 14px;
}

.pp-sea-ship-sail.is-fore {
	left: 18px;
	bottom: 12px;
	border-width: 0 0 12px 9px;
}

.pp-sea-ship-sail-sq {
	position: absolute;
	left: 26px;
	bottom: 12px;
	width: 14px;
	height: 16px;
	border-radius: 1px;
	background: linear-gradient(90deg, var(--pp-sail, rgba(248, 250, 252, 0.88)), color-mix(in srgb, var(--pp-sail, #fff) 70%, transparent));
	box-shadow: inset -2px 0 0 rgba(0, 0, 0, 0.08);
}

.pp-sea-ship-sail-sq.is-aft {
	left: 12px;
	width: 11px;
	height: 13px;
	bottom: 11px;
	opacity: 0.9;
}

.pp-sea-ship-funnel {
	position: absolute;
	left: 18px;
	bottom: 18px;
	width: 6px;
	height: 12px;
	border-radius: 1px 1px 0 0;
	background: linear-gradient(180deg, var(--pp-cabin, #d8e4f0), var(--pp-hull-deep, #2a4060));
	box-shadow: 0 -2px 0 1px color-mix(in srgb, var(--pp-hull, #6b8cae) 60%, #222);
}

.pp-sea-ship-funnel.is-aft {
	left: 28px;
	height: 10px;
	width: 5px;
}

.pp-sea-ship-funnel::after {
	content: "";
	position: absolute;
	left: 1px;
	top: -5px;
	width: 8px;
	height: 5px;
	border-radius: 40%;
	background: rgba(160, 170, 180, 0.45);
	filter: blur(1px);
}

.pp-sea-ship-oar {
	position: absolute;
	left: 2px;
	bottom: 8px;
	width: 18px;
	height: 2px;
	border-radius: 1px;
	background: var(--pp-mast, #d4b896);
	transform: rotate(-18deg);
	transform-origin: right center;
}

.pp-sea-ship.ship-skiff {
	width: 46px;
}

.pp-sea-ship.ship-clipper {
	width: 58px;
}

.pp-sea-ship.ship-steamer .pp-sea-ship-hull {
	border-radius: 3px 8px 3px 8px;
}

@keyframes pp-ship-sail-right {
	0% { transform: translate3d(0, 0, 0) scale(var(--pp-scale, 0.9)) rotate(-1deg); }
	12% { transform: translate3d(14vw, 3px, 0) scale(var(--pp-scale, 0.9)) rotate(1.2deg); }
	28% { transform: translate3d(32vw, -2px, 0) scale(var(--pp-scale, 0.9)) rotate(-0.8deg); }
	45% { transform: translate3d(52vw, 4px, 0) scale(var(--pp-scale, 0.9)) rotate(1deg); }
	62% { transform: translate3d(72vw, 0, 0) scale(var(--pp-scale, 0.9)) rotate(-1.2deg); }
	80% { transform: translate3d(92vw, 3px, 0) scale(var(--pp-scale, 0.9)) rotate(0.6deg); }
	100% { transform: translate3d(118vw, 1px, 0) scale(var(--pp-scale, 0.9)) rotate(-0.5deg); }
}

@keyframes pp-ship-sail-left {
	0% { transform: translate3d(0, 0, 0) scale(var(--pp-scale, 0.75)) scaleX(-1) rotate(1deg); }
	20% { transform: translate3d(-22vw, 4px, 0) scale(var(--pp-scale, 0.75)) scaleX(-1) rotate(-1deg); }
	40% { transform: translate3d(-46vw, -1px, 0) scale(var(--pp-scale, 0.75)) scaleX(-1) rotate(1.2deg); }
	65% { transform: translate3d(-74vw, 3px, 0) scale(var(--pp-scale, 0.75)) scaleX(-1) rotate(-0.8deg); }
	85% { transform: translate3d(-98vw, 0, 0) scale(var(--pp-scale, 0.75)) scaleX(-1) rotate(0.5deg); }
	100% { transform: translate3d(-125vw, 2px, 0) scale(var(--pp-scale, 0.75)) scaleX(-1) rotate(-0.4deg); }
}

/* —— 海里游鱼 —— */
.pp-sea-fish {
	position: absolute;
	z-index: 2;
	left: var(--pp-start-left, -8%);
	top: var(--pp-lane, 50%);
	width: 22px;
	height: 10px;
	pointer-events: none;
	opacity: var(--pp-opacity, 0.48);
	will-change: transform;
	animation: pp-fish-swim-right var(--pp-dur, 22s) linear infinite;
	animation-delay: var(--pp-delay, 0s);
}

.pp-sea-fish.is-left {
	animation-name: pp-fish-swim-left;
}

.pp-sea-fish.is-left .pp-sea-fish-tail {
	animation-name: pp-fish-tail-flip;
}

.pp-sea-fish-body {
	position: absolute;
	left: 3px;
	top: 1px;
	width: 14px;
	height: 8px;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	background: linear-gradient(180deg, var(--pp-fish-hi, rgba(160, 220, 210, 0.85)), var(--pp-fish-lo, rgba(40, 110, 120, 0.75)));
	box-shadow: inset 0 -1px 0 rgba(0, 40, 50, 0.2);
}

.pp-sea-fish-body::after {
	content: "";
	position: absolute;
	right: 3px;
	top: 2px;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: rgba(10, 30, 40, 0.65);
}

.pp-sea-fish-tail {
	position: absolute;
	left: 0;
	top: 1px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 6px 4px 0;
	border-color: transparent var(--pp-fish-tail, rgba(80, 160, 155, 0.8)) transparent transparent;
	transform-origin: right center;
	animation: pp-fish-tail 0.55s ease-in-out infinite;
}

.pp-sea-fish-fin {
	position: absolute;
	left: 8px;
	top: -1px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 4px 5px 4px;
	border-color: transparent transparent var(--pp-fish-fin, rgba(120, 190, 185, 0.45)) transparent;
	opacity: 0.8;
}

@keyframes pp-fish-tail {
	0%, 100% { transform: scaleY(1) rotate(0deg); }
	50% { transform: scaleY(0.75) rotate(-8deg); }
}

@keyframes pp-fish-tail-flip {
	0%, 100% { transform: scaleY(1) rotate(0deg); }
	50% { transform: scaleY(0.75) rotate(8deg); }
}

@keyframes pp-fish-swim-right {
	0% { transform: translate3d(0, 0, 0) scale(var(--pp-scale, 0.85)); }
	30% { transform: translate3d(36vw, -5px, 0) scale(var(--pp-scale, 0.85)); }
	60% { transform: translate3d(72vw, 4px, 0) scale(var(--pp-scale, 0.85)); }
	100% { transform: translate3d(120vw, 0, 0) scale(var(--pp-scale, 0.85)); }
}

@keyframes pp-fish-swim-left {
	0% { transform: translate3d(0, 0, 0) scale(var(--pp-scale, 0.8)) scaleX(-1); }
	30% { transform: translate3d(-36vw, 4px, 0) scale(var(--pp-scale, 0.8)) scaleX(-1); }
	60% { transform: translate3d(-72vw, -3px, 0) scale(var(--pp-scale, 0.8)) scaleX(-1); }
	100% { transform: translate3d(-120vw, 0, 0) scale(var(--pp-scale, 0.8)) scaleX(-1); }
}

.piaoliuping-sea.is-tide-morning .pp-sea-ship,
.piaoliuping-sea.is-tide-noon .pp-sea-ship {
	filter: drop-shadow(0 2px 4px rgba(30, 60, 90, 0.2));
}

.piaoliuping-sea.is-tide-morning .pp-sea-fish,
.piaoliuping-sea.is-tide-noon .pp-sea-fish {
	opacity: calc(var(--pp-opacity, 0.48) * 0.85);
}

.pp-sea-bottle {
	position: absolute;
	left: 58%;
	top: 62%;
	width: 28px;
	height: 52px;
	z-index: 3;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 0) rotate(-18deg);
}

.pp-sea-bottle.is-idle {
	opacity: 0.88;
	animation: pp-bottle-idle 4.5s ease-in-out infinite;
}

.pp-sea-bottle-body {
	display: block;
	width: 22px;
	height: 36px;
	margin: 10px auto 0;
	border-radius: 6px 6px 10px 10px;
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--pp-skin-color, rgba(186, 230, 220, 0.82)) 82%, #fff),
		color-mix(in srgb, var(--pp-skin-color, rgba(56, 140, 130, 0.58)) 70%, transparent));
	border: 1px solid rgba(220, 250, 245, 0.5);
	box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.25), 0 6px 12px rgba(0, 0, 0, 0.18);
}

.pp-sea-bottle-cork {
	position: absolute;
	top: 0;
	left: 50%;
	width: 12px;
	height: 10px;
	margin-left: -6px;
	border-radius: 3px 3px 2px 2px;
	background: linear-gradient(180deg, #c4a574, #8b6914);
}

.pp-sea-bottle-note {
	position: absolute;
	top: 22px;
	left: 50%;
	width: 10px;
	height: 14px;
	margin-left: -5px;
	background: rgba(255, 248, 230, 0.9);
	border-radius: 1px;
	transform: rotate(8deg);
}

.pp-sea-bottle.is-throw {
	opacity: 1;
	animation: pp-bottle-throw 1.55s cubic-bezier(0.33, 0.1, 0.25, 1) forwards;
}

.pp-sea-bottle.is-pick {
	opacity: 1;
	animation: pp-bottle-pick 1.8s cubic-bezier(0.22, 0.7, 0.3, 1) forwards;
}

.pp-sea-bottle.is-pick.is-float {
	animation: pp-bottle-bob 1.4s ease-in-out infinite;
	opacity: 1;
	top: 52%;
	left: 50%;
	transform: translate(-50%, 0) rotate(-8deg);
}

@keyframes pp-bottle-idle {
	0%, 100% { transform: translate(-50%, 0) rotate(-14deg); }
	50% { transform: translate(-42%, -7px) rotate(-4deg); }
}

@keyframes pp-bottle-throw {
	0% {
		opacity: 1;
		left: 18%;
		top: 78%;
		transform: translate(0, 0) rotate(-30deg) scale(1);
	}
	35% {
		opacity: 1;
		left: 42%;
		top: 22%;
		transform: translate(0, 0) rotate(12deg) scale(1.05);
	}
	70% {
		opacity: 1;
		left: 58%;
		top: 52%;
		transform: translate(0, 0) rotate(40deg) scale(0.9);
	}
	100% {
		opacity: 0;
		left: 68%;
		top: 68%;
		transform: translate(0, 12px) rotate(55deg) scale(0.55);
	}
}

@keyframes pp-bottle-pick {
	0% {
		opacity: 0;
		left: 62%;
		top: 88%;
		transform: translate(-50%, 0) rotate(25deg) scale(0.6);
	}
	40% {
		opacity: 1;
		left: 54%;
		top: 68%;
		transform: translate(-50%, 0) rotate(5deg) scale(0.85);
	}
	100% {
		opacity: 1;
		left: 50%;
		top: 52%;
		transform: translate(-50%, 0) rotate(-8deg) scale(1);
	}
}

@keyframes pp-bottle-bob {
	0%, 100% { transform: translate(-50%, 0) rotate(-8deg); }
	50% { transform: translate(-50%, -6px) rotate(-2deg); }
}

.pp-sea-splash {
	position: absolute;
	left: 58%;
	top: 50%;
	width: 48px;
	height: 48px;
	z-index: 4;
	pointer-events: none;
	opacity: 0;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(220, 245, 250, 0.7) 0%, transparent 68%);
}

.pp-sea-splash.is-on {
	animation: pp-splash 0.85s ease-out forwards;
}

@keyframes pp-splash {
	0% { opacity: 0; transform: scale(0.4); }
	30% { opacity: 1; transform: scale(1.1); }
	100% { opacity: 0; transform: scale(1.8); }
}

.pp-sea-caption {
	position: absolute;
	left: 50%;
	top: 38%;
	z-index: 5;
	margin: 0;
	padding: 6px 14px;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background: rgba(8, 22, 36, 0.42);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(6px);
	font-size: 13px;
	letter-spacing: 0.06em;
	color: rgba(236, 244, 250, 0.92);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	white-space: nowrap;
}

.pp-sea-dock {
	position: relative;
	z-index: 6;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	padding: 14px 18px 16px;
	background:
		linear-gradient(180deg, rgba(248, 250, 252, 0.96), var(--surface-solid));
	border-top: 1px solid var(--border);
}

.pp-sea-mood-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.pp-sea-mood-label {
	margin: 0;
	font-size: 13px;
	color: var(--muted);
	white-space: nowrap;
}

.pp-sea-mood-select {
	min-width: 120px;
	height: 36px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: var(--surface-solid);
	color: var(--text);
	font-size: 13px;
	font-family: inherit;
}

.pp-sea-affinity {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 12px;
	color: var(--muted);
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}

.pp-sea-affinity input {
	margin: 0;
	accent-color: var(--pp-pick, #1a8a8f);
}

.pp-visit-hint a {
	margin-left: 4px;
}

.pp-sea-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
	margin-left: auto;
}

.pp-sea-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	min-width: 124px;
	min-height: 52px;
	padding: 8px 18px;
	border: 1px solid transparent;
	border-radius: 12px;
	color: #fff;
	line-height: 1.15;
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
	transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.pp-sea-btn:hover:not(:disabled) {
	transform: translateY(-1px);
	filter: brightness(1.04);
}

.pp-sea-btn:disabled {
	opacity: 0.48;
	box-shadow: none;
	cursor: not-allowed;
}

.pp-sea-btn-kicker {
	font-size: 11px;
	letter-spacing: 0.08em;
	opacity: 0.82;
	font-weight: 500;
}

.pp-sea-btn-label {
	font-size: 16px;
	font-weight: 700;
}

.pp-sea-btn--throw {
	background: linear-gradient(145deg, #dfa04a, var(--pp-throw) 42%, var(--pp-throw-deep));
	border-color: rgba(163, 95, 28, 0.35);
	box-shadow: 0 8px 18px rgba(201, 122, 43, 0.32);
}

.pp-sea-btn--pick {
	background: linear-gradient(145deg, #2bb3b8, var(--pp-pick) 42%, var(--pp-pick-deep));
	border-color: rgba(20, 110, 114, 0.35);
	box-shadow: 0 8px 18px rgba(26, 138, 143, 0.32);
}

.piaoliuping-sea.is-busy .pp-sea-btn,
.piaoliuping-sea.is-busy .pp-sea-mood-select {
	pointer-events: none;
	opacity: 0.72;
}

.piaoliuping-sea.is-throwing .pp-sea-water,
.piaoliuping-sea.is-picking .pp-sea-water {
	animation: pp-water-pulse 1.6s ease-in-out;
}

@keyframes pp-water-pulse {
	0%, 100% { filter: brightness(1); }
	40% { filter: brightness(1.12); }
}

.piaoliuping-spend-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-top: 1px solid var(--border);
}

.piaoliuping-spend-row:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.piaoliuping-spend-title {
	margin: 0 0 4px;
	font-weight: 700;
	font-size: 14px;
}

.piaoliuping-skin-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.piaoliuping-skin-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
}

.piaoliuping-skin-list li.is-equipped {
	background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface-muted));
}

.piaoliuping-skin-swatch {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	flex-shrink: 0;
	border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
	box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.12);
	background: linear-gradient(135deg, rgba(186, 230, 220, 0.82), rgba(56, 140, 130, 0.58));
}

.piaoliuping-skin-swatch--inline {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	vertical-align: -2px;
	margin: 0 4px;
}

.piaoliuping-skin-meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
}

.piaoliuping-skin-meta strong {
	color: var(--text);
	font-weight: 600;
}

.piaoliuping-weekly-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.piaoliuping-weekly-list li {
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
}

.piaoliuping-weekly-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.piaoliuping-weekly-list li strong {
	color: var(--text);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.piaoliuping-weekly-bar {
	height: 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--border) 80%, transparent);
	overflow: hidden;
}

.piaoliuping-weekly-bar > span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: color-mix(in srgb, var(--primary) 75%, #1a8a8f);
	transition: width 0.35s ease;
}

.piaoliuping-weekly-list li.is-done {
	background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface-muted));
}

.piaoliuping-weekly-list li.is-done span,
.piaoliuping-weekly-list li.is-done strong {
	color: var(--primary);
}

.piaoliuping-weekly-list li.is-done .piaoliuping-weekly-bar > span {
	background: var(--primary);
}

.piaoliuping-boards .form-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
}

.piaoliuping-board-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.piaoliuping-board-tab {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.piaoliuping-board-tab.is-active {
	background: color-mix(in srgb, #1a8a8f 14%, var(--surface));
	border-color: color-mix(in srgb, #1a8a8f 35%, var(--border));
	color: #146e72;
}

.piaoliuping-board-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.piaoliuping-board-list li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
}

.piaoliuping-board-list li.is-self {
	outline: 1px solid color-mix(in srgb, #1a8a8f 35%, var(--border));
	background: color-mix(in srgb, #1a8a8f 8%, var(--surface-muted));
}

.piaoliuping-board-rank {
	min-width: 1.5rem;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.piaoliuping-board-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.piaoliuping-echo .form-section-head,
.piaoliuping-shore-news .form-section-head,
.piaoliuping-shore-keep .form-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.piaoliuping-echo .form-section-head h2,
.piaoliuping-shore-news .form-section-head h2,
.piaoliuping-shore-keep .form-section-head h2 {
	margin-right: auto;
}

.piaoliuping-diary-list,
.piaoliuping-log-list,
.piaoliuping-echo-list,
.piaoliuping-my-list,
.piaoliuping-shore-news-list,
.piaoliuping-shore-keep-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.piaoliuping-diary-list li,
.piaoliuping-log-list li,
.piaoliuping-echo-list li,
.piaoliuping-my-list li {
	display: grid;
	grid-template-columns: 88px auto minmax(0, 1fr) auto;
	gap: 8px 12px;
	align-items: center;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
	font-family: inherit;
	line-height: 1.45;
	color: var(--text);
}

.piaoliuping-shore-news-list li,
.piaoliuping-shore-keep-list li {
	display: grid;
	grid-template-columns: 88px auto 1fr auto auto;
	gap: 8px 12px;
	align-items: center;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
	font-family: inherit;
	line-height: 1.45;
	color: var(--text);
}

.piaoliuping-shore-keep-list li {
	grid-template-columns: 72px auto minmax(0, 1fr) auto auto;
	gap: 6px 8px;
	overflow: hidden;
}

.piaoliuping-shore-keep-list .piaoliuping-log-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.piaoliuping-shore-keep-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	white-space: nowrap;
}

.piaoliuping-log-time {
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	white-space: nowrap;
}

.piaoliuping-log-action {
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
}

.piaoliuping-log-text {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	color: var(--text);
}

.piaoliuping-my-list li > .piaoliuping-log-text,
.piaoliuping-diary-list li > .piaoliuping-log-text {
	min-width: 0;
}

.piaoliuping-shore-news-list li.is-unread {
	box-shadow: inset 3px 0 0 var(--primary);
}

.piaoliuping-shore-news-list li .link-btn,
.piaoliuping-shore-keep-list li .link-btn,
.piaoliuping-my-list li .link-btn {
	justify-self: end;
	flex-shrink: 0;
}

.piaoliuping-shore-keep-list .piaoliuping-shore-keep-actions .link-btn {
	justify-self: auto;
}

.piaoliuping-my-list li {
	grid-template-columns: 88px auto minmax(0, 1fr) auto auto;
}

.piaoliuping-mood-pill {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface-solid);
	font-size: 12px;
	color: var(--muted);
	white-space: nowrap;
}

.piaoliuping-mood-meta {
	margin: 0 0 8px;
	font-size: 13px;
}

.piaoliuping-echo-list li {
	grid-template-columns: 88px minmax(0, 1fr);
	grid-auto-rows: auto;
	align-items: baseline;
}

.piaoliuping-echo-list li.is-unread {
	border-left: 3px solid var(--primary);
	padding-left: 8px;
}

.piaoliuping-echo-list li > .muted:first-child {
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	white-space: nowrap;
}

.piaoliuping-echo-bottle,
.piaoliuping-echo-reply,
.piaoliuping-tide-back,
.piaoliuping-echo-actions {
	grid-column: 1 / -1;
	margin: 0;
	min-width: 0;
}

.piaoliuping-echo-bottle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-solid);
	border: 1px dashed var(--border);
	font-size: 13px;
	color: var(--muted);
	line-height: 1.5;
}

.piaoliuping-echo-reply {
	font-size: 14px;
	color: var(--text);
	line-height: 1.5;
}

.piaoliuping-tide-back {
	font-size: 13px;
	line-height: 1.55;
	color: var(--muted);
}

.piaoliuping-echo-from {
	font-weight: 600;
	color: var(--muted);
	min-width: 0;
}

.piaoliuping-echo-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 2px;
}

.pp-hearted {
	font-size: 12px;
}

.piaoliuping-log-list .link-btn,
.piaoliuping-my-list .link-btn,
.piaoliuping-echo-actions .link-btn,
.piaoliuping-shore-news-list .link-btn,
.piaoliuping-shore-keep-list .link-btn {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.piaoliuping-log-list .link-btn:hover,
.piaoliuping-my-list .link-btn:hover,
.piaoliuping-echo-actions .link-btn:hover,
.piaoliuping-shore-news-list .link-btn:hover,
.piaoliuping-shore-keep-list .link-btn:hover {
	text-decoration: underline;
}

.piaoliuping-bottle-text {
	margin: 0 0 14px;
	padding: 16px;
	border-radius: 12px;
	background: var(--surface-muted);
	border: 1px dashed var(--border);
	line-height: 1.7;
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 15px;
}

/* 与发布页默认正文框一致：stack-form textarea + content-plain-input */
.piaoliuping-modal .modal-body.stack-form .piaoliuping-plain-input,
.piaoliuping-plain-input {
	width: 100%;
	margin-top: 6px;
	min-height: 160px;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--surface-solid);
	color: var(--text);
	font-size: 14px;
	font-family: inherit;
	line-height: 1.5;
	resize: vertical;
}

.piaoliuping-plain-input--sm {
	min-height: 88px;
}

.piaoliuping-modal .modal-body select {
	width: 100%;
	margin-top: 6px;
}

.piaoliuping-char-hint {
	margin: 8px 0 0;
}

.piaoliuping-pick-actions {
	flex-wrap: wrap;
}

@media (max-width: 640px) {
	.piaoliuping-sea {
		min-height: 420px;
	}

	.pp-sea-stage {
		min-height: 220px;
	}

	.pp-sea-dock {
		flex-direction: column;
		align-items: stretch;
		padding: 12px 14px 14px;
	}

	.pp-sea-mood-bar {
		justify-content: space-between;
	}

	.pp-sea-mood-select {
		flex: 1;
	}

	.pp-sea-actions {
		margin-left: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.pp-sea-btn {
		min-width: 0;
		width: 100%;
	}

	.pp-sea-caption {
		font-size: 12px;
		padding: 5px 12px;
	}

	.piaoliuping-diary-list li,
	.piaoliuping-log-list li,
	.piaoliuping-shore-news-list li,
	.piaoliuping-my-list li {
		grid-template-columns: 88px auto minmax(0, 1fr) auto;
		align-items: center;
	}

	.piaoliuping-shore-keep-list li {
		grid-template-columns: 64px auto minmax(0, 1fr) auto auto;
		gap: 4px 6px;
	}

	.piaoliuping-my-list li {
		grid-template-columns: 88px auto minmax(0, 1fr) auto auto;
	}

	.piaoliuping-diary-list li > .piaoliuping-log-text,
	.piaoliuping-my-list li > .piaoliuping-log-text {
		grid-column: 1 / -1;
	}

	.piaoliuping-plain-input {
		min-height: 140px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pp-sea-wave,
	.pp-sea-star,
	.pp-sea-stars,
	.pp-sea-milky,
	.pp-sea-moon,
	.pp-sea-foam,
	.pp-sea-ripple,
	.pp-sea-shimmer,
	.pp-sea-glint,
	.pp-sea-ship,
	.pp-sea-fish,
	.pp-sea-bird,
	.pp-sea-bird-wing,
	.pp-sea-taiko,
	.pp-sea-fish-tail,
	.pp-sea-water::before,
	.pp-sea-bottle.is-idle,
	.pp-sea-bottle.is-throw,
	.pp-sea-bottle.is-pick,
	.pp-sea-bottle.is-float,
	.pp-sea-splash.is-on,
	.piaoliuping-sea.is-throwing .pp-sea-water,
	.piaoliuping-sea.is-picking .pp-sea-water {
		animation: none !important;
	}

	.pp-sea-ship,
	.pp-sea-fish,
	.pp-sea-bird {
		animation: none !important;
		left: var(--pp-rest-left, 20%);
		top: var(--pp-lane, 10%);
		opacity: var(--pp-opacity, 0.55);
		transform: scale(var(--pp-scale, 0.85));
	}

	.pp-sea-ship.is-left,
	.pp-sea-fish.is-left,
	.pp-sea-bird.is-left {
		transform: scale(var(--pp-scale, 0.85)) scaleX(-1);
	}

	.pp-sea-taiko {
		animation: none !important;
		left: var(--pp-rest-left, 40%);
		top: var(--pp-lane, 16%);
		transform: scale(var(--pp-scale, 0.9));
	}

	.pp-sea-taiko.is-left {
		transform: scale(var(--pp-scale, 0.9)) scaleX(-1);
	}

	.pp-sea-taiko-arm,
	.pp-sea-taiko-leg {
		animation: none !important;
	}

	.pp-sea-bottle.is-idle,
	.pp-sea-bottle.is-throw,
	.pp-sea-bottle.is-pick {
		opacity: 0.88;
		left: 58%;
		top: 62%;
		transform: translate(-50%, 0);
	}
}

/* —— 理渠 —— */
.liqu-launch {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}

.liqu-launch .form-section-head {
	margin-bottom: 8px;
}

.liqu-launch .form-section-head h2 {
	margin: 0;
	font-size: 1rem;
}

.liqu-diff-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
}

.liqu-diff-btn {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.liqu-diff-btn.is-active {
	background: var(--primary-soft);
	border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
	color: var(--primary);
}

.liqu-diff-hint {
	margin: 0 0 14px;
}

.liqu-archive .gamification-stats {
	margin-bottom: 0;
}

.liqu-diary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.liqu-diary-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
}

.liqu-diary-diff {
	font-weight: 600;
	color: var(--text);
	min-width: 2.5em;
}

.liqu-play-modal .modal-card {
	overflow: hidden;
	border-radius: var(--modal-radius, 16px);
}

.liqu-play-body {
	padding: 0;
	border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px);
	overflow: hidden;
}

.liqu-play-modal .liqu-stage {
	max-width: none;
	margin: 0;
	border: none;
	border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px);
	overflow: hidden;
}

.liqu-stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--surface-muted);
}

.liqu-hud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
	font-size: 13px;
	color: var(--muted);
	position: relative;
	z-index: 2;
}

.liqu-hud strong {
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.liqu-hud-actions {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px 14px;
}

.liqu-mode {
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-weight: 600;
	font-size: 12px;
}

.liqu-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
}

.liqu-toolbar[hidden] {
	display: none !important;
}

.liqu-viewport {
	position: relative;
	width: 100%;
}

.liqu-canvas-host {
	width: 100%;
	aspect-ratio: 5 / 4.2;
	max-height: min(480px, 62vh);
	min-height: 300px;
	background:
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 230, 190, 0.45), transparent 70%),
		linear-gradient(180deg, #d2ebf3, #7eb6c6);
	overflow: hidden;
	border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px);
}

.liqu-stage.is-dom .liqu-canvas-host {
	display: none;
}

.liqu-stage.is-three .liqu-grid {
	display: none !important;
}

.liqu-grid {
	--lq-skin-color: #5ec4b6;
	display: grid;
	gap: 6px;
	width: 100%;
	aspect-ratio: 5 / 4.2;
	max-height: min(480px, 62vh);
	min-height: 300px;
	padding: 14px;
	box-sizing: border-box;
	background:
		radial-gradient(ellipse 70% 45% at 8% 50%, rgba(61, 176, 196, 0.35), transparent 55%),
		linear-gradient(180deg, #e8f4f8, #c8e0c0 55%, #e8d0a8);
	border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px);
}

.liqu-cell {
	position: relative;
	border: 1px solid color-mix(in srgb, #8f7f6c 40%, transparent);
	border-radius: 10px;
	background: #d2c0a4;
	cursor: pointer;
	min-height: 0;
	aspect-ratio: 1;
	overflow: hidden;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}

.liqu-cell.is-locked {
	background: #8f7f6c;
	cursor: default;
	opacity: 0.92;
}

.liqu-cell.is-source {
	box-shadow: inset 0 0 0 2px #5fd0e0;
}

.liqu-cell.is-goal {
	box-shadow: inset 0 0 0 2px #f2c45a;
}

.liqu-cell.is-preview::after,
.liqu-cell.is-flow::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 28%;
	height: 28%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: #8ef0ff;
	box-shadow: 0 0 10px rgba(58, 200, 224, 0.7);
	pointer-events: none;
	z-index: 2;
}

.liqu-cell.is-flow::after {
	background: #6ed8ec;
}

.liqu-pipe {
	position: absolute;
	background: var(--lq-skin-color, #5ec4b6);
	border-radius: 3px;
	z-index: 1;
}

.liqu-cell.is-source .liqu-pipe {
	background: #5fd0e0;
}

.liqu-cell.is-goal .liqu-pipe {
	background: #f2c45a;
}

.liqu-pipe.is-core {
	left: 36%;
	top: 36%;
	width: 28%;
	height: 28%;
}

.liqu-pipe.is-n {
	left: 38%;
	top: 0;
	width: 24%;
	height: 52%;
}

.liqu-pipe.is-s {
	left: 38%;
	bottom: 0;
	width: 24%;
	height: 52%;
}

.liqu-pipe.is-e {
	right: 0;
	top: 38%;
	width: 52%;
	height: 24%;
}

.liqu-pipe.is-w {
	left: 0;
	top: 38%;
	width: 52%;
	height: 24%;
}

.liqu-cell-tag {
	position: absolute;
	right: 4px;
	bottom: 3px;
	font-size: 10px;
	font-weight: 700;
	color: rgba(60, 40, 20, 0.55);
	z-index: 2;
	pointer-events: none;
}

.liqu-canvas {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px);
}

.liqu-overlay {
	position: absolute;
	inset: 44px 0 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(2px);
}

.liqu-overlay[hidden] {
	display: none !important;
}

.liqu-overlay-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--console-title);
}

.game-play-zone .liqu-launch {
	margin: 0 0 12px;
}

.liqu-daily-stats {
	margin: 10px 0 12px;
}

.liqu-daily-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.liqu-share-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 12px;
	margin: 4px 0 2px;
	padding: 10px 12px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface));
}

.liqu-share-box[hidden] {
	display: none !important;
}

.liqu-share-label {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--muted);
}

.liqu-share-code {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--primary);
	background: transparent;
}

@media (max-width: 640px) {
	.liqu-mode {
		margin-left: 0;
	}

}

/* —— 潮织 —— */
.game-play-zone .chaozhi-launch {
	margin-top: 12px;
}

.chaozhi-status {
	margin-top: 0;
}

.chaozhi-archive .gamification-stats {
	margin-bottom: 0;
}

.chaozhi-launch {
	margin: 0 0 8px;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}

.chaozhi-launch .form-section-head {
	margin-bottom: 10px;
}

.chaozhi-launch .form-section-head h2 {
	margin: 0;
	font-size: 1rem;
}

.chaozhi-diff-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
	max-width: 640px;
}

.chaozhi-diff-btn {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.chaozhi-diff-btn.is-active {
	background: var(--primary-soft);
	border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
	color: var(--primary);
}

.chaozhi-diff-hint {
	margin: 0 0 14px;
	max-width: 640px;
}

.chaozhi-launch .btn-primary {
	margin-right: 10px;
}

.chaozhi-diary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.chaozhi-diary-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--surface-muted);
	font-size: 13px;
}

.chaozhi-diary-diff {
	font-weight: 600;
	color: var(--text);
	min-width: 2.5em;
}

.chaozhi-spend-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 10px 0 4px;
}

.chaozhi-spend-title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

.chaozhi-play-modal .modal-card {
	overflow: hidden;
	border-radius: var(--modal-radius, 16px);
}

.chaozhi-play-body {
	padding: 0;
	border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px);
	overflow: hidden;
}

.chaozhi-play-modal .chaozhi-stage {
	max-width: none;
	margin: 0;
	border: none;
	border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px);
	overflow: hidden;
}

.chaozhi-stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--surface-muted);
	isolation: isolate;
}

.chaozhi-hud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
	font-size: 13px;
	color: var(--muted);
	position: relative;
	z-index: 2;
}

.chaozhi-hud strong {
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.chaozhi-mode {
	margin-left: auto;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-weight: 600;
	font-size: 12px;
}

.chaozhi-viewport {
	position: relative;
	width: 100%;
	aspect-ratio: 1000 / 600;
	max-height: min(440px, 60vh);
	min-height: 280px;
	background: #0c2a2e;
	overflow: hidden;
	border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px);
}

.chaozhi-canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
	cursor: crosshair;
	background: #0c2a2e;
	vertical-align: top;
}

.chaozhi-overlay {
	position: absolute;
	inset: 44px 0 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(2px);
}

.chaozhi-overlay[hidden] {
	display: none !important;
	pointer-events: none !important;
}

.chaozhi-overlay-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--console-title);
}

.chaozhi-overlay .muted {
	margin: 0;
	max-width: 28em;
}

@media (max-width: 640px) {
	.chaozhi-hud {
		gap: 6px 12px;
		font-size: 12px;
	}

	.chaozhi-mode {
		margin-left: 0;
	}

	.chaozhi-viewport {
		min-height: 240px;
		max-height: min(380px, 55vh);
	}
}

.chaojie-launch .form-section-head {
	margin-bottom: 14px;
}

.chaojie-launch .form-section-head h2 {
	margin: 0;
	font-size: 1rem;
}

.chaojie-diff-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
}

.chaojie-diff-btn {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.chaojie-diff-btn.is-active {
	background: var(--primary-soft);
	border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
	color: var(--primary);
}

.chaojie-diff-hint {
	margin: 0 0 14px;
}

.chaojie-ghost-opt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 10px;
	font-size: 13px;
}

.chaojie-ghost-opt input {
	flex: 1 1 160px;
	min-width: 0;
	max-width: 240px;
	padding: 6px 10px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface-muted);
	color: var(--text);
	font-size: 13px;
}

.chaojie-map {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 8px;
}

.chaojie-level-btn {
	width: 100%;
	min-height: 76px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 2px;
	padding: 10px 12px;
	box-sizing: border-box;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface-muted);
	color: var(--text);
	cursor: pointer;
	text-align: left;
}

.chaojie-level-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.chaojie-map li.is-current .chaojie-level-btn {
	border-color: var(--primary);
	background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface-muted));
}

.chaojie-map li.is-cleared .chaojie-level-btn {
	border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.chaojie-map li.is-farm .chaojie-level-btn {
	border-color: color-mix(in srgb, #c9a050 55%, var(--border));
	background: color-mix(in srgb, #e8d090 28%, var(--surface-muted));
}

.chaojie-level-id {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.chaojie-level-title {
	font-size: 13px;
}

.chaojie-level-meta {
	font-size: 12px;
}

.chaojie-play-modal {
	padding: 0;
	border: none;
	background: transparent;
}

.chaojie-play-modal .modal-card {
	width: 100%;
	max-width: 100%;
	max-height: calc(100vh - 24px);
	overflow: hidden;
	border-radius: var(--modal-radius, 16px);
}

.chaojie-play-body {
	padding: 0;
	border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px);
	overflow: hidden;
}

.chaojie-play-modal .chaojie-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	max-width: none;
	margin: 0;
	border: none;
	border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px);
	overflow: hidden;
	--cj-water: color-mix(in srgb, #2a6f8f 55%, var(--surface-muted));
	--cj-stone: color-mix(in srgb, #c4b49a 70%, var(--surface));
	--cj-sand: color-mix(in srgb, #d8b56a 75%, var(--surface));
	--cj-shore: color-mix(in srgb, var(--primary) 35%, var(--surface));
}

.chaojie-hud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
	font-size: 13px;
	color: var(--muted);
	position: relative;
	z-index: 2;
}

.chaojie-hud strong {
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.chaojie-hud-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.chaojie-hud-actions .link-btn {
	padding: 0;
	font-size: 13px;
	line-height: 1.2;
}

.chaojie-mode {
	color: var(--muted);
	flex-shrink: 0;
}

.chaojie-tide {
	height: 6px;
	border-radius: 0;
	background: color-mix(in srgb, var(--cj-water) 35%, var(--surface-muted));
	overflow: hidden;
	flex-shrink: 0;
}

.chaojie-tide-fill {
	height: 100%;
	width: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg,
		color-mix(in srgb, #3d8fb0 80%, var(--primary)),
		color-mix(in srgb, #7ec8e3 70%, var(--surface)));
	transition: width 0.2s linear;
}

.chaojie-tide-fill.is-low {
	background: linear-gradient(90deg, #c47a3a, #e0a35a);
}

.chaojie-tide-fill.is-critical {
	background: linear-gradient(90deg, #b34545, #d97878);
}

.chaojie-viewport {
	position: relative;
	width: 100%;
	padding: 0;
	border-radius: 0;
	overflow: auto;
	border: none;
	background:
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 230, 190, 0.35), transparent 70%),
		linear-gradient(180deg, #d2ebf3, #7eb6c6);
}

.chaojie-canvas-host {
	width: 100%;
	aspect-ratio: var(--cj-cols, 5) / var(--cj-rows, 5);
	max-height: min(520px, 62vh);
	min-height: 280px;
	overflow: hidden;
}

.chaojie-canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.chaojie-stage.is-dom .chaojie-canvas-host {
	display: none !important;
	pointer-events: none !important;
}

.chaojie-stage.is-three .chaojie-grid {
	display: none !important;
	pointer-events: none !important;
}

.chaojie-grid {
	--cj-cols: 5;
	--cj-rows: 5;
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(var(--cj-cols), minmax(0, 1fr));
	grid-template-rows: repeat(var(--cj-rows), minmax(0, 1fr));
	gap: 6px;
	width: 100%;
	aspect-ratio: var(--cj-cols, 5) / var(--cj-rows, 5);
	max-height: min(520px, 62vh);
	min-height: 280px;
	padding: 12px;
	box-sizing: border-box;
	margin: 0 auto;
}

.chaojie-cell {
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
	min-height: 0;
	border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
	border-radius: 10px;
	padding: 0;
	font-size: clamp(11px, 2.4vw, 14px);
	font-weight: 700;
	line-height: 1;
	color: var(--text);
	cursor: pointer;
	background: transparent;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.chaojie-cell:disabled {
	cursor: default;
	opacity: 0.92;
}

.chaojie-cell.is-stone {
	background: var(--cj-skin-color, var(--cj-stone));
	box-shadow: inset 0 -2px 0 color-mix(in srgb, #000 12%, transparent);
}

.chaojie-cell.is-sand {
	background: var(--cj-sand);
	color: color-mix(in srgb, #5a3d12 70%, var(--text));
}

.chaojie-cell.is-shore {
	background: var(--cj-shore);
	border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
	color: var(--primary);
}

.chaojie-cell.is-gap {
	background: color-mix(in srgb, var(--cj-water) 70%, transparent);
	border-color: transparent;
	opacity: 0.55;
	cursor: default;
}

.chaojie-cell.is-broken {
	background:
		repeating-linear-gradient(-45deg,
			color-mix(in srgb, #8a7460 40%, var(--surface-muted)),
			color-mix(in srgb, #8a7460 40%, var(--surface-muted)) 4px,
			color-mix(in srgb, #5c4a3a 35%, var(--surface-muted)) 4px,
			color-mix(in srgb, #5c4a3a 35%, var(--surface-muted)) 8px);
	color: color-mix(in srgb, #fff 55%, var(--text));
	opacity: 0.75;
	cursor: not-allowed;
}

.chaojie-cell.is-oneway_ns,
.chaojie-cell.is-oneway_ew {
	background: color-mix(in srgb, #8aa0b0 35%, var(--cj-stone));
	color: #3a5a70;
}

.chaojie-cell.is-drift_n,
.chaojie-cell.is-drift_e,
.chaojie-cell.is-drift_s,
.chaojie-cell.is-drift_w {
	background: color-mix(in srgb, #6ec8d8 40%, var(--cj-stone));
	color: #1a6080;
}

.chaojie-cell.is-path {
	outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
	outline-offset: -2px;
}

.chaojie-cell.is-here {
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 70%, transparent),
		inset 0 -2px 0 color-mix(in srgb, #000 12%, transparent);
	transform: translateY(-1px);
}

.chaojie-cell.is-reach:not(:disabled) {
	cursor: pointer;
	box-shadow: 0 0 0 2px color-mix(in srgb, #7ec8e3 65%, var(--primary));
	animation: chaojie-pulse 1.2s ease-in-out infinite;
}

.chaojie-cell.is-reach:not(:disabled):hover {
	transform: translateY(-2px);
}

.chaojie-cell.is-ghost {
	outline: 1.5px dashed color-mix(in srgb, #b0a0c8 70%, var(--border));
	outline-offset: -2px;
	color: color-mix(in srgb, #8a7a9e 75%, var(--muted));
}

.chaojie-cell.is-fogged,
.chaojie-cell.is-fogged:disabled {
	opacity: 0.28;
}

.chaojie-stage.is-fog .chaojie-viewport::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 50% 40%,
			color-mix(in srgb, #c8d8e8 18%, transparent) 0%,
			color-mix(in srgb, #a8b8c8 28%, transparent) 70%,
			color-mix(in srgb, #90a0b0 35%, transparent) 100%);
	z-index: 1;
}

@keyframes chaojie-pulse {
	0%, 100% { filter: brightness(1); }
	50% { filter: brightness(1.08); }
}

.chaojie-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 20px;
	text-align: center;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(2px);
	z-index: 3;
}

.chaojie-overlay[hidden] {
	display: none !important;
}

.chaojie-overlay-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
}

.chaojie-stage.is-ended .chaojie-hud-actions {
	visibility: hidden;
}

.chaojie-archive,
.chaojie-weekly,
.chaojie-diary,
.chaojie-spend,
.chaojie-daily,
.chaojie-boards,
.chaojie-chapters {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}

.chaojie-archive .form-section-head,
.chaojie-weekly .form-section-head,
.chaojie-diary .form-section-head,
.chaojie-spend .form-section-head,
.chaojie-daily .form-section-head,
.chaojie-boards .form-section-head,
.chaojie-chapters .form-section-head {
	margin-bottom: 10px;
}

.chaojie-chapter-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.chaojie-chapter-list li {
	display: grid;
	gap: 6px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--surface-muted);
	border: 1px solid transparent;
}

.chaojie-chapter-list li.is-ready {
	border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
	background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface-muted));
}

.chaojie-chapter-list li.is-claimed {
	opacity: 0.72;
}

.chaojie-chapter-main {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
}

.chaojie-chapter-progress {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	font-size: 13px;
}

.chaojie-chapter-list .checkin-hint {
	margin: 0;
}

.chaojie-daily-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 10px;
}

.chaojie-share-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 10px 0;
	padding: 8px 10px;
	border: 1px dashed var(--border);
	border-radius: 10px;
}

.chaojie-share-box[hidden] {
	display: none;
}

.chaojie-share-label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
}

.chaojie-share-code {
	font-size: 13px;
}

.chaojie-skins {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
}

.chaojie-skin-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.chaojie-skin-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
}

.chaojie-skin-list li.is-equipped {
	color: var(--primary);
}

.chaojie-skin-swatch {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--border);
	flex: 0 0 auto;
}

.chaojie-skin-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.chaojie-skin-meta strong {
	font-size: 14px;
}

.chaojie-board-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.chaojie-board-tab {
	appearance: none;
	border: 1px solid var(--border);
	background: transparent;
	color: inherit;
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
	cursor: pointer;
}

.chaojie-board-tab.is-active {
	border-color: var(--primary);
	color: var(--primary);
}

.chaojie-board-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.chaojie-board-list li {
	display: grid;
	grid-template-columns: 2em 1fr auto auto;
	gap: 8px 12px;
	align-items: baseline;
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
	font-size: 13px;
}

.chaojie-board-list li.is-self {
	color: var(--primary);
	font-weight: 600;
}

.chaojie-board-rank {
	opacity: 0.7;
}

.chaojie-cell.is-hint {
	box-shadow: inset 0 0 0 2px #3aa8c4;
	outline: 2px solid rgba(58, 168, 196, 0.35);
}

.chaojie-diary-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.chaojie-diary-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
	font-size: 13px;
}

.chaojie-diary-diff {
	font-weight: 600;
	min-width: 5.5em;
}

.chaojie-spend-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.chaojie-spend-title {
	margin: 0 0 4px;
	font-weight: 600;
}

.chaojie-weekly-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.chaojie-weekly-list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--border);
	font-size: 13px;
}

.chaojie-weekly-list li.is-done {
	color: var(--primary);
}

@media (max-width: 560px) {
	.chaojie-play-modal .modal-card {
		width: 100%;
		max-height: 100vh;
		border-radius: 0;
	}

	.chaojie-canvas-host,
	.chaojie-grid {
		min-height: 240px;
		max-height: min(420px, 52vh);
	}

	.chaojie-cell {
		border-radius: 8px;
		font-size: 11px;
	}
}