/*==================================================================================

	AUDIO TOOLS — HUB KI MUSHTARKA CSS

	Ye har audio module par load hoti hai, module ki apni custom.css se
	PEHLE. Yani tarteeb ye hai:

		assets/global-custom-web.css            poore site ka
		tools/audio-tools/assets/custom.css     ye file
		tools/<module>/assets/custom.css        module ka apna

	Yahan WO cheezein hain jo ek se zyada audio module istemal karte
	hain. Jo sirf ek module ki ho wo us ke apne folder me jati hai, aur
	jo poore site ki ho wo global me — dono taraf ka qaida wahi hai jo
	CLAUDE.md me likha hai.

	DROPZONE, STATUS, PROGRESS AUR RESULT YAHAN NAHI HAIN. Wo global ke
	section 125 (.pdf-drop, .wiz-status, .progress, .pdf-result) me
	pehle se mojood hain aur audio module seedha wahi istemal karte
	hain.

	NAAM KA PEHLA HISSA .ad- hai. Module apna do harfi prefix alag
	rakhta hai (cutter ka .ct-).

==================================================================================*/

/*==================================================================================
	V01 — ENGINE KI PATTI

	Har module me ek hi patti hai jo teen alag halaton me kaam karti
	hai: encoder utar raha hai, video ban rahi hai, aur rok diya gaya.
	Teenon ke liye alag dabba banane ki koshish ki gayi thi aur nateeja
	ye nikla ke safha teen jagah se hilta tha. Ek patti, badalta hua
	matn.
==================================================================================*/

.ad-engine{
	margin-top: 1rem;
	padding: .85rem 1rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.ad-engine-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: .55rem;
}

.ad-engine-title{
	font-size: .85rem;
	font-weight: 700;
	color: var(--wiz-text);
}

/*
	Rokne wala button nazar aana chahiye, is liye link ki shakl me hai
	magar poora chhota button jitni jagah leta hai. Phone par ungli ke
	liye 44px se kam kuch bhi mushkil hota hai.
*/
.ad-engine .wiz-link-btn{
	min-height: 2rem;
	padding-inline: .35rem;
	font-size: .8rem;
	font-weight: 700;
}


/*==================================================================================
	V02 — FILE KI PATTI

	Video aane ke baad dropzone patli ho jati hai aur ye patti file ka
	naam, naap, muddat aur nisbat batati hai.
==================================================================================*/

.ad-file{
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .8rem .9rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.ad-file-icon{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--wiz-radius-btn);
	font-size: 1.05rem;
	color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 12%, transparent);
}

/*
	min-width: 0 zaroori hai. Flex ka bacha default par apne matn se
	chhota nahi hota, is liye is ke bagair lamba file name patti ko
	chaura kar ke card se bahar nikal deta hai aur text-truncate kabhi
	chalta hi nahi.
*/
.ad-file-meta{
	flex: 1 1 auto;
	min-width: 0;
	font-size: .88rem;
}


/*==================================================================================
	V03 — PATTI (WAVEFORM)

	Awaaz me dekhne ki koi cheez nahi hoti, is liye patti hi is hub ka
	player hai: wo tasveer bhi hai, seek bar bhi, aur chune hue hisse
	dikhane ki jagah bhi.

	OONCHAI PIXEL ME BANDHI HUI HAI, nisbat par nahi. Video ka dabba
	nisbat par bandha jata hai kyunke us ki asal naap baad me pata
	chalti hai; awaaz ki koi naap hoti hi nahi, aur ek muqarrar oonchai
	safhe ko file aane par hilne se rokti hai (CLS ranking factor hai).

	RANG CSS SE AATE HAIN, JS ME LIKHE HUE NAHI. JS `getComputedStyle`
	se ye teen variable parhta hai. Haath se likha hua rang dark mode me
	ghalat ho jata hai aur koi us ki khabar nahi karta.
==================================================================================*/

.ad-wave-wrap{
	position: relative;
	width: 100%;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2, rgba(148, 163, 184, .06));
	overflow: hidden;
}

.ad-wave{
	display: block;
	width: 100%;
	height: 9.5rem;
	touch-action: none;
	user-select: none;

	--ad-wave:      var(--wiz-primary);
	--ad-wave-mid:  var(--wiz-border-strong);
	--ad-wave-bg:   transparent;
}

.ad-wave-wrap.is-tall .ad-wave{ height: 14rem; }

/* patti par likhi hui chhoti baat — "drop a file", ya lambai */
.ad-wave-note{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	font-size: .85rem;
	color: var(--wiz-text-muted);
	pointer-events: none;
	text-align: center;
	padding: 1rem;
}

.ad-wave-wrap.has-sound .ad-wave-note{ display: none; }

/*----------------------------------------------------------
	PLAYER KE BUTTON
----------------------------------------------------------*/

.ad-controls{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin-top: .6rem;
}

.ad-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	min-width: 2.35rem;
	height: 2.35rem;
	padding: 0 .6rem;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	color: var(--wiz-text);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-btn);
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.ad-btn:hover:not(:disabled){
	border-color: var(--wiz-primary);
	color: var(--wiz-primary);
}

.ad-btn:focus-visible{
	outline: none;
	border-color: var(--wiz-primary);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}

.ad-btn:disabled{
	opacity: .45;
	cursor: not-allowed;
}

.ad-btn.is-on{
	color: #fff;
	background: var(--wiz-primary);
	border-color: var(--wiz-primary);
}

/* waqt ka adad monospace me — warna har raqam par patti hilti hai */
.ad-time{
	font-family: var(--wiz-font-mono);
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
	color: var(--wiz-text-muted);
	white-space: nowrap;
}

.ad-time b{
	color: var(--wiz-text);
	font-weight: 700;
}


.ad-rate{ min-width: 4.7rem; }

.ad-vol{
	width: 5.5rem;
	accent-color: var(--wiz-primary);
	cursor: pointer;
}


/*==================================================================================
	V04 — TIMELINE

	Trimmer, cutter, splitter, segment extractor aur loop maker — sab
	yehi patti istemal karte hain. Isi liye ye hub me hai.

	DHANCHA:

		.ad-timeline              bahar ka dabba (padding, focus ring)
			.ad-track             khud patti — yehi naapi jati hai
				.ad-range         chuna hua hissa
				.ad-handle        do kinare
				.ad-playhead      abhi kahan chal raha hai
			.ad-ruler             neeche waqt ke nishan

	CHAURAI HAMESHA .ad-track SE NAAPEN. Ye sabaq cropper se aaya hai:
	wahan chaurai andar wale wrapper se maangi gayi thi aur ek pixel
	aati thi. Bahar wale .ad-timeline me padding hai, is liye us ki
	chaurai patti ki chaurai NAHI hai.
==================================================================================*/

.ad-timeline{
	padding: .9rem .75rem .35rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
	user-select: none;
	touch-action: none;
}

.ad-timeline:focus-visible{
	outline: none;
	border-color: var(--wiz-primary);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}

.ad-track{
	position: relative;
	height: 54px;
	border-radius: var(--wiz-radius-sm);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
	cursor: pointer;
	overflow: hidden;
}

/*
	Thumbnails patti ke peeche. Ye JS lagata hai jab frame nikal aate
	hain; na aayen to patti khali rehti hai aur kuch nahi bigarta.
*/
.ad-strip{
	position: absolute;
	inset: 0;
	display: flex;
	opacity: .55;
	pointer-events: none;
}

.ad-strip img{
	height: 100%;
	flex: 1 1 0;
	min-width: 0;
	object-fit: cover;
	display: block;
}

.ad-range{
	position: absolute;
	top: 0;
	bottom: 0;
	background: color-mix(in srgb, var(--wiz-primary) 26%, transparent);
	border-left: 2px solid var(--wiz-primary);
	border-right: 2px solid var(--wiz-primary);
	pointer-events: none;
}

/* hataya jane wala hissa laal, rakha jane wala neela — rang hi jumla hai */
.ad-range.is-drop{
	background: color-mix(in srgb, var(--wiz-danger) 26%, transparent);
	border-left-color: var(--wiz-danger);
	border-right-color: var(--wiz-danger);
}

.ad-range.is-dim{
	background: rgba(120, 120, 130, .22);
	border-left-color: var(--wiz-border-strong);
	border-right-color: var(--wiz-border-strong);
}

/*
	Handle nazar aane wale nishan se CHAURA hai. Nishan 4px ka hai aur
	ungli 40px ki. Is liye dabba 26px ka hai, beech me nishan, aur
	baqi shaffaf.
*/
.ad-handle{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 26px;
	margin-left: -13px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: ew-resize;
	background: none;
	border: 0;
	padding: 0;
	z-index: 3;
}

.ad-handle::before{
	content: "";
	width: 6px;
	height: 100%;
	border-radius: 3px;
	background: var(--wiz-primary);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

.ad-handle::after{
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--wiz-primary);
}

.ad-handle:focus-visible{
	outline: none;
}

.ad-handle:focus-visible::after{
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .35);
}

.ad-playhead{
	position: absolute;
	top: -4px;
	bottom: -4px;
	width: 2px;
	margin-left: -1px;
	background: var(--wiz-text);
	pointer-events: none;
	z-index: 4;
}

.ad-playhead::before{
	content: "";
	position: absolute;
	top: 0;
	left: -4px;
	width: 10px;
	height: 6px;
	border-radius: 2px;
	background: var(--wiz-text);
}

.ad-ruler{
	position: relative;
	height: 1.25rem;
	margin-top: .3rem;
	font-family: var(--wiz-font-mono);
	font-size: .66rem;
	color: var(--wiz-text-muted);
}

.ad-ruler span{
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	white-space: nowrap;
}

.ad-ruler span:first-child{	transform: none; }
.ad-ruler span:last-child{	transform: translateX(-100%); }


/*==================================================================================
	V05 — HISSON KI QATAR

	Jin modules me ek se zyada tukre chune ja sakte hain, un sab ki
	qatar ek jaisi hai.
==================================================================================*/

.ad-seg{
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .55rem .7rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
}

.ad-seg + .ad-seg{
	margin-top: .45rem;
}

.ad-seg.is-on{
	border-color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 6%, transparent);
}

.ad-seg-num{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	font-size: .75rem;
	font-weight: 700;
	color: #fff;
	background: var(--wiz-primary);
}

.ad-seg-body{
	flex: 1 1 auto;
	min-width: 0;
	font-size: .82rem;
	line-height: 1.45;
}

.ad-seg-time{
	font-family: var(--wiz-font-mono);
	font-variant-numeric: tabular-nums;
	color: var(--wiz-text);
	font-weight: 700;
}

.ad-seg-sub{
	display: block;
	font-size: .74rem;
	color: var(--wiz-text-muted);
}

.ad-seg-acts{
	display: flex;
	align-items: center;
	gap: .1rem;
	flex-shrink: 0;
}

/*
	Phone par tukron ki tarteeb ungli se badalna qareeb qareeb na-mumkin
	hai, is liye upar/neeche ke button hamesha mojood hain — drag un ke
	alawa hai, un ki jagah nahi.
*/
.ad-seg-acts .ad-btn{
	min-width: 2.1rem;
	height: 2.1rem;
	padding: 0;
}

.ad-seg.is-dragging{
	opacity: .55;
}

.ad-seg.is-over{
	border-color: var(--wiz-primary);
	border-style: dashed;
}


/*==================================================================================
	V06 — NATEEJON KI QATAR

	Image hub ka sabaq yahan bhi lagta hai: NATEEJA HAMESHA QATAR ME,
	CARD ME NAHI. Do se zyada nateeje card ki shakl me safhe ke aakhir
	me ek lambi qatar ban jate hain aur "kaunsi file kya bani" dhoondna
	mushkil ho jata hai.

	Har satar par WO adad hote hain jo us module ka maqsad hain: yahan
	tukre ka waqt, muddat aur file ka naap.
==================================================================================*/

.ad-out{
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .65rem .7rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
}

.ad-out + .ad-out{
	margin-top: .45rem;
}

.ad-out-thumb{
	flex-shrink: 0;
	width: 64px;
	height: 40px;
	object-fit: cover;
	border-radius: var(--wiz-radius-sm);
	background: #0b0b0f;
}

.ad-out-body{
	flex: 1 1 auto;
	min-width: 0;
	font-size: .82rem;
}

.ad-out-name{
	display: block;
	font-weight: 700;
	color: var(--wiz-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ad-out-meta{
	display: block;
	font-size: .74rem;
	color: var(--wiz-text-muted);
	font-variant-numeric: tabular-nums;
}


/*==================================================================================
	V08 — TEZ YA THEEK KE DO BARE BUTTON

	Ye do button saada .wiz-seg se nahi ban sakte the, aur wajah maani
	ki hai: in ka farq samjhane ke liye har button par DOOSRI satar
	chahiye, aur .wiz-seg-btn ek satar ka hai.

	Bina us doosri satar ke aadmi ko "Fast" aur "Exact" me se chunna
	parta hai bina ye jane ke farq kya hai — aur yehi wo ek faisla hai
	jis par har kaatne wale tool ka nateeja tika hua hai.

	Pehle ye Trimmer ki apni CSS me tha (.tv-mode). Cutter ko bilkul
	wahi chahiye tha, is liye wo yahan aa gaya — wahi qaida jo CLAUDE.md
	me likha hai: "ye to har module me chahiye hoga" wali cheez
	mushtarka jagah jati hai.
==================================================================================*/

.ad-modes{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: .6rem;
}

.ad-mode{
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding: .7rem .85rem;
	text-align: left;
	cursor: pointer;
	color: var(--wiz-text);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-btn);
	transition: border-color .15s ease, background .15s ease;
}

.ad-mode:hover{
	border-color: var(--wiz-primary);
}

.ad-mode:focus-visible{
	outline: none;
	border-color: var(--wiz-primary);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}

/*
	Chuna hua button ka naam .is-on hai, .is-active NAHI. Chaar image
	modules me .is-active likha gaya tha aur chuna hua button bilkul
	waisa hi dikhta tha jaisa baqi — 24 jagah theek karna para.
*/
.ad-mode.is-on{
	border-color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 8%, transparent);
}

.ad-mode-top{
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .92rem;
}

.ad-mode-top i{
	color: var(--wiz-primary);
}

.ad-mode-sub{
	font-size: .76rem;
	line-height: 1.45;
	color: var(--wiz-text-muted);
}


/*==================================================================================
	V09 — KHULASA KI SATAR

	"2 pieces, 1:04 of 9:12, about 14 MB" — ye wo satar hai jise aadmi
	bara button dabane se pehle parhta hai, is liye ye baqi hint se
	numayan hai magar tanbeeh nahi lagti.
==================================================================================*/

.ad-summary{
	font-size: .84rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
}

.ad-summary b{
	color: var(--wiz-text);
	font-variant-numeric: tabular-nums;
}


/*==================================================================================
	V10 — BAND KHANE

	"Fast" par size, fps aur quality ka koi matlab nahi, is liye wo
	band ho jate hain. Band khana DIKHNA bhi chahiye ke band hai, warna
	aadmi usay badalta rehta hai aur asar na dekh kar samajhta hai ke
	tool kharab hai.
==================================================================================*/

.ad-off{
	opacity: .5;
}

.ad-off select,
.ad-off input{
	pointer-events: none;
}


/*==================================================================================
	V07 — CHHOTI SCREEN
==================================================================================*/

@media screen and (max-width: 768px){

	/*
		SIMTI HUI DROPZONE KO POORI OONCHAI NAHI CHAHIYE.

		Global ka section 125 chhoti screen par .pdf-drop ko 170px ki
		kam az kam oonchai deta hai, aur wo theek hai jab tak dabba
		poora hai. File aane ke baad wo patli patti ban jata hai —
		magar min-height wahin rehti hai, aur nateeja ek bara khali
		dabba hota hai jis me sirf ek icon aur ek lafz hai.

		Ye rule sirf audio ke safhon par chalta hai, kyunke ye file
		sirf wahin load hoti hai. Global me isi liye nahi rakha ke PDF
		aur Image modules ki shakl badalna is kaam ka hissa nahi tha.
	*/
	.pdf-drop.is-compact{
		min-height: 0;
		padding: .75rem;
	}

	.ad-wave-wrap .ad-wave{
		height: 7.5rem;
	}

	.ad-controls{
		gap: .3rem;
	}

	/* patti moti — ungli ke liye 54px kaafi nahi */
	.ad-track{
		height: 64px;
	}

	.ad-handle{
		width: 34px;
		margin-left: -17px;
	}

	.ad-out{
		flex-wrap: wrap;
	}

	.ad-out .btn{
		width: 100%;
	}
}


/*
	Kaghaz par player, patti aur button ka koi kaam nahi.
*/
@media print{

	.ad-wave-wrap,
	.ad-controls,
	.ad-timeline,
	.ad-engine{
		display: none !important;
	}
}


/*----------------------------------------------------------------------------------
	132 — QATAR (.aq-*) — EK SE ZYADA FILE

	Image Cropper ki gallery wali shakl, magar awaaz ke liye: har khane
	me naam, lambai, naap aur haal ka nishan. Awaaz ki koi tasveer nahi
	hoti, is liye khane me ek saada icon hai — aur isi wajah se patti
	halki rehti hai chahe bees files hon.

	Dabbe side me chalte hain, neeche nahi. Wajah: qatar ke neeche hi
	khane (settings) aate hain, aur agar qatar lambi ho kar do teen
	satar le le to settings safhe se neeche chali jati hain aur aadmi
	ko lagta hai ke kuch hai hi nahi.
----------------------------------------------------------------------------------*/

.aq{
	margin-top:		1rem;
	padding:		.85rem;
	border:			1px solid var(--wiz-border);
	border-radius:	var(--wiz-radius-sm);
	background:		var(--wiz-surface-2);
}

.aq-head{
	display:			flex;
	align-items:		center;
	justify-content:	space-between;
	gap:				.75rem;
	flex-wrap:			wrap;
	margin-bottom:		.7rem;
}

.aq-title{
	display:		inline-flex;
	align-items:	center;
	gap:			.4rem;
	font-size:		.85rem;
	font-weight:	600;
}

.aq-title i{ color: var(--wiz-primary); }

.aq-acts{
	display:	inline-flex;
	gap:		.4rem;
	flex-wrap:	wrap;
}

.aq-strip{
	display:		flex;
	gap:			.5rem;
	overflow-x:		auto;
	padding-bottom:	.35rem;
}

.aq-item{
	position:		relative;
	flex:			0 0 auto;
	width:			9.5rem;
	display:		flex;
	flex-direction:	column;
	gap:			.15rem;
	padding:		.4rem;
	border:			1px solid var(--wiz-border);
	border-radius:	var(--wiz-radius-sm);
	background:		var(--wiz-surface);
	text-align:		left;
	cursor:			pointer;
	transition:		border-color .15s ease;
}

.aq-item:hover{ border-color: var(--wiz-primary); }

.aq-item.is-on{
	border-color:	var(--wiz-primary);
	box-shadow:		0 0 0 1px var(--wiz-primary) inset;
}

.aq-item.is-doing{ border-color: var(--wiz-warning); }
.aq-item.is-failed{ border-color: var(--wiz-danger); }

.aq-shot{
	position:		relative;
	display:		block;
	aspect-ratio:	1 / 1;
	border-radius:	4px;
	overflow:		hidden;
	background:		#0d0d14;
	display:		flex;
	align-items:	center;
	justify-content: center;
	color:			var(--wiz-text-muted);
}

.aq-shot img{
	width:		100%;
	height:		100%;
	object-fit:	cover;
	display:	block;
}

/*
	NISHAN KA DABBA — ginti ki jaga.

	Pehle yahan number tha. Number sirf tarteeb batata tha, aur asal
	sawal ye hai ke KAUN SI video neeche wali settings par chal rahi
	hai. Wo haalat ab nazar aati hai aur ungli se badli ja sakti hai.

	Asli <input type="checkbox"> jaan boojh kar nahi hai: tile khud ek
	button hai aur button ke andar form ka khana rakhna HTML me ghalat
	hai. Role aur aria-checked wohi matlab screen reader tak pohanchate
	hain.
*/
.aq-check{
	position:		absolute;
	left:			.3rem;
	top:			.3rem;
	width:			1.15rem;
	height:			1.15rem;
	display:		inline-flex;
	align-items:	center;
	justify-content: center;
	border-radius:	4px;
	background:		rgba(255, 255, 255, .92);
	border:			1px solid rgba(0, 0, 0, .35);
	color:			transparent;
	font-size:		.6rem;
	cursor:			pointer;
	transition:		background .15s ease, border-color .15s ease;
}

.aq-check.is-on{
	background:		var(--wiz-primary);
	border-color:	var(--wiz-primary);
	color:			#fff;
}

.aq-check:hover{ border-color: var(--wiz-primary); }

.aq-tick{
	position:		absolute;
	right:			.25rem;
	top:			.25rem;
	width:			1.1rem;
	height:			1.1rem;
	display:		inline-flex;
	align-items:	center;
	justify-content: center;
	border-radius:	50%;
	background:		var(--wiz-success);
	color:			#fff;
	font-size:		.6rem;
}

.aq-tick.is-bad{ background: var(--wiz-danger); }

.aq-name{
	font-size:		.72rem;
	font-weight:	600;
	white-space:	nowrap;
	overflow:		hidden;
	text-overflow:	ellipsis;
	color:			var(--wiz-text);
}

.aq-meta{
	font-size:	.65rem;
	color:		var(--wiz-text-muted);
	white-space: nowrap;
	overflow:	hidden;
	text-overflow: ellipsis;
}

.aq-own{
	font-size:		.62rem;
	font-weight:	700;
	color:			var(--wiz-primary);
	text-transform:	uppercase;
	letter-spacing:	.03em;
}

.aq-x{
	position:		absolute;
	right:			.3rem;
	bottom:			.3rem;
	width:			1.3rem;
	height:			1.3rem;
	display:		inline-flex;
	align-items:	center;
	justify-content: center;
	border-radius:	50%;
	background:		var(--wiz-surface-2);
	border:			1px solid var(--wiz-border);
	color:			var(--wiz-text-muted);
	font-size:		.6rem;
}

.aq-x:hover{
	border-color:	var(--wiz-danger);
	color:			var(--wiz-danger);
}

@media (max-width: 575.98px){

	.aq-item{ width: 8rem; }
}



/*==================================================================================
	V12 — SIRF AUDIO KI CHEEZEIN

	Ye hisse video hub par mojood nahi the. Har ek ek se zyada module
	istemal karta hai, warna wo module ke apne folder me hota.
==================================================================================*/


/*----------------------------------------------------------
	NAAP KA METER — LUFS, PEAK, RMS

	Ek patti jis par ek nishan chalta hai. Hara, peela, laal: teen
	khane, aur un ki haddein CSS me nahi bandhi gayi — module khud
	`--ad-at` set karta hai.
----------------------------------------------------------*/

.ad-meter{
	position: relative;
	height: 1.5rem;
	border-radius: 99px;
	overflow: hidden;
	background: linear-gradient(90deg,
				#22c55e 0%, #22c55e 62%,
				#eab308 62%, #eab308 84%,
				#ef4444 84%, #ef4444 100%);
	opacity: .28;
}

.ad-meter-fill{
	position: absolute;
	inset: 0;
	background: var(--wiz-surface);
	left: var(--ad-at, 0%);
	transition: left .08s linear;
}

.ad-meter-mark{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	left: var(--ad-mark, 50%);
	background: var(--wiz-text);
	opacity: .55;
}

.ad-meter-row{
	display: flex;
	align-items: center;
	gap: .6rem;
}

.ad-meter-row .ad-meter{ flex: 1 1 auto; }

.ad-meter-val{
	font-variant-numeric: tabular-nums;
	font-size: .9rem;
	min-width: 5.2rem;
	text-align: right;
}


/*----------------------------------------------------------
	TAFSEEL KI FEHRIST — Metadata Viewer aur har analyzer
----------------------------------------------------------*/

.ad-facts{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: .5rem .9rem;
}

.ad-fact{
	display: flex;
	flex-direction: column;
	gap: .1rem;
	padding: .55rem .7rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-sm, .5rem);
	font-size: .85rem;
	min-width: 0;
}

.ad-fact b{
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wiz-text-muted);
}

.ad-fact span{
	word-break: break-word;
	font-variant-numeric: tabular-nums;
}

.ad-group{
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--wiz-text-muted);
	margin: 1rem 0 .5rem;
}

.ad-none{
	font-size: .88rem;
	color: var(--wiz-text-muted);
}


/*----------------------------------------------------------
	EQ KE BAND — Equalizer aur Bass/Treble Booster

	Slider KHARE hain, leti hui nahi. Yehi shakl har mixer par hoti
	hai aur log usay pehchante hain: baayen se daayen frequency,
	ooper se neeche taqat.
----------------------------------------------------------*/

.ad-bands{
	display: flex;
	gap: .35rem;
	align-items: flex-end;
	flex-wrap: nowrap;
	overflow-x: auto;
	padding: .4rem .1rem .2rem;
}

.ad-band{
	flex: 1 0 3.1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	min-width: 3.1rem;
}

.ad-band input[type="range"]{
	-webkit-appearance: slider-vertical;
	appearance: slider-vertical;
	writing-mode: vertical-lr;
	direction: rtl;
	width: 1.6rem;
	height: 8rem;
	accent-color: var(--wiz-primary);
	cursor: pointer;
}

.ad-band-hz{
	font-size: .72rem;
	color: var(--wiz-text-muted);
	font-variant-numeric: tabular-nums;
}

.ad-band-db{
	font-size: .75rem;
	font-variant-numeric: tabular-nums;
}


/*----------------------------------------------------------
	BAAYAN AUR DAAYAN — Speaker Test aur Channel Tester
----------------------------------------------------------*/

.ad-sides{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .8rem;
}

.ad-side{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	padding: 1.4rem .8rem;
	border: 2px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: none;
	color: inherit;
	font-size: .9rem;
	cursor: pointer;
	transition: border-color .12s ease, background .12s ease;
}

.ad-side i{ font-size: 1.6rem; }

.ad-side:hover{ border-color: var(--wiz-primary); }

.ad-side.is-on{
	border-color: var(--wiz-primary);
	background: rgba(124, 58, 237, .08);
}

.ad-side b{ font-size: 1rem; }


/*----------------------------------------------------------
	RECORD KA BARA GOL BUTTON — Recorder aur Mic Test

	Saada button is liye nahi ke record karna wapas na aane wala kaam
	hai: aadmi ko saaf nazar aana chahiye ke mic ab CHAL RAHA hai.
----------------------------------------------------------*/

.ad-rec{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.6rem;
	height: 4.6rem;
	border-radius: 50%;
	border: 3px solid var(--wiz-danger, #ef4444);
	background: none;
	color: var(--wiz-danger, #ef4444);
	font-size: 1.5rem;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.ad-rec:hover{ background: rgba(239, 68, 68, .1); }

.ad-rec.is-on{
	background: var(--wiz-danger, #ef4444);
	color: #fff;
	animation: adPulse 1.6s ease-in-out infinite;
}

@keyframes adPulse{
	0%, 100%{ box-shadow: 0 0 0 0 rgba(239, 68, 68, .45); }
	50%{      box-shadow: 0 0 0 .7rem rgba(239, 68, 68, 0); }
}

.ad-rec-row{
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.ad-rec-time{
	font-size: 1.6rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}


/*----------------------------------------------------------
	JEETI HUI PATTI — mic ki awaaz abhi kitni hai

	Ye waveform nahi, sirf ek satar hai jo har frame par hilti hai.
	Canvas par is ke liye poora peaks ka hisaab bemani hai.
----------------------------------------------------------*/

.ad-live{
	display: block;
	width: 100%;
	height: 5rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2, rgba(148, 163, 184, .06));
}


/*----------------------------------------------------------
	CHHOTI TANBEEH JO CHHUPAI NAHI JATI

	Mic aur speaker wale safhon par. Wada saaf likha hota hai: awaaz
	sirf isi safhe par rehti hai.
----------------------------------------------------------*/

.ad-vow{
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	padding: .75rem .9rem;
	border: 1px solid var(--wiz-success, #22c55e);
	border-radius: var(--wiz-radius-card);
	background: rgba(34, 197, 94, .07);
	font-size: .86rem;
	line-height: 1.6;
}

.ad-vow i{
	flex-shrink: 0;
	color: var(--wiz-success, #22c55e);
	margin-top: .15rem;
}


@media (max-width: 575.98px){

	.ad-wave{ height: 7.5rem; }

	.ad-wave-wrap.is-tall .ad-wave{ height: 10rem; }

	.ad-sides{ grid-template-columns: 1fr; }

	.ad-band input[type="range"]{ height: 6.5rem; }
}