/* Card + rows */

.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin-top: 12px
}

.tabs {
	display: flex;
	gap: 4px;
	padding: 0 12px;
	border-bottom: 1px solid var(--border)
}

.tabs button {
	background: none;
	border: none;
	padding: 13px 14px;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
	border-bottom: 2px solid transparent
}

.tabs button.on {
	color: var(--primary);
	border-bottom-color: var(--primary)
}

.tabs button:hover {
	color: var(--heading)
}

.cardbody {
	padding: 6px 22px 14px
}

.row {
	display: flex;
	gap: 18px;
	padding: 13px 0;
	border-bottom: 1px solid #f2f4f7;
	align-items: flex-start
}

.row:last-child {
	border-bottom: none
}

.row .lab {
	flex: 0 0 240px;
	color: var(--muted);
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 7px
}

.row .lab .q {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid #cfd6e0;
	color: #aab2c0;
	font-size: 9px;
	line-height: 12px;
	text-align: center;
	flex-shrink: 0
}

.row .val {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	color: var(--text);
	word-break: break-word
}

.row .val .mono {
	font-size: 13px
}

.divider-lab {
	padding: 18px 0 8px 0;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--muted-2);
	border-bottom: 1px solid #f2f4f7
}

.copybtn {
	border: 1px solid var(--border-strong);
	background: #fbfcfe;
	border-radius: 6px;
	padding: 1px 7px;
	font-size: 11px;
	color: var(--muted);
	cursor: pointer;
	margin-left: 8px;
	font-family: var(--sans);
	vertical-align: middle
}

.copybtn:hover {
	color: var(--primary);
	border-color: var(--primary)
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 11px;
	border-radius: 20px;
	border: 1px solid var(--green-line);
	background: var(--green-bg);
	color: var(--green)
}

.pill .chk {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--green);
	color: #fff;
	font-size: 9px;
	line-height: 14px;
	text-align: center
}

.confirm {
	display: inline-block;
	font-size: 11.5px;
	color: #3f7d6f;
	background: var(--green-bg);
	border: 1px solid var(--green-line);
	padding: 2px 9px;
	border-radius: 6px;
	margin-left: 8px;
	font-weight: 600
}

.method-chip {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 6px;
	color: #1d5ac9;
	background: #e8f0fe;
	border: 1px solid #d6e4fd
}

.clock {
	color: var(--muted);
	margin-right: 5px
}

/* token transfer highlight */
.transfer-box {
	background: #fafbfe;
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 13px
}

.transfer-box .tag {
	font-size: 10.5px;
	font-weight: 700;
	color: #5b667a;
	background: #eef2f8;
	border-radius: 5px;
	padding: 2px 7px;
	text-transform: uppercase;
	letter-spacing: .3px
}

.transfer-box .tb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 8px
}

.transfer-box .lbl {
	color: var(--muted)
}

.transfer-box .amt {
	font-weight: 600;
	color: var(--heading)
}

.transfer-box .usd {
	color: var(--muted)
}

.arrow-i {
	display: inline-flex;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #eaf6ef;
	color: #12b886;
	align-items: center;
	justify-content: center;
	font-size: 11px
}

.action-line {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap
}

.action-line .flag {
	color: #c99a2e
}

.more-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: none;
	color: var(--primary);
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 6px 0
}

.more-btn .c {
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--primary);
	border-bottom: 2px solid var(--primary);
	transform: rotate(45deg);
	transition: .15s
}

.more-btn.open .c {
	transform: rotate(225deg)
}

#more {
	display: none
}

#more.show {
	display: block
}

.privacy {
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--muted-2);
	display: flex;
	align-items: center;
	gap: 8px
}