/**
 * LIFENOV Wallet — 前台样式
 * 依据 design.md Rev 04 token 体系（--ln-*）。
 * 圆角统一 2px，阴影仅一档，功能色 ≤10%。
 */

.lfw-wrap {
	/* 覆盖 token，站点主题若未定义也能正常工作 */
	--ln-ink: #0C2E3F;
	--ln-brand: #10465C;
	--ln-petrol: #0F5A6E;
	--ln-abyss: #0A1F2C;
	--ln-teal: #0B7382;
	--ln-signal: #17B0A6;
	--ln-mist: #E6F0F2;
	--ln-paper: #F4F8F9;
	--ln-white: #FFFFFF;
	--ln-rule: #D6E4E6;
	--ln-ink-2: #3D5A66;
	--ln-ink-3: #5B7480;
	--ln-action: #C1462F;
	--ln-danger: #B3261E;
	--ln-trust: #2F6B52;

	--ln-radius: 2px;
	--ln-shadow: 0 1px 3px rgba(12, 46, 63, .08);
	--ln-font-en: Inter, "Instrument Sans", -apple-system, "Segoe UI", sans-serif;

	/* 布局：容器居中，最大 880px（design.md §4 内容列宽） */
	max-width: 880px;
	margin: 0 auto;
	padding: 0 20px;
	font-family: var(--ln-font-en);
	font-size: 16px;
	line-height: 1.7;
	color: var(--ln-ink);
	box-sizing: border-box;
}

.lfw-wrap *,
.lfw-wrap *::before,
.lfw-wrap *::after {
	box-sizing: border-box;
}

/* 数字统一等宽对齐 */
.lfw-wrap .num {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* ── 余额卡片 ───────────────────────────── */

.lfw-balance-card {
	background: var(--ln-brand);
	color: var(--ln-white);
	border-radius: var(--ln-radius);
	padding: 32px;
	margin: 32px 0 0;
}

.lfw-balance-label {
	margin: 0;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

.lfw-balance-amount {
	margin: 8px 0 20px;
	font-size: 44px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.01em;
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.lfw-balance-amount .lfw-cur {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--ln-signal);
}

.lfw-balance-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .16);
}

.lfw-balance-meta div {
	min-width: 0;
}

.lfw-balance-meta dt {
	font-size: 12px;
	color: rgba(255, 255, 255, .64);
	margin-bottom: 2px;
}

.lfw-balance-meta dd {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	color: var(--ln-white);
}

/* ── 选项卡 ─────────────────────────────── */

.lfw-tabs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin-top: 28px;
	border: 1px solid var(--ln-rule);
	border-radius: var(--ln-radius);
	background: var(--ln-white);
	overflow: hidden;
}

.lfw-tab {
	appearance: none;
	-webkit-appearance: none;
	background: var(--ln-white);
	border: 0;
	border-right: 1px solid var(--ln-rule);
	border-bottom: 3px solid transparent;
	border-radius: 0;
	padding: 14px 10px;
	cursor: pointer;
	font-family: inherit;
	text-align: center;
	min-height: 44px;
	transition: background .15s, border-color .15s;
}

.lfw-tab:last-child {
	border-right: 0;
}

.lfw-tab:hover {
	background: var(--ln-paper);
}

.lfw-tab-label {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--ln-ink);
	line-height: 1.3;
}

.lfw-tab-sub {
	display: block;
	font-size: 11.5px;
	color: var(--ln-ink-3);
	margin-top: 2px;
}

.lfw-tab[aria-selected="true"] {
	background: var(--ln-mist);
	border-bottom-color: var(--ln-teal);
}

.lfw-tab:focus-visible {
	outline: 2px solid var(--ln-teal);
	outline-offset: -2px;
}

/* ── 面板 ───────────────────────────────── */

.lfw-panel-wrap {
	background: var(--ln-white);
	border: 1px solid var(--ln-rule);
	border-top: 0;
	border-radius: 0 0 var(--ln-radius) var(--ln-radius);
	padding: 28px;
}

.lfw-panel-wrap[hidden] {
	display: none;
}

/* ── 提示条 ─────────────────────────────── */

.lfw-alert {
	background: var(--ln-mist);
	border-left: 3px solid var(--ln-teal);
	padding: 12px 16px;
	margin: 16px 0 0;
	font-size: 14px;
	color: var(--ln-ink);
	border-radius: 0 var(--ln-radius) var(--ln-radius) 0;
}

/* ── 商家备注 ───────────────────────────── */

.lfw-merchant-note {
	background: var(--ln-paper);
	border: 1px solid var(--ln-rule);
	border-left: 3px solid var(--ln-signal);
	border-radius: 0 var(--ln-radius) var(--ln-radius) 0;
	padding: 18px 20px;
	margin-bottom: 26px;
}

.lfw-mn-title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ln-ink-2);
}

.lfw-mn-body {
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--ln-ink);
}

.lfw-mn-body p {
	margin: 0 0 8px;
}

.lfw-mn-body p:last-child {
	margin-bottom: 0;
}

/* ── 表单 ───────────────────────────────── */

.lfw-form {
	margin: 0;
}

.lfw-field {
	margin-bottom: 20px;
}

.lfw-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--ln-ink-2);
}

.lfw-field input[type="text"],
.lfw-field input[type="number"],
.lfw-field textarea {
	width: 100%;
	max-width: 420px;
	padding: 11px 13px;
	font-family: inherit;
	font-size: 15.5px;
	color: var(--ln-ink);
	background: var(--ln-white);
	border: 1px solid var(--ln-rule);
	border-radius: var(--ln-radius);
	transition: border-color .15s, box-shadow .15s;
}

.lfw-field input:focus,
.lfw-field textarea:focus {
	outline: 0;
	border-color: var(--ln-teal);
	box-shadow: 0 0 0 2px rgba(11, 115, 130, .18);
}

.lfw-field input:disabled {
	background: #E4EBEC;
	color: #8A9AA3;
	cursor: not-allowed;
}

/* 提示框 */
.lfw-callout {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	background: var(--ln-paper);
	border: 1px solid var(--ln-rule);
	border-radius: var(--ln-radius);
	padding: 13px 16px;
	margin-bottom: 24px;
	font-size: 14px;
	color: var(--ln-ink-2);
}

.lfw-callout strong {
	font-size: 18px;
	font-weight: 600;
	color: var(--ln-ink);
}

/* 按钮 */
.lfw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--ln-radius);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, border-color .15s, color .15s;
}

.lfw-btn-primary {
	background: var(--ln-action);
	border-color: var(--ln-action);
	color: var(--ln-white);
}

.lfw-btn-primary:hover {
	background: #A93A26;
	border-color: #A93A26;
}

.lfw-btn-primary:focus-visible {
	outline: 2px solid var(--ln-teal);
	outline-offset: 2px;
}

.lfw-btn-primary:disabled {
	background: #E4EBEC;
	border-color: #E4EBEC;
	color: #8A9AA3;
	cursor: not-allowed;
}

.lfw-footnote {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.65;
	color: var(--ln-ink-3);
}

/* ── 历史账单表 ─────────────────────────── */

.lfw-statement-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.lfw-h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--ln-ink);
}

.lfw-count {
	font-size: 13px;
	color: var(--ln-ink-3);
}

.lfw-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.lfw-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 520px;
}

.lfw-table th,
.lfw-table td {
	padding: 11px 12px;
	text-align: left;
	border-bottom: 1px solid var(--ln-rule);
	vertical-align: top;
}

.lfw-table thead th {
	background: var(--ln-paper);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ln-ink-2);
	white-space: nowrap;
}

.lfw-table tbody tr:hover {
	background: var(--ln-paper);
}

.lfw-ta-r {
	text-align: right;
	white-space: nowrap;
}

.lfw-td-date {
	white-space: nowrap;
	color: var(--ln-ink-2);
	font-size: 13.5px;
}

.lfw-td-memo {
	color: var(--ln-ink-3);
	font-size: 13.5px;
	max-width: 220px;
}

.lfw-plus {
	color: var(--ln-trust);
	font-weight: 600;
}

.lfw-minus {
	color: var(--ln-danger);
	font-weight: 600;
}

/* 分页 */
.lfw-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 20px;
}

.lfw-pgbtn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ln-brand);
	background: var(--ln-white);
	border: 1px solid var(--ln-brand);
	border-radius: var(--ln-radius);
	text-decoration: none;
}

.lfw-pgbtn:hover {
	background: var(--ln-mist);
}

.lfw-pgpos {
	font-size: 13.5px;
	color: var(--ln-ink-3);
}

/* ── 申请记录 ───────────────────────────── */

.lfw-sublist {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--ln-rule);
}

.lfw-sublist-title {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ln-ink-3);
}

.lfw-reqlist {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ln-rule);
	border-radius: var(--ln-radius);
}

.lfw-reqrow {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--ln-rule);
}

.lfw-reqrow:last-child {
	border-bottom: 0;
}

.lfw-reqrow-main {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1 1 240px;
}

.lfw-reqrow-type {
	font-size: 15px;
	font-weight: 600;
	color: var(--ln-ink);
}

.lfw-reqrow-amt {
	margin-left: 8px;
	font-weight: 500;
	color: var(--ln-ink-2);
}

.lfw-reqrow-date {
	font-size: 12.5px;
	color: var(--ln-ink-3);
}

.lfw-reqrow-subj {
	font-size: 13.5px;
	color: var(--ln-ink-2);
}

.lfw-reqrow-note {
	font-size: 13px;
	color: var(--ln-ink-3);
	font-style: italic;
}

.lfw-reqrow-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	flex: 0 1 auto;
	max-width: 100%;
}

.lfw-reqrow-desc {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ln-ink-3);
	text-align: right;
}

/* 状态徽章：颜色 + 文字双重编码（不依赖颜色单独传达） */
.lfw-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--ln-radius);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
}

.lfw-pill-ok {
	background: #E4F0EA;
	color: #1F6B4C;
}

.lfw-pill-warn {
	background: #FBEFDD;
	color: #8A5200;
}

.lfw-pill-info {
	background: var(--ln-mist);
	color: var(--ln-brand);
}

.lfw-pill-error {
	background: #FBEAE8;
	color: #9E211B;
}

.lfw-empty {
	margin: 0;
	padding: 26px 0;
	text-align: center;
	color: var(--ln-ink-3);
	font-size: 14.5px;
}

/* ── 响应式 ─────────────────────────────── */

/* 平板 */
@media (max-width: 979px) {
	.lfw-wrap {
		padding: 0 24px;
	}

	.lfw-balance-amount {
		font-size: 38px;
	}
}

/* 手机 */
@media (max-width: 639px) {
	.lfw-wrap {
		padding: 0 16px;
		font-size: 15.5px;
	}

	.lfw-balance-card {
		padding: 24px 20px;
		margin-top: 24px;
	}

	.lfw-balance-amount {
		font-size: 32px;
		gap: 8px;
	}

	.lfw-balance-amount .lfw-cur {
		font-size: 15px;
	}

	.lfw-balance-meta {
		gap: 20px;
	}

	.lfw-balance-meta dd {
		font-size: 16px;
	}

	/* 选项卡改为 2×2 网格，避免四列挤压 */
	.lfw-tabs {
		grid-template-columns: repeat(2, 1fr);
	}

	.lfw-tab {
		border-bottom: 1px solid var(--ln-rule);
		padding: 12px 8px;
	}

	.lfw-tab:nth-child(2n) {
		border-right: 0;
	}

	.lfw-tab:nth-child(n+3) {
		border-bottom: 0;
	}

	.lfw-tab-label {
		font-size: 14px;
	}

	.lfw-tab-sub {
		display: none;
	}

	.lfw-panel-wrap {
		padding: 22px 18px;
	}

	.lfw-field input[type="text"],
	.lfw-field input[type="number"],
	.lfw-field textarea {
		max-width: 100%;
		font-size: 16px; /* 防 iOS 聚焦缩放 */
	}

	.lfw-btn {
		width: 100%;
	}

	.lfw-reqrow {
		flex-direction: column;
	}

	.lfw-reqrow-side {
		align-items: flex-start;
	}

	.lfw-reqrow-desc {
		text-align: left;
	}

	.lfw-callout {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* 触屏设备去掉 hover 态 */
@media (hover: none) {
	.lfw-tab:hover,
	.lfw-table tbody tr:hover {
		background: var(--ln-white);
	}

	.lfw-tab[aria-selected="true"] {
		background: var(--ln-mist);
	}

	.lfw-pgbtn:hover {
		background: var(--ln-white);
	}
}