:root{--ink:#14231c;--muted:#627069;--green:#177245;--deep:#0d5331;--mint:#e9f7ef;--cream:#fbfaf6;--line:#dfe7e2;--shadow:0 20px 55px rgba(20,35,28,.1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{min-height:100vh;margin:0!important;padding-bottom:0!important;color:var(--ink);background:radial-gradient(circle at 8% 8%,rgba(23,114,69,.09),transparent 26rem),linear-gradient(180deg,#fff 0,var(--cream) 38rem,#fff 100%);font-family:Inter,"Segoe UI",Arial,sans-serif}
body>.container-fluid{padding:0}body>.container-fluid>.row:first-child{margin:0!important}body>.container-fluid>.row:first-child>.container-fluid{padding:0}
.navbar{min-height:72px;padding:.75rem max(1.25rem,calc((100vw - 1180px)/2))!important;background:rgba(13,46,31,.97)!important;box-shadow:0 8px 30px rgba(8,35,23,.16)}
.navbar-brand{display:inline-flex;align-items:center;gap:.65rem;font-size:1.2rem;font-weight:750;letter-spacing:-.02em}.navbar-brand:before{display:grid;width:36px;height:36px;place-items:center;border:1px solid rgba(255,255,255,.24);border-radius:11px;background:rgba(255,255,255,.1);content:"و";color:#fff;font:700 1.25rem "Noto Nastaliq Urdu",serif}
.navbar-nav{gap:.15rem}.navbar .nav-item{border-radius:9px;background:transparent!important}.navbar .nav-link{padding:.55rem .72rem!important;border-radius:9px;color:rgba(255,255,255,.76)!important;font-size:.88rem}.navbar .nav-link:hover{background:rgba(255,255,255,.09);color:#fff!important}.navbar .nav-link.active{background:#fff;color:var(--deep)!important;font-weight:700}.navbar-toggler{border:1px solid rgba(255,255,255,.35)!important}.navbar-toggler:after{content:"Menu";color:#fff;font-size:.8rem}
body>.container-fluid>.row:nth-of-type(2){display:grid;grid-template-columns:minmax(0,1fr);width:min(1120px,calc(100% - 32px));margin:0 auto;padding:64px 0 80px}body>.container-fluid>.row:nth-of-type(2)>.col-6{display:none}body>.container-fluid>.row:nth-of-type(2)>.col-12{width:100%;max-width:none;padding:0}
.logo{width:76px;height:76px;margin:0 18px 18px 0;object-fit:contain;border-radius:20px;box-shadow:0 10px 30px rgba(23,114,69,.14)}h1{margin:4px 0 8px;color:var(--ink);font-size:clamp(2.1rem,5vw,3.65rem);font-weight:780;letter-spacing:-.055em;line-height:1.04}h4.small{margin:0}mark.sm{padding:0;color:var(--green);background:transparent;font-size:1rem;font-weight:600}hr.solid{margin:30px 0;border-top:1px solid var(--line)}
.col-12.col-md-9>.container:nth-of-type(2){max-width:none;padding:0}.col-12.col-md-9>.container:nth-of-type(2)>.row>div{display:flex;flex-wrap:wrap;align-items:center;gap:8px;text-align:left!important}
.col-12.col-md-9>.container:nth-of-type(2) a.btn:empty{display:none}
#exportImage{position:static!important;display:inline-flex;align-items:center;justify-content:center;align-self:center;flex:0 0 auto;vertical-align:middle}
#inputFileNameToSaveAs{min-width:140px;height:40px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-family:"Noto Nastaliq Urdu",serif;text-align:right}.btn{min-height:40px;margin:0!important;padding:.55rem .8rem!important;border:0!important;border-radius:10px!important;font-weight:650;box-shadow:none!important;transition:transform .15s ease,box-shadow .15s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(20,35,28,.12)!important}.btn-dark{background:#25372e!important}.btn-success{background:var(--green)!important}.btn-danger{background:#fff0f0!important;color:#b43c3c!important}
#UsageAlert{margin:22px 0 14px;padding:15px 18px;border:1px solid #cdebd9;border-radius:13px;background:var(--mint);color:var(--deep);font-size:.93rem}#spinner{display:block;width:1.3rem;height:1.3rem;margin:16px auto;color:var(--green)!important}
.input-group{align-items:center;margin-top:18px;padding:12px;border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;background:#f6f8f6}.input-group-text{height:40px;border:0;background:transparent;color:var(--muted);font-weight:650}#demo-input{max-width:180px;height:40px;border:1px solid var(--line);border-radius:10px!important;background:#fff}#clear{margin-left:auto!important}
#demo{overflow:hidden;padding:0!important;border:1px solid var(--line)!important;border-radius:0 0 18px 18px;background:#fff;box-shadow:var(--shadow)}#transliterateTextarea{display:block;width:100%;min-height:420px;padding:clamp(24px,4vw,48px);resize:vertical;border:0!important;outline:0;color:#16251e;background:#fff;font-family:"Noto Nastaliq Urdu",serif!important;font-size:clamp(1.45rem,3vw,1.85rem)!important;line-height:2.15;text-align:right;caret-color:var(--green)}#transliterateTextarea:focus{box-shadow:inset 0 0 0 3px rgba(23,114,69,.16)}
.card{margin-top:28px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.88);box-shadow:0 12px 35px rgba(20,35,28,.06)}.card-body{padding:clamp(24px,4vw,38px)}.card-title{margin-bottom:18px;color:var(--ink);font-size:1.45rem;font-weight:750;letter-spacing:-.025em}.card-subtitle{margin-bottom:10px;color:var(--green);font-weight:700}.card-text{display:grid;gap:10px;margin:0;padding-left:1.25rem;color:var(--muted);line-height:1.65}.card a{color:var(--green);font-weight:650}.facebook-responsive{padding-bottom:56.25%!important;border-radius:12px;background:#edf2ee}.facebook-responsive iframe{width:100%!important}.fb-comments{margin-top:28px}
footer{position:static!important;padding:34px max(20px,calc((100vw - 1120px)/2)) 0!important;background:#10281c!important;color:rgba(255,255,255,.62)!important;line-height:2}footer a{color:rgba(255,255,255,.86)!important}footer .text-center{margin:24px 0 0;padding:18px 0!important;border-top:1px solid rgba(255,255,255,.08);font-size:.82rem}
@media(max-width:767px){.navbar{padding:.7rem 1rem!important}.navbar-collapse{padding-top:.7rem}body>.container-fluid>.row:nth-of-type(2){width:min(100% - 22px,1120px);padding-top:38px}.logo{width:58px;height:58px;border-radius:15px}h1{padding-top:4px}.col-12.col-md-9>.container:nth-of-type(2)>.row>div{display:grid;grid-template-columns:1fr 1fr}#inputFileNameToSaveAs{grid-column:1/-1;width:100%!important}.btn{white-space:normal}.input-group{gap:7px}.input-group-prepend{width:100%}#demo-input{max-width:calc(100% - 85px)}#transliterateTextarea{min-height:360px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}