/* Aumaujaya YouTube Subscribe — front-end card */

.aum-panel {
	position: fixed;
	z-index: 99990;
	width: 320px;
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
	padding: 22px 22px 20px;
	border-radius: 18px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	opacity: 0;
	transform: translateY(16px) scale(.98);
	transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
	box-shadow: 0 18px 48px rgba(0,0,0,.22);
}
.aum-panel.aum-visible { opacity: 1; transform: translateY(0) scale(1); }
.aum-panel[hidden] { display: block; }

.aum-place-bottom-right { right: 20px; bottom: 20px; }
.aum-place-bottom-left  { left: 20px;  bottom: 20px; }

.aum-x {
	position: absolute;
	top: 10px; right: 12px;
	background: transparent;
	border: 0;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	opacity: .55;
	padding: 4px;
	color: inherit;
}
.aum-x:hover { opacity: 1; }

.aum-mark {
	width: 46px; height: 46px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 12px;
}
.aum-title { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.aum-text { font-size: 13.5px; margin: 0 0 12px; opacity: .88; }
.aum-tally { font-size: 12px; margin: 0 0 12px; opacity: .7; }
.aum-tally span { font-weight: 700; opacity: 1; }

.aum-join {
	display: inline-flex; align-items: center; gap: 8px;
	text-decoration: none;
	font-size: 14.5px; font-weight: 700;
	padding: 11px 20px;
	border-radius: 999px;
	transition: transform .15s ease, filter .15s ease;
	width: 100%;
	box-sizing: border-box;
	justify-content: center;
}
.aum-join:hover { transform: translateY(-1px); filter: brightness(1.05); }
.aum-join:active { transform: translateY(0); }

.aum-foot { font-size: 11px; margin: 10px 0 0; text-align: center; opacity: .55; }

/* ---------- Template: Lotus ---------- */
.aum-theme-lotus { background: #FBF3E4; color: #4A3B2A; }
.aum-theme-lotus .aum-mark { background: #F3D9A8; color: #C8791E; }
.aum-theme-lotus .aum-join { background: #E0912B; color: #fff; }

/* ---------- Template: Twilight ---------- */
.aum-theme-twilight { background: #1E2145; color: #EDE9F5; }
.aum-theme-twilight .aum-mark { background: rgba(240,200,90,.15); color: #F0C85A; }
.aum-theme-twilight .aum-join { background: #F0C85A; color: #1E2145; }

/* ---------- Template: Sandalwood ---------- */
.aum-theme-sandal { background: #EDE6DA; color: #514A3C; }
.aum-theme-sandal .aum-mark { background: #D9CBB4; color: #8A6E4B; }
.aum-theme-sandal .aum-join { background: #8A6E4B; color: #fff; }

/* ---------- Template: Crimson ---------- */
.aum-theme-crimson { background: #fff; color: #212121; border: 1px solid #eee; }
.aum-theme-crimson .aum-mark { background: #FFE8E8; color: #FF0000; }
.aum-theme-crimson .aum-join { background: #FF0000; color: #fff; }

/* ---------- Template: Temple ---------- */
.aum-theme-temple { background: #6B1F27; color: #FDE9C8; }
.aum-theme-temple .aum-mark { background: rgba(245,180,60,.18); color: #F5B43C; }
.aum-theme-temple .aum-join { background: #F5B43C; color: #6B1F27; }

/* ---------- Template: Mist ---------- */
.aum-theme-mist {
	background: rgba(255,255,255,.72);
	color: #2A2A2A;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,.6);
}
.aum-theme-mist .aum-mark { background: #F1F1F1; color: #FF0000; }
.aum-theme-mist .aum-join { background: #212121; color: #fff; }

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
	.aum-panel { width: calc(100vw - 24px); left: 12px; right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.aum-panel { transition: opacity .2s ease; transform: none; }
	.aum-panel.aum-visible { transform: none; }
	.aum-join:hover { transform: none; }
}