/**
 * 蜘蛛池实时看板（页面模板: page-templates/page-spider-dashboard.php）
 * 样式借鉴 Kanakku 后台模板：卡片式看板（宽度跟随主题全局 container）
 * 统一使用 .spd-page-wrapper / spd- 前缀做样式隔离，避免与主题样式冲突
 */

/* ============ 页面容器（借鉴 Kanakku page-wrapper 卡片式看板；宽度跟随主题全局 container） ============ */
/* 根作用域 .spd-page-wrapper：独立看板页与用户中心"观测台"页共用 */
.spd-page-wrapper {
	background: #f7f8fa;
	padding: 1.5rem 0 2.5rem;
	min-height: 62vh;
}

/* 用户中心-观测台：嵌入右侧内容列时的紧凑形态 */
.spd-page-wrapper.spd-observe {
	min-height: auto;
	padding: 1rem;
	border-radius: .45rem;
	border: 1px solid #eef0f4;
	box-shadow: 0 2px 10px rgba(23, 43, 77, .04);
}

/* 跟随全局页面宽度：使用主题的 .container（受后台"网站全局内容区域宽度"控制），
   并重置主题给 .container 附加的上下外边距 */
.spd-page-wrapper .content.container {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

/* ============ 看板头部 ============ */
.spd-page-wrapper .spd-topbar {
	margin-bottom: 10px;
}

.spd-page-wrapper .spd-page-title {
	font-size: 1.35rem;
	font-weight: 700;
	color: #2f3b52;
}

.spd-page-wrapper .spd-live-pill {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	background: #e6f8ef;
	color: #16a34a;
	border-radius: 999px;
	padding: .32rem .85rem;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1;
}

.spd-page-wrapper .spd-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	flex: 0 0 8px;
	animation: spdPulse 1.2s ease-in-out infinite;
}

.spd-page-wrapper .spd-live-dot-sm {
	width: 7px;
	height: 7px;
	flex-basis: 7px;
	display: inline-block;
	vertical-align: middle;
}

/* ============ 卡片（借鉴 Kanakku card） ============ */
.spd-page-wrapper .spd-card {
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: .45rem;
	box-shadow: 0 2px 10px rgba(23, 43, 77, .05);
}

.spd-page-wrapper .spd-flex-fill {
	flex: 1 1 auto;
}

.spd-page-wrapper .spd-card-header {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid #eef0f4;
}

.spd-page-wrapper .spd-card-title {
	font-size: 1rem;
	font-weight: 600;
	color: #2f3b52;
}

.spd-page-wrapper .spd-card-body {
	padding: 1.25rem;
}

/* ============ 统计卡片（借鉴 Kanakku dash-widget-header） ============ */
.spd-page-wrapper .spd-widget-header {
	display: flex;
	align-items: center;
}

.spd-page-wrapper .spd-widget-icon {
	width: 55px;
	height: 55px;
	border-radius: 12px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex: 0 0 55px;
}

.spd-page-wrapper .spd-widget-count {
	margin-left: 1rem;
	min-width: 0;
}

.spd-page-wrapper .spd-widget-title {
	font-size: .8rem;
	color: #8a94a6;
	margin-bottom: 2px;
	white-space: nowrap;
}

.spd-page-wrapper .spd-widget-num {
	font-size: 1.45rem;
	font-weight: 700;
	color: #2f3b52;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.spd-page-wrapper .spd-widget-note {
	font-size: .78rem;
	color: #8a94a6;
	margin: .75rem 0 0;
}

.spd-page-wrapper .spd-widget-note .spd-note {
	font-weight: 600;
}

.spd-page-wrapper .spd-note-up {
	color: #16a34a;
}

.spd-page-wrapper .spd-note-down {
	color: #e11d48;
}

.spd-page-wrapper .spd-note-flat {
	color: #8a94a6;
}

/* 顶部池卡片：状态徽章悬浮卡片右上角角标 */
.spd-page-wrapper .spd-stat-card {
	position: relative;
}

.spd-page-wrapper .spd-widget-tag {
	position: absolute;
	top: .5rem;
	right: .5rem;
	z-index: 2;
}

.spd-page-wrapper .spd-widget-tag .spd-badge {
	box-shadow: 0 2px 6px rgba(15, 23, 42, .12);
}

.spd-page-wrapper .spd-widget-tag .spd-note {
	font-size: .8rem;
	font-weight: 600;
	white-space: nowrap;
}

.spd-page-wrapper .spd-widget-note b {
	color: #2f3b52;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* 后台配置的池图标：有图铺满图标盒且不带底色，未配置时回退字体图标（保留渐变底色） */
.spd-page-wrapper .spd-widget-icon.spd-icon-photo {
	background: transparent !important;
}

.spd-page-wrapper .spd-widget-icon img.spd-pool-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	display: block;
}

/* 观测台容器较窄（用户中心 col-lg-9）：宽屏一行4卡时紧凑适配 */
.spd-page-wrapper.spd-observe .spd-widget-icon {
	width: 46px;
	height: 46px;
	font-size: 18px;
	flex-basis: 46px;
}

.spd-page-wrapper.spd-observe .spd-widget-count {
	margin-left: .65rem;
}

.spd-page-wrapper.spd-observe .spd-widget-num {
	font-size: 1.15rem;
}

.spd-page-wrapper.spd-observe .spd-widget-title {
	font-size: .74rem;
}

.spd-page-wrapper.spd-observe .spd-badge {
	font-size: .68rem;
	padding: .22rem .45rem;
}

.spd-page-wrapper.spd-observe .spd-widget-note {
	font-size: .72rem;
}

.spd-page-wrapper.spd-observe .spd-progress-sm {
	height: 5px;
}

/* 图标底色（借鉴 Kanakku bg-1 ~ bg-4 渐变） */
.spd-page-wrapper .spd-bg-1 { background: linear-gradient(135deg, #5b8def, #4c6ef5); }
.spd-page-wrapper .spd-bg-2 { background: linear-gradient(135deg, #34d399, #0ea573); }
.spd-page-wrapper .spd-bg-3 { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.spd-page-wrapper .spd-bg-4 { background: linear-gradient(135deg, #fb7185, #f43f5e); }

.spd-page-wrapper .spd-bar-1 { background: #4c6ef5; }
.spd-page-wrapper .spd-bar-2 { background: #0ea573; }
.spd-page-wrapper .spd-bar-3 { background: #f59e0b; }
.spd-page-wrapper .spd-bar-4 { background: #f43f5e; }

/* 指标数字颜色（趋势卡顶部，借鉴 Kanakku Sales Analytics 数字行） */
.spd-page-wrapper .spd-text-1 { color: #4c6ef5; }
.spd-page-wrapper .spd-text-2 { color: #0ea573; }
.spd-page-wrapper .spd-text-3 { color: #f59e0b; }
.spd-page-wrapper .spd-text-4 { color: #f43f5e; }

/* ============ 趋势卡顶部指标行 ============ */
.spd-page-wrapper .spd-metrics {
	margin-bottom: .75rem;
}

.spd-page-wrapper .spd-metric {
	margin-right: 2.25rem;
	margin-bottom: .5rem;
}

.spd-page-wrapper .spd-metric span {
	display: block;
	font-size: .78rem;
	color: #8a94a6;
	margin-bottom: .15rem;
}

.spd-page-wrapper .spd-metric p {
	font-size: 1.3rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ============ 时间范围切换（今日 / 近7日 / 近30日） ============ */
.spd-page-wrapper .spd-range-group {
	display: inline-flex;
	background: #fff;
	border: 1px solid #e5e9f0;
	border-radius: .4rem;
	overflow: hidden;
}

.spd-page-wrapper .spd-range-btn {
	border: 0;
	background: transparent;
	padding: .38rem .85rem;
	font-size: .82rem;
	color: #6b7280;
	cursor: pointer;
	line-height: 1.4;
	transition: background .15s ease, color .15s ease;
}

.spd-page-wrapper .spd-range-btn + .spd-range-btn {
	border-left: 1px solid #e5e9f0;
}

.spd-page-wrapper .spd-range-btn:hover {
	color: #4c6ef5;
}

.spd-page-wrapper .spd-range-btn.active {
	background: #000000;
	color: #fff;
}

/* ============ 进度条（借鉴 Kanakku progress） ============ */
.spd-page-wrapper .spd-progress {
	display: flex;
	overflow: hidden;
	background: #eef1f6;
	border-radius: 999px;
}

.spd-page-wrapper .spd-progress-sm {
	height: 6px;
}

.spd-page-wrapper .spd-progress-md {
	height: 10px;
}

.spd-page-wrapper .spd-progress-bar {
	height: 100%;
	border-radius: 999px;
	transition: width .4s ease;
}

.spd-page-wrapper .spd-progress-bar + .spd-progress-bar {
	margin-left: 2px;
}

/* ============ 引擎占比图例 ============ */
.spd-page-wrapper .spd-share-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.25rem;
	margin-top: .8rem;
}

.spd-page-wrapper .spd-legend-item {
	display: inline-flex;
	align-items: center;
	font-size: .78rem;
	color: #64748b;
	white-space: nowrap;
}

.spd-page-wrapper .spd-legend-item i {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	margin-right: .4rem;
	display: inline-block;
}

/* ============ 表格（借鉴 Kanakku table + table-avatar） ============ */
.spd-page-wrapper .spd-table-wrap {
	overflow-x: auto;
}

.spd-page-wrapper .spd-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.spd-page-wrapper .spd-table thead th {
	background: #f8f9fb;
	color: #6b7280;
	font-weight: 600;
	font-size: .78rem;
	border-bottom: 1px solid #eef0f4;
	padding: .65rem .75rem;
	white-space: nowrap;
	text-align: left;
}

.spd-page-wrapper .spd-table tbody td {
	padding: .7rem .75rem;
	font-size: .85rem;
	color: #374151;
	border-bottom: 1px solid #f1f3f6;
	vertical-align: middle;
	white-space: nowrap;
}

.spd-page-wrapper .spd-table tbody tr:last-child td {
	border-bottom: 0;
}

.spd-page-wrapper .spd-table tbody tr:hover {
	background: #fafbfd;
}

.spd-page-wrapper .spd-td-main {
	font-weight: 600;
	color: #2f3b52;
	font-size: .85rem;
	line-height: 1.3;
}

.spd-page-wrapper .spd-td-sub {
	font-size: .72rem;
	color: #9aa3b2;
	line-height: 1.3;
}

.spd-page-wrapper .spd-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .68rem;
	font-weight: 700;
	color: #fff;
	flex: 0 0 32px;
	letter-spacing: .5px;
}

.spd-page-wrapper .spd-avatar-sm {
	width: 24px;
	height: 24px;
	flex-basis: 24px;
	font-size: .6rem;
}

/* 池图标头像：有图时透明底、图片铺满圆形头像，无图回退首字 */
.spd-page-wrapper .spd-avatar-photo {
	background: transparent !important;
	padding: 0;
	overflow: hidden;
}

.spd-page-wrapper .spd-avatar-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	display: block;
}

.spd-page-wrapper .spd-url {
	font-family: Consolas, Monaco, monospace;
	font-size: .78rem;
	color: #475569;
	background: #f6f8fb;
	padding: .18rem .5rem;
	border-radius: .3rem;
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;
	vertical-align: middle;
}

.spd-page-wrapper .spd-time {
	font-variant-numeric: tabular-nums;
	color: #6b7280;
	font-size: .8rem;
}

/* ============ 徽章（借鉴 Kanakku bg-success-light 等浅色徽章） ============ */
.spd-page-wrapper .spd-badge {
	display: inline-block;
	padding: .35em .7em;
	font-size: .75rem;
	font-weight: 600;
	border-radius: .25rem;
	line-height: 1.4;
}

.spd-page-wrapper .spd-badge-success { background: #e6f8ef; color: #16a34a; }
.spd-page-wrapper .spd-badge-warning { background: #fef3d8; color: #d97706; }
.spd-page-wrapper .spd-badge-danger  { background: #fde8e8; color: #e11d48; }
.spd-page-wrapper .spd-badge-info    { background: #e3f2fd; color: #0284c7; }

/* 环比箭头 */
.spd-page-wrapper .spd-pct-up   { color: #16a34a; font-weight: 600; }
.spd-page-wrapper .spd-pct-down { color: #e11d48; font-weight: 600; }
.spd-page-wrapper .spd-pct-flat { color: #8a94a6; font-weight: 600; }

/* ============ 实时抓取动态 Feed ============ */
.spd-page-wrapper .spd-feed-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 380px;
	overflow: hidden;
}

.spd-page-wrapper .spd-feed-list li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	padding: .6rem 0;
	border-bottom: 1px dashed #f1f3f6;
	font-size: .83rem;
	color: #475569;
	animation: spdFadeIn .4s ease;
}

.spd-page-wrapper .spd-feed-list li:last-child {
	border-bottom: 0;
}

.spd-page-wrapper .spd-feed-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-top: .42rem;
	flex: 0 0 8px;
}

.spd-page-wrapper .spd-feed-list code {
	font-family: Consolas, Monaco, monospace;
	font-size: .78rem;
	color: #4c6ef5;
	background: #f2f5ff;
	padding: .05rem .35rem;
	border-radius: .25rem;
}

.spd-page-wrapper .spd-feed-time {
	display: block;
	font-size: .72rem;
	color: #9aa3b2;
	margin-top: .15rem;
	font-variant-numeric: tabular-nums;
}

/* ============ 动画 ============ */
@keyframes spdPulse {
	0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); }
	70%  { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes spdFadeIn {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============ 响应式 ============ */
@media (max-width: 575.98px) {
	.spd-page-wrapper .spd-page-title { font-size: 1.1rem; }
	.spd-page-wrapper .spd-widget-num { font-size: 1.2rem; }
	.spd-page-wrapper .spd-metric { margin-right: 1.4rem; }
	.spd-page-wrapper .spd-metric p { font-size: 1.1rem; }
	.spd-page-wrapper .spd-url { max-width: 160px; }
	.spd-page-wrapper .content.container { padding-left: .9rem; padding-right: .9rem; }
}