/*----------------------------------------------------------
	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.
----------------------------------------------------------*/
.pn-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;
}

.pn-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);
}

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

.pn-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%);
}

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

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

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

.pn-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;
}

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

.pn-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.
----------------------------------------------------------*/

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

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

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

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

.pn-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;
}

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

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

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

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

.pn-body{
	padding: 1.25rem;
}

.pn-view{
	display: none;
}

.pn-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.
----------------------------------------------------------*/

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

.pn-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;
}

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

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

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

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

.pn-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.
*/
.pn-input-wrap{
	position: relative;
}

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

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

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

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

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

.pn-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 */
.pn-input::-webkit-outer-spin-button,
.pn-input::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}

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

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

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

.pn-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.
*/
.pn-fee-field{
	/* koi apni styling nahi — sirf JS ka nishan */
}

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

.pn-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.
*/
.pn-error{
	display: none;
	font-size: .76rem;
	line-height: 1.55;
	color: #dc2626;
	margin-top: .3rem;
}

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

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

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

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

.pn-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.
----------------------------------------------------------*/

.pn-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);
}

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

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

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

.pn-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);
}

.pn-privacy i{
	color: var(--wiz-primary-ink);
	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.
----------------------------------------------------------*/

.pn-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-ink);
	transition: opacity .15s ease;
}

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

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

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

.pn-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
----------------------------------------------------------*/

.pn-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);
}

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

.pn-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-ink);
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}

.pn-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 */
.pn-out-big.is-empty{
	font-size: 1.6rem;
	color: var(--wiz-text-muted);
	opacity: .6;
}

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

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

.pn-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;
}

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

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

.pn-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.
*/
.pn-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;
}

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

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

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

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

.pn-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;
}

.pn-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);
}

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

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


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

.pn-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;
}

.pn-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;
}

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

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

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

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

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

.pn-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);
}

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

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

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

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

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

.pn-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);
}

.pn-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-ink);
	background: color-mix(in srgb, var(--wiz-primary) 12%, transparent);
}

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

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


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

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

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

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

.pn-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;
}

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

.pn-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 */
.pn-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);
}

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

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

.pn-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;
}

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

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

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

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

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

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

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


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

	Long aur short do bare button hain, ek chhote dropdown me chhupe hue
	nahi. Ye is app ka sab se asar wala switch hai — is par har number ka
	rukh palat jata hai — aur bara hone ki wajah bhi yahi hai.
----------------------------------------------------------*/

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

.pn-side-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;

	padding: .6rem .5rem;

	font-size: .9rem;
	font-weight: 600;
	line-height: 1.2;

	color: var(--wiz-text-muted);
	background: var(--wiz-surface-2);

	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-sm);

	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

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

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

/*
	Chuni hui taraf ka rang us ke apne maani se milta hai — long sabz,
	short surkh. Magar rang akela kabhi kaafi nahi: naam bhi likha hai
	aur aria-pressed bhi lagta hai.
*/
.pn-side-btn.pn-side-long.is-on{
	color: #fff;
	background: var(--wiz-success, #16a34a);
	border-color: var(--wiz-success, #16a34a);
}

.pn-side-btn.pn-side-short.is-on{
	color: #fff;
	background: var(--wiz-danger, #dc2626);
	border-color: var(--wiz-danger, #dc2626);
}


/*----------------------------------------------------------
	007d — PRESET CHIPS
----------------------------------------------------------*/

.pn-presets{
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;

	margin-top: .5rem;
}

.pn-preset{
	padding: .28rem .6rem;

	font-size: .78rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;

	color: var(--wiz-text-muted);
	background: var(--wiz-surface-2);

	border: 1px solid var(--wiz-border);
	border-radius: 999px;

	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.pn-preset:hover{
	color: var(--wiz-text);
	border-color: var(--wiz-border-strong);
}

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

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


/*----------------------------------------------------------
	007e — GROSS SE NET TAK KA SEEDHI  (ladder)

	Ye is module ka dil hai.

	Gross wo number hai jo achha lagta hai; net wo hai jo bank me jata
	hai. Aam calculators dono ko ek "Profit and Loss" me mila dete hain aur farq gum
	ho jata hai. Yahan har qadam apni line par hai — fee aur funding
	beech me, saaf nazar aate hue — taake wo faasla dekhe baghair guzarna
	mumkin na ho.
----------------------------------------------------------*/

.pn-ladder{
	display: flex;
	flex-direction: column;

	margin: .9rem 0 0;
	padding: .75rem .9rem;

	background: var(--wiz-surface-2);
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-sm);
}

.pn-ladder-row{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;

	padding: .3rem 0;

	font-size: .86rem;
	color: var(--wiz-text-muted);
}

.pn-ladder-row b{
	font-size: .95rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wiz-text);
	text-align: right;
}

/* fee aur funding hamesha kharch hain — is liye halke aur "−" ke sath */
.pn-ladder-row.is-cost b{
	color: var(--wiz-text-muted);
	font-weight: 600;
}

.pn-ladder-row.is-net{
	margin-top: .3rem;
	padding-top: .55rem;
	border-top: 1px dashed var(--wiz-border-strong);
}

.pn-ladder-row.is-net span{
	font-weight: 700;
	color: var(--wiz-text);
}

.pn-ladder-row.is-net b{
	font-size: 1.15rem;
}


/*----------------------------------------------------------
	007f — CHAAR PERCENTAGE

	Poore module ka aqeeda is jadwal me hai: ek hi munafa char alag
	paimanon par char alag numbers deta hai, aur char ke char sach hote
	hain.

	Is liye har qatar apna BASE bhi likhti hai. Sirf "+96.9%" likh dena
	sach hota aur gumrah karta — "+96.9% against the initial margin" sach
	hai aur gumrah nahi karta.
----------------------------------------------------------*/

.pn-pcts{
	display: flex;
	flex-direction: column;
	gap: .1rem;

	margin: .9rem 0 0;
	padding: .8rem .9rem;

	background: var(--wiz-surface-2);
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-sm);
}

.pn-pcts-title{
	margin-bottom: .35rem;

	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wiz-text-muted);
}

.pn-pct-row{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;

	padding: .4rem 0;
	border-bottom: 1px solid var(--wiz-border);
}

.pn-pct-row:last-child{
	border-bottom: 0;
}

.pn-pct-name{
	display: flex;
	flex-direction: column;
	gap: .1rem;

	font-size: .86rem;
	font-weight: 600;
	color: var(--wiz-text);
}

.pn-pct-name small{
	font-size: .74rem;
	font-weight: 400;
	color: var(--wiz-text-muted);
}

.pn-pct-value{
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--wiz-text);
	text-align: right;
}


/*----------------------------------------------------------
	007g — CHART

	Apna hi SVG — koi library nahi, koi network call nahi.

	Ek seedhi line: neeche qeemat, upar Profit and Loss. Profit aur loss ke ilaqe
	alag rangon me hain, magar har ahem nishan par matn bhi likha hai aur
	poora chart ek alfaz wale khulase se bandha hua hai (aria-labelledby),
	taake screen reader par bhi kuch na chhoote.
----------------------------------------------------------*/

.pn-chart-wrap{
	margin: .9rem 0 0;
	padding: .8rem .9rem 1rem;

	background: var(--wiz-surface-2);
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-sm);
}

.pn-chart-title{
	display: block;
	margin-bottom: .5rem;

	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wiz-text-muted);
}

.pn-chart{
	width: 100%;
	overflow: hidden;			/* SVG kabhi page ko chaura na kare */
}

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

.pn-chart-zero,
.pn-chart-axis{
	stroke: var(--wiz-border-strong);
	stroke-width: 1;
}

.pn-chart-profit{
	fill: var(--wiz-success, #16a34a);
	fill-opacity: .16;
}

.pn-chart-loss{
	fill: var(--wiz-danger, #dc2626);
	fill-opacity: .16;
}

.pn-chart-line{
	fill: none;
	stroke: var(--wiz-primary);
	stroke-width: 2;
	stroke-linejoin: round;
}

.pn-chart-mark{
	stroke-width: 1.5;
	stroke-dasharray: 4 3;
}

.pn-chart-mark.is-entry{	stroke: var(--wiz-text-muted); }
.pn-chart-mark.is-exit{		stroke: var(--wiz-primary); }
.pn-chart-mark.is-be{		stroke: var(--wiz-warning, #d97706); }

.pn-chart-dot{
	fill: var(--wiz-primary);
}

.pn-chart-text{
	font-size: 10px;
	fill: var(--wiz-text-muted);
}

.pn-chart-desc{
	display: block;
	margin-top: .5rem;

	font-size: .78rem;
	line-height: 1.5;
	color: var(--wiz-text-muted);
}

.pn-chart-key{
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .9rem;

	margin-top: .5rem;
}

.pn-chart-key span{
	display: inline-flex;
	align-items: center;
	gap: .3rem;

	font-size: .76rem;
	color: var(--wiz-text-muted);
}

.pn-chart-key b{
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wiz-text);
}

.pn-chart-key i{
	width: .8rem;
	height: 0;
	border-top: 2px solid var(--wiz-border-strong);
}

.pn-chart-key i.is-entry{	border-top-style: dashed; border-top-color: var(--wiz-text-muted); }
.pn-chart-key i.is-exit{	border-top-style: dashed; border-top-color: var(--wiz-primary); }
.pn-chart-key i.is-be{		border-top-style: dashed; border-top-color: var(--wiz-warning, #d97706); }


/*----------------------------------------------------------
	007h — FEES + FUNDING  (khulne wala)
----------------------------------------------------------*/

.pn-costs{
	margin: .25rem 0 1rem;
	padding: .85rem .9rem;

	background: var(--wiz-surface-2);
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-sm);
}

.pn-cost-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: .75rem;
}

.pn-cost-grid .pn-field{
	margin-bottom: 0;
}


/*----------------------------------------------------------
	007i — TOTALS, JADWAL AUR CHHOTI CHEEZEIN
----------------------------------------------------------*/

.pn-totals{
	display: flex;
	flex-direction: column;

	margin-top: .9rem;
	padding: .75rem .9rem;

	background: var(--wiz-surface-2);
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-sm);
}

.pn-totals .pn-out-row{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;

	padding: .3rem 0;

	font-size: .86rem;
	color: var(--wiz-text-muted);
}

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

/*
	Munafa aur nuqsaan ka rang — magar HAMESHA matn ke sath. Ye class
	kabhi akeli maani nahi rakhti; nateeje me "Profit" ya "Loss" ka lafz
	bhi likha jata hai, taake colour-blind user ke liye kuch na chhoote.
*/
.pn-up,
.pn-down{
	font-variant-numeric: tabular-nums;
}

.pn-up{		color: var(--wiz-success, #16a34a); }
.pn-down{	color: var(--wiz-danger, #dc2626); }

/* qatar jo abhi zer-e-ghaur hai */
.pn-rows tr.is-here td{
	background: color-mix(in srgb, var(--wiz-primary) 8%, transparent);
}

.pn-out-warn{
	display: flex;
	align-items: flex-start;
	gap: .5rem;

	margin-top: .75rem;
	padding: .6rem .75rem;

	font-size: .8rem;
	line-height: 1.5;

	color: var(--wiz-text-muted);
	background: var(--wiz-surface-2);

	border: 1px solid var(--wiz-border);
	border-left: 3px solid var(--wiz-warning, #d97706);
	border-radius: var(--wiz-radius-sm);
}

.pn-out-warn i{
	flex-shrink: 0;
	margin-top: .1rem;
	color: var(--wiz-warning, #d97706);
}

.pn-head-row{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .75rem;

	margin-bottom: 1rem;
}

.pn-head-row .pn-field{
	margin-bottom: 0;
}

/* qatar wale calculators ka upar wala inputs ka hissa */
.pn-row-head{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: .75rem;

	margin-bottom: 1.1rem;
}

.pn-row-head .pn-field{
	margin-bottom: 0;
}

.pn-row-num{
	font-size: .8rem;
	font-weight: 700;
	color: var(--wiz-text-muted);
	text-align: center;
}

.pn-row-derived{
	font-size: .78rem;
	color: var(--wiz-text-muted);
}

.pn-row-derived:empty::before{
	content: '—';
}

.pn-rows .form-select-sm{
	min-width: 6rem;
}

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

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

.pn-code{
	font-size: .8rem;
	color: var(--wiz-text);
	background: var(--wiz-surface-2);
	border-radius: 4px;
	padding: .15rem .35rem;
}


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

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

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

.pn-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;
}

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

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

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

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

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

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


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

.pn-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);
}

.pn-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);
}

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

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

.pn-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.
----------------------------------------------------------*/

.pn-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){

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

.pn-app.is-full .pn-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.pn-locked{
	overflow: hidden;
}

/* :fullscreen me browser khud kaali background deta hai — apni le lete hain */
.pn-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.
	*/
	.pn-split{
		grid-template-columns: 1fr;
	}

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

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

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

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

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

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

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

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

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

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

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

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

	.pn-seg{
		width: 100%;
	}

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


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

	Comparison table ke barah khane hain: setup, side, entry, stop,
	target, quantity, risk, reward, ratio, break-even 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.

	.pn-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.
----------------------------------------------------------*/

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

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

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

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

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

	.pn-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);
	}

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

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

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

	.pn-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 */
	.pn-rows td.pn-td-plain::before{
		content: none;
	}

	.pn-rows td.pn-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 */
	.pn-rows td.pn-td-head .pn-row-index::before{
		content: "Position ";
	}

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

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

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