/* CSS Glassmorphism Generator */

.gl-back{
	position:       relative;
	overflow:       hidden;
	min-height:     300px;
	border-radius:  .6rem;
	border:         1px solid rgba(255,255,255,.12);
	display:        flex;
	align-items:    center;
	justify-content:center;
	padding:        1.6rem;
	background-color: #1b1140;
	background-image:
		radial-gradient(38% 46% at 14% 20%,  rgba(255, 94, 140, .95) 0%, rgba(255, 94, 140, 0) 70%),
		radial-gradient(42% 40% at 82% 16%,  rgba(56, 214, 255, .95) 0%, rgba(56, 214, 255, 0) 72%),
		radial-gradient(46% 50% at 74% 86%,  rgba(255, 209, 84, .90) 0%, rgba(255, 209, 84, 0) 74%),
		radial-gradient(40% 44% at 22% 88%,  rgba(112, 255, 168, .85) 0%, rgba(112, 255, 168, 0) 72%),
		linear-gradient(120deg, #2a1065 0%, #0f172e 100%);
}

/* blur ko chabane ke liye kuch sakht kinare bhi chahiye, sirf gradient kafi nahi */
.gl-shape{
	position:       absolute;
	pointer-events: none;
}

.gl-shape-a{
	width:          108px;
	height:         108px;
	left:           8%;
	top:            54%;
	border-radius:  50%;
	border:         14px solid rgba(255,255,255,.34);
}

.gl-shape-b{
	width:          0;
	height:         0;
	right:          10%;
	top:            9%;
	border-left:    54px solid transparent;
	border-right:   54px solid transparent;
	border-bottom:  90px solid rgba(255,255,255,.26);
}

.gl-shape-c{
	left:           44%;
	top:            6%;
	width:          150px;
	height:         150px;
	transform:      rotate(24deg);
	background-image:
		repeating-linear-gradient(45deg, rgba(255,255,255,.30) 0 8px, rgba(255,255,255,0) 8px 18px);
}

.gl-shape-d{
	right:          6%;
	bottom:         8%;
	width:          120px;
	height:         56px;
	border-radius:  999px;
	background:     rgba(10,10,30,.45);
}

.gl-panel{
	position:       relative;
	z-index:        2;
	width:          min(320px, 100%);
	padding:        1.4rem 1.5rem;
	color:          #fff;
	text-shadow:    0 1px 2px rgba(0,0,0,.35);
}

.gl-panel .gl-panel-title{
	font-size:      1.05rem;
	margin:         0 0 .35rem;

	/*
		Pehle ye <h4> tha aur shakl global CSS ke "h1,h2,h3,h4" block se
		aati thi. Ab ye heading nahi (preview ka unwan safhe ka section
		nahi hota), is liye wahi khaane yahan saaf likhe hain. Rang nahi
		rakha — panel ka apna safed rang chalta hai.
	*/
	font-family:    var(--wiz-font-display);
	font-weight:    700;
	letter-spacing: -.02em;
	line-height:    1.2;
}

.gl-panel p{
	font-size:      .85rem;
	margin:         0;
	opacity:        .92;
}

.gl-off .gl-back{
	background-image: none;
	background-color: #f3f4f6;
}