.hipool-dialog-card {
	box-sizing: border-box;
	width: 100%;
	max-height: calc(100vh - 32px);
	overflow: auto;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
	color: #606266;
	color-scheme: light;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	letter-spacing: 0;
}

.hipool-dialog-card--h5 {
	width: 280px;
	max-width: calc(100vw - 32px);
	animation: hipool-dialog-card-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hipool-dialog-card__title {
	display: flex;
	box-sizing: border-box;
	min-height: 40px;
	align-items: center;
	justify-content: center;
	padding: 9px 20px;
	background: #f5f5f5;
	color: #004459;
	font-size: 14px;
	font-weight: 600;
	line-height: 22px;
	text-align: center;
	white-space: normal;
	overflow-wrap: anywhere;
}

.hipool-dialog-card__content {
	box-sizing: border-box;
	overflow-wrap: anywhere;
}

.hipool-dialog-card__message {
	box-sizing: border-box;
	padding: 24px;
	color: #606266;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.hipool-dialog-card__actions {
	display: flex;
	box-sizing: border-box;
	align-items: stretch;
	justify-content: space-between;
	gap: 18px;
	padding: 0 20px 20px;
}

.hipool-dialog-card__action {
	display: flex;
	min-width: 0;
	min-height: 44px;
	flex: 1;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.hipool-dialog-card__button {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 8px 12px;
	border: 0;
	border-radius: 8px;
	background: #fff;
	color: #606266;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	letter-spacing: 0;
	text-align: center;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
	cursor: pointer;
	touch-action: manipulation;
	transition: filter 160ms ease, box-shadow 160ms ease;
}

.hipool-dialog-card__button::after {
	border: 0;
}

.hipool-dialog-card__button--cancel {
	border: 1px solid #f0e8e3;
	background: linear-gradient(180deg, #fff 0%, #fdfbf9 100%);
	box-shadow: 0 2px 5px rgba(115, 66, 34, 0.12);
}

.hipool-dialog-card__button--confirm {
	background-color: #f56600;
	background-image: url("/static/images/result/confirm1.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #fff;
	text-shadow: 0 1px 1px rgba(137, 48, 0, 0.45);
}

.hipool-dialog-card__button:focus-visible {
	outline: 2px solid #004459;
	outline-offset: 2px;
}

.hipool-dialog-card__button:active {
	filter: brightness(0.92);
}

.hipool-dialog-backdrop {
	background: rgba(0, 0, 0, 0.55);
	pointer-events: auto;
	animation: hipool-dialog-backdrop-in 180ms ease-out;
}

@keyframes hipool-dialog-card-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes hipool-dialog-backdrop-in {
	from {
		background: rgba(0, 0, 0, 0);
	}
	to {
		background: rgba(0, 0, 0, 0.55);
	}
}

@media (hover: hover) {
	.hipool-dialog-card__button:hover {
		filter: brightness(0.97);
	}
}

@media (max-width: 340px) {
	.hipool-dialog-card__actions {
		gap: 12px;
		padding-right: 16px;
		padding-left: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hipool-dialog-card,
	.hipool-dialog-backdrop {
		animation: none;
	}

	.hipool-dialog-card__button {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Constrain overlays to the app frame.
 *
 * uni-app centres the page in a 414px column on wide screens (the `uni-app--maxwidth`
 * class), but u-popup positions itself with `position: fixed` against the viewport. On a
 * desktop browser the sheet and its mask spanned the full window while the app occupied a
 * narrow strip in the middle.
 *
 * The overlay root is pinned to the same centred column. Children keep `left: 0; right: 0`
 * relative to that root, so the sheet lines up with the page without each mode needing its
 * own offset, and the slide-in transforms stay untouched.
 *
 * Scoped to the class so it only applies where uni-app actually capped the width; on
 * phones the column already equals the viewport and nothing changes.
 * ------------------------------------------------------------------------- */
.uni-app--maxwidth .u-drawer,
.uni-app--maxwidth .u-mask,
.uni-app--maxwidth .u-modal-wrapper {
	left: calc(50% - 207px) !important;
	right: auto !important;
	width: 414px !important;
	max-width: 100vw;
}

@media (max-width: 340px) {
	.hipool-dialog-card__actions {
		gap: 12px;
		padding-right: 16px;
		padding-left: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hipool-dialog-card,
	.hipool-dialog-backdrop {
		animation: none;
	}

	.hipool-dialog-card__button {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Constrain overlays to the app frame.
 *
 * uni-app centres the page in a 414px column on wide screens (the `uni-app--maxwidth`
 * class), but u-popup positions itself with `position: fixed` against the viewport. On a
 * desktop browser the sheet and its mask spanned the full window while the app occupied a
 * narrow strip in the middle.
 *
 * The rule is scoped to that class so it only applies when uni-app has actually capped the
 * width; on phones the column already equals the viewport and nothing changes.
 * ------------------------------------------------------------------------- */
.uni-app--maxwidth .u-drawer,
.uni-app--maxwidth .u-mask,
.uni-app--maxwidth .u-modal-wrapper {
	left: calc(50% - 207px) !important;
	right: auto !important;
	width: 414px !important;
	max-width: 100vw;
}
