/*----------------------------------------------------------
	002 — APP SHELL + TOOLBAR
----------------------------------------------------------*/

/*----------------------------------------------------------
	YAHAN SIRF IS MODULE KA APNA HISSA HAI

	Template ka design aur theme — hero, badges, pills, steps,
	features, ads, cards, tables, toast aur poora app shell —
	assets/global-custom-web.css me hai (sections 001-013 aur
	101-122). Wo global pehle load hoti hai.

	Pehle har module un rules ki apni naql rakhta tha. Wo naqlein
	yahan se nikal di gayi hain: har wo rule jo global wale se
	hu-ba-hu ek tha, hata diya gaya, aur jo alag tha wo waisa hi
	chhora gaya — kyunke module ki CSS global ke BAAD load hoti
	hai aur us ka apna faisla jeetta hai.

	Naya rule likhne se pehle global me dekh len. Agar wahan
	pehle se hai, to yahan dobara na likhen.
----------------------------------------------------------*/
.lq-app{
	position: relative;			/* confirm dialog isi ke andar baithta hai */
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface);
	box-shadow: var(--wiz-shadow-sm);
	overflow: hidden;
	margin-bottom: 1.25rem;
}

.lq-bar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .85rem 1.1rem;
	border-bottom: 1px solid var(--wiz-border);
	background: var(--wiz-surface-2);
}

.lq-bar-brand{
	display: flex;
	align-items: center;
	gap: .7rem;
	min-width: 0;
}

.lq-bar-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: var(--wiz-radius-btn);
	font-size: 1.1rem;
	color: #fff;
	background: linear-gradient(135deg, var(--wiz-primary) 0%, #4f46e5 100%);
}

.lq-bar-title{
	font-family: var(--wiz-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wiz-text);
	line-height: 1.25;
}

.lq-bar-sub{
	font-size: .74rem;
	color: var(--wiz-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lq-bar-actions{
	display: flex;
	align-items: center;
	gap: .4rem;
	flex-shrink: 0;
}

.lq-icon-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
	color: var(--wiz-text-muted);
	font-size: .9rem;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.lq-icon-btn:hover{
	color: var(--wiz-primary);
	border-color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 8%, transparent);
}

.lq-icon-btn:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 2px;
}


/*----------------------------------------------------------
	003 — TOOL NAVIGATION

	Bees calculators, ek hi qatar me — aur chhoti screen par ye qatar
	side me scroll hoti hai.

	Wrap karne dena aasan hota, magar phir toolbar chaar qataron ka ban
	jata aur asal calculator screen se neeche dhakel jata. Scroll me
	qatar hamesha ek rehti hai; jo tab khula ho use JS khud nazar me le
	aata hai.
----------------------------------------------------------*/

.lq-tabs-wrap{
	border-bottom: 1px solid var(--wiz-border);
	background: var(--wiz-surface);
}

.lq-tabs{
	display: flex;
	gap: .15rem;
	padding: .4rem .6rem 0;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.lq-tabs::-webkit-scrollbar{
	height: 4px;
}

.lq-tabs::-webkit-scrollbar-thumb{
	background: var(--wiz-border);
	border-radius: 999px;
}

.lq-tab{
	display: inline-flex;
	align-items: center;
	gap: .38rem;
	flex-shrink: 0;
	padding: .5rem .8rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	font-size: .82rem;
	font-weight: 600;
	color: var(--wiz-text-muted);
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.lq-tab:hover{
	color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 6%, transparent);
}

.lq-tab.is-active{
	color: var(--wiz-primary);
	border-bottom-color: var(--wiz-primary);
}

.lq-tab:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: -2px;
}

.lq-tab-emoji{
	font-size: .95rem;
	line-height: 1;
}

.lq-body{
	padding: 1.25rem;
}

.lq-view{
	display: none;
}

.lq-view.is-active{
	display: block;
}


/*----------------------------------------------------------
	004 — SPLIT LAYOUT, PANELS, FIELDS

	Bari screen par bayen taraf sawal, dayen taraf jawab. Jawab ko
	inputs ke NEECHE rakhne ka matlab hai ke lambe panel (grade,
	split) par jawab screen se bahar chala jata hai aur user ko
	scroll kar ke dekhna parta hai ke us ne kya poochha tha.
----------------------------------------------------------*/

.lq-split{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
	gap: 1rem;
	align-items: start;
}

.lq-panel{
	padding: 1.1rem 1.15rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
	min-width: 0;
}

.lq-panel-title{
	font-family: var(--wiz-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wiz-text);
	margin: 0 0 .2rem;
}

.lq-panel-sub{
	font-size: .8rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
	margin: 0 0 1rem;
}

.lq-field{
	margin-bottom: .9rem;
}

.lq-field:last-of-type{
	margin-bottom: 1rem;
}

.lq-label{
	display: block;
	font-size: .8rem;
	font-weight: 600;
	color: var(--wiz-text);
	margin-bottom: .3rem;
}

/*
	Input ke andar nishan (currency, %) — bahar likhne se qatar toot
	jati hai aur phone par nishan apni alag line me chala jata hai.
*/
.lq-input-wrap{
	position: relative;
}

.lq-input{
	font-size: .95rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	background: var(--wiz-surface);
}

.lq-input:focus{
	border-color: var(--wiz-primary);
	box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--wiz-primary) 18%, transparent);
}

.lq-input.has-prefix{
	padding-left: 2.5rem;
}

.lq-input.has-suffix{
	padding-right: 2.3rem;
}

.lq-input.is-wrong{
	border-color: #dc2626;
}

.lq-input.is-wrong:focus{
	box-shadow: 0 0 0 .2rem rgba(220, 38, 38, .18);
}

/* number input ke chhote teer — jagah khate hain, kaam kuch nahi karte */
.lq-input::-webkit-outer-spin-button,
.lq-input::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}

.lq-input[type="number"]{
	-moz-appearance: textfield;
	appearance: textfield;
}

.lq-affix{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: .82rem;
	font-weight: 600;
	color: var(--wiz-text-muted);
	pointer-events: none;
}

.lq-affix-money{
	left: .85rem;
	max-width: 2.4rem;
	overflow: hidden;
	white-space: nowrap;
}

.lq-affix-unit{
	right: .85rem;
}

/*
	Fee ke khane settings se chhupaye ja sakte hain. Class JS ke liye
	hai — chhupane ka kaam Bootstrap ki d-none karti hai.
*/
.lq-fee-field{
	/* koi apni styling nahi — sirf JS ka nishan */
}

/*
	.lq-multi-* aur .lq-scenario-price mehez JS ke hook hain: unki shakl
	.lq-rows .form-control aur .lq-row-derived se aati hai, apni koi
	nahi.
*/

.lq-hint{
	display: block;
	font-size: .75rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
	margin-top: .3rem;
}

/*
	GHALTI KA PAIGHAAM

	Khali rehne par jagah bhi nahi leta, warna har khane ke neeche ek
	khali qatar bani rehti aur form bekaar me lamba lagta.
*/
.lq-error{
	display: none;
	font-size: .76rem;
	line-height: 1.55;
	color: #dc2626;
	margin-top: .3rem;
}

.lq-error.is-on{
	display: block;
}

.lq-error.is-on::before{
	content: "⚠ ";		/* sirf rang par bharosa nahi — nishan bhi */
}

[data-bs-theme="dark"] .lq-error{
	color: #f87171;
}

.lq-actions{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.lq-actions .btn i{
	margin-right: .25rem;
}


/*----------------------------------------------------------
	004b — DISCLAIMER + PRIVACY LINE

	Amber, surkh nahi: ye khatra nahi jata rehta — ye ek baat hai jo
	page ke shuru me saaf keh deni chahiye. Surkh rakhne se do din me
	nazar-andaz hona shuru ho jata hai.
----------------------------------------------------------*/

.lq-warn{
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	margin-bottom: 1.25rem;
	padding: .85rem 1.1rem;
	border-radius: var(--wiz-radius-card);
	font-size: .84rem;
	line-height: 1.7;
	color: var(--wiz-text-muted);
	background: rgba(245, 158, 11, .1);
	border: 1px solid rgba(245, 158, 11, .32);
}

.lq-warn i{
	color: #b45309;
	font-size: 1rem;
	margin-top: .15rem;
	flex-shrink: 0;
}

.lq-warn b{
	color: var(--wiz-text);
}

[data-bs-theme="dark"] .lq-warn i{
	color: #fbbf24;
}

.lq-privacy{
	display: flex;
	align-items: flex-start;
	gap: .45rem;
	margin: 0;
	padding: .55rem 1.1rem;
	font-size: .78rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
	background: color-mix(in srgb, var(--wiz-primary) 5%, transparent);
	border-bottom: 1px solid var(--wiz-border);
}

.lq-privacy i{
	color: var(--wiz-primary);
	margin-top: .15rem;
	flex-shrink: 0;
}


/*----------------------------------------------------------
	004c — CALCULATION DETAILS  (khulne wala)

	Band rakhna hi default hai: aam sawal ka jawab bara number hai.
	Magar jise jaanch karni ho use poora hisaab ek click par mil jata
	hai — aur wahi is tool ka asal waada hai.
----------------------------------------------------------*/

.lq-more{
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	border: 0;
	background: transparent;
	padding: .5rem .1rem 0;
	font-size: .78rem;
	font-weight: 600;
	color: var(--wiz-primary);
	transition: opacity .15s ease;
}

.lq-more:hover{
	opacity: .75;
}

.lq-more:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 2px;
}

.lq-more i{
	transition: transform .2s ease;
}

.lq-more[aria-expanded="true"] i{
	transform: rotate(180deg);
}

/* qatarein jin me barhna ghatna hota hai — scenario ki output table */
#dcScenarioTable{
	font-size: .82rem;
}

#dcScenarioTable td{
	font-variant-numeric: tabular-nums;
}


/*----------------------------------------------------------
	005 — NATEEJA
----------------------------------------------------------*/

.lq-panel-out{
	position: sticky;
	top: calc(var(--wiz-nav-h, 72px) + 16px);
	background: color-mix(in srgb, var(--wiz-primary) 6%, transparent);
	border-color: color-mix(in srgb, var(--wiz-primary) 22%, transparent);
}

.lq-out-label{
	display: block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wiz-text-muted);
	margin-bottom: .35rem;
}

.lq-out-big{
	font-family: var(--wiz-font-display);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--wiz-primary);
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}

.lq-out-big small{
	display: block;
	margin-top: .2rem;
	font-family: var(--wiz-font-body, inherit);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--wiz-text-muted);
}

/* jab jawab hi nahi banta */
.lq-out-big.is-empty{
	font-size: 1.6rem;
	color: var(--wiz-text-muted);
	opacity: .6;
}

.lq-out-extra{
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin-top: .8rem;
}

.lq-out-extra:empty{
	margin-top: 0;
}

.lq-out-row{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	padding: .35rem 0;
	border-bottom: 1px dashed var(--wiz-border);
	font-size: .82rem;
}

.lq-out-row:last-child{
	border-bottom: 0;
}

.lq-out-row span{
	color: var(--wiz-text-muted);
}

.lq-out-row b{
	color: var(--wiz-text);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/*
	Barhna / ghatna / munafa / nuqsaan.

	Rang doosre darje ka ishara hai: alfaz aur nishan pehle aate hain,
	taake rang na dikhne par bhi matlab poora rahe.
*/
.lq-tag{
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin-top: .5rem;
	padding: .25rem .6rem;
	border-radius: 999px;
	font-family: var(--wiz-font-body, inherit);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: 0;
}

.lq-tag.is-up{
	color: #15803d;
	background: rgba(34, 197, 94, .12);
	border: 1px solid rgba(34, 197, 94, .3);
}

.lq-tag.is-down{
	color: #b45309;
	background: rgba(245, 158, 11, .12);
	border: 1px solid rgba(245, 158, 11, .3);
}

.lq-tag.is-flat{
	color: var(--wiz-text-muted);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
}

[data-bs-theme="dark"] .lq-tag.is-up{	color: #4ade80; }
[data-bs-theme="dark"] .lq-tag.is-down{	color: #fbbf24; }

.lq-out-work{
	font-family: var(--wiz-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: .78rem;
	line-height: 1.75;
	color: var(--wiz-text-muted);
	white-space: pre-wrap;
	word-break: break-word;
}

.lq-out-work:not(:empty){
	margin-top: .8rem;
	padding: .55rem .7rem;
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
}

.lq-out-actions{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .9rem;
}

.lq-code{
	font-size: .8rem;
	color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 8%, transparent);
	padding: .15rem .4rem;
	border-radius: 5px;
	white-space: nowrap;
}


/*----------------------------------------------------------
	006 — SEGMENTED CONTROL + NOTES
----------------------------------------------------------*/

.lq-seg{
	display: inline-flex;
	padding: .2rem;
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
	flex-shrink: 0;
}

.lq-seg-btn{
	border: 0;
	background: transparent;
	padding: .35rem .75rem;
	border-radius: calc(var(--wiz-radius-btn) - 2px);
	font-size: .8rem;
	font-weight: 600;
	color: var(--wiz-text-muted);
	white-space: nowrap;
	transition: color .15s ease, background .15s ease;
}

.lq-seg-btn:hover{
	color: var(--wiz-primary);
}

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

.lq-seg-btn:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 1px;
}

/* chaar option ek qatar me nahi samate — lipatne dena parta hai */
.lq-seg-wrap{
	flex-wrap: wrap;
}

.lq-seg-sm .lq-seg-btn{
	padding: .28rem .6rem;
	font-size: .76rem;
}

.lq-note{
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	padding: .75rem .9rem;
	border-radius: var(--wiz-radius-card);
	font-size: .8rem;
	line-height: 1.7;
	color: var(--wiz-text-muted);
	background: color-mix(in srgb, var(--wiz-primary) 6%, transparent);
	border: 1px solid color-mix(in srgb, var(--wiz-primary) 22%, transparent);
}

.lq-note i{
	color: var(--wiz-primary);
	font-size: .95rem;
	margin-top: .15rem;
	flex-shrink: 0;
}

.lq-note b{
	color: var(--wiz-text);
}

.lq-hist-calc{
	font-family: var(--wiz-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: .8rem;
	color: var(--wiz-text-muted);
}

.lq-hist-result{
	font-weight: 700;
	color: var(--wiz-text);
}

.lq-hist-when{
	white-space: nowrap;
	color: var(--wiz-text-muted);
	font-size: .78rem;
}

.lq-empty{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2.4rem 1rem;
	border: 1px dashed var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.lq-empty-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: .7rem;
	border-radius: var(--wiz-radius-card);
	font-size: 1.4rem;
	color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 12%, transparent);
}

.lq-empty-title{
	font-family: var(--wiz-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wiz-text);
}

.lq-empty-note{
	font-size: .82rem;
	color: var(--wiz-text-muted);
	max-width: 26rem;
}


/*----------------------------------------------------------
	007b — QATAREIN + SAVED POSITIONS
----------------------------------------------------------*/

/* grade aur split ki barhti ghatti qatarein */
.lq-rows td{
	padding: .4rem .35rem;
	vertical-align: middle;
}

.lq-rows td:first-child{
	padding-left: 0;
}

.lq-rows .form-control{
	font-size: .85rem;
	font-variant-numeric: tabular-nums;
	background: var(--wiz-surface);
}

.lq-row-drop{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
	color: var(--wiz-text-muted);
	font-size: .8rem;
	transition: color .15s ease, border-color .15s ease;
}

.lq-row-drop:hover{
	color: #dc2626;
	border-color: #dc2626;
}

.lq-row-drop:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 1px;
}

/* favorites — card, kyunke har ek ka apna naam aur apne buttons hain */
.lq-fav{
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: .9rem 1rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.lq-fav-name{
	font-family: var(--wiz-font-display);
	font-size: .92rem;
	font-weight: 700;
	color: var(--wiz-text);
	word-break: break-word;
}

.lq-fav-tool{
	display: inline-block;
	margin-top: .2rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--wiz-primary);
}

.lq-fav-calc{
	margin-top: .5rem;
	font-family: var(--wiz-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: .76rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
	word-break: break-word;
}

.lq-fav-result{
	margin-top: .4rem;
	font-size: .9rem;
	font-weight: 700;
	color: var(--wiz-text);
	word-break: break-word;
}

.lq-fav-actions{
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: auto;
	padding-top: .8rem;
}

.lq-hist-tool{
	font-size: .78rem;
	color: var(--wiz-text-muted);
	white-space: nowrap;
}

.lq-hist-calc{
	font-family: var(--wiz-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: .78rem;
	color: var(--wiz-text-muted);
}

.lq-hist-result{
	font-weight: 700;
	color: var(--wiz-text);
}

.lq-hist-when{
	white-space: nowrap;
	color: var(--wiz-text-muted);
	font-size: .76rem;
}

.lq-ask-field{
	margin-bottom: 1rem;
}


/*----------------------------------------------------------
	007c — POSITION SELECTOR

	Long aur Short do bare button hain, kisi dropdown me chhupe hue
	do option nahi. Wajah ye hai ke poora formula isi ek intikhab par
	palat jata hai — aur galat taraf par hisaab karna yahan mehngi
	galati hai. Har button par lafz bhi likha hai aur nishan bhi, is
	liye rang na dikhne par bhi matlab poora rehta hai.
----------------------------------------------------------*/

.lq-side{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
}

.lq-side-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .6rem .8rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
	font-size: .88rem;
	font-weight: 700;
	color: var(--wiz-text-muted);
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.lq-side-btn:hover{
	color: var(--wiz-text);
	border-color: var(--wiz-text-muted);
}

.lq-side-btn:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 2px;
}

.lq-side-long.is-on{
	color: #15803d;
	background: rgba(34, 197, 94, .12);
	border-color: rgba(34, 197, 94, .45);
}

.lq-side-short.is-on{
	color: #b91c1c;
	background: rgba(239, 68, 68, .1);
	border-color: rgba(239, 68, 68, .45);
}

[data-bs-theme="dark"] .lq-side-long.is-on{	color: #4ade80; }
[data-bs-theme="dark"] .lq-side-short.is-on{	color: #f87171; }


/*----------------------------------------------------------
	007d — LEVERAGE SLIDER

	Slider AUR number, dono. Slider is liye ke leverage ka asar
	mehsoos karne ke liye use hilana parta hai — 10× se 50× khiskate
	hi natija saamne badalta hai. Number is liye ke jise theek 27×
	chahiye wo slider par kabhi nahi dhoond payega.
----------------------------------------------------------*/

.lq-lev{
	display: flex;
	align-items: center;
	gap: .75rem;
}

.lq-lev-range{
	flex: 1 1 auto;
	min-width: 0;
	accent-color: var(--wiz-primary);
}

.lq-lev-range:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 3px;
}

.lq-lev-box{
	flex: 0 0 108px;
	width: 108px;
}

.lq-lev-steps{
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	margin-top: .5rem;
}

.lq-lev-step{
	padding: .2rem .55rem;
	border: 1px solid var(--wiz-border);
	border-radius: 999px;
	background: var(--wiz-surface);
	font-size: .74rem;
	font-weight: 600;
	color: var(--wiz-text-muted);
	font-variant-numeric: tabular-nums;
	transition: color .15s ease, border-color .15s ease;
}

.lq-lev-step:hover{
	color: var(--wiz-primary);
	border-color: var(--wiz-primary);
}

.lq-lev-step.is-on{
	color: #fff;
	background: var(--wiz-primary);
	border-color: var(--wiz-primary);
}

.lq-lev-step:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 1px;
}


/*----------------------------------------------------------
	007e — RISK METER

	RANG DOOSRE DARJE KA ISHARA HAI.

	Har haal me darje ka NAAM aur asal percentage likha jata hai. Ek
	surkh patti jis par kuch likha na ho, colour-blind user ke liye
	sirf ek patti hai — aur ye page ka wahi hissa hai jo sab se zyada
	kaam ka hai.
----------------------------------------------------------*/

.lq-risk{
	margin-top: 1rem;
	padding-top: .9rem;
	border-top: 1px dashed var(--wiz-border);
}

.lq-risk-line{
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: var(--wiz-border);
	overflow: hidden;
}

.lq-risk-fill{
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: 999px;
	background: var(--wiz-text-muted);
	transition: width .2s ease;
}

.lq-risk-fill.is-low{		background: #16a34a; }
.lq-risk-fill.is-moderate{	background: #65a30d; }
.lq-risk-fill.is-high{		background: #d97706; }
.lq-risk-fill.is-veryhigh{	background: #ea580c; }
.lq-risk-fill.is-near{		background: #dc2626; }
.lq-risk-fill.is-gone{		background: #991b1b; }

[data-bs-theme="dark"] .lq-risk-fill.is-low{		background: #4ade80; }
[data-bs-theme="dark"] .lq-risk-fill.is-moderate{	background: #a3e635; }
[data-bs-theme="dark"] .lq-risk-fill.is-high{		background: #fbbf24; }
[data-bs-theme="dark"] .lq-risk-fill.is-veryhigh{	background: #fb923c; }
[data-bs-theme="dark"] .lq-risk-fill.is-near{		background: #f87171; }
[data-bs-theme="dark"] .lq-risk-fill.is-gone{		background: #ef4444; }

.lq-risk-head{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	margin-top: .5rem;
}

.lq-risk-name{
	font-family: var(--wiz-font-display);
	font-size: .92rem;
	font-weight: 700;
	color: var(--wiz-text);
}

.lq-risk-pct{
	font-size: .88rem;
	font-weight: 700;
	color: var(--wiz-text);
	font-variant-numeric: tabular-nums;
}

.lq-risk-note{
	display: block;
	margin-top: .25rem;
	font-size: .76rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
}


/*----------------------------------------------------------
	007f — LIQUIDATION CHART

	Ek khari lakeer aur teen nishan — apna hi SVG.

	Long par current upar aur liquidation neeche; short par ulta. Ye
	teen nuqte hain, aur unke liye charting library mangwana page ko
	us cheez se kai guna bhaari kar deta jo wo dikhata hai. Har nishan
	ka naam aur qeemat sath likhi hai.
----------------------------------------------------------*/

.lq-chart-wrap{
	margin-top: 1rem;
	padding-top: .9rem;
	border-top: 1px dashed var(--wiz-border);
}

.lq-chart{
	width: 100%;
	overflow: hidden;		/* SVG kabhi page ko side me na khenche */
}

.lq-chart svg{
	display: block;
	width: 100%;
	height: auto;
}

.lq-chart-axis{
	stroke: var(--wiz-border);
	stroke-width: 2;
	stroke-linecap: round;
}

.lq-chart-band{
	fill: color-mix(in srgb, var(--wiz-primary) 10%, transparent);
}

.lq-chart-tick{
	stroke: var(--wiz-text-muted);
	stroke-width: 1.5;
	stroke-linecap: round;
}

.lq-chart-tick.is-entry{	stroke: var(--wiz-text); }
.lq-chart-tick.is-liq{		stroke: #dc2626; }
.lq-chart-tick.is-now{		stroke: var(--wiz-primary); }

.lq-chart-label{
	font-size: 9px;
	font-weight: 700;
	fill: var(--wiz-text-muted);
}

.lq-chart-value{
	font-size: 10px;
	font-weight: 700;
	fill: var(--wiz-text);
}

.lq-chart-gap{
	font-size: 9px;
	fill: var(--wiz-text-muted);
}


/*----------------------------------------------------------
	007g — ADVANCED ADJUSTMENTS + NATEEJE KI TANBEEH
----------------------------------------------------------*/

.lq-adv{
	margin-top: .6rem;
	margin-bottom: 1rem;
	padding: .9rem 1rem;
	border: 1px dashed var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface);
}

.lq-adv-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: .75rem;
}

/*
	Ye tanbeeh nateeje ke sath chipki rehti hai, page ke shuru wali se
	alag. Wajah: leverage ke tool par number dekh kar log seedha
	exchange par chale jate hain — us lamhe ye jumla nazar me hona
	chahiye, page ke upar nahi jahan wo do minute pehle tha.
*/
.lq-out-warn{
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin: .9rem 0 0;
	padding-top: .75rem;
	border-top: 1px dashed var(--wiz-border);
	font-size: .74rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
}

.lq-out-warn i{
	color: #b45309;
	margin-top: .12rem;
	flex-shrink: 0;
}

[data-bs-theme="dark"] .lq-out-warn i{
	color: #fbbf24;
}

.lq-head-row{
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1rem;
}

.lq-head-row .lq-field{
	flex: 1 1 220px;
	min-width: 0;
}

.lq-row-num{
	font-size: .78rem;
	font-weight: 700;
	color: var(--wiz-text-muted);
	font-variant-numeric: tabular-nums;
}

/* jo khana is waqt hisaab se nikal raha hai, wo halka rakha jata hai */
.lq-row-derived{
	display: block;
	margin-top: .3rem;
	font-size: .78rem;
	color: var(--wiz-text-muted);
	font-variant-numeric: tabular-nums;
}

.lq-row-derived:empty{
	display: none;
}

/* multi-position table ke chhote select — inputs ke sath qatar me rehte hain */
.lq-rows .form-select-sm{
	font-size: .82rem;
	background-color: var(--wiz-surface);
}

.lq-rows .lq-cell-out{
	font-size: .82rem;
	font-weight: 700;
	color: var(--wiz-text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.lq-rows .lq-cell-muted{
	font-size: .8rem;
	color: var(--wiz-text-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}


/*----------------------------------------------------------
	008 — SETTINGS
----------------------------------------------------------*/

.lq-settings{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
}

.lq-set-group{
	padding: 1.05rem 1.1rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.lq-set-title{
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wiz-text-muted);
	margin: 0 0 .8rem;
}

.lq-set-title i{
	color: var(--wiz-primary);
	font-size: .9rem;
}

.lq-set-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	padding: .45rem 0;
	border-bottom: 1px solid var(--wiz-border);
}

.lq-set-row:last-child{
	border-bottom: 0;
	padding-bottom: 0;
}

.lq-set-label{
	font-size: .82rem;
	font-weight: 600;
	color: var(--wiz-text);
	margin: 0;
}

.lq-set-row .form-select{
	max-width: 190px;
}

.lq-set-row .form-check-input:checked{
	background-color: var(--wiz-primary);
	border-color: var(--wiz-primary);
}


/*----------------------------------------------------------
	009 — CONFIRM DIALOG + TOAST
----------------------------------------------------------*/

.lq-ask{
	position: absolute;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: color-mix(in srgb, var(--wiz-text) 35%, transparent);
	backdrop-filter: blur(2px);
}

.lq-ask-box{
	width: 100%;
	max-width: 380px;
	padding: 1.2rem 1.3rem;
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
	box-shadow: var(--wiz-shadow-md);
}

.lq-ask-title{
	display: block;
	font-family: var(--wiz-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wiz-text);
	margin-bottom: .3rem;
}

.lq-ask-note{
	display: block;
	font-size: .82rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
	margin-bottom: 1rem;
}

.lq-ask-actions{
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
}


/*----------------------------------------------------------
	010 — FULL SCREEN

	Do soorat: browser ka Fullscreen API, aur (jab wo mana kar de) CSS
	wala fallback. Dono me app ke andar website ka header/footer nazar
	nahi aata — app poori screen le leta hai.
----------------------------------------------------------*/

.lq-app.is-full{
	position: fixed;
	inset: 0;
	z-index: 1055;
	width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	border: 0;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

@supports not (height: 100dvh){

	.lq-app.is-full{
		height: 100vh;
		max-height: 100vh;
	}
}

.lq-app.is-full .lq-body{
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1.25rem 1.5rem 1.5rem;
}

/* page ke peeche scroll na chale jab app poori screen par ho */
body.lq-locked{
	overflow: hidden;
}

/* :fullscreen me browser khud kaali background deta hai — apni le lete hain */
.lq-app:fullscreen{
	background: var(--wiz-body-bg);
	overflow-y: auto;
}


/*----------------------------------------------------------
	013 — RESPONSIVE
----------------------------------------------------------*/

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

	/*
		Do column ke liye jagah nahi bachi: 380px se tang jawab ka
		khana number ko tor deta hai.
	*/
	.lq-split{
		grid-template-columns: 1fr;
	}

	.lq-panel-out{
		position: static;
	}
}

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

	.lq-body{
		padding: 1rem .85rem;
	}

	.lq-bar-sub{
		display: none;		/* jagah sawal ko chahiye */
	}

	.lq-tabs{
		padding: .35rem .5rem 0;
	}

	.lq-out-big{
		font-size: 1.7rem;
	}

	/* jawab ko chipkana chhoti screen par ulta nuqsaan hai */
	.lq-panel-out{
		position: static;
	}

	.lq-actions .btn,
	.lq-out-actions .btn{
		flex: 1 1 auto;
	}

	.lq-set-row{
		flex-wrap: wrap;
	}

	.lq-set-row .form-select{
		max-width: 100%;
		width: 100%;
	}
}

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

	.lq-input{
		font-size: 1rem;		/* iOS 16px se chhote input par zoom kar deta hai */
	}

	.lq-seg{
		width: 100%;
	}

	.lq-seg-btn{
		flex: 1 1 0;
	}
}


/*----------------------------------------------------------
	014 — QATAREIN CHHOTI SCREEN PAR CARD BAN JATI HAIN

	Multiple-positions table ke gyarah khane hain: asset, side, entry,
	current, quantity, leverage, mmr, liquidation, P/L aur remove. Phone par ye table side me scroll karne
	ke qabil bhi nahi rehta — aur spec ki bhi yahi shart hai ke page
	kabhi side me na khiske.

	Is liye 767px se neeche har <tr> ek card ban jati hai aur har
	<td> apna label data-th se leta hai. Label markup me pehle se
	maujood hai (JS har khane par data-th daalti hai), CSS sirf use
	dikhati hai — is liye screen reader ko bhi wohi milta hai jo
	aankh ko.

	.lq-rows-wrap bare screen par sirf .table-responsive ka kaam
	karta hai; chhoti par khud ko band kar deta hai, kyunke card ko
	scroll karne ki zarurat hi nahi rehti.
----------------------------------------------------------*/

.lq-rows-wrap{
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

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

	.lq-rows-wrap{
		overflow-x: visible;
	}

	.lq-rows,
	.lq-rows tbody,
	.lq-rows tr,
	.lq-rows td{
		display: block;
		width: 100%;
	}

	/* sar-nama sirf aankh ke liye tha — ab har khane par apna label hai */
	.lq-rows thead{
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.lq-rows tr{
		margin-bottom: .7rem;
		padding: .8rem .9rem;
		border: 1px solid var(--wiz-border);
		border-radius: var(--wiz-radius-card);
		background: var(--wiz-surface-2);
	}

	.lq-rows tr:last-child{
		margin-bottom: 0;
	}

	.lq-rows td{
		padding: .3rem 0;
		border: 0;
	}

	.lq-rows td:first-child{
		padding-left: 0;
	}

	.lq-rows td::before{
		content: attr(data-th);
		display: block;
		margin-bottom: .2rem;
		font-size: .7rem;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--wiz-text-muted);
	}

	/* qatar ka number aur hatane ka button — in par label bekar lagta hai */
	.lq-rows td.lq-td-plain::before{
		content: none;
	}

	.lq-rows td.lq-td-head{
		padding-top: 0;
		font-family: var(--wiz-font-display);
		font-size: .88rem;
		font-weight: 700;
		color: var(--wiz-text);
	}

	/* card ka unwaan — bare screen par sirf number kaafi tha */
	.lq-rows td.lq-td-head .lq-row-index::before{
		content: "Position ";
	}

	.lq-rows td.lq-td-drop{
		padding-top: .5rem;
	}

	.lq-rows td.lq-td-drop .lq-row-drop{
		width: 100%;
		height: 34px;
	}

	.lq-rows td.lq-td-drop .lq-row-drop::after{
		content: " Remove";
		font-size: .78rem;
		font-weight: 600;
	}
}