/* ==================== 灵魂宝石主题（亮紫神秘风） ==================== */
/* 在 style.css 之后加载，覆盖迷雾大陆默认的深绿配色 */
/* 紫色调以 rgb(204,146,196) ≈ #cc92c4 为基准 */

:root {
	--bg-1: hsl(273, 47%, 10%);
	--bg-2: hsl(270, 41%, 16%);
	--panel: hsl(276, 33%, 16%);
	--panel-border: hsl(300, 20%, 35%);
	--text-main: hsl(300, 25%, 95%);
	--text-sub: hsl(309, 16%, 85%);
	--accent: hsl(45, 70%, 70%); /* 金色 */
	--accent-2: hsl(308, 36%, 72%); /* 亮紫（基准色） */
	/* 开关主题色（覆盖 style.css 默认绿系） */
	--switch-border: hsl(307, 20%, 40%);
	--switch-border-hover: hsl(306, 21%, 50%);
	--switch-bg: hsl(295, 25%, 14%);
	--switch-text: hsl(324, 37%, 86%);
	--switch-track-bg: hsl(289, 25%, 30%);
	--switch-knob-bg: hsl(324, 37%, 86%);
	--switch-knob-bg-on: hsl(36, 62%, 14%);
	--switch-on-glow: rgba(230, 200, 112, 0.6);
}

body {
	background: radial-gradient(circle at 20% 0, hsl(273, 41%, 22%) 0, transparent 40%),
	radial-gradient(circle at 100% 20%, hsl(283, 39%, 22%) 0, transparent 35%),
	linear-gradient(180deg, var(--bg-2), var(--bg-1));
}

/* 标题栏 */
.title-bar {
	background: linear-gradient(180deg, #3c2450, #1f1430);
	border: 1px solid var(--panel-border);
	color: var(--accent);
	text-shadow: 0 0 10px rgba(230, 200, 112, 0.35);
}

/* 面板 */
.panel {
	background: rgba(30, 18, 36, 0.92);
	border: 1px solid var(--panel-border);
}
.panel-title {
	background: #2c1840;
	color: #e6d49a;
	border-bottom: 1px solid rgba(116, 163, 128, 0.18);
}

/* 通用描边按钮（reset-btn / head-reset-btn / button-stroke / sync 按钮） */
.button-stroke,
.reset-btn,
.head-reset-btn,
.sync-buttons > button {
	border: 1px solid #6c4868;
	background: #1f1320;
	color: #e6c8da;
}
.coin-row-reset-btn {
	border: 1px solid #6c4868;
	background: #1f1320;
	color: #e6c8da;
}

/* 部位网格表头 */
.part-grid .head {
	color: #c4a8c0;
}
.enable-head {
	text-align: center;
}
.part-label {
	color: var(--accent-2);
	font-weight: 700;
}
/* compact label 默认隐藏（PC 及移动端两行模式）；仅移动端单行模式显示 */
.part-label-compact {
	display: none;
}

/* 升级参数网格：表头一行 + 每部位一行（共享同一组列宽变量，保证对齐） */
.part-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
	--col-toggle: 32px; /* 开关列 */
	--col-part: 96px; /* 部位列 */
	--col-sync: 60px; /* 同步列 */
	--col-damage: 56px; /* 伤害列 */
}
.part-grid > .head-row {
	display: grid;
	grid-template-columns: var(--col-toggle) var(--col-part) 1fr var(--col-sync) 1fr var(--col-damage);
	gap: 8px;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}
.part-grid > .head {
	display: none; /* 单独的表头项已合并进 .head-row，此处隐藏散落项 */
}
.part-row {
	display: grid;
	grid-template-columns: var(--col-toggle) var(--col-part) 1fr var(--col-sync) 1fr var(--col-damage);
	gap: 8px;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}
/* 移动端工具栏：默认隐藏，移动端显示 */
.mobile-action-bar {
	display: none;
}
/* 复制工具栏：有统计结果时显示 */
.copy-action-bar {
	display: flex;
	gap: 8px;
}
.copy-action-bar .reset-btn {
	flex: 1;
}
.copy-action-bar .reset-btn.copied {
	border-color: var(--accent);
	color: var(--accent);
}
.damage-cell {
	font-size: 13px;
	font-weight: 700;
	color: var(--accent);
	text-align: center;
	white-space: nowrap;
	min-width: 48px;
}
/* 停用态：整体置灰 */
.part-row:not(.enabled) {
	opacity: 0.45;
}
/* 启用/停用开关 */
.part-row > .switch {
	padding: 0;
	border: none;
	background: none;
	justify-self: center;
}
/* 等级输入区：带边框容器，label 与下边框输入框同行 */
.field-group {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 2px 8px;
	border: 1px solid #5a3a54;
	border-radius: 10px;
	background: #170e1e;
}
.field-label {
	flex: none;
	font-size: 12px;
	font-weight: 700;
	color: #a494c5;
	white-space: nowrap;
}
/* 输入框：仅下边框（覆盖全局 .input-field 的四周边框） */
.field-group .input-field {
	flex: 1;
	margin-block: 4px;
	min-width: 0;
	height: 24px;
	border: none;
	border-bottom: 1px solid #5a3a54;
	border-radius: 0;
	background: transparent;
	color: #f4e6f0;
	font-size: 15px;
	padding: 3px 2px 2px;
	outline: none;
}
.field-group .input-field:focus {
	border-bottom-color: var(--accent);
}

/* 移动端：卡片式布局 */
@media (max-width: 680px) {
	/* 显示移动端工具栏 */
	.mobile-action-bar {
		display: flex;
		gap: 8px;
	}
	.mobile-action-bar .head-reset-btn {
		flex: 1;
		border-radius: 8px;
	}
	/* 隐藏桌面端表头 */
	.part-grid > .head-row {
		display: none;
	}
	.part-row {
		grid-template-columns: auto 1fr auto auto 1fr;
		grid-template-areas: "switch name damage damage damage" "switch cur sync target target";
		gap: 6px 6px;
		align-items: center;
		padding: 8px 10px;
		border: 1px solid #5a3a54;
		border-radius: 8px;
		background: rgba(26, 15, 34, 0.5);
	}
	/* 第一行：开关 + 部位名(select/label)，伤害在最右 */
	.part-row > .switch { grid-area: switch;}
	.part-row > .part-select { grid-area: name;font-size: 14px;height: 28px; border-radius: 5px;}
	.part-row > .part-label { grid-area: name; font-size: 14px;}
	/* part-select / part-label 右对齐（与左侧开关共处一格） */
	.part-row > .part-select,
	.part-row > .part-label {
		width: max-content;
		max-width: calc(100% - 40px);
	}
	.sync-buttons > button {
		width: 28px;
		height: 28px;
		font-size: 12px;
	}
	.field-group {
		border-radius: 5px;
		padding-inline: 4px;
		gap: 2px;
	}
	.field-group .input-field {
		margin-block: 1px;
		height: 20px;
		font-size: 12px;
		padding: 1px 2px 0;
	}
	/* damage-cell + 提示标题（表头隐藏后补充说明） */
	.damage-cell {
		grid-area: damage;
		align-self: center;
		justify-self: end;
		text-align: right;
	}
	.damage-cell::before {
		content: "伤害: ";
		font-weight: 400;
		color: #a494c5;
		line-height: 1.2;
	}
	/* 第二行：当前 + 同步 + 目标 */
	.part-row > .current-field { grid-area: cur; }
	.part-row > .sync-buttons { grid-area: sync; justify-self: center; }
	.part-row > .target-field { grid-area: target; }

	/* 伤害显示关闭：隐藏 part-select / damage-cell，剩余控件压缩成一行 */
	.part-grid.damage-hidden .part-row {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		border-radius: 5px;
		padding: 3px 4px 3px 5px;
	}
	.part-grid.damage-hidden .part-row > .part-select,
	.part-grid.damage-hidden .part-row > .damage-cell {
		display: none;
	}
	.part-grid.damage-hidden .part-row > .switch,
	.part-grid.damage-hidden .part-row > .part-label,
	.part-grid.damage-hidden .part-row > .current-field,
	.part-grid.damage-hidden .part-row > .sync-buttons,
	.part-grid.damage-hidden .part-row > .target-field {
		grid-area: auto;
	}
	.part-grid.damage-hidden .part-row > .part-label {
		display: none;
		flex: none;
		width: auto;
		max-width: none;
	}
	/* 单行模式下显示星魂的 compact label（两行模式隐藏） */
	.part-grid.damage-hidden .part-row > .part-label-compact {
		display: none;
		flex: none;
	}
	.part-grid.damage-hidden .part-row > .current-field,
	.part-grid.damage-hidden .part-row > .target-field {
		flex: 1;
		min-width: 0;
	}
	.part-grid.damage-hidden .part-row > .sync-buttons {
		flex: none;
	}
}

/* 下拉框 */
.part-select {
	border: 1px solid #5a3a54;
	background: #170e1e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23cc92c4' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 6px center / 12px;
	color: #eec8e0;
}
.part-select:focus {
	border-color: var(--accent);
}

/* 输入框 */
.input-field {
	border: 1px solid #5a3a54;
	background: #170e1e;
	color: #f4e6f0;
}

/* 折叠面板 */
.collapsible-panel {
	border: 1px solid #5a3a54;
	background: #1a1024;
}
.collapsible-header {
	color: var(--accent-2);
}
.collapsible-header:hover {
	background: #2c1840;
}
.collapsible-icon {
	color: #c4a8c0;
}

/* 币种标签 */
.coin-stock-label {
	color: #c4a8c0;
}

/* 统计区 */
.coin-badge {
	border: 1px solid #5c4060;
	background: #1a0f22;
	color: #e8d0e2;
}
.share-qr {
	border: 1px solid #5c4060;
	background: #1a0f22;
}

/* 明细表格 */
.result-table {
	border: 1px solid #5c4060;
	background: #1a0f22;
}
.result-row {
	border-bottom: 1px solid rgba(116, 163, 128, 0.15);
}
.result-header {
	background: #2c1840;
	color: #e6d49a;
}
.result-total {
	background: linear-gradient(90deg, #2e2048, #3c2654);
	color: #f0e6d2;
}

/* 提示文字使用变量，无需覆盖 */
/* 警告色（黄色）保持不变 */

/* 币种圆点配色（覆盖 style.css 默认配色） */
.coin-dot.copper { background: radial-gradient(circle at 30% 30%, #70cfff, #6b82bd 70%); }
.coin-dot.silver { background: radial-gradient(circle at 30% 30%, #b18cff, #9a5bb8 70%); }
.coin-dot.gold { background: radial-gradient(circle at 30% 30%, #fff4b2, #e0a325 70%); }
.coin-dot.rainbow { background: conic-gradient(#ff6aa0, #ffd05c, #7dff7d, #70cfff, #b18cff, #ff6aa0); }