.app-market-tile {
	display: flex;
	min-height: 132px;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;
	padding: 16px;
	text-decoration: none;
	color: inherit;
}

.app-market-category,
.app-market-meta,
.app-pro-meta,
.app-auth-status {
	color: var(--kalshi-palette-text-x20, rgba(255, 255, 255, 0.62));
	font-size: 12px;
	line-height: 1.35;
}

.app-market-title {
	margin: 0;
	font-size: 18px;
	line-height: 1.2;
	font-weight: 600;
}

.app-market-outcomes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.app-outcome {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid var(--kalshi-palette-stroke-x40, rgba(255, 255, 255, 0.15));
	border-radius: 999px;
	padding: 8px 10px;
	font-size: 13px;
}

.app-outcome strong,
.app-pro-price {
	font-variant-numeric: tabular-nums;
}

.app-outcome--yes {
	border-color: var(--kalshi-palette-green-x10, #28cc95);
}

.app-market-change--positive {
	color: var(--kalshi-palette-green-x10, #28cc95);
}

.app-market-change--negative {
	color: #fa6c71;
}

.app-featured {
	display: block;
	padding: 4px 0;
	text-decoration: none;
	color: inherit;
}

.app-featured-title {
	margin: 6px 0 12px;
	font-size: 28px;
	line-height: 1.05;
}

.app-featured-row,
.app-pro-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.app-featured-row {
	padding: 8px 0;
	border-top: 1px solid var(--kalshi-palette-stroke-x40, rgba(255, 255, 255, 0.15));
}

.app-pro-feed {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.app-pro-row {
	padding: 8px 0;
	border-bottom: 1px solid var(--kalshi-palette-stroke-x40, rgba(255, 255, 255, 0.1));
	text-decoration: none;
	color: inherit;
}

.app-pro-copy {
	display: flex;
	min-width: 0;
	flex: 1;
	flex-direction: column;
	gap: 2px;
}

.app-pro-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
}

.app-auth-backdrop {
	position: fixed;
	z-index: 10000;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 28px 16px 16px;
	background: var(--kalshi-palette-surface-overlay, rgba(0, 0, 0, 0.66));
	color: var(--kalshi-palette-text-x10, #fff);
}

.app-auth-dialog {
	position: relative;
	width: min(480px, 100%);
	max-height: calc(100vh - 80px);
	overflow: hidden;
	border-radius: 16px;
	background: var(--kalshi-palette-surface-x10, #101113);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
	animation: app-auth-enter 300ms ease 100ms both;
}

.app-auth-backdrop:has(.app-auth-dialog--verification) {
	padding: 0;
	background: var(--kalshi-palette-surface-x10, #101113);
}

.app-auth-dialog--verification {
	width: 100%;
	max-height: none;
	min-height: 100vh;
	border-radius: 0;
	box-shadow: none;
	animation: none;
}

.app-verification-header {
	display: grid;
	grid-template-columns: 40px 1fr 40px;
	align-items: center;
	min-height: 80px;
	padding: 0 12px;
	border-bottom: 1px solid var(--kalshi-palette-fill-x50, rgba(255, 255, 255, 0.12));
}

.app-verification-icon-button {
	display: grid;
	width: 32px;
	height: 32px;
	place-items: center;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.app-verification-icon-button:hover {
	background: var(--kalshi-palette-fill-x50, rgba(255, 255, 255, 0.08));
}

.app-verification-icon-button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.app-verification-brand {
	color: var(--kalshi-palette-brand-primary, #28cc95);
	font-family: var(--font-kalshi-sans, sans-serif);
	font-size: 22px;
	font-weight: 700;
	text-align: center;
}

.app-verification-main {
	width: min(440px, calc(100% - 32px));
	margin: 56px auto 0;
}

.app-verification-main h2 {
	margin: 0 0 12px;
	font-size: 28px;
	font-weight: 500;
	line-height: 36px;
}

.app-verification-form {
	display: grid;
	gap: 12px;
}

.app-verification-code {
	letter-spacing: 4px;
}

.app-verification-copy {
	margin: 0;
	color: var(--kalshi-palette-text-x20, rgba(255, 255, 255, 0.62));
	font-size: 13px;
	line-height: 20px;
}

.app-verification-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 12px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.app-verification-remember input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--kalshi-palette-brand-primary, #28cc95);
}

.app-verification-access {
	min-height: 48px;
	border: 1px solid var(--kalshi-palette-fill-x40, rgba(255, 255, 255, 0.22));
	border-radius: 999px;
	background: transparent;
	color: var(--kalshi-palette-green-x10, #28cc95);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.app-verification-access:hover {
	background: var(--kalshi-palette-fill-x50, rgba(255, 255, 255, 0.08));
}


.app-auth-scroll {
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	padding: 16px 18px 18px;
}

.app-auth-close {
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transform: translate(-8px, -8px);
}

.app-auth-close svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.app-auth-title {
	margin: 0;
	text-align: center;
	font-size: 30px;
	font-weight: 500;
	line-height: 36px;
}

.app-auth-spacer {
	height: 24px;
}

.app-auth-spacer--small {
	height: 8px;
}

.app-auth-form {
	display: grid;
	gap: 8px;
}

.app-auth-provider,
.app-auth-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	border: 0;
	border-radius: 999px;
	padding: 0 16px;
	font-family: var(--font-kalshi-sans, inherit);
	font-weight: 600;
	font-size: 15px;
	}

.app-auth-provider {
	background: var(--kalshi-palette-fill-x10, #eee);
	color: var(--kalshi-palette-text-inverse, #111);
}

.app-auth-provider svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.app-auth-provider:disabled {
	cursor: not-allowed;
	opacity: 0.34;
}

.app-auth-fields {
	display: grid;
	gap: 8px;
	margin-top: 8px;
}

.app-auth-field {
	display: block;
	border: 1px solid var(--kalshi-palette-fill-x40, rgba(255, 255, 255, 0.22));
	border-radius: 8px;
	padding: 1px;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.app-auth-field:focus-within {
	border-color: var(--kalshi-palette-green-x10, #28cc95);
	box-shadow: 0 0 0 1px var(--kalshi-palette-green-x10, #28cc95);
}

.app-auth-password-field {
	display: flex;
	align-items: center;
}

.app-auth-input {
	width: 100%;
	box-sizing: border-box;
	border: 0;
	border-radius: 7px;
	padding: 12px 14px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 16px;
	outline: 0;
}

.app-auth-input--masked {
	-webkit-text-security: disc;
}

.app-auth-password-toggle {
	display: inline-grid;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	margin-right: 3px;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--kalshi-palette-text-x20, rgba(255, 255, 255, 0.62));
	cursor: pointer;
}

.app-auth-password-toggle:hover {
	background: var(--kalshi-palette-fill-x50, rgba(255, 255, 255, 0.08));
}

.app-auth-password-toggle svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.app-auth-submit {
	margin-top: 8px;
	background: var(--kalshi-palette-brand-primary, #28cc95);
	color: #07130f;
	cursor: pointer;
}

.app-auth-submit:disabled {
	cursor: not-allowed;
	opacity: 0.2;
}

.app-auth-status {
	min-height: 0;
	margin: 0;
	text-align: center;
}

.app-auth-terms {
	margin: 0;
	color: var(--kalshi-palette-text-x20, rgba(255, 255, 255, 0.62));
	font-size: 12px;
	line-height: 18px;
	text-align: center;
}

@keyframes app-auth-enter {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.app-auth-status--error {
	color: #fa8f94;
}

.app-auth-status--success {
	color: var(--kalshi-palette-green-x10, #28cc95);
}

body.app-modal-open {
	overflow: hidden;
}

html[data-market-loading='true'] [data-testid='market-tile'] {
	min-height: 168px;
	overflow: hidden;
	pointer-events: none;
}

html[data-market-loading='true'] [data-testid='market-tile'] > * {
	visibility: hidden;
}

html[data-market-loading='true'] [data-testid='market-tile']::after {
	position: absolute;
	inset: 0;
	content: '';
	border-radius: inherit;
	opacity: 0.82;
	background:
		linear-gradient(rgba(255, 255, 255, 0.045) 0 0) 16px 18px / 76px 10px no-repeat,
		linear-gradient(rgba(255, 255, 255, 0.075) 0 0) 16px 48px / calc(100% - 42px) 16px no-repeat,
		linear-gradient(rgba(255, 255, 255, 0.045) 0 0) 16px 94px / 32% 10px no-repeat,
		linear-gradient(rgba(255, 255, 255, 0.035) 0 0) 16px 116px / calc(100% - 32px) 6px no-repeat,
		linear-gradient(rgba(255, 255, 255, 0.045) 0 0) 16px 142px / 38% 10px no-repeat,
		linear-gradient(rgba(255, 255, 255, 0.035) 0 0) 16px 164px / calc(100% - 32px) 6px no-repeat,
		linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.045) 48%, transparent 100%) 0 0 / 200% 100% no-repeat;
	animation: app-market-skeleton 1.8s ease-in-out infinite;
}

html[data-market-loading='true'] .market-slide-container {
	min-height: 26rem;
}

html[data-market-loading='true'] .market-slide-container > div {
	visibility: hidden;
}

html[data-market-loading='true'] .market-slide-container::after {
	position: absolute;
	inset: 20px;
	content: '';
	border-radius: 14px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.05) 0 0) 0 0 / 20% 10px no-repeat,
		linear-gradient(rgba(255, 255, 255, 0.08) 0 0) 0 32px / 58% 30px no-repeat,
		linear-gradient(rgba(255, 255, 255, 0.035) 0 0) 0 90px / 42% 8px no-repeat,
		linear-gradient(rgba(255, 255, 255, 0.035) 0 0) 0 118px / 42% 8px no-repeat,
		linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 48%, transparent 100%) 0 0 / 200% 100% no-repeat;
	animation: app-market-skeleton 1.8s ease-in-out infinite;
}

@keyframes app-market-skeleton {
	to {
		background-position: 16px 18px, 16px 48px, 16px 94px, 16px 116px, 16px 142px, 16px 164px, -200% 0;
	}
}

.app-slide-chart {
	display: flex;
	flex: 1;
	min-height: 0;
	flex-direction: column;
	padding: 12px 12px 10px 18px;
	color: inherit;
	text-decoration: none;
}

.app-slide-market-image {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1px solid var(--kalshi-palette-fill-x50, rgba(255, 255, 255, 0.16));
	border-radius: 999px;
}

.app-slide-market-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.app-slide-chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 14px;
	min-height: 35px;
	align-items: center;
	font-size: 12px;
	color: var(--kalshi-palette-text-x20, rgba(255, 255, 255, 0.66));
}

.app-slide-chart-legend-item {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.app-slide-chart-legend-item i {
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	border-radius: 999px;
}

.app-slide-chart-legend-item b {
	color: var(--kalshi-palette-text-x10, #fff);
	font-weight: 600;
}

.app-slide-chart-svg {
	width: 100%;
	height: 100%;
	min-height: 154px;
	overflow: visible;
}

.app-slide-chart-grid {
	fill: none;
	stroke: var(--kalshi-palette-fill-x40, rgba(255, 255, 255, 0.14));
	stroke-dasharray: 2 5;
	stroke-width: 1;
}

.app-slide-chart-path {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.5;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.app-slide-chart-path--draw {
	animation: app-slide-chart-draw 900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.app-slide-chart-axis {
	fill: var(--kalshi-palette-text-x30, rgba(255, 255, 255, 0.52));
	font-family: inherit;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.app-slide-chart-date {
	font-size: 11px;
}

.app-slide-chart-halo {
	fill-opacity: 0.16;
}

.app-slide-chart-dot {
	stroke: var(--kalshi-palette-container-x40, #101113);
	stroke-width: 2px;
}

@keyframes app-slide-chart-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@media (max-width: 640px) {
	.app-auth-backdrop {
	padding: 12px;
	}

	.app-auth-dialog {
	margin-top: 8px;
	border-radius: 20px;
	}
}