:root{
	--tip-popup-ink: #1F2430;
	--tip-popup-paper: #FBFAF8;
	--tip-popup-violet: #417ca4;
	--tip-popup-violet-dk: #3A6E92;
	--tip-popup-amber: #FFB020;
	--tip-popup-line: #E7E4DC;
	--tip-popup-muted: #767183;
}

.tip-overlay{
	position:fixed;
	inset:0;
	background:rgba(20,18,30,0.55);
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:9998;
	opacity:0;
	visibility:hidden;
	transition:opacity .35s ease, visibility .35s ease;
	padding:20px;
	box-sizing:border-box;
}

.tip-overlay.is-visible{
	opacity:1;
	visibility:visible;
}

.tip-popup{
	position:relative;
	width:100%;
	max-width:400px;
	background:var(--tip-popup-paper);
	border-radius:18px;
	box-shadow:0 30px 60px -20px rgba(20,18,30,0.45);
	transform:translateY(18px) scale(.97);
	opacity:0;
	transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
	overflow:hidden;
	box-sizing:border-box;
}

.tip-overlay.is-visible .tip-popup{
	transform:translateY(0) scale(1);
	opacity:1;
}

.tip-close{
	position:absolute;
	top:14px;
	right:14px;
	width:30px;
	height:30px;
	border:none;
	border-radius:50%;
	background:rgba(31,36,48,0.06);
	color:var(--tip-popup-ink);
	font-size:16px;
	line-height:1;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background .2s ease;
	z-index:2;
}

.tip-close:hover{ background:rgba(31,36,48,0.12); }
.tip-close:focus-visible{ outline:2px solid var(--tip-popup-violet); outline-offset:2px; }

.tip-top{
	padding:30px 30px 22px;
	text-align:center;
}

.tip-title{
	font-weight:700;
	font-size:24px;
	line-height:1.25;
	margin:0 0 10px;
	color:var(--tip-popup-ink);
}

.tip-title span{ color:var(--tip-popup-violet-dk); }

.tip-desc{
	font-size:14.5px;
	line-height:1.55;
	color:var(--tip-popup-muted);
	margin:0 auto;
	max-width:320px;
}

.tip-stub{
	position:relative;
	margin:6px 30px 30px;
	padding:20px 20px 22px;
	background:#fff;
	border:1px solid var(--tip-popup-line);
	border-radius:14px;
	box-sizing:border-box;
}

.tip-stub::before{
	content:"";
	position:absolute;
	left:14px;
	right:14px;
	top:56px;
	border-top:2px dashed var(--tip-popup-line);
}

.tip-code-label{
	display:block;
	font-size:11px;
	font-weight:600;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--tip-popup-muted);
	text-align:center;
	margin-bottom:14px;
	cursor:pointer;
	user-select:none;
}

.tip-code-label:hover{ color:var(--tip-popup-violet-dk); }

.tip-code-row{
	display:flex;
	align-items:center;
	gap:10px;
	padding-top:18px;
}

.tip-code{
	flex:1;
	font-family:monospace;
	font-weight:700;
	font-size:19px;
	letter-spacing:.06em;
	text-align:center;
	color:var(--tip-popup-ink);
	background:#F7F6F2;
	border:1.5px dashed #D8D4C8;
	border-radius:10px;
	padding:12px 8px;
	cursor:pointer;
}

.tip-copy-btn{
	flex-shrink:0;
	width:44px;
	height:44px;
	border:none;
	border-radius:10px;
	background:var(--tip-popup-violet);
	color:#fff;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background .2s ease, transform .15s ease;
}

.tip-copy-btn:hover{ background:var(--tip-popup-violet-dk); }
.tip-copy-btn:active{ transform:scale(.94); }
.tip-copy-btn:focus-visible{ outline:2px solid var(--tip-popup-violet-dk); outline-offset:2px; }
.tip-copy-btn svg{ width:18px; height:18px; }

.tip-copy-feedback{
	display:none;
	text-align:center;
	font-size:12.5px;
	font-weight:600;
	color:#1E9E6B;
	margin-top:10px;
	opacity:0;
	transition:opacity .2s ease;
}

.tip-copy-feedback.show{
	display:block;
	opacity:1;
}

@media (prefers-reduced-motion: reduce){
	.tip-overlay,
	.tip-popup{ transition:none; }
}

@media (max-width:420px){
	.tip-top{ padding:26px 22px 18px; }
	.tip-stub{ margin:6px 22px 26px; }
}