ke liye bana hai;
par lagate hi satar khari ho jati hai:
har khana ek doosre ke NEECHE, aur poori satar sirf apne matn jitni
chauri — table ke baqi columns se us ka koi taalluq nahi rehta. Ye
ho chuka hai aur user ne screenshot bhej kar bataya.
*/
.wiz-total-row > td{
background: var(--wiz-surface-2);
border-top: 2px solid var(--wiz-border-strong);
font-weight: 600;
color: var(--wiz-text);
font-variant-numeric: tabular-nums;
}
/*
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.
*/
.wiz-up,
.wiz-down{
font-variant-numeric: tabular-nums;
}
.wiz-up{ color: var(--wiz-success, #16a34a); }
.wiz-down{ color: var(--wiz-danger, #dc2626); }
/* qatar jo abhi zer-e-ghaur hai */
.wiz-rows tr.is-here td{
background: color-mix(in srgb, var(--wiz-primary) 8%, transparent);
}
.wiz-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);
}
.wiz-out-warn i{
flex-shrink: 0;
margin-top: .1rem;
color: var(--wiz-warning, #d97706);
}
/*
CONTEXT BAR — pair, pip size, contract size, account currency aur
conversion rate.
DO CHEEZEIN YAHAN GHALAT THIN:
1. Koi padding hi nahi thi. Ye patti .wiz-bar aur .wiz-privacy ki
tarah card ki apni ek band hai, aur un dono ki 1.1rem padding
hai — magar yahan khane card ke kinare se bilkul chipke hue the.
2. Columns 1fr 1fr par jame hue the. Chaure card par paanch khane
do hi columns me phail kar bewajah lambe ho jate the, aur phone
par wahi do columns har khane ko dab kar aadha kar dete the.
Ab auto-fit hai: jagah ke mutabiq columns khud ban jate hain, aur
phone par sab ek ke neeche ek aa jate hain.
*/
.wiz-head-row{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: .75rem 1rem;
padding: 1rem 1.1rem 0;
margin-bottom: 0;
}
.wiz-head-row .wiz-field{
margin-bottom: 0;
}
/* qatar wale calculators ka upar wala inputs ka hissa */
.wiz-row-head{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: .75rem;
margin-bottom: 1.1rem;
}
.wiz-row-head .wiz-field{
margin-bottom: 0;
}
.wiz-row-num{
font-size: .8rem;
font-weight: 700;
color: var(--wiz-text-muted);
text-align: center;
}
.wiz-row-derived{
font-size: .78rem;
color: var(--wiz-text-muted);
}
.wiz-row-derived:empty::before{
content: '—';
}
.wiz-rows .form-select-sm{
min-width: 6rem;
}
.wiz-rows .wiz-cell-out{
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--wiz-text);
}
.wiz-rows .wiz-cell-muted{
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--wiz-text-muted);
}
.wiz-code{
font-size: .8rem;
color: var(--wiz-text);
background: var(--wiz-surface-2);
border-radius: 4px;
padding: .15rem .35rem;
}
/*----------------------------------------------------------
116 — SETTINGS
----------------------------------------------------------*/
.wiz-settings{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
.wiz-set-group{
padding: 1.05rem 1.1rem;
border: 1px solid var(--wiz-border);
border-radius: var(--wiz-radius-card);
background: var(--wiz-surface-2);
}
.wiz-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;
}
.wiz-set-title i{
color: var(--wiz-primary);
font-size: .9rem;
}
.wiz-set-row{
display: flex;
align-items: center;
justify-content: space-between;
gap: .8rem;
padding: .45rem 0;
border-bottom: 1px solid var(--wiz-border);
}
.wiz-set-row:last-child{
border-bottom: 0;
padding-bottom: 0;
}
.wiz-set-label{
font-size: .82rem;
font-weight: 600;
color: var(--wiz-text);
margin: 0;
}
.wiz-set-row .form-select{
max-width: 190px;
}
.wiz-set-row .form-check-input:checked{
background-color: var(--wiz-primary);
border-color: var(--wiz-primary);
}
/*----------------------------------------------------------
117 — CONFIRM DIALOG + TOAST
----------------------------------------------------------*/
.wiz-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);
}
.wiz-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);
}
.wiz-ask-title{
display: block;
font-family: var(--wiz-font-display);
font-size: 1rem;
font-weight: 700;
color: var(--wiz-text);
margin-bottom: .3rem;
}
.wiz-ask-note{
display: block;
font-size: .82rem;
line-height: 1.6;
color: var(--wiz-text-muted);
margin-bottom: 1rem;
}
.wiz-ask-actions{
display: flex;
justify-content: flex-end;
gap: .5rem;
}
.wiz-toast{
position: fixed;
left: 50%;
bottom: 26px;
z-index: 1080;
display: flex;
align-items: center;
gap: .5rem;
padding: .65rem 1.1rem;
border-radius: var(--wiz-radius-btn);
background: var(--wiz-text);
color: var(--wiz-body-bg);
font-size: .82rem;
font-weight: 600;
box-shadow: var(--wiz-shadow-md);
opacity: 0;
visibility: hidden;
transform: translate(-50%, 12px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
max-width: calc(100vw - 32px);
text-align: center;
}
.wiz-toast.is-show{
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.wiz-toast i{
color: #4ade80;
flex-shrink: 0;
}
.wiz-toast.is-error i{
color: #f87171;
}
/*----------------------------------------------------------
118 — FULL SCREEN
App poori screen le leta hai — website ka header aur footer nazar
nahi aate.
EK GHALATI JO YAHAN HO CHUKI HAI
Pehle ye app flex column tha aur SIRF .wiz-body scroll karta tha. Us
ka matlab ye tha ke bar, privacy wali lakeer, poora context bar
(paanch khane), rate wali patti aur tabs — sab jame rehte the, aur
.wiz-body ko jo bacha wo mila.
Laptop par wo "jo bacha" taqreeban kuch bhi nahi tha: oopar ki
lakeerein poori screen kha jati thin aur neeche scroll hota hi nahi
tha. Yani full screen ne jagah barhane ki bajaye cheen li.
Ab poora app khud scroll karta hai. Sirf bar oopar chipki rehti hai,
kyunke usi me full screen se nikalne ka button hai — wo scroll ho kar
gayab ho jaye to user phans jata hai.
----------------------------------------------------------*/
.wiz-app.is-full{
position: fixed;
inset: 0;
z-index: 1055;
/*
WIDTH YAHAN JAAN BOOJH KAR NAHI HAI.
Pehle `width: 100vw` tha, aur wahi masla tha. `100vw` me classic
scrollbar ki chaurai BHI shamil hoti hai (Windows par Chrome me
~15px). Yani app screen se poore 15px chaura ho jata tha, aur
us ka dayan kinara — jahan us ki apni scrollbar banti hai —
screen se bahar chala jata tha.
Scrollbar ban to rahi thi; nazar isi liye nahi aati thi ke wo
kinare ke us paar thi.
`inset: 0` khud hi app ko theek nazar aane wali jagah par phaila
deta hai, is liye width ki zarurat hi nahi.
*/
height: 100dvh;
max-height: 100dvh;
margin: 0;
border: 0;
border-radius: 0;
display: block;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* iOS par momentum */
overscroll-behavior: contain; /* aakhir par page peeche na khiske */
/*
SCROLLBAR NAZAR AANI CHAHIYE.
Scroll ho to raha tha, magar patti dikhti nahi thi — aur jo patti
nazar na aaye wo user ko ye batati hi nahi ke neeche aur bhi kuch
hai. Full screen me to ye aur zaroori hai, kyunke page ki apni
scrollbar us waqt gayab hoti hai (body par overflow: hidden).
Firefox `scrollbar-*` samajhta hai, Chrome aur Safari
::-webkit-scrollbar — is liye dono likhe hain.
*/
scrollbar-width: thin;
scrollbar-color: var(--wiz-border-strong) var(--wiz-surface-2);
}
.wiz-app.is-full::-webkit-scrollbar{
width: 12px;
}
.wiz-app.is-full::-webkit-scrollbar-track{
background: var(--wiz-surface-2);
}
.wiz-app.is-full::-webkit-scrollbar-thumb{
background: var(--wiz-border-strong);
border: 3px solid var(--wiz-surface-2); /* thumb ke gird thori si jagah */
border-radius: 999px;
}
.wiz-app.is-full::-webkit-scrollbar-thumb:hover{
background: var(--wiz-text-muted);
}
@supports not (height: 100dvh){
.wiz-app.is-full{
height: 100vh;
max-height: 100vh;
}
}
/*
BAR OOPAR CHIPKI RAHEGI — full screen se nikalne ka raasta hamesha
nazar me rehna chahiye.
*/
.wiz-app.is-full .wiz-bar{
position: sticky;
top: 0;
z-index: 5;
background: var(--wiz-surface-2);
}
.wiz-app.is-full .wiz-body{
padding: 1.25rem 1.5rem;
}
/*
Neeche thori si khali jagah — warna aakhri qatar screen ke bilkul
kinare se chipki rehti hai aur mobile ke home bar ke neeche chali
jati hai.
*/
.wiz-app.is-full .wiz-body > .wiz-view{
padding-bottom: 2.5rem;
}
/* page ke peeche scroll na chale jab app poori screen par ho */
body.wiz-locked{
overflow: hidden;
}
/*
POOCHNE KA DABBA HAMESHA SCREEN KE BEECH ME.
Ye pehle `absolute` tha, yani app ke andar. App khud lamba hai (bees
se zyada tabs, lambe panels), is liye "beech" app ka beech hota tha —
jo aksar screen se bahar hota. Full screen me, jahan app khud scroll
karta hai, wo aur bura ho jata: dabba kahin door beech me khul jata
aur user ko lagta ke button ne kuch kiya hi nahi.
`fixed` par wo hamesha wahin khulta hai jahan user dekh raha hai.
*/
.wiz-ask{
position: fixed;
z-index: 1060;
}
/*----------------------------------------------------------
119 — HOW-TO / FEATURES (page ka baqi hissa)
----------------------------------------------------------*/
.wiz-step,
.wiz-feature{
display: flex;
align-items: flex-start;
gap: .85rem;
height: 100%;
padding: 1rem;
border: 1px solid var(--wiz-border);
border-radius: var(--wiz-radius-card);
background: var(--wiz-surface-2);
}
.wiz-step-num{
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: var(--wiz-radius-btn);
font-family: var(--wiz-font-display);
font-size: .88rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, var(--wiz-primary) 0%, #4f46e5 100%);
}
.wiz-feature-icon{
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--wiz-radius-btn);
font-size: 1rem;
color: var(--wiz-primary);
background: color-mix(in srgb, var(--wiz-primary) 12%, transparent);
}
.wiz-step-title{
font-size: .88rem;
font-weight: 700;
color: var(--wiz-text);
margin-bottom: .2rem;
}
.wiz-link-btn{
display: inline-flex;
align-items: center;
gap: .35rem;
border: 0;
background: transparent;
padding: .2rem .1rem;
font-size: .78rem;
font-weight: 600;
color: var(--wiz-primary);
transition: opacity .15s ease;
}
.wiz-link-btn:hover{
opacity: .75;
}
.wiz-link-btn.text-danger{
color: #dc2626 !important;
}
.min-w-0{
min-width: 0;
}
/*----------------------------------------------------------
120 — ADS
----------------------------------------------------------*/
.wiz-ad{
margin-bottom: 1.25rem;
}
.wiz-ad-placeholder{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .25rem;
min-height: 92px;
padding: 1.5rem;
text-align: center;
border: 1px dashed var(--wiz-border);
border-radius: var(--wiz-radius-card);
background: var(--wiz-surface-2);
}
.wiz-ad-label{
font-size: .74rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--wiz-text-muted);
}
.wiz-ad-note{
font-size: .74rem;
color: var(--wiz-text-muted);
opacity: .75;
}
/*----------------------------------------------------------
121 — 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.
*/
.wiz-split{
grid-template-columns: 1fr;
}
.wiz-panel-out{
position: static;
}
}
@media screen and (max-width: 767.98px){
.wiz-tool-hero{
padding: 1.5rem 1.15rem;
}
.wiz-tool-title{
font-size: 1.6rem;
}
.wiz-body{
padding: 1rem .85rem;
}
.wiz-bar-sub{
display: none; /* jagah sawal ko chahiye */
}
.wiz-tabs{
padding: .35rem .5rem 0;
}
.wiz-out-big{
font-size: 1.7rem;
}
/* jawab ko chipkana chhoti screen par ulta nuqsaan hai */
.wiz-panel-out{
position: static;
}
.wiz-actions .btn,
.wiz-out-actions .btn{
flex: 1 1 auto;
}
.wiz-set-row{
flex-wrap: wrap;
}
.wiz-set-row .form-select{
max-width: 100%;
width: 100%;
}
}
@media screen and (max-width: 575.98px){
.wiz-input{
font-size: 1rem; /* iOS 16px se chhote input par zoom kar deta hai */
}
.wiz-seg{
width: 100%;
}
.wiz-seg-btn{
flex: 1 1 0;
}
}
@media print{
.wiz-navbar,
.wiz-footer,
.btn-back2top,
.wiz-ad,
.wiz-coffee,
.wiz-coffee-card,
.wiz-toast{
display: none !important;
}
}
/*----------------------------------------------------------
122 — 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
ek card ban jati hai aur har
| 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.
.wiz-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.
----------------------------------------------------------*/
.wiz-rows-wrap{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 767.98px){
.wiz-rows-wrap{
overflow-x: visible;
}
.wiz-rows,
.wiz-rows tbody,
.wiz-rows tfoot,
.wiz-rows tr,
.wiz-rows td{
display: block;
width: 100%;
}
/* sar-nama sirf aankh ke liye tha — ab har khane par apna label hai */
.wiz-rows thead{
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.wiz-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);
}
.wiz-rows tr:last-child{
margin-bottom: 0;
}
.wiz-rows td{
padding: .3rem 0;
border: 0;
}
.wiz-rows td:first-child{
padding-left: 0;
}
.wiz-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 */
.wiz-rows td.wiz-td-plain::before{
content: none;
}
.wiz-rows td.wiz-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 */
.wiz-rows td.wiz-td-head .wiz-row-index::before{
content: "Position ";
}
.wiz-rows td.wiz-td-drop{
padding-top: .5rem;
}
.wiz-rows td.wiz-td-drop .wiz-row-drop{
width: 100%;
height: 34px;
}
.wiz-rows td.wiz-td-drop .wiz-row-drop::after{
content: " Remove";
font-size: .78rem;
font-weight: 600;
}
}
/*----------------------------------------------------------
121 — JEETNE AUR HAARNE WALI QATAREIN
Rang par kuch mauqoof nahi: har qatar par raqam bhi likhi hoti
hai aur totals me ginti bhi. Rang sirf ek doosra ishara hai,
akela paighaam nahi.
----------------------------------------------------------*/
.wiz-rows tr.is-win td{
background: color-mix(in srgb, var(--wiz-success, #16a34a) 6%, transparent);
}
.wiz-rows tr.is-loss td{
background: color-mix(in srgb, var(--wiz-danger, #dc2626) 6%, transparent);
}
/*==================================================================================
123 — UNIT CONVERTER MODULES (.uc-*)
unit-tools ke sary converter module ye chhote hisse share karte hain.
App ka poora dhancha upar wale .wiz-* se aata hai; yahan sirf wo cheez
hai jo sirf converter ki hai — "not defined", unit ka note-taara, aur
saved pairs ka card. Ek hi jagah, taake bees module me dobara na likhna
pare.
==================================================================================*/
.uc-na{ color:var(--wiz-text-muted); }
.uc-unit-note{
color:var(--wiz-warning, #d97706);
font-weight:700;
cursor:help;
}
.uc-swap{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.4rem;
margin:.25rem 0;
}
.uc-saved-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
gap:.85rem;
margin-top:1rem;
}
.uc-saved-card{
display:flex;
flex-direction:column;
gap:.6rem;
padding:.9rem 1rem;
border:1px solid var(--wiz-border);
border-radius:var(--wiz-radius-card);
background:var(--wiz-surface);
}
.uc-saved-name{
font-size:.95rem;
font-weight:600;
color:var(--wiz-text);
word-break:break-word;
}
.uc-saved-actions{
display:flex;
gap:.4rem;
}
/*==================================================================================
124 — HUB / CATEGORY CARDS (.wiz-hub-*)
Har category ke landing (hub) page — pdf-tools, crypto-tools,
forex-tools, unit-tools — ye card aur risk-patti share karte hain.
Pehle har hub apni custom.css me inhi rules ki apni naql (crypto-hub-,
forex-hub-, pdf-hub-, unit-hub-) rakhta tha; wo naqlein yahan aa gayin.
NAYA HUB: sirf .wiz-hub-card / .wiz-hub-icon / .wiz-hub-cta … use karo,
apna prefix mat banao.
==================================================================================*/
/*----------------------------------------------------------
002 — TOOL CARDS
Poora card ek hai — sirf button clickable rakhna mobile par
takleef deta hai, aur screen reader ko bhi ek hi hadaf chahiye.
Isi liye andar wala "button" asal me hai.
----------------------------------------------------------*/
/*----------------------------------------------------------
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.
----------------------------------------------------------*/
.wiz-hub-card{
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 1.6rem;
border: 1px solid var(--wiz-border);
border-radius: var(--wiz-radius-card);
background: var(--wiz-surface);
box-shadow: var(--wiz-shadow-sm);
text-decoration: none;
color: inherit;
overflow: hidden;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* upar patli rangeen lakeer — hover par nazar aati hai */
.wiz-hub-card::before{
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--wiz-primary) 0%, #4f46e5 100%);
opacity: 0;
transition: opacity .18s ease;
}
.wiz-hub-card:hover{
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--wiz-primary) 40%, var(--wiz-border));
box-shadow: var(--wiz-shadow-md);
color: inherit;
}
.wiz-hub-card:hover::before{
opacity: 1;
}
.wiz-hub-card:focus-visible{
outline: 2px solid var(--wiz-primary);
outline-offset: 2px;
}
.wiz-hub-card-top{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: .75rem;
margin-bottom: 1rem;
}
.wiz-hub-icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
flex-shrink: 0;
border-radius: var(--wiz-radius-card);
font-size: 1.5rem;
color: #fff;
background: linear-gradient(135deg, var(--wiz-primary) 0%, #4f46e5 100%);
box-shadow: 0 6px 16px color-mix(in srgb, var(--wiz-primary) 28%, transparent);
}
.wiz-hub-card-title{
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -.02em;
margin-bottom: .2rem;
color: var(--wiz-text);
}
.wiz-hub-card-tagline{
font-size: .76rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--wiz-primary);
margin-bottom: .75rem;
}
.wiz-hub-card-text{
font-size: .9rem;
line-height: 1.7;
color: var(--wiz-text-muted);
margin-bottom: 1rem;
}
.wiz-hub-points{
list-style: none;
padding: 0;
margin: 0 0 1.25rem 0;
}
.wiz-hub-points li{
display: flex;
align-items: flex-start;
gap: .5rem;
font-size: .85rem;
line-height: 1.6;
color: var(--wiz-text-muted);
padding-block: .28rem;
}
.wiz-hub-points i{
flex-shrink: 0;
margin-top: .25rem;
font-size: .78rem;
color: #10b981;
}
.wiz-hub-cta{
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
width: 100%;
margin-top: auto;
padding: .7rem 1.1rem;
border-radius: var(--wiz-radius-btn);
font-size: .9rem;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, var(--wiz-primary) 0%, #4f46e5 100%);
transition: filter .18s ease;
}
.wiz-hub-card:hover .wiz-hub-cta{
filter: brightness(1.07);
}
.wiz-hub-cta i{
font-size: .8rem;
}
/* abhi nahi bana — card dabta nahi */
.wiz-hub-card.is-soon{
pointer-events: none;
opacity: .62;
}
.wiz-hub-card.is-soon .wiz-hub-icon{
background: var(--wiz-surface-2);
color: var(--wiz-text-muted);
box-shadow: none;
}
/* "which tool" table me jo abhi bana nahi */
.wiz-hub-soon{
display: inline-block;
margin-left: .3rem;
padding: .1rem .4rem;
border-radius: 999px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--wiz-text-muted);
background: var(--wiz-surface-2);
border: 1px solid var(--wiz-border);
}
.wiz-hub-card.is-soon .wiz-hub-cta{
background: var(--wiz-surface-2);
color: var(--wiz-text-muted);
}
@media (max-width: 575.98px){
.wiz-hub-card{ padding: 1.25rem; }
.wiz-hub-icon{
width: 46px;
height: 46px;
font-size: 1.25rem;
}
}
/*==================================================================================
125 — FILE TOOL SHELL (.pdf-* aur .wiz-status)
PDF ke nau modules me ye poora hissa alag alag NAQL ho kar para tha —
har module ki custom.css me wahi dropzone, wahi status patti, wahi
progress bar aur wahi result card. Nau naqlein, taqreeban 350 lines
fuzool, aur ek rang badalna ho to nau jagah badalna parta tha.
Ab ek jagah. Naam .pdf-* isi liye rakha ke nau modules ka markup
pehle se yahi hai; unhen chhoone ki zarurat nahi pari.
Ye sirf PDF ke liye nahi — koi bhi tool jo user se file leta hai
(aage image tools) yehi classes istemal kar sakta hai.
NOTE — pdf-compressor ke chhe rules is se thore alag hain (bara result
card, mota progress bar). Wo us ki apni custom.css me hain aur global
ke BAAD load hoti hai, is liye wahan wohi chalte hain. Ye jaan boojh
kar chhora gaya: us module ka result card waqai bara hai.
==================================================================================*/
/*----------------------------------------------------------
DROPZONE
----------------------------------------------------------*/
.pdf-drop{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .5rem;
padding: 2.6rem 1.5rem;
text-align: center;
cursor: pointer;
border: 2px dashed var(--wiz-border);
border-radius: var(--wiz-radius-card);
background: var(--wiz-surface);
transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.pdf-drop:hover{
border-color: var(--wiz-primary);
background: color-mix(in srgb, var(--wiz-primary) 4%, transparent);
}
.pdf-drop:focus-visible{
outline: none;
border-color: var(--wiz-primary);
box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}
.pdf-drop.is-dragging{
border-color: var(--wiz-primary);
background: color-mix(in srgb, var(--wiz-primary) 8%, transparent);
transform: scale(1.005);
}
.pdf-drop-icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: .35rem;
border-radius: var(--wiz-radius-card);
font-size: 1.7rem;
color: var(--wiz-primary);
background: color-mix(in srgb, var(--wiz-primary) 12%, transparent);
}
.pdf-drop-title{
font-family: var(--wiz-font-display);
font-size: 1.15rem;
font-weight: 700;
color: var(--wiz-text);
}
.pdf-drop-desc{
max-width: 30rem;
font-size: .85rem;
line-height: 1.6;
color: var(--wiz-text-muted);
}
/*
Button ka pointer-events band hai: poora dropzone hi ek button hai,
aur andar ka click ko rok le to bahar wala handler kabhi nahi
chalta.
*/
.pdf-drop-btn{
margin-top: .65rem;
font-size: .85rem;
font-weight: 700;
padding: .55rem 1.3rem;
pointer-events: none;
}
.pdf-drop-btn i{
margin-right: .35rem;
}
.pdf-drop-limits{
margin-top: .5rem;
font-size: .72rem;
color: var(--wiz-text-muted);
opacity: .8;
}
/* file aa jane ke baad dropzone patli patti ban jati hai */
.pdf-drop.is-compact{
flex-direction: row;
gap: .7rem;
padding: 1rem;
}
.pdf-drop.is-compact .pdf-drop-icon{
width: 34px;
height: 34px;
font-size: 1rem;
margin: 0;
}
.pdf-drop.is-compact .pdf-drop-title{
font-size: .9rem;
}
.pdf-drop.is-compact .pdf-drop-desc,
.pdf-drop.is-compact .pdf-drop-limits,
.pdf-drop.is-compact .pdf-drop-btn{
display: none;
}
/*----------------------------------------------------------
HAALAT KI PATTI
display:none default hai — is-ok / is-warn / is-error lagne par hi
nazar aati hai. Is se JS ko d-none toggle nahi karna parta, sirf
class badalni hoti hai.
----------------------------------------------------------*/
.wiz-status{
display: none;
align-items: flex-start;
gap: .55rem;
font-size: .8rem;
line-height: 1.55;
padding: .6rem .75rem;
border-radius: var(--wiz-radius-btn);
border: 1px solid transparent;
}
.wiz-status.is-ok,
.wiz-status.is-warn,
.wiz-status.is-error{
display: flex;
}
.wiz-status > i{
flex-shrink: 0;
margin-top: .1rem;
font-size: .95rem;
}
.wiz-status.is-ok{
color: #15803d;
background: rgba(34, 197, 94, .10);
border-color: rgba(34, 197, 94, .28);
}
.wiz-status.is-warn{
color: #b45309;
background: rgba(245, 158, 11, .10);
border-color: rgba(245, 158, 11, .28);
}
.wiz-status.is-error{
color: #b91c1c;
background: rgba(239, 68, 68, .10);
border-color: rgba(239, 68, 68, .28);
}
[data-bs-theme="dark"] .wiz-status.is-ok{ color: #4ade80; }
[data-bs-theme="dark"] .wiz-status.is-warn{ color: #fbbf24; }
[data-bs-theme="dark"] .wiz-status.is-error{ color: #f87171; }
/*----------------------------------------------------------
PANEL KA UNWAN, SECTION KA UNWAN
----------------------------------------------------------*/
.wiz-panel-head{
display: flex;
align-items: center;
gap: .5rem;
font-size: .74rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--wiz-text-muted);
margin-bottom: 1rem;
}
.wiz-panel-head i,
.wiz-panel-title i,
.wiz-hint i{
color: var(--wiz-primary);
}
.wiz-panel-head i,
.wiz-panel-title i{
font-size: .95rem;
}
.pdf-section-title{
display: flex;
align-items: center;
gap: .5rem;
font-family: var(--wiz-font-display);
font-size: 1.05rem;
font-weight: 700;
color: var(--wiz-text);
}
.pdf-section-title i{
color: var(--wiz-primary);
font-size: 1.05rem;
}
.pdf-actions{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .85rem;
padding-top: 1rem;
border-top: 1px solid var(--wiz-border);
}
.pdf-actions b{
color: var(--wiz-text);
font-weight: 700;
}
/*----------------------------------------------------------
PROGRESS AUR NATEEJA
----------------------------------------------------------*/
.progress{
height: 7px;
border-radius: 999px;
background: var(--wiz-border);
}
.progress-bar{
background: linear-gradient(135deg, var(--wiz-primary) 0%, #4f46e5 100%);
transition: width .25s ease;
}
.pdf-result{
display: flex;
align-items: center;
gap: .85rem;
padding: 1rem;
border-radius: var(--wiz-radius-card);
border: 1px solid rgba(34, 197, 94, .3);
background: rgba(34, 197, 94, .08);
}
.pdf-result-icon{
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 1rem;
color: #fff;
background: #16a34a;
}
.pdf-result-title{
font-size: .9rem;
font-weight: 700;
color: #15803d;
}
[data-bs-theme="dark"] .pdf-result-title{ color: #4ade80; }
/*
Bara "asal kaam" wala button — merge, split, convert. Aath PDF modules
me ye bilkul ek jaisa para tha.
*/
.wiz-btn-main{
padding: .75rem 1rem;
font-size: .88rem;
font-weight: 700;
}
.input-group-text{
background: var(--wiz-surface-2);
border-color: var(--wiz-border);
color: var(--wiz-text-muted);
font-size: .85rem;
}
@media screen and (max-width: 768px){
.pdf-drop{
min-height: 170px;
padding: 1.6rem 1rem;
}
.pdf-result{
flex-wrap: wrap;
}
.pdf-result .btn{
width: 100%;
}
}
/*
Chhapte waqt sirf nateeja chahiye — dropzone, ads aur coffee ka
kaghaz par koi kaam nahi.
*/
@media print{
.wiz-navbar,
.wiz-footer,
.btn-back2top,
.wiz-ad,
.wiz-coffee,
.wiz-coffee-card,
.pdf-drop,
.wiz-toast{
display: none !important;
}
}
/*----------------------------------------------------------
126 — JAGAH CHUNNE WALA SAFHA
Khali dropdown ke bajaye safhe ka naqsha. "Bottom right" parh kar
sochna parta hai; kaghaz ki shakl par wahi jagah bina sochay nazar
aati hai.
aspect-ratio se ye waqai kaghaz jaisa lagta hai. Us ke bagair dabba
chaure card par lamba aur patla ho jata tha, aur kone kone nahi
rehte the.
----------------------------------------------------------*/
.wiz-spots{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .3rem;
aspect-ratio: 1 / 1.15;
max-width: 15rem;
padding: .5rem;
border: 1px solid var(--wiz-border);
border-radius: var(--wiz-radius-sm);
background: #fff;
box-shadow: var(--wiz-shadow-sm);
}
.wiz-spot{
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
border: 1px dashed var(--wiz-border);
border-radius: var(--wiz-radius-sm);
background: transparent;
transition: border-color .15s ease, background .15s ease;
}
.wiz-spot:hover{
border-color: var(--wiz-primary);
border-style: solid;
}
.wiz-spot:focus-visible{
outline: none;
border-color: var(--wiz-primary);
border-style: solid;
box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}
.wiz-spot.is-on{
border-color: var(--wiz-primary);
border-style: solid;
background: color-mix(in srgb, var(--wiz-primary) 12%, transparent);
}
/* chhota gol nishan = jahan number lagega */
.wiz-spot-dot{
width: .45rem;
height: .45rem;
border-radius: 999px;
background: var(--wiz-border-strong);
transition: background .15s ease, transform .15s ease;
}
.wiz-spot.is-on .wiz-spot-dot{
background: var(--wiz-primary);
transform: scale(1.5);
}
/*
Beech ka hissa sirf sajawat hai (index.php me aria-hidden). Is ke
bagair dabba khali kaghaz lagta tha aur ye samajh nahi aata tha ke
button kis cheez ke kone hain.
*/
.wiz-spots-body{
grid-column: 1 / -1;
display: flex;
flex-direction: column;
justify-content: center;
gap: .4rem;
padding: 0 .35rem;
pointer-events: none;
}
.wiz-spots-body span{
display: block;
height: 3px;
border-radius: 999px;
background: var(--wiz-border);
}
.wiz-spots-body span:last-child{
width: 60%; /* aakhri lakeer chhoti — paragraph ka aakhir aisa hi dikhta hai */
}
/*----------------------------------------------------------
127 — IMAGE TOOLS: DO COLUMN AUR PREVIEW (.im-*)
Ye hissa image-tools ke HAR module me chahiye, is liye global me
hai — wahi qaida jo section 125 (file shell) aur 126 (jagah
chunne wala naqsha) par laga tha.
Pehle in modules ka poora app ek hi patli qatar me neeche neeche
tha: dropzone, phir options, phir bohat neeche tasveer. Aadmi
setting badalta tha aur us ka asar nazar hi nahi aata tha, kyunke
tasveer screen se bahar hoti thi.
Ab do column hain — baayen options, dayen tasveer — aur dayan
column CHIPKA rehta hai taake wo options ke sath sath chale.
----------------------------------------------------------*/
.im-split{
align-items: flex-start;
}
/*
CHIPAKNA HATA DIYA GAYA.
Pehle dayan column `position: sticky` tha, taake options ke sath
sath chale. Asal me wo ulta nikla: tasveer poori screen par jam
jati thi aur us ke neeche ka kuch bhi — mashwara, nateeja, qatar —
tak pohanchna mushkil ho jata tha. Safha apni raftaar se scroll
hona chahiye.
Ye satar jaan boojh kar KHALI chhori gayi hai taake koi dobara
sticky na lagaye. Us ki wajah upar likhi hai.
*/
/*----------------------------------------------------------
JO TASVEER AAP NE DI HAI
Checkerboard is liye hai ke shaffaf PNG par nazar aaye ke kahan
tasveer hai aur kahan nahi. Safed background par shaffaf logo
"kata hua" lagta hai.
----------------------------------------------------------*/
.im-preview{
display: flex;
align-items: center;
justify-content: center;
padding: .75rem;
border-radius: var(--wiz-radius-card);
border: 1px solid var(--wiz-border);
background-color: var(--wiz-surface);
background-image:
linear-gradient(45deg, var(--wiz-border) 25%, transparent 25%),
linear-gradient(-45deg, var(--wiz-border) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--wiz-border) 75%),
linear-gradient(-45deg, transparent 75%, var(--wiz-border) 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.im-preview-canvas{
display: block;
max-width: 100%;
/*
`vh` isi liye hai: bohat lambi tasveer (9:16 wali) poori screen
gher leti hai aur us ke neeche wale buttons tak pohanchne ke
liye scroll karna parta hai.
*/
max-height: 52vh;
height: auto;
border-radius: var(--wiz-radius-sm);
box-shadow: var(--wiz-shadow-sm);
}
.im-preview-meta{
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .25rem .6rem;
margin-top: .6rem;
font-size: .82rem;
}
/*
File ka naam bohat lamba ho sakta hai (phone ki file ka naam 40
harf ka hota hai). Bina is ke card chaura ho kar poora layout tor
deta hai.
*/
.im-preview-name{
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*----------------------------------------------------------
128 — IMAGE TOOLS: TASVEERON KE CARD (.im-tile*)
Ye pehle sirf Image Resizer ki apni CSS me tha. Ab Compressor ko
bhi wahi chahiye, is liye global me aa gaya — CLAUDE.md ka wahi
qaida jo section 125 aur 126 par laga tha: jo cheez ek se zyada
module istemal kare wo yahan aati hai, aur us se PEHLE nahi.
Ye card sirf DI GAYI tasveeron ke liye hain — har ek par apna
thumbnail, naam, naap aur hatane ka button.
BANI HUI tasveerein card me NAHI aatin, qatar me aati hain
(`.wiz-rows` ki table). Pehle wo bhi card thin; do se zyada
tasveeron par wo safhe ke aakhir me ek lambi qatar ban jate the
aur "kaun si file kya bani" dhoondna mushkil ho jata tha. User ne
yehi kaha, aur resizer bhi compressor wali qatar par le aaya gaya.
----------------------------------------------------------*/
.im-tiles{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
gap: .75rem;
padding: 1rem 1.1rem;
}
.im-tile{
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--wiz-border);
border-radius: var(--wiz-radius-card);
background: var(--wiz-surface);
overflow: hidden;
transition: border-color .15s ease, box-shadow .15s ease;
}
.im-tile:hover{
border-color: var(--wiz-primary);
box-shadow: var(--wiz-shadow-sm);
}
/*
CARD PAR CLICK.
Har bulk module par card ab kuch karta hai: ya us tasveer ka apna
editor kholta hai, ya usay bari jhalak me le aata hai. Is liye us
ka clickable hona nazar bhi aana chahiye, aur keyboard wale ko
pata chalna chahiye ke wo kahan khara hai.
*/
.im-tile[data-open]{
cursor: pointer;
}
.im-tile:focus-visible{
outline: 2px solid var(--wiz-primary);
outline-offset: 2px;
}
/*
Jo tasveer is waqt bari jhalak me hai. Nishan halka rakha gaya
hai — ye haalat batata hai, tawajjo nahi maangta.
*/
.im-tile.is-on{
border-color: var(--wiz-primary);
box-shadow: inset 0 0 0 1px var(--wiz-primary);
}
/*
CARD PAR NISHAN.
Laga hua nishan kehta hai "ye tasveer bahar wali settings ke sath
chalti hai". Hatte hi wo apni marzi ki maalik ho jati hai.
Nishan ka dabba |