/* Malina Telegram Mini App - frontend styles */
.mtm-buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	margin: 16px 0;
}

.mtm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	border-radius: 12px;
	text-decoration: none;
	font-weight: 600;
	border: 1px solid rgba(0,0,0,.12);
	background: rgba(0,0,0,.04);
	color: inherit;
	transition: transform .06s ease, opacity .12s ease;
}

.mtm-btn:hover {
	transform: translateY(-1px);
}

.mtm-btn--secondary {
	background: rgba(0,0,0,.02);
}

.mtm-btn--disabled {
	opacity: .55;
	pointer-events: none;
}

.mtm-note {
	font-size: 13px;
	opacity: .85;
}

.mtm-app {
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 16px;
	padding: 16px;
	margin: 16px 0;
	background: rgba(0,0,0,.02);
}

.mtm-app__title {
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 8px;
}

.mtm-app__status {
	font-size: 14px;
	margin-bottom: 8px;
}

.mtm-app__hint {
	font-size: 12px;
	opacity: .75;
}

/* Telegram theme support (if script sets CSS variables) */
:root {
	--mtm-bg: transparent;
	--mtm-text: inherit;
	--mtm-hint: rgba(0,0,0,.65);
	--mtm-button-bg: rgba(0,0,0,.06);
	--mtm-button-text: inherit;
	--mtm-button-border: rgba(0,0,0,.12);
}

.mtm-app {
	background: var(--mtm-bg);
	color: var(--mtm-text);
}

.mtm-app__hint, .mtm-note { color: var(--mtm-hint); }

.mtm-btn {
	background: var(--mtm-button-bg);
	color: var(--mtm-button-text);
	border-color: var(--mtm-button-border);
}