.tag-app{
	max-width:1200px;
	margin:auto;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	color:#111827;
}

.tag-page{
	display:none;
	animation:tagFade .25s ease;
}

.tag-page.active{
	display:block;
}

@keyframes tagFade{
	from{
		opacity:0;
		transform:translateY(8px);
	}
	to{
		opacity:1;
		transform:translateY(0);
	}
} 

.tag-app{
	max-width:100%;
	overflow-x:hidden;
}

.tag-preview-wrap{
	max-width:520px;
	margin:20px auto;
	padding:12px;
}

.tag-preview-wrap canvas{
	width:100%;
	height:auto;
	border-radius:28px;
	background:#ffffff;
	box-shadow:
		0 12px 40px rgba(0,0,0,.08),
		0 2px 10px rgba(0,0,0,.04);
	touch-action:none;
	display:block;
}

.tag-bottom-actions{
	max-width:520px;
	margin:24px auto 0;
	display:flex;
	flex-direction:column;
	gap:14px;
	padding:0 12px;
}

.tag-btn-primary,
.tag-btn-download,
.tag-btn-change-photo,
.tag-btn-png,
.tag-btn-final-download{
	border:none;
	background:linear-gradient(135deg,#28d7c7,#21c7b8);
	color:#0b1117;
	padding:18px 32px;
	border-radius:999px;
	cursor:pointer;
	font-size:20px;
	font-weight:700;
	width:100%;
	max-width:440px;
	min-height:64px;
	margin:auto;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	box-sizing:border-box;
	box-shadow:
		0 10px 25px rgba(32,211,194,.25),
		inset 0 1px 0 rgba(255,255,255,.3);
	transition:all .2s ease;
}

.tag-btn-primary:hover,
.tag-btn-download:hover,
.tag-btn-change-photo:hover,
.tag-btn-png:hover,
.tag-btn-final-download:hover{
	transform:translateY(-2px);
	box-shadow:
		0 14px 30px rgba(32,211,194,.35),
		inset 0 1px 0 rgba(255,255,255,.3);
}

.tag-btn-final-download.disabled{
	opacity:.45;
	cursor:not-allowed;
	pointer-events:none;
	filter:grayscale(1);
}

.tag-editor-controls{
	text-align:center;
	margin-top:20px;
}

.tag-control-row{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:10px;
}

.tag-mini-btn{
	border:none;
	background:#fff;
	padding:12px 18px;
	border-radius:14px;
	font-size:14px;
	font-weight:600;
	cursor:pointer;
	box-shadow:
		0 4px 12px rgba(0,0,0,.06);
	transition:all .2s ease;
}

.tag-mini-btn:hover{
	transform:translateY(-2px);
	background:#f8fafc;
}

/*
|--------------------------------------------------------------------------
| MODAL
|--------------------------------------------------------------------------
*/

.tag-modal{
	position:fixed;
	inset:0;
	display:none;
	align-items:center;
	justify-content:center;
	padding:40px 24px;
	overflow-x:hidden;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	z-index:2147483647;
	opacity:0;
	visibility:hidden;
	transition:
		opacity .24s ease,
		visibility .24s ease;
}

.tag-modal.active{
	display:flex;
	opacity:1;
	visibility:visible;
}

/*
|--------------------------------------------------------------------------
| FULLSCREEN BACKDROP BLUR
|--------------------------------------------------------------------------
*/

.tag-modal::before{
	content:"";
	position:fixed;
	inset:0;

	background:
		radial-gradient(
			circle at top right,
			rgba(32,211,194,.16),
			transparent 35%
		),
		rgba(15,23,42,.58);

	backdrop-filter:
		blur(18px)
		saturate(160%);

	-webkit-backdrop-filter:
		blur(18px)
		saturate(160%);

	z-index:0;
}

/*
|--------------------------------------------------------------------------
| MODAL BOX
|--------------------------------------------------------------------------
*/

.tag-modal-box{
	position:relative;
	z-index:2;

	width:min(680px, calc(100vw - 40px));

	padding:56px 52px;

	border-radius:36px;

	box-sizing:border-box;

	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,.98),
			rgba(255,255,255,.95)
		);

	border:
		1px solid rgba(255,255,255,.65);

	box-shadow:
		0 60px 140px rgba(0,0,0,.32),
		0 18px 40px rgba(0,0,0,.12);

	backdrop-filter:
		blur(14px);

	-webkit-backdrop-filter:
		blur(14px);

	transform:
		translateY(24px)
		scale(.96);

	opacity:0;

	transition:
		transform .24s ease,
		opacity .24s ease;
}

.tag-modal.active .tag-modal-box{
	transform:
		translateY(0)
		scale(1);

	opacity:1;
}

.tag-modal-close{
	position:absolute;
	top:18px;
	right:18px;
	width:42px;
	height:42px;
	border:none;
	border-radius:50%;
	background:#f3f4f6;
	font-size:24px;
	cursor:pointer;
	transition:all .2s ease;
	z-index:3;
}

.tag-modal-close:hover{
	background:#e5e7eb;
	transform:rotate(90deg);
}

.tag-modal-box h2{
	font-size:34px;
	line-height:1.2;
	margin:0 0 14px;
	font-weight:800;
	letter-spacing:-.03em;
	color:#111827;
	text-align:center;
}

.tag-modal-box p{
	margin:0 0 34px;
	color:#6b7280;
	font-size:18px;
	line-height:1.7;
	text-align:center;
}

.tag-mirror-buttons{
	display:flex;
	flex-direction:column;
	gap:14px;
}

.tag-mirror-btn{
	display:flex;
	align-items:center;
	justify-content:center;

	width:100%;
	max-width:440px;

	min-height:68px;

	margin:auto;

	padding:18px 26px;

	border-radius:999px;

	text-decoration:none;

	font-weight:700;

	font-size:18px;

	background:#ffffff;

	border:2px solid #e5e7eb;

	color:#111827;

	box-sizing:border-box;

	box-shadow:
		0 6px 20px rgba(0,0,0,.04);

	transition:
		transform .18s ease,
		box-shadow .18s ease,
		background .18s ease;
}

.tag-mirror-btn:hover{
	transform:translateY(-2px);
}

.tag-divider{
	position:relative;
	text-align:center;
	margin:34px 0;
}

.tag-divider::before{
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:50%;
	height:1px;
	background:#e5e7eb;
}

.tag-divider span{
	position:relative;
	background:inherit;
	padding:0 18px;
	color:#6b7280;
	font-weight:600;
	font-size:15px;
}


/*
|--------------------------------------------------------------------------
| DOWNLOAD PAGE
|--------------------------------------------------------------------------
*/

.tag-download-layout{
	display:flex;
	flex-direction:column;
	gap:24px;
	padding:20px 0;
	max-width:560px;
	margin:0 auto;
	width:100%;
}

.tag-ad-box{
	width:100%;
	max-width:560px;
	min-height:250px;
	margin:0 auto;

	border-radius:12px;
	background:linear-gradient(145deg,#ffffff,#eef2ff);
	border:1px solid rgba(255,255,255,.7);

	box-shadow:
		0 20px 40px rgba(0,0,0,.06);

	display:flex;
	align-items:center;
	justify-content:center;

	position:relative;
	overflow:visible;
}

.tag-ad-box ins:empty {
	display: none;
}

.tag-ad-box::before{
	content:"";
	position:absolute;
	top:24px;
	left:24px;
	font-size:12px;
	font-weight:700;
	letter-spacing:1px;
	color:#94a3b8;
}

.tag-ad-box::after{
	content:"";
	position:absolute;
	width:280px;
	height:280px;
	background:radial-gradient(circle,#20d3c240,transparent 70%);
	top:-60px;
	right:-60px;
}

.tag-download-right{
	width:100%;
	max-width:560px;
	margin:0 auto;

	display:flex;
	flex-direction:column;
	align-items:stretch;

	gap:20px;
}

.tag-progress-card{
	background:#ffffff;
	border-radius:30px;
	padding:42px 36px;
	box-shadow:
		0 20px 50px rgba(0,0,0,.08);
	position:relative;
	overflow:hidden;
}

.tag-progress-top{
	display:flex;
	align-items:center;
	gap:16px;
	margin-bottom:20px;
}

.tag-progress-icon{
	width:64px;
	height:64px;
	min-width:64px;
	min-height:64px;
	border-radius:999px;
	background:linear-gradient(135deg,#28d7c7,#21c7b8);
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	font-size:30px;
	font-weight:700;
	box-shadow:
		0 10px 25px rgba(32,211,194,.3);
	animation:tagPulse 1.8s infinite;
}

@keyframes tagPulse{
	0%{ transform:scale(1); }
	50%{ transform:scale(1.08); }
	100%{ transform:scale(1); }
}

.tag-progress-title{
	margin:0;
	font-size:24px;
	font-weight:800;
	color:#111827;
}

.tag-progress-text{
	margin:6px 0 0;
	color:#6b7280;
	font-size:15px;
	line-height:1.6; 
	text-align:inherit!important;
}

.tag-progress-bar{
	height:18px;
	background:#edf2f7;
	border-radius:999px;
	overflow:hidden;
	margin-top:24px;
}

.tag-progress-fill{
	height:100%;
	width:0%;
	border-radius:999px;
	background:
		linear-gradient(
			90deg,
			#20d3c2,
			#29dfcf,
			#20d3c2
		);
	background-size:200% 100%;
	animation:tagGradient 2s linear infinite;
	transition:width .15s linear;
}

@keyframes tagGradient{
	0%{
		background-position:0 0;
	}
	100%{
		background-position:200% 0;
	}
}

.tag-progress-meta{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-top:14px;
}

.tag-progress-number{
	font-size:18px;
	font-weight:800;
	color:#111827;
}

.tag-progress-status{
	font-size:14px;
	font-weight:600;
	color:#20b9aa;
}

.tag-download-status{
	display:none;
	align-items:center;
	justify-content:center;
	gap:10px;
	background:#ecfdf5;
	color:#047857;
	padding:18px 20px;
	border-radius:18px;
	font-size:15px;
	font-weight:700;
	border:1px solid #a7f3d0;
	box-shadow:
		0 10px 20px rgba(16,185,129,.08);
}

.tag-download-status.active{
	display:flex;
	animation:tagFade .25s ease;
}

/*
|--------------------------------------------------------------------------
| MIRROR BUTTON COLORS
|--------------------------------------------------------------------------
*/

.tag-mirror-btn.tag-style-primary{
	background:#0d6efd;
	border-color:#0d6efd;
	color:#fff;
}

.tag-mirror-btn.tag-style-success{
	background:#198754;
	border-color:#198754;
	color:#fff;
}

.tag-mirror-btn.tag-style-secondary{
	background:#6c757d;
	border-color:#6c757d;
	color:#fff;
}

.tag-mirror-btn.tag-style-warning{
	background:#ffc107;
	border-color:#ffc107;
	color:#111;
}

.tag-mirror-btn.tag-style-danger{
	background:#dc3545;
	border-color:#dc3545;
	color:#fff;
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

	.tag-modal{
		padding:14px;
		align-items:flex-start;
	}

	.tag-modal-box{
		width:calc(100vw - 24px);
		padding:24px 16px;
		border-radius:24px;
		margin-top:20px;
		margin-bottom:20px;
	}

	.tag-modal-box h2{
		font-size:20px;
		line-height:1.35;
		padding-right:32px;
	}

	.tag-modal-box p{
		font-size:14px;
		margin-bottom:20px;
	}

	.tag-mirror-btn,
	.tag-btn-png{
		width:100%;
		max-width:100%;
		min-height:56px;
		font-size:16px;
		padding:14px 18px;
	}

	.tag-divider{
		margin:20px 0;
	}

	.tag-download-layout{
		grid-template-columns:1fr;
		gap:24px;
	}

	.tag-ad-box{
		min-height:320px;
		width:100%;
	}

	.tag-progress-card{
		padding:28px 20px;
	}

	.tag-progress-top{
		align-items:flex-start;
	}

	.tag-btn-primary,
	.tag-btn-download,
	.tag-btn-change-photo,
	.tag-btn-final-download{
		max-width:100%;
		font-size:17px;
		padding:16px 20px;
		min-height:56px;
	}
}
/*
|--------------------------------------------------------------------------
| SHARE BUTTONS
|--------------------------------------------------------------------------
*/

.tag-editor-share{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:12px;
	margin-top:18px;
	text-align:center;
}

.tag-share-section{
	margin-top:4px;
	text-align:center;
}

.tag-share-title{
	width:100%;
	display:block;
	text-align:center;

	font-size:16px;
	font-weight:600;

	color:#111827;

	margin:0 0 2px;

	letter-spacing:-.02em;
}

.tag-share-buttons{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:12px;
	width:100%;
	margin-top: 20px;
}

.tag-share-btn,
.tag-editor-share-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center; 
	min-width:120px;
	min-height:42px;

	padding:10px 18px;

	border-radius:999px;

	text-decoration:none;

	font-size:14px;
	font-weight:700;

	color:#fff;

	box-sizing:border-box;

	box-shadow:
		0 10px 20px rgba(0,0,0,.08);

	transition:
		transform .18s ease,
		opacity .18s ease,
		box-shadow .18s ease;
}

.tag-share-btn:hover,
.tag-editor-share-btn:hover{
	transform:translateY(-2px);
	opacity:.96;

	box-shadow:
		0 14px 26px rgba(0,0,0,.12);
}

.tag-share-whatsapp{
	background:#25D366;
}

.tag-share-instagram{
	background:
		linear-gradient(
			135deg,
			#f58529,
			#dd2a7b,
			#8134af,
			#515bd4
		);
}

.tag-share-tiktok{
	background:
		linear-gradient(
			135deg,
			#111827,
			#0f172a
		);
}

/*
|--------------------------------------------------------------------------
| DOWNLOAD PAGE COMPACT SPACING
|--------------------------------------------------------------------------
*/

.tag-download-right{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:18px;
}

.tag-btn-final-download{
	margin-top:2px;
	margin-bottom:4px;
}

.tag-progress-card{
	width:100%;
	max-width:none;
}

.tag-share-section{
	width:100%;
	max-width:420px;
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

	.tag-editor-share{
	flex-direction:column;
	align-items:center;
	}

	.tag-share-buttons{
	width:100%; 
	}

	.tag-share-btn,
	.tag-editor-share-btn{
		width:100%;
		max-width:100%;
		min-height:50px;
		font-size:15px;
	}
}
/*
|--------------------------------------------------------------------------
| HIDE TOP SHARE BUTTONS ON DOWNLOAD PAGE
|--------------------------------------------------------------------------
*/

.tag-page-3 .tag-editor-share{
	display:none !important;
}

.tag-page-3 .tag-share-btn{
width: 100%
}

/*
|--------------------------------------------------------------------------
| SHARE AREA UNDER CHOOSE PHOTO BUTTON
|--------------------------------------------------------------------------
*/

.tag-bottom-actions .tag-editor-share{
	margin-top:6px;
	margin-bottom:6px;
}

.tag-bottom-actions .tag-share-title{
	text-align:center;
	font-size:18px;
	font-weight:800;
	color:#111827;
	margin-bottom:14px;
}
svg {
	margin-right: 8px;
}
/*
|--------------------------------------------------------------------------
| ADVERTISEMENT CONTENT
|--------------------------------------------------------------------------
*/

.tag-ad-inner{
	position:relative;
	z-index:2;

	width:100%;
	min-height:300px;

	padding:20px;

	box-sizing:border-box;

	display:block;
}
.tag-ad-inner .adsbygoogle{
	display:block !important;
	width:100%;
	min-height:250px;
}

.tag-ad-inner iframe,
.tag-ad-inner img,
.tag-ad-inner ins{
	max-width:100%;
}

.tag-ad-placeholder{
	font-size:15px;
	color:#64748b;
	line-height:1.7;
}

/* Instruction canvas */
.tag-editor-instructions {
	margin: 12px 0 16px; 
	font-size: 14px;
	line-height: 1.5;
	color: #6b7280;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}

.tag-editor-instructions p {
	margin: 4px 0;
	text-align: center;
}
/*
|--------------------------------------------------------------------------
| MOBILE + MODAL FIX
|--------------------------------------------------------------------------
*/

@media (max-width:768px){

	.tag-modal{

		position:fixed !important;

		top:0 !important;
		right:0 !important;
		bottom:0 !important;
		left:0 !important;

		width:100vw !important;
		height:100vh !important;
		height:100dvh !important;

		padding:12px !important;

		display:flex !important;

		align-items:center !important;
		justify-content:center !important;

		box-sizing:border-box !important;

		overflow:hidden !important;
	}

	.tag-modal.active{

		display:flex !important;

		align-items:center !important;
		justify-content:center !important;
	}

	.tag-modal-box{

		position:relative !important;

		width:100% !important;

		max-width:420px !important;

		margin:0 auto !important;

		left:auto !important;
		right:auto !important;
		top:auto !important;
		bottom:auto !important;

		transform:none !important;

		max-height:calc(100dvh - 24px) !important;

		overflow-y:auto !important;

		padding:24px 18px !important;

		border-radius:24px !important;

		box-sizing:border-box !important;
	}

	.tag-modal.active .tag-modal-box{
		transform:none !important;
	}

	.tag-modal-box h2{
		font-size:20px;
		line-height:1.35;
		padding-right:34px;
	}

	.tag-modal-box p{
		font-size:14px;
		margin-bottom:20px;
	}

	.tag-mirror-btn,
	.tag-btn-png{
		width:100%;
		max-width:100%;
		min-height:56px;
		font-size:16px;
		padding:14px 18px;
	}

	.tag-divider{
		margin:20px 0;
	}
}
/*
|--------------------------------------------------------------------------
| RESULT PREVIEW
|--------------------------------------------------------------------------
*/

.tag-result-preview{
	width:100%;
	max-width:560px;
	margin:20px auto;
}

.tag-result-card{
	background:#ffffff;
	border-radius:24px;
	padding:18px;
	box-shadow:
		0 10px 30px rgba(0,0,0,.08);
	text-align:center;
}

.tag-result-card h3 {
	margin-top: 0 !important;
	margin-bottom: 20px;
}

.tag-result-title{
	margin:0 0 14px;
	font-size:18px;
	font-weight:700;
	color:#111827;
}

#tag-result-canvas{
	display:block;
	width:100%;
	height:auto;
	border-radius:18px;
	margin:0 auto;
}

/*
|--------------------------------------------------------------------------
| DOWNLOAD PAGE MOBILE FIX
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

	.tag-page-3{
		max-width:560px;
		margin:0 auto;
		padding:0 12px;
		box-sizing:border-box;
	}

	.tag-result-preview{
		width:100%;
		margin:20px auto;
	}

	.tag-result-card{
		padding:12px;
		border-radius:20px;
	}

	#tag-result-canvas{
		width:100%;
		height:auto;
		display:block;
		border-radius:16px;
	}

	.tag-download-layout{
		display:flex;
		flex-direction:column;
		gap:20px;
		padding:0;
		width:100%;
	}

	.tag-ad-box{
		order:1;
		width:100%;
		min-height:250px;
		margin:0 auto;
		border-radius:24px;
	}

	.tag-download-right{
		order:2;
		width:100%;
		margin:0 auto;
		display:flex;
		flex-direction:column;
		align-items:stretch;
		gap:16px;
	}

	.tag-progress-card{
		width:100%;
		max-width:none;
		padding:24px 18px;
		box-sizing:border-box;
	}

	.tag-btn-final-download{
		width:100%;
		max-width:none;
		margin:0;
	}

	.tag-share-section{
		width:100%;
		max-width:none;
	}

	.tag-share-buttons{
		width:100%;
		gap:10px;
	}

	.tag-share-btn{
		width:100%;
		max-width:none;
		min-height:48px;
	}
}